JavaScript学习笔记

醉梦繁空

已于 2023-12-02 23:33:35 修改

阅读量89

点赞数 1

文章标签： javascript 学习笔记

于 2023-11-03 10:39:24 首次发布

本文链接：https://blog.csdn.net/weixin_69064765/article/details/134197322

版权

第一章 JS的基本认识

JS主要是用于开发交互式网页

其中 html 是结构，css 是样式，JS 是行为

而JS中的 ECMAScript 是基本语法，DOM 是文档对象模型，BOM 是浏览器对象模型

JS语法中的所有语句都要写在<script></script>标签中

标签引用（弹出对话框）：alert(" ")

alert("测试")

文件引用：src

页面输出：document.write(" ");

document.write("测试");

控制台输出（网页中按F12或右键-检查进入控制台）：

1. console.log()；//最常用

2. console.info()；

3.console.warn();

4.console.error();

注释：

1.JS中单行注释： // （快捷键为Ctrl+？）

2.JS中多行注释： /* */

3.HTML中注释：  (快捷键为Ctrl+？)

4.CSS中注释： /* */

第二章 JS的变量

声明变量

关键字和保留字符不能做为变量名

在JS中声明变量用：var、let

var a;

JS中的标识符

标识符指的是用来识别各种值的合格名称，最常见的标识符是变量名

标识符是由：字母，$，下划线和数字组成，其中数字不能开头

中文是合法标识符，可以用作变量名，但不推荐

JS中的数据类型

JS中有五种基本数据类型：String（字符串），Number（数值型），Boolean（布尔型），Undefined（undefined），Null（null型）。

除了这五种类型以外的类型都叫Object，总的来说JS共有六种数据类型。

typeof运算符：使用typeof操作符可以用来检查一个变量的数据类型。

格式为：typeof 数据；

console.log(typeof 123);

Number中特殊的数字：infinity（正无穷），-infinity（负无穷），NaN（非法数字：Not a Number）。

Undefined类型只有一个值：undefined

第三章 JS中的类型转换

转换为String类型

将其他数值转换为字符串类型有三种方法：toString() 、String() 、拼串

方法一

调用被转换数据类型的toString()方法，
该方法不会影响到原变量，
它会将转换的结果返回，
但是注意：null和undefined这两个值没有toString()方法，如果调用它们的方法，会报错。

方法二

调用String()函数，并将被转换的数据作为参数传递给函数

使用String()函数做强制类型转换时，对于Number和Boolean实际上就是调用的toString()方法。

但是对于null和undefined，就不会调用toString()方法，它会将 null 直接转换为 “null”，将 undefined 直接转换为 “undefined”。

方法三

拼串，方法如其名。

转换为Number类型

将其他数值转换为数值共有三种方法：Number()、parseInt() 和parseFloat()。

Number()可以用来转换任意类型的数据，而后两者只能用于转换字符串。parseInt()只会将字符串转换为整数，而parseFloat()可以将字符串转换为浮点数。

方式一

使用Number()函数

字符串 -->数字

                                如果是纯数字的字符串，则直接将其转换为数字
                                如果字符串中有非数字的内容，则转换为NaN
                                如果字符串是一个空串或者是一个全是空格的字符串，则转换为0

布尔-->数字

true 转成 1
false 转成 0

null --> 数字

null 转成 0

undefined --> 数字

undefined 转成 NaN

方式二

这种方式专门用来对付字符串，
parseInt() 把一个字符串转换为一个整数

方式三

这种方式专门用来对付字符串，
parseFloat() 把一个字符串转换为一个浮点数

注：在利用parseInt()、parseFloat()和Number()进行数据类型转换时，若数据开头有正负号时，会被当成正负数进行转换，如'-123'会被转换为-123。使用parseInt()或parseFloat()将字符串转换为数字时，若字符串开头部分可被识别为数字，则转换为相应的数字；若字符串末尾部分有非数字字符，则这些非数字字符会被自动忽略；若字符串开头部分无法被识别为数字，则转换为NaN。

注意：如果对非String使用parseInt()或parseFloat()，它会先将其转换为String然后在操作

