一、javaScript基础
1.1、书写位置
1）内部javaScript：直接写到html文件里，用script标签包住，标签一般写到</body>上面
拓展：alert("内容")-----页面弹出警示对话框
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- 内部定义js文件 -->
<script>alert("提示框")</script>
</body>
</html>
2）外部javaScript：代码写在以.js结尾的文件中，通过script标签引入到html文件中
格式：<script src="文件路径"></script>
<body>
<!-- 外部定义js文件 -->
<script src="../js文件/外部.js"></script>
</body>
注意：使用外部方法时，script标签中间就不能书写代码否则会忽视
3）内联javaScript：代码直接写到标签内部
<body>
<button onclick="alert('警示框')">点击按钮弹出提示框</button>
</body>
1.2、注释和结束符
js的两种注释方式：
-
单行注释：//注释内容
-
多行注释：/* 注释内容 */
js的结束符：
以分号结束，可以省略，为了风格统一，要么每句都写，要么都不写
1.3、输入输出
1）输出语法：
// 语法1：
<script>
document.write("要输出的内容") // 向浏览器文档中输出指定内容，如果输出内容有标签会自动解析
</script>
// 语法2:
<script>
alert("要输出的内容") // 页面弹出警示框，输出指定内容
</script>
// 语法3:
<script>
console.log("要输出的内容") // 这条打印语句会在控制台输出，只要是程序员调试使用
</script>
2）输入语法：
// 语法1:
<script>
prompt("提示要输入的内容：") // 显示一个对话框，对话框中显示文本信息，提示用户输入指定内容
</script>
1.4、变量和常量
变量：就是存储数据的容器，变量不是数据本身，他只是存储数据的容器
常量：使用const修饰的变量成为常量
1）变量的声明与赋值：
// 格式：
let 变量名
// 声明多个变量，中间使用逗号隔开
let 变量1 = 值,变量2 = 值
// 示例
<script>
// 声明一个age变量
let age
// 赋值----等号两侧要有空隔
age = 18
</script>
2）变量的命名规范：
-
不能用关键字
-
只能由下划线，字母，数字，$组成，且不能以数字开头
-
字母严格区分大小写
3）常量的基本使用：
-
使用场景：当某个变量永远不会改变的时候，就可以使用const来声明，而不是let
-
注意：常量不允许重新赋值，常量在声明的时候必须初始化
// 格式：
const 常量名 = 常量值
4 ）使用var定义变量的两个特点：
-
作用域比较大，是全局变量
-
可以重复定义变量名
1.5、数据类型
使用数据类型可以更加充分的利用内存，可以更加方便的使用数据；js是一门弱数据类型语言，只有变量赋值了，才能确定数据类型
js数据类型主要可以分为两大类：
-
基本数据类型：数字型(number)、字符串型(string)、布尔型(boolean)、未定义型(underfined)、空类型(null)
-
引用数据类型：object对象
1）数字类型(Number)：
就是我们数学中学到的整数，小数，正数，负数，如果其他数据类型与数字数据类型进行计算会出现NaN，NaN与任何值计算全为NaN
// 格式：
let num1 = 23
let num2 = 23.4
let num3 = -23
console.log("djo"-1) // NaN
console.log(NaN+2) // NaN
2）字符串类型(string)：
通过单引号、双引号、或者反引号包裹的数据就是字符串，推荐使用单引号
字符串进行拼接：使用+号
// 使用+号进行字符串的拼接
let age = 18
document.write("我的年龄是：" + age + "岁")
模版字符串：使用反引号包含数据，使用${}包含变量，可以进行字符串的拼接
// 格式：
`字符串内容${变量名}`
// 使用模版字符串进行拼接
let age = 23
document.write(`我的年龄今年是：${age}岁`)
注意：必须是要反引号包含数据，才能使用模版字符串进行拼接
3）布尔型(boolean)：
只有两个值true和false，表示肯定，正确时用true，错误时用false
// 定义布尔类型数据
let cool = true
document.write(cool) // 结果为：true
// 判断结果
document.write(3>4) // 结果为：false
4）未定义类型(undefined)：
未定义数据类型，只有一个值，只声明变量，不赋值的情况下，变量的默认值为undefined
// 声明变量不初始化数据类型
let num
document.write(num) // 结果为：undefined
使用场景：检查数据是否传入
5）空数据类型(null)：
表示数据类型是一个无，空或未知值的一个特殊值
let obj = null
console.log(obj) // 结果为：null
null和nudefined的区别：
-
undefined表示没有赋值
-
null表示赋值了，但是内容为空
console.log(undefined + 1) // 结果为：NaN
console.log(null + 1) // 结果为：1
6）检测数据类型：
typeof运算符可以检测数据类型，支持两种语法形式：
-
作为运算符：typeof 变量名
-
函数形式：typeof(变量名)
注意：两种形式结果是一样的，直接使用没有括号的写法
1.6、类型转换
使用表单，prompt获取的数据默认都是字符串类型的，使用数据类型转换，将数据转换为我们想要的数据类型
1）隐式类型转换：
某些运算符执行时，系统内部会自动将数据进行转换
-
+号两边有一个是字符串时，就会将另一个转换为字符串类型
-
除了+号以外的算数运算符，如-，* / 等都会将数据转为数字类型
document.write(2 + '2') // 结果为：22
document.write(2 + 2) // 结果为：4
document.write(2 - '2') // 结果为：0，减号会将字符串型的数据隐式转为数字型
document.write(2 / '2') // 结果为：1，除号会将字符串型的数据隐式转为数字型
document.write(+'123') // 结果为数字类型的123，这是+的一个特殊用法
2）显示类型转换：
-
转换为数字型：Number(数据)，如果字符串内容有非数字，转换结果为NaN，转换时会从第一个字符开始
-
只保留整数：parselnt(数据)
-
可以保留小数：parseFloat(数据)
-
数字类型转为boolean类型时除了0和NaN其它都是true
-
字符串转为boolean类型时除了空字符串为false，其它都是true
-
Null 和undefined转为boolean类型都是false
// 直接将输入的数据强制转换为数字类型
let age = Number(prompt("输入数字："))
// 巧用隐式类转换
let num = +prompt("请输入数字：")
// 将数字后面的px去掉
let writh = parseInt('12px') // 结果为：12
let heaght = parseFloat('34.56px') // 结果为：34
let jig = parsrInt('wes23px') // 结果为：NaN
let j = parsrInt('12wes23px') // 结果为：12
1.7、运算符
运算符也叫操作符，通过运算符可以对一个或多个值进行运算并获取运算结果，typeof就是运算符,它会将该值的类型以字符串的形式返回。和Java类似
1）算数运算符：
算数运算符：+加 -减 *乘 /除 %取模(求余数) ++加加 --减减
/**
* 都是和Java的算数运算符也差不多.
*/
console.log(1+1);
console.log(1-1);
console.log(1*1);
console.log(1/1);
console.log("% 取模就是求余数,10除以3不整除还余: "+(10%3));
let a = 1;
console.log("++ -- 操作符号类似,都是自增1或自减1,需要注意是在++ --使用时候还会根据前后有区别");
console.log((++a)+" ++在前则先计算在返回值所以1+1等于"+a);
console.log((a++)+" ++在后则先输出当前a的值在进行+1的操作所以,在次输出a等于"+a);
console.log((--a)+" --在前则先计算在返回值所以3-1等于"+a);
console.log((a--)+" --在后则先输出当前a的值在进行-1的操作所以,在次输出a等于"+a);
2）关系运算符：
关系运算符: 在逻辑语句中使用,以测定变量或值是否相等,最终会返回一个boolean类型的值
-
大于 > ，小于 < ，等于 == ，恒等 === ，大于或等于 >= ，小于或等于 <=
-
==： 进行相等比较，使用 ==进行比较时候，如果两个值类型不同则会自动进行类型转换，将其转换为相同的类型
-
!= ： 不等，如果两个变量的值不相等则返回 true，否则返回false。和 == 类似如果数据类型不同也会进行类型转化。
-
===： 全等运算，它和相等类似，不同的是它不会做自动的类型转换，如果两个值的类型不同，直接返回false
-
!==： 用来判断两个值是否不全等，它和不等类似，不同的是它不会做自动的类型转换，如果两个值的类型不同，直接返回true
/**
* 常用的运算符,都是和Java也很类似,就不一一介绍了注意一下 == 和 ===
* */
console.log("大部分程序中 = 都是赋值操作");
console.log("== 和 === 都可以用来比较一个数据类型结果是否相等");
console.log(1==1); // true
console.log(1=='1'); // true，==只比较值是否相等
console.log(1==='1'); // false
console.log('1'==='1'); // === 使用恒等号进行比较的时候,不仅值要一样,数据类型也要一样才可以.
3）赋值运算符：
=、+=、-=、*=、/=
let w = "今天天气真好";
console.log(w);
console.log(w+="适合方风筝."); //+= 可以用于字符类型的拼接,数值类型的计算。
let a = 1;
console.log("数值类型则先进行计算在赋值:")
console.log(a+=1);
console.log(a-=1);
console.log(a*=10);
console.log(a/=2);
4）逻辑运算符：
&& 与：
-
两个值中只要有一个值为false，就返回false，只有两个值都为true时，才会返回true
-
JS中的“与”属于短路的与，如果第一个值为false，则不会检查第二个值
-
非布尔值时：如果两个都为true，则返回第二个值，如果两个值中有false，则返回靠前的false的值
|| 或：
-
两个值中只要有一个true，就返回true，只有两个值都为false，才会返回false
-
JS中的“或”属于短路的或，如果第一个值为true，则不会检查第二个值
-
非布尔值时：如果两个都为false ，则返回第二个值，如果两个值中有true，则返回靠前的true的值
! 非：!可以用来对一个值进行非运算
-
所谓非运算就是对一个布尔值进行取反操作，true变false，false变true
1.8、数组
数组：数组就是使用一个变量名存储多个数据，并且数组的长度和类型都可变
// 声明格式：
let 数组名 = [数据1，数据2，..... ，数据n]
// 声明空数组
let 数组名 = []
// 获取数组长度
数组名.length
1）查询数组数据：
// 格式：
数组名[下标]
let arry = [12,"wef",false]
// 查询指定下标中元素
arry[0] // 结果为：12
2）重新赋值：
// 格式：
数组名[下标] = 新值
let arry = [12,"wef",false]
// 查询指定下标中元素
arry[0] = 23
3）数组添加新的数据：
// 格式1：
let newLength = 数组名.push(新增内容) // 将一个或多个元素添加到数组尾部，并返回数组的新长度
// 格式2:
数组名.unshift(新增内容) // 将一个或多个元素添加到数组的头部，并返回数组的新长度
4）删除数组中的数据：
// 格式1:
数组名.pop() // 从数组中删除最后一个元素的值，并且被删除的元素
// 格式2:
数组名.shift() // 删除数组中的第一个元素，返回被删除的元素
// 格式3:
数组名.splice(起始下标，删除的个数) // 删除指定下标的数组元素，删除的个数可以省略，表示删除到末尾
5）数组的遍历：
// for循环：
for(let i = 0; i < 数组名.length; i++){
console.log(数组名[i])
}
// forEach
数组名.forEach(function(e){
console.log(e)
})
// forEach简写（箭头函数）
数组名.forEach((e) => {
console.log(e)
})
1.9、字符串数组
1）定义方式：
// 方式1:
let 变量名 = new String("····")
// 方式2:
let 变量名 = "···"
2）属性和方法：
| 方法 | 描述 |
|---|---|
| length | 字符串的长度 |
| charAt() | 返回指定位置的字符 |
| indexOf() | 检索指定字符串的位置 |
| trim() | 去除字符串两边的空格 |
| substring() | 提取两个指定索引位置的字符（字符串的截取） |
二、javaScript函数
函数可以把相同相似的代码封装起来，通过函数调用的方式执行这些封装起来的代码
2.1、函数的使用
1）函数的声明：
//语法：
function 函数名(){
函数体内容
}
2）函数的调用：
函数可以多次调用，每次调用都会重新执行函数体中的代码
// 格式：
函数名()
2.2、函数的参数
一个函数可以有多个参数，之间使用逗号隔开，直接书写函数名，因为javascript是弱类型语言
1）声明格式：
// 带参数的函数声明
function 函数名(参数1，参数2，····，参数n){
函数体
}
2）调用格式：
// 格式：
函数名(参数值)
2.3、参数的默认值
形参可以看作为变量，变量不给值，默认就是undefined类型
// 格式：
function 函数名(参数1 = 值,参数2 = 值){
函数体
}
注意：函数的默认值只有在调用时缺少实参参数的时候才会执行，有参数首先执行传过来的参数
2.4、函数的返回值
使用return关键字，当函数有返回值的时候使用
// 格式：
function 函数名(){
函数体
return 要返回的数据
}
// 调用函数接收返回值
let result = 函数名()
注意：
-
return后面的代码不会执行，会立即结束当前函数的调用，所以return后面需哟啊返回的数据不要换行书写
-
return函数可以没有return，这种情况函数的默认返回值为undefined
2.5、作用域
代码中所用的名字并不是一直有效的，而定义的名字有可用的作用域范围，作用域可分为：全局作用域和局部作用域
全局作用域：在整个script标签或者单独的js文件中定义的变量
局部作用域：在函数内部或者括号内部定义的变量，函数的形参也是局部变量
注意：如果函数内部的变量没有声明，直接赋值，也当全局变量来看，但是不推荐使用
// 函数内部没有声明的变量当全局变量
function fun(){
num = 12
}
// 使用时需要先调用函数
fun()
// 尾部调用
document.write(num) // 12
2.6、匿名函数
没有定义名字的函数，有名字的函数可以在任意位置使用名字调用函数
// 格式：
function(){} // 没有名字的函数
1）函数没有名字，调用方法：
函数表达式：使用变量名记录函数，相当于变量需要先声明在使用
//格式：
let 变量名 = function(){
函数体
}
// 调用格式：
变量名()
立即执行函数：必须加分号，表示函数的结束
// 方式1:
(function(){函数体})();
// 方式2:
(function(){函数体}());
三、javaScript对象
对象也是一种数据类型，可以理解为是一种无序的数据集合，对象包括静态特征和动态行为
静态特征(属性)：如姓名，年龄，性别等，可以使用数字，字符串，数组，布尔类型表示
动态行为(方法)：如点名，唱，跳等，使用函数表示
3.1、对象的声明
// 格式1：
let 对象名 = {
属性名: 属性值，
方法名: 匿名函数
}
// 格式2:
let 对象名 = new Object()
注意：属性都是成对出现的，包括属性名和属性值，它们之间使用分号分隔，多个属性之间使用逗号分隔
3.2、对象的使用
1）查询对象属性值：
// 格式1：
对象名.属性名 // 返回对应属性值
// 格式2:中括号中的属性名必须使用引号扩起来
对象名['属性名'] // 返回属性值
2）对象属性重新赋值：
// 格式：
对象名.属性名 = 新属性值
3）对象添加新属性：
// 格式：
对象名.新属性名 = 新值
4）删除对象属性：
// 格式：
delete 对象名.属性名
5）对象方法的定义和使用：
// 格式：
let person = {
name: 'lili',
// 方法名：sayHi
sayHi:function(){
函数体
}
}
对象内部的函数叫方法，对象方法的调用格式：
// 格式：对象名.方法名()
person.sayHi()
3.3、遍历对象
对象是无序的不能使用for循环遍历，类似于python中的for in方法
// 格式：
for(let 变量名 in 容器名){}
注意：使用此方法遍历数组是k表示的是字符串类型的下标，不建议遍历数组，可以遍历对象
// 遍历对象
for(let 变量名 in 对象名){
docoument.write(对象名[变量名]) // 这里遍历的变量名带有引号
}
注意：
-
括号中变量名在循环的过程中依次代表对象的属性名
-
单独的变量名是获取属性名，对象名[变量名]是获取属性值
数组对象：数组中存储的是每一个对象
// 定义一个数组对象
let student = [
{name:'张三', age:18, gender:'男'},
{name:'李四', age:20, gander:'女'},
{name:'lihua', age:34, gender:'女'},
]
// 遍历数组
for (let i = 0; i < student.length; i++){
document.write(student[i].name) // 打印每一个对象的名字
}
3.4、JSON对象
1）定义：json类型的字符串需要使用双引号将键包裹
let 变量名 = '{"键":"值","键":"值"}'
2）JSON字符串转为JS对象：
let js对象名 = JSON.parse(字符串json名)
3）JS对象转为JSON字符串：
var json字符串名 = JSON.stringify(js对象名)
3.5、BOM对象
BOM对象是浏览器对象模型，允许javascript与浏览器对象
1）组成：
-
Window：浏览器窗口对象
-
Navigator：浏览器对象
-
Screen：屏幕对象
-
History：历史记录对象
-
Location：地址栏对象
2）浏览器窗口对象：直接使用window.调用，可以省略window.
-
属性
| 属性 | 解释 |
|---|---|
| window.history | 对history对象的只读引用 |
| window.location | 用于窗口或框架的Location对象 |
| window.navigator | 对navigator对象的只读引用 |
-
方法
| 方法 | 解释 |
|---|---|
| window.alert() | 显示带有一段消息和一个确认按钮的警告框 |
| window.confirm() | 显示带有一段消息和确认按钮和取消按钮的对话框,有返回值true和false |
| Window.setinterval() | 按照指定周期（以毫秒记）来调用函数或计算表达式 |
| Window.setTimeout() | 在指定的毫秒数后调用函数或计算表达式 |
-
Eg:
// 周期执行指定函数，参数1表示要执行的函数，参数2表示多长时间执行
var i = 0;
// 定时执行指定函数
window.setInterval(function (){
i++;
console.log("定时器执行了"+i+"次");
},2000)
3）地址栏对象：直接使用window.location获取
-
属性
| 属性 | 说明 |
|---|---|
| window.location.href | 设置或返回完整的URL |
-
eg:
// 设置地址栏中的URL信息
window.location.href = "url地址"
3.6、DOM对象
DOM对象是文档对象模型，就是将标记语言的各个组成部分封装为对应的对象，HTML中的Element对象可以通过Document对象获取，而document对象可以通过window对象获取
1）document获取element对象函数：
-
根据ID属性值获取返回单个Element对象
let h1 = document.getElementById('id属性名')
-
根据标签名获取，返回element对象数组
let dars = document.fetElementByTagName('标签名')
-
根据name属性值获取，返回element对象数组
let hab = document.getElementByName('name属性值')
-
根据class属性值获取，返回element对象数组
var class = documnet.getElementByClassName('class属性名')
扫一扫
2048
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
