JavaScript学习日常

1.输出

1.1 输出到控制台

console.log();

1.2 输出到网页

<script>
document.write(123);
document.write("你好");
</script>

1.3 弹框

window.alert();

2.引入方式

2.1 内部引入

在 head 或 body 中，定义 script 标签，然后在 script 标签里面写 js 代码

<script>
console.log(123);
</script>

2.2外部引入

定义外部 js 文件(.js 结尾的文件)，将 js 代码写在文件中，然后哪个页面要使用引入即可。

<script src="aa.js"></script>

3.注释

<script>
    // 我是单行注释
    /*
    我是多行注释
    */
</script>

4.标识符

4.1概念

标识符（identifier）指的是用来识别各种值的合法名称。最常见的标识符就是变量名，以及后面要提到的函数名。JavaScript 语言的标识符对大小写敏感，所以 a 和 A 是两个不同的标识符。

4.2命名规则

只能由字母、数字、下划线和 $ 组成，数字不能开头

5.数据类型

• 数值型：整数和浮点数统称为数值。例如: 85或3.1415926等。

• 字符串型：由0个, 1个或多个字符组成的序列。在JavaScript中，用双引号或单引号括起来表示，

• 如"您好"、'学习JavaScript' 等。

• 逻辑（布尔）型：用true或false来表示。

• 空（null）值：表示没有值，用于定义空的或不存在的引用。要注意，空值不等同于空字符串""或

• 0。

• 特殊类型

  • 未定义（undefined）值：它也是一个保留字。表示变量虽然已经声明，但却没有赋值。

  • 不是一个数字 (not a number) 。如：将字符串强转为数字类型。

• 除了以上五种基本的数据类型之外，JavaScript还支持复合数据类型，复合数据类型包括对象和数

• 组两种。

6.变量

JavaScript中的变量是弱类型的，变量可以是任何一种数据类型。

6.1 分类

1. 全局变量：在任何地方都可以使用的变量。

2. 局部变量：只能在函数内部使用的变量

7.常量

常量就是值不能改变的量。

常量的声明使用 const，而且在声明的时候就需要给初始化值，一旦给定后，就不能再改了。

常量的命名规范：全大写，多个单词使用下划线进行连接，比如 XXX_YYY

<script>
    // 声明常量并赋值
    const PI = 3.14;
    console.log(PI);
    // 会报错，常量的值一旦初始化后不能再改变
    // PI = 3.1415;
    // console.log(PI);
    // 会报错，常量在声明的时候就需要赋值
    // const PI2;
    // console.log(PI2);
</script>

8.运算符

8.1 算数运算符

运算符	描述
+	加法
-	减法
*	乘法
/	除法
%	取模（余数）
++	递加
--	递减

8.2 赋值运算符

运算符	例子	等同于
=	x=y	x=y
+=	x+=y	x=x+y
-=	x-=y	x=x-y
*=	x*=y	x=x*y
/=	x/=y	x=x/y
%=	x%=y	x=x%y

8.3 比较运算符

运算符	描述
==	等于
===	等值等型
!=	不相等
!==	不等值或不等型
>	大于
<	小于
>=	大于等于
<=	小于等于
?	三元运算符

8.4逻辑运算符

运算符	描述
&&	逻辑与
||	逻辑或
！	逻辑非

8.5 类型运算符

运算符	描述
typeof	返回变量类型
instanceof	返回true，如果对象是对象类型的实例

9.流程控制

9.1 分支流程控制

1.if系列

2.switch

9.2 循环流程控制

1.for循环

2.while循环

3.do while循环

4.循环控制语句

• continue 语句用于跳过一次迭代。

• break 语句，用于跳出循环。

10.函数

1.概念

• 函数的英文单词是 function

• 函数是由事件驱动的或者当它被调用时执行的可重复使用的代码块。

• 通俗来说，就是将一些实现某个功能的代码写在一块，就形成了一个函数，然后哪里要使用这部分

• 代码，哪里就调用该函数即可。能够达到重复利用代码的效果。

• 注意：

  • 在js中可以直接定义函数。

  • 函数写好后，默认是不执行的，必须要经过事件触发或者调用才执行。

11.数组

1.数组概念

• 数组的英文单词是：Array。

• 数组就是用来存储一组有序数据的容器。

• 数组里面的数据可以是任意类型的。

• 数组里面的每个数据可以称为是元素。

• 每个元素在数组中的位置称为下标或索引，索引是从 0 开始的，依次递增。

• 数组的本质是对象，typeof 数组 会返回obejct。

2.数组的创建

var 数组名 = [元素1,元素2,...,元素n];

