JavaScript简介引入方式（JavaScript基础语法、JavaScript对象、BOM、DOM、事件监听）

在这里插入图片描述

🐌个人主页： 🐌 叶落闲庭
💨我的专栏：💨
c语言
数据结构
javaEE
操作系统
Redis

石可破也，而不可夺坚；丹可磨也，而不可夺赤。

JavaScript简介&引入方式

  • 简介：什么是JavaScript
  • 一、JavaScript的引入方式
  • 二、JavaScript基础语法
    • 2.1 书写语法与输出语句
    • 2.2 变量与数据类型
    • 2.3 运算符
      • 2.3.1 == 与 === 的区别
      • 2.3.2 类型转换
    • 2.4 流程控制语句与函数
  • 三、JavaScript对象
    • 3.1Array
    • 3.2 String
    • 3.3 自定义对象
  • 四、BOM
    • 4.1 Window:浏览器窗口对象
    • 4.4 History:历史记录对象
    • 4.5 Location:地址栏对象
  • 五、DOM
    • 5.1 获取Element对象
    • 5.2 常见HTML Element对象的使用
  • 六、事件监听
    • 6.1 事件绑定
    • 6.2 常见事件

简介：什么是JavaScript

  • JavaScript是一门跨平台、面向对象的脚本语言，来控制网页行为的，它能使网页可交互
  • W3C标准：网页主要由三部分组成
    • 结构：HTML
    • 表现：CSS
    • 行为：JavaScript
  • JavaScript和Java是完全不同的语言，不论是概念还是设计，但是语法基础类似
  • JavaScript（简称JS）在1995年由Brendan Eich发明，并于1997年成为一部ECMA标准
  • ECMAScript 6（ES6）是最新的JavaScript版本（发布于2015年）

一、JavaScript的引入方式

  • 1.内部脚本：将JS代码定义在HTML页面中
    • 在HTML中，JavaScript代码必须位于<script>与</script>标签之间
<script>alert("hello JavaScript!");
</script>
  • 注意：
  • 在HTML文档中可以在任意地方，放置任意数量的<script>
  • 一般把脚本置于<body>元素的底部，可改善显示速度，因为脚本执行会拖慢显示
  • 2.外部脚本：将JS代码定义在外部JS文件中，然后引入到HTML页面中
  • 外部文件：test.js：alert("hello JavaScript!");
  • 引入外部js文件：<script src = "../js/test.js"></script>
  • 注意：
    • 外部脚本不能包含<script>标签
    • <script>标签不能自闭合

二、JavaScript基础语法

2.1 书写语法与输出语句

  • 书写语法：
    • 区分大小写：与Java一样，变量名、函数名以及其他一切东西都是区分大小写的
    • 每行结尾的分号可有可无
    • 注释：
      • 单行注释：//注释内容
      • 多行注释：/* 注释内容 */
    • 大括号表示代码块
  • 输出语句：
    • 使用window.alert()写入警告框
    • 使用document.write()写入HTML输出
    • 使用console.log()写入浏览器控制台

2.2 变量与数据类型

  • 变量：
    • JavaScript中用var关键字（variable的缩写）来声明变量
    • JavaScript是一门弱类型语言，变量可以存放不同类型的值
    • 变量名需要遵循如下规则：
      • 组成字符可以是任何字母、数字】下划线（_）或美元符（$）
      • 数字不能开头
      • 建议使用驼峰命名法
  • ECMScript6新增了let关键字来定义变量，它的用法类似于var，但是所声明的变量只在let关键字所在的代码块内有效，且不允许重复声明
  • ECMScript6新增了const关键字，用来声明一个只读的常量，一旦声明。常量的值就不能改变
  • 数据类型：
  • JavaScript中分为：原始类型和引用类型
  • 5种原始类型：
    • number：数字（整数、小数、NaN（Not a Number））
    • string：字符、字符串、单双引皆可
    • boolean：布尔（true、false）
    • null对象为空
    • undefined：当声明的变量未初始化时，该变量的默认值是undefined
  • 使用typeof运算符可以获取数据类型

2.3 运算符

  • 一元运算符：++，-
  • 算术运算符：+，-，*，/，%
  • 赋值运算符：=，+，
  • 关系运算符：>，<，>=，<=，!=，== ， = ===…
  • 逻辑运算符：&&，||，！
  • 三元运算符：条件表达式？true_value:false_value

