JavaScript基础笔记
JavaScript介绍
JavaScript运行在浏览器里面的脚本语言-编程语言
什么是编程语言-人为的设定一些步骤，让计算机去执行
js能做什么？
- 表单验证
- 页面特效
- 炫酷对象
- ……
js的引入方式
- 外联式
只需要使用script标签，引入src属性，指定它的路径
<script src="./index.js"></script>
- 行内式
<input type="button" value="按钮" onclick="alert("这是行内式使用js")">
- 嵌入式
<script>alert("这是内嵌式")</script>
js提供的输入输出方式
- alert(“提示”);作用：弹出一个提示框
- prompt(“请输入”) // 输入框
- console.log(“打印输出”) // 浏览器控制台打印输出
- confirm(“您确定删除吗?”) // 确认弹出提示框
js变量
变量：数据的容器，直接代表了一个数据
语法: var 变量名 = 数据
例子：
<script>
var pwd = prompt("请输入您的银行卡密码");
console.log(pwd);
</script>
变量的命名规范
- 数字、字母、_、$
- 不能以数字开头
- 不能使用关键字，也不能使用保留字
- 严格区分大小写
- 命名要有意义
- 使用驼峰命名（firstName）
变量的细节
- 要先声明之后才能使用。 console.log(a) // undefined
- 声明一次之后，就可以不用再次声明，var a = 10; a=20;
- 变量可以作为另一变量的值，var n1 = 10;n2 = n1;
- 声明和赋值可以分开；var a; a = 10;
- 可以一次声明多个变量；var a,b,c; var a=10,b=20,c=30;
js的数据类型
分为：基本数据类型、复杂数据类型
基本数据类型
- 数字（Number）
- 字符串(String)
- 布尔(Boolean)
- 空(null)
- 未定义(undefined)
- Symbol 是ES6引入一种新的原始数据类型，表示独一无二的量
数字类型（Number）
数字 + 小数
例子：
var x1 = 34.0
var x2 = 34
字符串（String）
字符串可以是引号中的任意文本，可以使用单引号或双引号
var str1 = 'name';
var str2 = "小明";
console.log(str1.length) // 获取字符串的长度
布尔（Boolean）
这个类型用来表示真 和 假
var isBtn = true;
未定义(undefined)
声明了，但是没有赋值
如果声明了变量，没有赋值，默认就是undefined
空（null）
什么都没有，通常都是得到的结果null ，很少主动使用
var res = prompt("请输入一个名字")
console.log(res) // 如果点的是取消，得到的就是null
复杂数据类型
- 对象(Object)
- 数组(Array)
- 函数(Function)
数据类型转换
将其他转换为数字
Number()
console.log(Number("123")) // 123
console.log(Number("abc")) // NaN 不是一个数字，Not a Number
console.log(Number(true)) // 1
console.log(Number(false)) // 0
console.log(Number(null)) // 0
console.log(Number(undefined)) // NaN
parseInt() 转换为整数
console.log(parseInt("3000") // 3000
console.log(parseInt("3000.04") // 3000
console.log(parseInt("3000abc") // 3000
// 是一个专门用来转换为数字的方法，会逐个转换
parseFloat() 转换为小数
console.log("3.1415926") // 3.1415926
console.log("3.14aaa") // 3.14
将其他转换为字符串
String(任何数据)
var res = String(3000) // 3000
var res = String(true) // true
var res = String(false) // false
var res = String(null) // null
var res = String(undefined) // undefined
数据.toString()
console.log(true.toString()) // true
console.log(false.toString()) // false
console.log((300).toString()) // 300 ,数字需要加小括号
console.log(undefined.toString()) // 报错
console.log(null.toString()) // 报错
// undefined 和 null 不能点出任何东西
其他数据类型转换为布尔（Boolean）
// js 中只有这些是false，其他为true
console.log(Boolean(0)) // false
console.log(Boolean('')) // false
console.log(Boolean(null)) // false
console.log(Boolean(undefined)) // false
console.log(Boolean(NaN)) // false
console.log(Boolean(false)) // false
// 转为true 的举例
console.log(Boolean(1)) // true
console.log(Boolean("123")) // true
运算符
算数运算符
+（加）、-（减）、*(乘)、/（除）、%（取余）
console.log(5 + 2) // 7
console.log(5 - 2) // 3
console.log(5 * 2) // 10
console.log(5 / 2) // 2.5
console.log(5 % 2) // 1
比较运算符
>(大于) 、< (小于)、>=(大于等于)、<=(小于等于)、==（相等）、===（全等）、!=(不相等)、!==(不全等)
console.log('4'==4) // true
console.log('4'=== 4) // false
console.log(undefined == null) // true
console.log(undefined === null) // false
// === 严格判断，要判断内容相等之外，还要判断类型是否相等
- && 多个条件同时成立时
- || 只要有一个条件成立即可
- ! 取反
赋值
变量 = 值
sum = sum +1;
符合赋值运算
+= 、-=、*=、/=、%=
sum+=1 // 等价于 sum = sum + 1
自增、自减
数据在自身的基础 +1或者 -1
var a= 1
a= a+1 // 等价于 a+=1 等价于 a++
a = a-1 // 等价于 a-=1 等价于 a--
++ 在前：先自增，使用自增后的值进行运算
++ 在后：先使用原来的值进行运算，然后再自增
例子：
var a = 10;
console.log(a++) // 10
console.log(++a) // 11
console.log(a) // 11
var a = 10
var b = a ++ + ++a
console.log(b) // 22
js的组成（补充）
ECMAScript-简称es，目前主要学习es5,
DOM-Document Object Model 文档对象模型，是js里面提供的一套操作页面元素的写法
BOM-Brower Object Model 浏览器对象模型，是js里面提供的一套操作浏览器的写法
分支结构
if语句
// if 语句，通常使用判断区间，复杂的条件
if(条件){}
// if...else
if(条件){}else{}
// if...else if ...else
if(条件){
...
}else if(条件){
...
}else{
...
}
三元运算符
固定语法：
条件 ? 条件为true的代码 : 条件为false的代码
switch语句
// switch 判断，固定值
switch(数据){
case 固定值1：
数据和固定值1完全相等的代码
break
case 固定值2：
数据和固定值2完全相等的代码
break
...
default:
上面的条件都不成立时，执行的代码
}
例子：
var gender = "男"
switch(gender){
case "男"：
console.log("我是男生")
break;
case "女":
console.log("我是女生")
break;
default:
console.log("我是未知")
}
循环
重复的做一件事情
while 循环
// 固定语法
while(条件){
条件为true就会重复执行的代码，循环体
}
例子：
var time = 0;
while(time<3){
console.log("我是循环体")
time++;
}
执行过程：
- 判断条件
- 如果条件为true，就执行循环体
- 循环体执行完毕，会判断条件
- 如果条件为true，就会重复1-3，直到条件为false
结束循环
break关键字：
两个作用：
- 结束switch
- 结束循环
while(true){
console.log(1) // 控制台会打印一次
break
}
for 循环
// 语法：
for(初始化表达式;条件表达式;自增表达式){
循环体
}
例子：
for(var i=0;i<3;i++){
console.log('我是for循环')
}
执行过程：
- 先执行初始化表达式
- 判断条件是否成立
- 如果条件成立，执行循环体
- 循环体执行完毕，会执行自增表达式
- 重复2-4步，直到条件为false，结束循环
例子：求1-100的和
var sum = 0;
for(var i=1;i<=100;i++){
sum =sum+i
}
console.log(sum) // 5050
例子：循环生成图片
for(var i=0;i<40;i++){
document.write('<img src="./images/xxx.png"/>')
}
do…while循环
// 固定语法
do{
循环体
}while(true)
执行过程：
- 先执行一次循环体
- 再判断条件
- 如果条件成立，就两次执行循环体
- 重复2和3步，直到条件为false，结束循环
while和do…while的区别 - while循环如果条件为false，会一次都不执行
- do… while 会至少执行一次循环体
break 和 continue
break 是终止循环，continue是跳过本次循环，继续执行下次循环
综合练习
智能机器人：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>机器人练习</title>
</head>
<body>
<script>
/**
功能分析：
1.循环的弹出询问你要做什么？
2.如果输入1，可以计算多个数字的和
3.如果输入2，得到当前的时间
4.如果输入3，点播歌曲
5.如果输入q,结束聊天
*/
// 1.循环的弹出询问你要做什么
// 未知次数，使用while循环
while (true) {
// 1.1 弹出输入框，不同的浏览器需要使用 \r\n 才能换行
var msg = prompt("你好，我是您的智能助手，请输入下面的选项，决定功能：\n1.如果输入1，可以计算过个数字的和\n2.如果输入2，得到当前的时间\n3.如果输入3，点播歌曲\4..如果输入q,结束聊天")
// 5.如果输入1，结束聊天
if (msg === 'q') {
// 为了用户体验-要通知一下用户，使用结束
alert('主人，奴才这就退下')
break
}
// 2.如果输入1，可以计算多个数字的和
// 判断输入的是否是1
switch (msg) {
case '1': // 注意，这个是1不能是数字
// 弹出一个输入框，让用户输入多个数字
var nums = prompt("请输入多个数字，使用,隔开,例如：1,2,3,4")
// console.log(nums.split(','))
var arr = nums.split(',')
var sum = 0
for (var i = 0; i < arr.length; i++) {
sum += parseFloat(arr[i])
}
console.log(sum)
// 2.5 提示
alert('总和是：' + sum)
break
// 如果输入2得到系统当前时间
case '2':
// 1.创建一个日期对象
var date = new Date()
// 得到里面的年月日
var y = date.getFullYear()
// console.log(y)
var month = date.getMonth() + 1 // 月份从 0 开始
// var day = date.getDay() // 获取星期，一周是从周日开始的，周日是0
var d = date.getDate() // 获取日期
var h = date.getHours() // 获取小时
var m = date.getMinutes() // 获取分钟
var s = date.getSeconds() // 获取秒
// 把需要补0的先补上
if (month < 10) {
month = '0' + month
}
if (d < 10) {
d = '0' + d
}
if (h < 10) {
h = '0' + h
}
if (m < 10) {
m = '0' + h
}
if (s < 10) {
s = '0' + s
}
var time = y + '-' + month + '-' + d + ' ' + h + ':' + m + ':' + s
// var time = y + '-' + month + '-' + d + ' ' + h + ':' + m + ':' + s
console.log(time)
alert('现在时间：' + time)
break
}
}
</script>
</body>
</html>
数组
概念：存储大量数据，有顺序，有长度的数据集合；
// 声明数组的方式
// 方式一：构造函数
var arr = new Array()
// 方式二：字面量
var arr = []
// 存储数据
var arr = [];
arr[0] = "张飞"
arr[1] = "关羽"
// 从数组中取出数据使用
// 数组[索引] 可以认为这就是一个变量
console.log(arr[0])
// 数组初始化：字面量方式
var arr = [1,2,3.4]
// 数组初始化：构造函数方式
var arr = new Array(1,2,3,4)
// 注意：new 关键字初始化时，如果括号里面是一个数字型，默认是该数组的长度
var arr = new Array(100)
console.log(arr) // []
例子：求一个数组里面多个成绩的和
var score = [1,2,3,4,5]
var sum = 0;
for(var i=0;i<score.length;i++){
sum +=score[i]
}
console.log(sum) // 15
例子：求一个数组中的最大值
// 1.使用一个变量表示两个数之间的更大者
// 2.两个数字比较，得出更大的那个，再跟下个比较
// 先假设第0个是最大的
// 循环的使用max 和下一个数相比较
var arr = [99,100,45,72,56,111];
var max = arr[0]
for(var i =1;i<arr.length;i++){
if(max < arr[i]){
max = arr[i]
}
}
console.log(max) // 11
例子：翻转数组
var arr = [1, 2, 3, 4, 5]
// 方式一
// var arr2 = []
// for (var i = 0; i < arr.length; i++) {
// arr2[i] = arr[arr.length - 1 - i]
// }
// 方式二 把两个数据交换位置
for (var i = 0; i < arr.length / 2; i++) {
const temp = arr[i]
arr[i] = arr[arr.length - 1 - i]
arr[arr.length - 1 - i] = temp
}
console.log(arr)
函数
函数就是一段可以在特定的时机重复使用的代码段-类似于一个月饼模子，只需要使用起来，就可以得到结果
作用
可以让一段代码在特定的时机使用，也可以重复使用
固定语法
function 函数名(){
函数体需要重复时候用的代码
}
注意点
函数里面的代码是不会执行，需要调用才会执行
特点
函数声明后，里面的代码不会执行，必须调用才会执行
调用： 函数名()
函数参数
function 函数名(参数1，参数2，参数3){
函数体
}
当函数调用的时候，要把实际的数据传入函数里面
例如： 函数名(数据)
函数的返回值
函数执行过后，得到一个结果，默认就是undefined,如果想要修改，函数的执行结果：使用return
function add(a,b){
var sum = a + b;
return sum;
}
var sum = add(1,2) // 3
return 关键字
作用：
- 1.修改函数的返回值
- 2.终止函数的执行
函数的参数
形参：形式参数，在声明函数的时候，代替数据在代码里面执行的
实参：实际参数，在调用函数的时候，实际参与函数执行的数据
结论：形参里面的数据变了，实参不会变（基础数据类型）
函数的作用域
变量和函数的有效范围
全局：在页面中的任何位置都能使用，在<script>之下直接声明的，都是全局变量。
局部：在某个函数内部或代码块中
为什么要有作用域？
如果全局的变量，会造成后面的同名变量，覆盖前面的变量的效果，称为变量污染
所以需要一个范围把污染隔绝，避免变量污染。如果要写多个函数，隔绝污染，函数名又要不同-函数名也可能重名
解决办法：可以让函数没有名字，自调用函数
(function(){
var a = 10;
console.log(a)
})()
函数预解析：
// 关键字声明
function fn(){
console.log(1)
}
// 函数表达式
var f2 = function(){
console.log(2)
}
js在执行之前，会由js解析引擎(v8)把代码先解析一遍
做的事情：
- 1.把变量和函数的声明提前到当前作用域的最顶端
- 2.变量的赋值和函数的调用还是在原来的位置
变量提升： 关键字声明的函数会变量提升
arguments 对象
函数中的arguments对象，函数里面的自带的，在函数体重获取实参
作用：可以解决任意个实参的问题
注意：
- 1.是函数里面自带的，不需要声明
- 2.arguments只能在函数内部使用
- 3.可以得到函数被调用的时候所有的实参
function add(a,b){
console.log(arguments) // [1,2,3] 是一个类数组 ，实参的集合
}
add(1,2,3)
函数的短路运算
一般是形参比实参多的情况下
function add(a,b,c,d){
d = d || 0;
return a + b + c + d
}
add(10,20,30)
对象
对象是无序键值对的集合，其实就是一个结构，这个结构可以存储复杂的数据
{键：值}
作用：
- 1.描述复杂的数据
- 2.封装代码
对象语法
// 1.创建对象
var obj = new Object() // new 关键字 构造函数
var obj = {} // 字面量
// 描述对象
// 特征 ---- 属性
// 行为-----方法
// 添加属性
// 对象[属性名] = 值
// 对象.属性名 = 值
// 添加方法
// 对象.方法名 = function() {}
// 对象[方法名]= function() {}
// 访问属性和方法
// 对象.属性名
// 对象.方法名 ======= Math.random()
// 字面量简写的写法
var obj = {
键1：值1,
key2：value2
}
for …in 遍历对象
语法
for(var 键 in 对象){
// 键就是属性名
}
// 实际举例
for(var key in obj){
console.log(key) // obj 的每一个属性名
console.log(obj[key]) // obj 的每一个属性值
}
构造函数
function Person(name,age,gender){
this.name = name;
this.age = age;
this.gender = gender;
}
var xiaoming = new Person('小明',18,'男')
console.log(xiaoming)
new 关键字
作用：配合构造函数，创建实例对象
new的过程：
- 1.创建一个对象
- 2.调用构造函数
- 3.把this指向指向第一步，创建的对象
- 4.执行构造函数里面的代码，给this添加属性和方法
- 5.返回this
引用类型和值类型的区别
基本（值）数据类型：存储在内存的栈空间
复杂（引用）数据类型：存储在内存的堆空间
结论：
1.函数传参，值类型传参，形参变了，实参不变
2.引用类型，形参变了，实参变
Math内置对象
Math.random() // 随机数
Math.ceil() // 向上取整
Math.floor() // 向下取整
Math.round() // 四舍五入
更多方法可以参考mdn
例子：点击事件，生成随机颜色
function randomInt(min,max){
return Math.floor(Math.random()*(max-min + 1)) +min
}
var btn = document.getElementById('btn')
btn.onclick = function(){
var r = randomInt(0,255)
var g = randomInt(0,255)
var b = randomInt(0,255)
var color = `rgb(${r},${g},${b})`
// 修改body的背景色
document.body.style.backgroundColor = color;
}
分析：点击按钮，让body的背景色随机变化
- 写一个按钮
- 获取按钮 byId
- onclick
- 生成三个随机整数 0-255
- 修改body的背景颜色
Array内置对象及方法
- 从数组的末尾添加
arr.push(‘a’) - 末尾删除
arr.pop() - 从前面插入
arr.unshiift(‘b’) - 从前面删除
arr.shift() - 从中间插入
arr.splice(从哪里插入，0，数据） - 从数组的中间删除数据
arr.splice(从哪里开始删除，删除多少个) - 从数组的中间替换数据
arr.splice(从哪里开始，总共替换几个，替换的数据)
总结： arr.splice(从哪里开始，操作多少个，新的数据)
添加：操作0个
修改：操作修改个数（替换掉）
删除：没有新的数据
数组的方法:更多可以参考mdn
arr.forEach(function(item,index){})
arr.sort(function(a,b){
return a-b;
})
String内置对象
split 方法使用指定的分割字符串将一个String对象分割成子字符串数组
常用： String —array str.split(’,’)
arrary - string arr.join(’,’)
str.indexOf(‘a’) // 返回第一个a 出现的索引位置，没有则返回 -1
slice 用来提取指定位置的字符串
var str = '12345'
var newStr = str.slice(1)
console.log(newStr) // '2345'
```
暂时基础完毕，后续再补充
扫一扫
1541
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