转换为Boolean类型

将其它的数据类型转换为Boolean，只能使用Boolean()函数。

数字 --> 布尔

除了0和NaN，其余的都是true

字符串 --> 布尔

除了空串，其余的都是true

null和undefined --> 布尔

null和undefined都会转换为false

对象 --> 布尔

对象也会转换为true

第四章 JS中的运算符

比较运算符

比较运算符用来比较两个值是否相等，如果相等会返回true，否则返回false。

使用 == 来做相等运算

相等用来比较两个值时是否相等，如果值的类型不同，则会自动进行类型转换，将其转换为相同的类型，然后再比较。

使用 != 来做不相等运算

不相等用来判断两个值是否不相等，如果不相等返回true，否则返回false，不相等也会对变量进行自动的类型转换，如果转换后相等它也会返回false。

使用 === 来做全等运算

用来判断两个值是否全等，它和相等类似，不同的是它不会做自动的类型转换，如果两个值的类型不同，直接返回false。

使用 !== 来做不全等运算

用来判断两个值是否不全等，它和不相等类似，不同的是它不会做自动的类型转换，如果两个值的类型不同，直接返回true。

条件运算符

三目运算符

语法：variablename=(condition)?value1:value2;

举例：result=(age<18)?"年龄太小":"年龄合适";

执行流程：如果condition为true，则执行语句1，并返回执行结果，如果为false，则执行语句2，并返回执行结果。

运算符优先级

                  一级          . 、 []   、 new
                      二级         ()
                      三级         ++ 、 --
                  四级         ！、 ~ 、+（单目）、 -（单目）、typeof 、void 、delete
                      五级         % 、 * 、 /
                  六级 << 、 >> 、 >>>
                      七级         < 、 <= 、 > 、 >=
                  八级 == 、！== 、===
                  九级         &
                十级         ^
                十一级     v |
                十二级 &&
                  十三级 ||
                  十四级     ?:
                  十五级     = 、+= 、-= 、*= 、/= 、%= 、<<= 、>>= 、 >>>= 、&= 、^= 、|=
                十六级     ，

第五章 JS中的选择与循环

选择语句:if / switch

单分支选择语句格式

if(布尔表达式){
    语句块
}

双分支选择语句格式

if(布尔表达式){
    语句块1
}else{
    语句块2
}

多分支选择语句格式

if(布尔表达式1){
    语句块1
}else if(布尔表达式2){
    语句块2
}else{
    语句块3
}

switch选择语句格式

switch(选择的东西){
    case 东西1:    语句块1    ;break;
    case 东西2：   语句块2   ;break;
    case 东西3:    语句块3    ;break;
    case 东西4：   语句块4   ;break;
    case 东西5:    语句块5    ;break;
    case 东西6：    语句块6   ;break;
    default:    语句块7    ;
}

循环语句：for / while / do while

for循环格式

for(初始化变量;循环条件;变量变化){
    循环体
}

while循环格式

初始化变量;
while(循环条件){
    循环体;变量变化;
}

do while循环格式

(特点为无论如何先执行一次循环体)

初始化变量;
do{
    循环体;变量变化;
}while(循环条件)

第六章 JS中的数组

数组的概念

在JS的数组中可以存放任何类型的元素

创建数组的两种方式

1.通过new Array() 方式创建数组

var arr = new Array();	//空数组 
var arr = new Array(3);	//含有三个空元素
var arr = new Array('语文','数学','英语');	//含有三个元素

2.使用数组字面量创建数组

var empty = [];		//[]相当于new Array()
var arr = ['语文','数学','英语','历史'];	//含有4个元素

两种创建方法的区别

使用[] 可以创建含有空存储位置的数组

使用new Array() 不可以创建含有空存储位置的数组

数组的长度—length

使用数组名.length 可以获取数组长度，数组长度为数组元素最大下标加1

使用数组名.length = 数字可以修改数组长度

访问数组

var arr = ['hello','JavaScript',22.48,true];
console.log(arr);		//输出整个数组
console.log(arr[0]);		//输出数组中第一个元素
console.log(arr[1]);		//输出数组中第二个元素
console.log(arr[2]);		//输出数组中第三个元素
console.log(arr[arr.lenght-1]);	//输出数组中最后一个元素