2.3.1 == 与 === 的区别

  • == ：等于
    • 1.判断类型是否一样，如果不一样，则进行类型转换
    • 2.比较其值
  • ===：全等于
    • 1.判断类型是否一样，如果不一样，直接返回fa1se
    • 2.再去比较其值

2.3.2 类型转换

  • 其它类型转为number：
    • 1.string转为number：按照字符串的字面值，转为数字.如果字面值不是数字，则转为NaN,一般使用parseInt()进行转换。
    • 2.boolean转为number：true转为1，false转为0。
  • 其它类型转为boolean：
  • 1.number：0和NaN转为false,其他的数字转为true
  • 2.string：空字符串转为false,其他的字符串转为true
  • 3.null：false
  • 4.undefined：false

2.4 流程控制语句与函数

  • 流程控制语句
  • if：
var count 3;
if(count == 3){alert(count);
}
  • switch:
var num 3;
switch (num){case 1:{alert("星期一")；break;}case 2:{alert("星期二")；break;}case 3:{alert("星期三")；break;}case 4:{alert("星期四")；break;}case 5:{alert("星期五")；break;}case 6:{alert("星期六")；break;}case 7:{alert("星期日")；break;}default:{alert("输入错误！");break;}
}
  • for：
var sum = 0;
for(1et i = 1;i <= 100;1++){sum += i;
}
alert(sum);
  • while：
var sum = 0;
var i = 1;
while (i <= 100){sum += i;i++;
}
alert(sum);
  • do.…while：
var sum = 0;
var i = 1;
do {sum += 1:i++;
}
while (i <= 100);
alert(sum);
  • 函数（方法）
  • 方式一：
  • 是被设计为执行特定任务的代码块
  • 定义：JavaScript函数通过function关键词进行定义，语法为：
function functionName(参数1，参数2...) {//要执行的代码
}
  • 注意：
  • 形式参数不需要类型。因为JavaScript是弱类型语言
  • 返回值也不需要定义类型，可以在函数内部直接使用returni返回即可
function add(a,b) {return a b;
}
  • 调用：函数名称（实际参数列表）；
let result add(1,2);
  • 方式二：
var functionName = function(参敛列表){//要执行的代码
}

var add = function (a,b){return a + b;
}
  • 调用：JS中，函数调用可以传递任意个数参数
let result add(1,2,3);

三、JavaScript对象

3.1Array

  • JavaScript Array对象用于定义数组
    • 定义:
var 变量名 = new Array(元素列表);//方式一
var arr new Array(1,2,3);

var 变量名 = [元素列表]；//方式二
var arr = [1,2,3];
    • 访问：
arr[索引] = 值；
arr[0]= 1;
  • 注意：JS数组类似Java集合，长度，类型都可变（变长变类型）
    • 属性：
      • length：数组中元素的个数
var arr4 = [1,2,3];
for (let i = 0;i <= arr4.length;i++){alert(arr4[i]);
}
    • 方法：
      • push：添加
var arr5 = [1,2,3];
arr5.push(10);
alert(arr5);
      • splice：删除
var arr6 = [1,2,3];
arr6.splice(0，1);//表示从0下标开始删，删除1个元素
alert(arr6);

在这里插入图片描述

在这里插入图片描述

3.2 String

  • 定义：
var 变量名 = new String(s);//方式一
var str = new String("hello");
var 变量名 = s;//方式二
var str = "hello";

在这里插入图片描述

3.3 自定义对象

  • 格式：
var 对象名称 = {属性名称1：属性值1属性名称2：属性值2，...函数名称：function(形参列表){}...};

var person = {name:"zhangsan",age:23,eat:function {alert("干饭~")；}
};

四、BOM

  • Browser Object Model浏览器对象模型
  • JavaScript将浏览器的各个组成部分封装为对象
  • 组成：

4.1 Window:浏览器窗口对象

      • 获取：直接使用window,其中window.可以省略
window.alert("abc");
      • 属性：获取其他BOM对象

在这里插入图片描述

在这里插入图片描述

  • confirm：点击确定按纽，返回true,点击取消按钮，返回false
var flag=confirm("确认别除？")；
alert(flag);
if(flag){//删除逻辑
}
  • setTimeout(function,毫秒值)：在一定的时间间隔后执行一个function,只执行一次
setTimeout(function()alert("hehe");
},3000);
  • setInterval(function,毫秒值)：在一定的时间间隔后执行一个function,循环执行
