JavaScript学习笔记（一）---js基本介绍、js的编写运行、函数
1.JS基本介绍
-
简介：JavaScript一种在浏览器中解释运行的脚本语言（脚本语言：不需要编译，运行过程中由js解释器逐行来进行解释并执行），它的解释器被称为JavaScript引擎，为浏览器的一部分，是广泛用于客户端的脚本语言，最早是在HTML网页上使用，用来给HTML（HTML5）网页增加动态功能。在1995年时，由Netscape公司的Brendan Eich，在网景导航者浏览器上首次设计实现而成。因为Netscape与Sun合作，Netscape管理层希望它外观看起来像Java，因此取名为JavaScript。
-
可以实现：表单动态校验（密码强度检测）、网页特效、服务端开发、桌面程序、App、控制硬件-物联网、游戏开发……
-
H5与JS的关系:
H5狭义上，指HTML的第五个版本；广义上指web前端的所有技术，由于web前端是在H5出现后开始火爆起来，所以，习惯上把web前端也叫H5。web前端开发也叫H5开发。
H5包括 HTML，CSS，JavaScript，等一切前端技术。
-
HTML/CSS标记语言----描述类语言；JS脚本语言----编程类语言
-
浏览器执行JS简介
浏览器分为两部分：渲染引擎和JS引擎
渲染引擎：用来解析HTML和CSS，俗称内核，比如Chrome浏览器的blink，老版本的webkit
JS引擎：也称为JS解释器。用来读取网页中的JavaScript代码，对其处理后运行，比如Chrome浏览器的V8
浏览器本身不会执行代码，而是通过内置JavaScript引擎（解释器）来执行JS代码。
2.JS的组成
ECMAScript（JavaScript语法）：是一种由Ecma国际(前身为欧洲计算机制造商协会),定立ECMA-262标准化的脚本程序设计语言。规定了 JavaScript 脚本的核心语法，如 数据类型、关键字、保留字、运算符、对象和语句等。
BOM（浏览器对象模型）： 定义了 JavaScript 操作浏览器的接口，提供了访问某些功能（如浏览器窗口大小、版本信息、浏览历史记录等）的途径以及操作方法。
DOM（页面文档对象模型）： 定义了 JavaScript 操作 HTML 文档的接口，提供了访问 HTML 文档（如body、form、div、textarea等）的途径以及操作方法。
3.语言
自然语言：人与人交流时传递信息的载体
机器语言：人与机器交流信息时传递信息的载体
4.JS的编写及运行
1. JS的导入
-
内联导入
-
<!-- 内联导入 --> <script> //函数-->某种功能模块 // 将内容打印到大白板上面 document.write(123); // 将内容打印到后台的控制台上面 console.log(456); </script> -
外联导入
<!-- 外联导入 -->
<!-- 注意事项：使用src导入到js
script标签内部不可以写代码 -->
<script src="02.js">
</script>
- 执行顺序：默认自上而下，
- 一个页面中可以有多个script标签，通常一个页面中会有多个外联script标签，一个内联scr标签，习惯上内联的scr标签写在html跟标签的后面（解决烦恼）
2.语句：js的最小单位：表达式 + 分号
3.注释
// 单行注释 ctrl + /
/*
多行注释 shift + alt + a
*/
4.常量与变量
- 常量：在程序运行的过程中不能改变的量
- 变量：在程序运行过程中可以改变的量；本质是程序在内存中申请的一块用来存放数据的空间
使用步骤：1.声明变量 2.赋值
- 定义：var 标识符; var是一个关键字，用来声明变量，告知编译器，后面的标识符是一个变量。
关键字：拥有某种特殊含义的单词 - 使用：
var a ;
a = 123;//左值，空间
var b ;
b = a;//右值，数值 - 标识符的限制要求：
只能由数字，字母，以及下划线和$构成，且首字母不能为数字，其次不要和关键字和系统函数重名 - 变量定义的习惯：
1.见名知意；2.尽量标识符用英文；3.驼峰命名法：如果一个变量名由若干个单词构成，除了第一个单词外，其他单词首字母大写。 - 变量的初始化：在变量定义的同时赋值（同一行赋值）
- 变量定义的注意事项：
不允许变量未定义，就使用；不能重复定义变量 - 赋值：就是 = 把右边的值赋给左边变量空间中
- 更新变量：一个变量被重新赋值后，它原有的值就会被覆盖，变量值将以最后一次赋的值为准
- 只声明不赋值结果：undefined
- 关键字：
break、else、new、var、 case、 finally 、 return、 void 、 catch 、for 、switch 、 while 、 continue、 function 、this 、 with 、default 、 if 、 throw 、 delete 、 in 、 try 、do 、 instranceof、 typeof - 被保留关键字：
abstract 、 enum 、int 、 short 、 boolean 、export 、interface、 static、 byte 、extends 、 long 、 super 、 char 、 final 、native 、synchronized 、 class 、float 、 package 、throws 、 const 、goto 、private 、transient 、 debugger 、 implements 、protected 、 volatile 、 double 、import 、public
5.数据类型（js是动态语言，变量的数据类型是可以变化的;检验算法合法性的必要条件）
- 内置基本类型：
- 数字：number（包括整型值和浮点型值，数字型三个特殊值 infinity代表无穷大、-infinity代表无穷小、NaN代表一个非数值）(数字型进制最常见的进制有二进制、八进制、十进制、十六进制)
- 字符串：string
- 布尔值：boolean（true和false）
- 未赋初值（声明了变量但是没有给值）：underfined
- 空（var a = null ; 声明变量未空值）：null
- 引用类型：object（除了内置基本类型都是引用类型）
6.typeof关键字（判断数据类型的关键字）
7. 运算符（也称为操作符，是用于实现赋值、比较和执行算数运算等功能的符号）
运算符的三属性：
- 优先级
- 结合方向
- 操作目数
1.算术运算符：+ 、- 、* 、 / 、%（求余，只要余数不要商）
2.赋值运算符
- =：将右值赋值给左值
- 赋值表达式是有值的，该值是右值（可以将左边表达式赋值右边）
3.自增自减运算
- ++，-- ：对某个变量加1或者减1
- 前加加：先算再用
- 后加加：先用再算，过了分号（也就是过了该条语句再计算）
- 单独使用时，运行结果相同
- 注意事项：只适用变量，不适用于常量
4.关系运算符（比较运算符）
- 关系运算符：返回的结果为布尔值
> >= < <=- == 逻辑等
- != 逻辑不等
- === 严格等 （必须要求数值和类型一致，不支持系统隐式转换）
- （面试题）总结：= 作用是赋值，把右边给左边；== 作用判断，判断两边值是否相等（注意此时有隐式转换）；===作用全等，判断两边的值和数据类型是否完全相同。
5.逻辑运算符
- 逻辑运算符：返回的结果是布尔值
- &&：完成某一种功能，有n个步骤，每个步骤都实现，整个功能才能实现，各个步骤间的关系称为与
- ||：完成一个功能，有n种方法，任意一个方法都能实现该功能，每个方法间的关系称为或
- !：某个条件的对立面
8.数据之间的转换
在代码运行时，变量的数据类型是由js引擎根据 = 右边变量值的数据类型来判断的，运行完毕之后，变量就确定了数据类型。
- 隐式转换：以符号作为区分标准
-
- +，转换结果全为字符串，效果等价于字符串拼接
- -，*，/，%等等，转换的结果全为数字
- 注意事项：1.两个字符串进行加以外的运算，结果也是数字；2.当遇到非数值型字符串运算时，结果是NaN
- 显示转换：通过调用函数实现转换数据类型
-
- 字符串转数字
parseInt(字符串 | | 小数)：将字符串转为整形数据
注意事项：parseInt还可以用来对小数取整
parseFloat(字符串)：将字符串转为浮点型数据
Number(字符串)可以将字符串转为整形数据也可以转换为浮点型数据 - 数字转字符串
.toString(); - 实际应用
数字转字符串：console.log(123+“”);
字符串转数字：console.log(“123”/1+10)
- 字符串转数字
9.程序结构设计
顺序结构，顺序执行，自上而下
选择结构
1.if
- if(条件表达式)条件表达式的结果一定是一个布尔值，根据真假决定是否执行后面的语句
if的条件只能修饰后面的一条语句，如果需要修饰后面的多条语句，请用{ }括起来，被{ }括起来的多条语句称为复合语句，复合语句被当做一条语句。
注意事项：无论if修饰多少条语句，必须都用{ }括起来，可以大大提高代码可读性
if(条件表达式){
语句；
}else{
else代表之前条件的对立面，else后绝对不允许加条件
语句；
}
if( ){
语句；
}else if( ){
语句；
}else{
语句；
}
注意事项：if…else if 是一条语句，所有的条件都是互斥的，当某个条件成立时，其他条件则跳出
4. 调试：手动运行程序
目的：1.跟踪代码执行顺序；2.可以观察数值
调试步骤：1.打断点：代码运行时，停止的位置；2.刷新；3.蓝色背景修饰的代码行，代表即将执行，但并未执行；4.单步运行；5.退出，点掉断点。
5. 选择嵌套：一个if 修饰的语句还是一个if，建议选择嵌套不要超过三层（极限五层）
if(){
if(){
}else{
if(){
}else if(){
}else{
if(){
}else{
}
}
}
}else{
}
判断闰年问题
程序 = 算法 + 语法
（四年一闰&&百年不闰）|| 四百年再闰
2.switch：等值匹配，必须是数值匹配，不能是范围
switch(匹配值){
case 被匹配值1:
语句;
break;
case 被匹配值2:
语句;
break;
case 被匹配值3:
语句;
break;
...
default:
语句；
}
- switch的执行规则，只匹配一次，当遇到匹配条件时，会自上而下依次执行所有语句，直到switch结束
- break：阻止switch的穿透效果，直接结束
- 所有case条件的对立面，default
3.三目运算（特指条件运算符）
表达式1？表达式2：表达式3；
根据表达式1的真假，返回表达式2或者表达式3
表达式1为真返回2，表达式1为假返回3
4.使用场景
- if范围匹配
- switch等值匹配
- 较为短小的功能用三目运算
循环结构（循环就是重复执行一段代码）
1.while
- 执行顺序：先条件，如果条件为真，则执行语句，条件为假则跳出循环
- while(条件表达式){
语句；
} - 有限次数的循环：
使用循环的四大表达式：1.循环变量的初始化；2.循环条件；3.循环体；4.使循环趋近于结束的条件
2.do…while
- do{
语句；
}while(条件表达式); - 至少会执行一次循环体代码
- while和do…while的异同：
当首次条件成立时，它们没有区别，当首次条件不成立时，do…while要多执行一次循环体，而while直接跳出。
3.for
- for(表达式1；表达式2；表达式3){
表达式4；
} - 表达式1：循环变量的初始化
- 表达式2：循环条件
- 表达式3：使循环趋近于结束的条件
- 表达式4：循环体
使用场景
- 知道循环次数用for
- 不知道循环次数用while
- 除非保证必须要循环一次，用do…while
案例：水仙花数：一个三位数，个位十位百位的立方和等于该数本身。
4.循环的嵌套：一个循环的循环体是另一个循环
- 总的执行的次数，是内层和外层循环次数的乘积
- 建议循环不要超过三层，常用的为两层
- 九九乘法表：1.核心算法：第几行就有几个*，j控制i的数量；2.什么控制行数：j；3.什么控制*的个数：
5.break和continue
- break:1.与switch连用，阻止switch的穿透效果；2.与循环连用，跳出本层循环
- continue：跳出本次循环
10.函数
1.函数的概念及作用
- 概念：封装的最小的功能模块
- 作用：1.提高代码的复用性；2.协同开发；3.便于维护。
2.函数的定义：一个功能模块的创造
function 标识符（参数列表）{//函数头
函数体；
}
- 函数体；以前怎么写代码，现在只是将代码写在{}之间
- function：关键字，告知编译器后面的标识符是一个函数
- 标识符：函数的名字，满足标识符命名规则（驼峰命名）
- 参数列表：a.无参函数；b.有参函数
3.函数的调用：一个功能模块的使用
- 无参调用：函数名();
- 有参调用：函数名(参数1，参数2…);
4.函数的形参与实参
形参：在函数定义时，函数名后面括号中的参数
实参：在函数调用时，函数名后面括号中的参数
注意事项：形参与实参是不同的内存单元。形参只有在函数调用时，才会开辟空间，当函数调用结束后，形参的内空间会被释放
- 内置基本类型数据作为函数实参：值（数值）传递，单向传递，只能由实参传给形参，形参的改变无法影响实参
- 引用类型作为函数实参：（记住结论）双向传递，可以通过形参改变实参
5.返回值：如果一个函数执行完毕后，需要返回一个数值，这个值就是函数的返回值
- 函数的返回值通过return关键字带回，函数只能返回一个值
- 有return关键字的函数才有返回值，没return的函数没有返回值，返回值的值为underfined
- 函数遇到return则直接跳出（终止函数）
6.函数的设计思想
- 函数的功能
- 函数的参数
- 函数的返回值
7.函数的嵌套调用：一个函数定义时的函数体，调用了其它函数
- 当被调函数执行完后，回到主调函数按顺序继续执行代码
- 压栈：函数嵌套调用压入被调函数的过程
- 弹栈：函数嵌套调用弹出被调函数的过程
8.函数调用的另一种表现形式
<script>
// 1.第一种
function fun1() {
console.log("jjj");
}
fun1();
// 2.第二种（表达式）
// 在js中万物皆为对象
// 对象---->变量
var fun = function () {//匿名函数
console.log("hhh");
}
fun();
</script>
9.函数与事件的关系
- 事件：用户对于页面操作时的某种动作；如鼠标的左键单击，左键双击，划入，划出等等。
- 事件与函数的关系：任何事件触发时，其实本质就是在通过用户的动作调用函数。
- 如何将事件和函数绑定起来？
第一种：通过HTML元素直接绑定<body> <!-- onclick="fun()" 将button元素单击的事件与fun函数进行绑定 事件类型="函数名()" --> <button onclick="fun()">点击</button> </body> </html> <script> /* function fun() { console.log("hhh"); } */ // 第一种：用HTML元素直接绑定 var fun = function () { console.log("hhh"); } </script> 第二种：通过js对象绑定 ` <body> <!-- onclick="fun()" 将button元素单击的事件与fun函数进行绑定 事件类型="函数名()" --> <!-- <button onclick="fun()">点击</button> --> <button id="btn">点击</button> </body>` </html> <script> /* function fun() { console.log("hhh"); } */ // 第一种：用HTML元素直接绑定 // var fun = function () { // console.log("hhh"); // } // 2.通过js对象绑定 // 需要将HTML元素转换为js对象 // document.getElementById("id名")：将ID对象的HTML元素转为js对象 var oBtn = document.getElementById("btn"); // 目的，可以通过js对象的操作HTML元素 // 如何操作js对象：js对象.属性名 /* var fun = function () { console.log("hhh"); } oBtn.onclick = fun; */ oBtn.onclick = function () { console.log("hhh"); } </script>
740
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