第七章 JS中的事件

用户在页面上操作，网页调用函数来处理

事件的模式

JS中有两种事件实现模式：内联模式和脚本模式

1.内连模式

直接在HTML标签中添加事件，最传统简单的处理方式，但是这种模式中事件和HTML是混写的，并没有将JS和HTML分离，当代码增多会影响代码的维护和扩展。

<input type="button" value="按钮" onclick="alert('hello');" />

//执行自定义的JS函数
<input type="button" value="按钮2" onclick="btnClick();" />

注意：内连模式调用的函数不能放到window.onload里面。否则会找不到该函数。

2.脚本模式

脚本模式能将JS代码和HTML代码分离，符合代码规划。使用脚本模式我们需要先获取元素节点对象，再针对该节点对象添加事件。

可以通过三种方式来获取节点对象：

getElementById()

getElementsByTagName()

getElementsByName()

var box = document.getElementById('box');

//添加事件方式1：通过匿名函数，可以直接触发对应代码(推荐使用)
box.onclinck = function(){
    console.log('Hello world！');
};

//添加事件方式2：通过指定的函数名赋值的方式来执行函数
box.onclick = func;
function func(){
    console.log('Hello world');
};

事件处理的构成

1.出发时间的元素节点对象

2.事件处理函数

3.事件执行函数

//例：单击文档任意处

document.onclick = function(){
    console.log('单击了文档的某一个地方');
};

在上方的程序中

document：是触发事件的对象，表示触发事件的元素所在

onclick：表示一个事件处理函数（on+事件类型click）

function：匿名函数是被执行的函数，用于执行事件后执行

事件的分类

JS可以处理的事件种类有三种：鼠标事件，键盘事件，HTML事件

1.鼠标事件

页面所有元素都能触发鼠标事件

onclick：点击事件

onclick = function(){
    console.log('单击了鼠标');
}

ondblclick：双击事件

ondblclick = function(){
    console.log('双击了鼠标');
}

onmousedown：按下鼠标不松开触发

onmousedown = function(){
    console.log('按下鼠标');
}

onmouseup：松开鼠标时触发

onmouseup = function(){
    console.log('松开了鼠标');
}

onmouseover：鼠标移入某个元素触发

onmouseover = function(){
    console.log('鼠标移入了');
}

onmouseout：当鼠标移出某个元素触发

onmouseout = function(){
    console.log('鼠标移动了');
}

onmouseenter：当鼠标移入某个元素那一刻触发

onmouseenter = function(){
    console.log('鼠标移入了');
}

onmouseleave：当鼠标移出某个元素那一刻触发

onmouseleave = function(){
    console.log('鼠标移出了');
}

第八章 JS中的函数

函数按设定分类

按设定分类分为：自定义函数和内置函数

自定义函数的语法格式

function 函数名([参数1，参数2，...]){
    函数体
}

注：在自定义函数时，即使函数的功能的实现不需要设置参数，小括号也不能省略

函数按参数列表分类

按参数列表分类分为：有参函数和无参函数

无参函数的语法格式

无参函数适用于不需要提供的任何数据即可完成指定功能的情况。

function greet(){
    console.log("Hello everybody！");
}

特殊函数

箭头函数

ES6中新增的函数，它用于简化函数定义的语法，其语法格式为： ()=>{}

箭头函数的小括号可以传入参数，调用箭头函数时可以将箭头赋给一个变量，然后通过变量名实现箭头函数的调用。

var jianTou=(num1,num2)=>{
    return num1+num2;
}

回调函数

是由开发者预先定义好的一个函数，通常会作为参数传递给被调用的函数，当被调用的函数执行时，会在特定的时机调用开发者传入的回调函数

//例子：做饭并添加调味料

function cooking(flavour){
    //厨师做饭
    var food = '鱼香肉丝';
    food = flavour(food);
    return food;
}

var food = cooking(function(food){
    return food += '特辣';
});

console.log(food);