setInterval(function()alert("hehe");
},3000);

4.4 History:历史记录对象

  • History：历史记录
  • 获取：使用window.history获取，其中window可省略
window.history.方法();
history.方法();
  • 方法：
    在这里插入图片描述

4.5 Location:地址栏对象

  • History：历史记录
  • 获取：使用window.location获取，其中window可省略
window.location.方法();
location.方法();
  • 属性：
    在这里插入图片描述

五、DOM

  • Document Object Model文档对象模型
  • 将标记语言的各个组成部分封装为对象
    • Document:整个文档对象
    • Element:元素对象
    • Attribute:属性对象
    • Text:文本对象
    • Comment:注释对象
      在这里插入图片描述
  • JavaScript通过DOM，就能够对HTML进行操作了
    • 改变HTML元素的内容
    • 改变HTML元素的样式(CSS)
    • 对HTML DOM事件作出反应
    • 添加和删除HTML元素
  • DOM是W3C(万维网联盟)的标准
  • DOM定义了访问HTML和XML文档的标准：
  • W3CDOM标准被分为3个不同的部分：
    • 1.核心DOM:针对任何结构化文档的标准模型
      • Document:整个文档对象
      • Element:元素对象
      • Attribute:属性对象
      • Text:文本对象
      • Comment:注释对象
    • 2.XML DOM:针对XML文档的标准模型
    • 3.HTML DOM:针对HTML文档的标准模型
      • Image:<img>
      • Button <input type=button'>

5.1 获取Element对象

  • Element:元素对象
  • 获取：使用Document对象的方法来获取
    • 1.getElementByld:根据id属性值获取，返回一个Element对象
var img = document.getElementById("Light");
alert(img);
    • 2.getElementsByTagName:根据标签名称获取，返回Element对象数组
var divs = document.getElementsByTagName("div");
alert(divs.length);
    • 3.getElementsByName:根据name属性值获取，返回Element对象数组
var hobbys = document.getELementsByName("hobby");
for (let i = 0;i < hobbys.length;i++){alert(hobbys[i]);
}
    • 4.getElementsByClassName:根据class属性值获取，返回Element对象数组
var clss = document.getElementsByelassName("cls");
for (let i = 0;i < clss.length;i++){alert(clss[i]);
}

5.2 常见HTML Element对象的使用

  • <img>标签的src属性：
var img = document.getElementById("Light");
img.src = "../imgs/on.gif"
  • style:设置元素css样式
var divs = document.getElementsByTagName("div");
for (let i = 0;i < divs.length;i++){divs[i].style.color = 'red';
}
  • innerHTML:设置元素内容
var divs = document.getElementsByTagName("div");
for (let i = 0;i < divs.length;i++){divs[i].innerHTML = "hello!";
}
  • checked:选中对象
var hobbys = document.getELementsByName("hobby");
for (let i = 0;i < hobbys.length;i++){hobbys[i].checked = true;
}

六、事件监听

  • 事件：HTML事件是发生在HTML元素上的“事情”。比如：
    • 按钮被点击
    • 鼠标移动到元素之上
    • 按下键盘按键
  • 事件监听：JavaScript可以在事件被侦测到时执行代码

6.1 事件绑定

  • 事件绑定有两种方式：
    • 方式一：通过HTML标签中的事件属性进行绑定
<input type="button"onclick='on()'>
function on(){alert("我被点了")：
}
    • 方式二：通过DOM元素属性绑定（推荐）
<input type="button"id="btn">
document.getElementByld("btn").onclick function(){alert("我被点了");
}

6.2 常见事件

  • 参考HTML教程：https://www.w3school.com.cn/jsref/dom_obj_event.asp

在这里插入图片描述

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/85940.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

Android 自定义加解密播放音视频（m3u8独立加密）

Android 自定义加解密播放音视频（m3u8独立加密）

文章目录 背景加密流程音视频解密音视频播放结语 背景 当涉及App内部视频的时候&#xff0c;我们不希望被别人以抓包的形式来爬取我们的视频大视频文件以文件方式整个加密的话需要完全下载后才能进行解密当前m3u8格式虽然支持加密&#xff0c;但是ts格式的小视频可以独立播放的…
阅读更多...
Python协程(asyncio)（三）异步应用对象

Python协程(asyncio)（三）异步应用对象