var 数组名 = new Array(数组长度);

3.操作数组

3.1 添加/修改元素

数组名[下标] = 值;

3.2 数组遍历

var arr = [1,2,3,4,5];
//方式1
for(var i = 0; i < arr.length; i++){
    console.log(arr[i]);
}
//方式2
//i为数组中元素的下标
for(i in arr){
    console.log(i, arr[i]);
}

12.事件

1.概念

• 事件是可以被 JavaScript 侦测到的行为。

• 例如：

• 为按钮绑定单击事件，用户单击该按钮后，JavaScript侦测到按钮的单击事件，驱动函数执行。

• 通常称为事件驱动。

• 事件通常与函数配合使用，这样就可以通过发生的事件来驱动函数执行。

2.分类

 

 

 

13.BOM与DOM

1.什么是BOM

• BOM是Browser Object Model的简写，即浏览器对象模型。

• BOM由一系列对象组成，是访问、控制、修改浏览器属性的方法。

• BOM的顶层是window对象。

2.什么是DOM

• DOM 就是 document object model，也就是文档对象模型。

• 我们可以将 HTML 页面看做是一个文档，在 JS 眼中这个文档就是一个文档对象模型。

• DOM的顶层是document对象。

3.BOM

3.1 属性

属性	描述
document	文档对象
history	客户访问过的URL的信息
location	当前URL信息
navigator	管理浏览器基本信息
screen	客户端的屏幕和显示性能的信息

3.2 函数

函数	描述
alert()	显示带有一段消息和一个确认按钮的警告框
confirm()	显示带有一段消息以及确认按钮和取消按钮的对话框
prompt()	显示可提示用户输入的对话框。
open()	打开一个新的浏览器窗口或查找一个已命名的窗口。
close()	关闭浏览器窗口。
setInterval()	按照指定周期（以毫秒计）来调用函数或计算表达式。
setTimeout()	在指定的毫秒数后调用函数或计算表达式
clearInterval()	取消由 setInterval() 设置的 timeout。
clearTimeout()	取消由 setTimeout() 方法设置的 timeout。

4.DOM

1.DOM介绍

• DOM 就是 document object model，也就是文档对象模型。

• 我们可以将 HTML 页面看做是一个文档，在 JS 眼中这个文档就是一个 document 对象。

• document 对象中就包含了页面中的所有元素

 

2.DOM节点（node）

• DOM 的最小组成单位叫做节点（node）。文档的树形结构（DOM 树），就是由各种不同类型的节点组成。每个节点可以看作是文档树的一片叶子。

• DOM中是一个一个的元素，每个元素可以有属性，也可以有内容。元素、属性、内容，都可以称

• 为节点（node）。

• DOM中的节点分为三类：

  1. 元素节点（element node）

  2. 属性节点（attribute node）

  3. 文本节点（text node）

<a href="https://www.baid.com">百度一下</a>

• 整个a标签就是元素节点；

• href及其值就是属性节点；

• 百度一下 这个文本就是文本节点。

学习DOM主要学习以下内容：

1. 获取元素节点

2. 操作元素的文本节点

3. 操作元素的属性节点

4. 操作元素节点

5. 操作css样式

3.获取元素节点

根据元素的id属性获取元素节点：

• getElementById("id**属性值");**

• 返回一个元素节点

根据元素的class属性获取元素节点：

• document.getElementsByClassName("class**属性值");**

• 返回元素节点数组

根据标签名获取元素节点：

• getElementsByTagName("**标签名");**

• 返回元素节点数组

根据标签的那么属性获取元素节点：

• document.getElementsByName('name**属性值');**

• 返回元素节点数组

4.操作文本节点

• 对于 <p></p>、<hn></hn>、<div></div>、<span></span> 等标签，操作内部文本都使用

  innerHTML或者innerText。

• 对于img等自闭合标签，不涉及文本

innerHTML 指的是从元素内部的起始位置到终止位置的全部内容,，包括其内部的Html标签。

innerText 指的是从元素内部起始位置到终止位置的文本内容，不包含它内部的Html标签。

5.操作属性节点

• 方法1：

  • 获取属性值：getAttribute(属性名)；

  • 设置属性值：setAttribute(属性名，属性值) ；

• 方法2

  • 获取属性值：元素节点对象.属性名；

  • 设置属性值：元素节点对象.属性名=值；

6.操作CSS样式

• 方式1：修改style属性值，改变css样式

  • 对于单个单词的style属性，属性名称不变。

  • 对于多哥单词的属性改写为驼峰写法。例如：css中的font-size对应fontSize。

• 方式2：修改class属性值，改变css样式