流是用于处理网络连接的支持 async/await 的高层级原语。 流允许发送和接收数据&#xff0c;而不需要使用回调或低级协议和传输。 asyncio 函数可以用来创建和处理异步网络流。 import asyncioasync def tcp_echo_client(message):reader, writer await asyncio.open_connect…
阅读更多...
智能生活从这里开始：数字孪生驱动的社区

智能生活从这里开始：数字孪生驱动的社区

数字孪生技术&#xff0c;这个近年来备受瞩目的名词&#xff0c;正迅速渗透到社区发展领域&#xff0c;改变着我们居住的方式、管理的方式以及与周围环境互动的方式。它不仅仅是一种概念&#xff0c;更是一种变革&#xff0c;下面我们将探讨数字孪生技术如何推动社区智能化发展…
阅读更多...
Linux:network:socket:ip_unprivileged_port_start CAP_NET_BIND_SERVICE

Linux:network:socket:ip_unprivileged_port_start CAP_NET_BIND_SERVICE

ip_unprivileged_port_start - INTEGER 这个参数定义了，从哪一个port开始是非特权可以使用的port。而特权的port，需要root用户使用，或者需要权限：CAP_NET_BIND_SERVICE 。如果设置为0，就是没有特权port。 This is a per-namespace sysctl. It defines the first unprivile…
阅读更多...
React 全栈体系（八）

React 全栈体系（八）

第四章 React ajax 三、案例 – github 用户搜索 2. 代码实现 2.3 axios 发送请求 Search /* src/components/Search/index.jsx */ import React, { Component } from "react"; import axios from axiosexport default class Search extends Component {search …
阅读更多...
基于微服务的第二课堂管理系统（素质拓展学分管理平台）SpringCloud、SpringBoot 分布式，微服务

基于微服务的第二课堂管理系统（素质拓展学分管理平台）SpringCloud、SpringBoot 分布式，微服务

基于微服务的第二课堂管理系统 一款真正的企业级开发项目&#xff0c;采用标准的企业规范开发&#xff0c;有项目介绍视频和源码&#xff0c;需要学习的同学可以拿去学习&#xff0c;这是一款真正可以写在简历上的校招项目&#xff0c;能够真正学到东西的一个项目&#xff0c;话…
阅读更多...
基于springboot高校场馆预订系统

基于springboot高校场馆预订系统

博主主页&#xff1a;猫头鹰源码 博主简介&#xff1a;Java领域优质创作者、CSDN博客专家、公司架构师、全网粉丝5万、专注Java技术领域和毕业设计项目实战 主要内容&#xff1a;毕业设计(Javaweb项目|小程序等)、简历模板、学习资料、面试题库、技术咨询 文末联系获取 项目介绍…
阅读更多...
【zookeeper】zk集群安装与启动踩坑点

【zookeeper】zk集群安装与启动踩坑点

zk安装我也踩了一些坑。特别是第一点&#xff0c;zk官网好像都没什么说明&#xff0c;导致直接下错了&#xff0c;搞了好几个小时。 踩坑点如下&#xff1a; 1&#xff0c;在zk官网下载包时&#xff0c;注意3.5以后的版本&#xff0c;要下载带-bin的&#xff0c;3.5之后&…
阅读更多...
重新认识架构—不只是软件设计

重新认识架构—不只是软件设计

前言 什么是架构&#xff1f; 通常情况下&#xff0c;人们对架构的认知仅限于在软件工程中的定义&#xff1a;架构主要指软件系统的结构设计&#xff0c;比如常见的SOLID准则、DDD架构。一个良好的软件架构可以帮助团队更有效地进行软件开发&#xff0c;降低维护成本&#xff0…
阅读更多...
Leetcode171. Excel 表列序号

Leetcode171. Excel 表列序号

给你一个字符串 columnTitle &#xff0c;表示 Excel 表格中的列名称。返回 该列名称对应的列序号 。 例如&#xff1a; A -> 1 B -> 2 C -> 3 ... Z -> 26 AA -> 27 AB -> 28 ... 题解&#xff1a;力扣&#xff08;LeetCode&#xff09;官网 - 全球极客挚爱…
阅读更多...
mysqld_exporter监控MySQL服务

mysqld_exporter监控MySQL服务

一、MySQL授权 1、登录MySQL服务器对监控使用的账号授权 CREATE USER exporterlocalhost IDENTIFIED BY 123456 WITH MAX_USER_CONNECTIONS 3; GRANT PROCESS, REPLICATION CLIENT, SELECT ON *.* TO exporterlocalhost; flush privileges;2、上传mysqld_exporter安装包&#…
阅读更多...
Spring boot原理

Spring boot原理

起步依赖 Maven的传递依赖 自动配置 Springboot的自动配置就是当spring容器启动后&#xff0c;一些配置类、bean对象就自动存入到IOC容器中&#xff0c;不需要我们手动去声明&#xff0c;从而简化了开发&#xff0c;省去了繁琐的配置操作。 自动配置原理&#xff1a; 方案一…
阅读更多...
druid在springboot中如何整合配置！

druid在springboot中如何整合配置！

在Spring Boot中配置Druid作为数据源非常简单。Druid是一个高性能的数据库连接池&#xff0c;它提供了丰富的监控和统计功能&#xff0c;适用于各种数据库。以下是在Spring Boot中配置Druid数据源的步骤&#xff1a; 1. 添加Druid依赖&#xff1a; 首先&#xff0c;您需要在项…
阅读更多...
MongoDB（一） windows 和 linux 之 Ubuntu 安装

MongoDB（一） windows 和 linux 之 Ubuntu 安装

数据库分类 一、关系型数据库&#xff08;RDBMS&#xff09; mysql 、Oracle、DB2、SQL Server 关系数据库中全都是表 二、非关系型数据库&#xff08;NO SQL&#xff09; MongoDB、Redis 键值对数据库 文档数据库MongoDB 下载 mongoDB https://www.mongodb.com/try/downloa…
阅读更多...
获取文件最后修改时间

获取文件最后修改时间

版权声明 本文原创作者&#xff1a;谷哥的小弟作者博客地址&#xff1a;http://blog.csdn.net/lfdfhl Java源码 public void testGetFileTime() {try {String string "E://test.txt";File file new File(string);Path path file.toPath();BasicFileAttributes ba…
阅读更多...
【eslint】屏蔽语言提醒

【eslint】屏蔽语言提醒

在 JavaScript 中&#xff0c;ESLint 是一种常用的静态代码分析工具&#xff0c;它用于检测和提醒代码中的潜在问题和风格问题。有时候&#xff0c;在某些特定情况下&#xff0c;你可能希望临时屏蔽或禁用某些 ESLint 的提醒信息&#xff0c;以便消除不必要的警告或避免不符合项…
阅读更多...
【视觉SLAM入门】8. 回环检测，词袋模型，字典，感知，召回，机器学习

【视觉SLAM入门】8. 回环检测，词袋模型，字典，感知，召回，机器学习

"见人细过 掩匿盖覆” 1. 意义2. 做法2.1 词袋模型和字典2.1.2 感知偏差和感知变异2.1.2 词袋2.1.3 字典 2.2 匹配(相似度)计算 3. 提升 前言&#xff1a; 前端提取数据&#xff0c;后端优化数据&#xff0c;但误差会累计&#xff0c;需要回环检测构建全局一致的地图&…
阅读更多...
Go 语言学习总结（9）—— Go 与 Java 全面对比总结

Go 语言学习总结（9）—— Go 与 Java 全面对比总结

基本语法格式 Golang: 编码风格相对统一&#xff0c;简单&#xff0c;没有太多的语法糖等&#xff0c;Java层次清晰&#xff0c;全面面向对象。 变量相关 变量的声明及使用 在Java或者PHP、Python中&#xff0c;声明了变量&#xff0c;可以不使用&#xff0c;也不报错。 p…
阅读更多...
函数形状的定义方式

函数形状的定义方式

在TypeScript中&#xff0c;函数形状有三种定义方式&#xff1a;函数声明、函数表达式和箭头函数。 1.函数声明&#xff1a; function add(x: number, y: number): number {return x y; }2.函数表达式&#xff1a; const subtract function(x: number, y: number): number {r…
阅读更多...
JavaWeb开发-06-SpringBootWeb-MySQL

JavaWeb开发-06-SpringBootWeb-MySQL

一.MySQL概述 1.安装、配置 官网下载地址&#xff1a;https://dev.mysql.com/downloads/mysql/ 2.数据模型 3.SQL简介 二.数据库设计-DDL 1.数据库 官网&#xff1a;http:// https://www.jetbrains.com/zh-cn/datagrip/ 2.表&#xff08;创建、查询、修改、删除&#xff09; #…
阅读更多...
最新文章

Copyright @ 2022~2023