JavaScript简介
ECMAScript
ECMAScript是由ECMA国际（原欧洲计算机制造商协会)进行标准化的一门编程语言，它规定了JS的语法核心。
文档: https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/JavaScript_technologies_overview
- 执行过程：
渲染引擎解析HTML + CSS ; JS引擎解析JS代码
JS引擎从上向下逐行解释每—句源码，将源码解析为机器语言，再去执行
JS核心功能之一是控制html标签
JavaScript书写位置
- JS有三种书写位置∶
行内式: 将JS代码写在以on开头的属性中
内嵌式: 将JS代码写在script标签中
外链式: 将JS代码写在一个独立的js文件中，再用script标签引入- 案例：
行内式: <button οnclick= “alert(‘我被点了一下’)”>点我</button>
内嵌式: <script>alert(“Hi,我是一个警告框”)</script>
script标签可以写在html文件的head和body中，推荐写在body的最下面
外链式: <script src=“slider.js”></script>- 使用频率：
外链式:维护性高、可缓存(加载一次)、扩展性复用性高(推荐)
内嵌式:比较常用，一般写在body的最下面
行内式:简单直接，但是不能写大量代码，大量代码会导致可读性变差，所以比较少用
JavaScript基础语法
变量和数据类型
- JS是一种弱类型语言，声明变量时不需要指定数据类型
JS声明变量的关键词var
示例: var username = “root”;- JS把数据类型分为两类∶
简单数据类型(Number, String, Boolean, Undefined,Null)
Number: 数值型（整型、浮点型), 默认值为0
Boolean: 布尔型( true、false ), 默认值为false
String: 字符串型, 默认值为"" | ‘’
Undefined: 声明了变量但是没有赋值; var a;默认值为undefined
Null: 空，var a = null;默认值为null
注意点: JS变量的命名规则和Java—样
变量的数据类型和上下文有关，变量中保存了什么数据变量的数据类型就是什么
typeof 可用来获取检测变量的数据类型
NaN ( Not a Number ) :代表一个非数值
isNaN:用来判断—个变量是否为非数字的类型，返回true或者false
复杂数据类型(Object)(数组、对象、函数)
简单数据类型的数据转换
- 将其他类型转换为字符串
toString(): var flag = true; flag.toString()
String(): var num= 10; String(num)
+号拼接: var PI = 3.14; PI + "- 将其他类型转换为数值型
正常情况下∶将数值型字符串转为数值型( "123"“3.1415”,… )
parseInt ( ): 将数值型字符串转为整型
注：parseInt ( )转浮点型字符串时只保留整数，parseInt (‘3.7’); //结果为3
parseFloat ( ): 将数值型字符串转为浮点型
Number ( ): 将字符串转为数值型
隐式转换: - * /运算能够将数值型字符串转换为数值型- 将其他类型转换为布尔型
非空字符串和数值型转为true
空字符串、0转为false
其他转为false
运算符
- 算术运算符
+: 加
10 + 20= 30
-: 减
100 - 10 = 90
*: 乘
8* 5 = 40
/: 除
60/ 2 = 30
%: 求余
7 %2= 1- 自增和自减运算符
自增: ++，例如: num++ ++num
自减: – ，例如: num-- \ --num
注: 运算符在变量前面优先级高，运算符在变量后面优先级比赋值运算符还低- 比较运算符
>: 大于
案例: 2 > 10, 结果false
<: 小于
案例: 10 < 8, 结果false
>=: 大于等于
案例: 8>= 6, 结果true
<=: 小于等于
案例: 8<= 8, true
==: 判断相等，值相等
案例: 8 == ‘8’, 结果true
!=: 不等
案例: 8 != 6, 结果true
===: 全等，值和类型都相等
案例: 8 === ‘8’, 结果false
!==: 不全等
案例: 8 !== ‘8’, 结果true- 逻辑运算符
&&: 逻辑与，简称与，and
案例: true && false = false; true && true = true
ll: 逻辑或，简称或，or
true || false = true; true || true = true; false || false = false
!: 逻辑非，简称非，not
! true = false; ! false = true- 赋值运算符
=: 直接为变量赋值
案例: var str = ‘齐天大圣’
+=、-=: 在原变量基础上进行加减运算后，将结果重新复制给变量
案例: var num = 10; num += 1; 等价于num = num + 1
*=、/=、%=: 在原变量基础上进行乘除求余运算后，将结果重新复制给变量
案例: var num = 10; num *= 3; 等价于num = num * 3- 运算符优先级
- 小括号, ()
- 一元运算符, ＋＋、–、!
- 算术运算符, 先* / %后+ -
- 比较运算符, >、>=、<=、<
- 相等运算符, ==、!=、…
- 逻辑运算符, 先&&、后||
- 赋值运算符, =、+=、 -=、 *=、/=、%=
流程控制
- 目的:让程序按照我们设计好的逻辑来执行
流程控制主要有三种结构，分别是顺序结构、分支结构和循环结构，这三种结构代表三种代码执行的顺序- 分支结构
代码在由上到下执行的过程中，根据不同的条件，执行不同的路径代码得到不同的结果。
if…else语句结构
switch 语句结构
三元运算符
判断表达式?值1∶值2;
当判断表达式的结果为true时，得到值1;反之得到值2
值1和值2可以是另一个表达式- 循环结构
while 循环、for 循环、do … while循环
循环必须有一个结束点，否则就变为死循环
continue:退出本次（当前次的循环）继续执行剩余次数循环
break:退出整个循环
数组
- 数组:在一个变量中保存多个数据
数组的单元可以存放任意类型的数据
创建数组有两种方式:数组字面量和new关键词
单元之间使用，进行分隔- 数组的创建
方式一︰数组字面量(最常用), var arr1 = [1, 2, 3];
方式二: new Array, var arr2 = new Array(1, 2, 3);
数组的单元可以存放任意类型的数据var arr3 = [1, "比亚迪’, ‘汉’, true];
遍历数组
var stars =['迪丽热巴', '古力娜扎', '马尔扎哈'];
for (var i = 0; i < stars.length; i++){
console.log(stars[i])
}
var stars =['迪丽热巴', '古力娜扎', '马尔扎哈'];
stars.forEach(function (item, index){
// item :每次循环的单元值
// index :每次循环的单元索引
console.log(item, index)
})
函数
- 函数︰就是封装了一段可被重复调用执行的代码块。
优点:一次编写，随处调用。
js中的函数和Java中的方法非常类似
js中在调用函数的时候不需要实例化对象，可直接调用- JS函数︰
function函数名(形参1，形参2,…){
程序块;
return xxx;
}
变量作用域
- 全局作用域: 在函数体外声明的变量，在整个script标签范围内都有效
局部作用域: 在函数体内声明的变量，只在函数体内有效
作用域链, 全局变量在嵌套函数中也有效。
其它函数声明方式
- 字面量方式: var 函数名= function(形参1，形参2，…){
程序块;
return返回值;
}
匿名函数: function(形参1，形参2，.….){
程序块;
return返回值;
}
自调用函数:
(function(形参1，形参2，…) {程序块;
return返回值;
})(实参1,实参2)
JavaScript中的对象
- 在JavaScript中，对象是一组无序的相关属性和方法的集合，所有的事物都是对象，例如字符串、数值、数组、函数等
创建对象有三种方式: 字面量、构造函数、new Object()- 字面量:
var obj = {
key: value,
key: value,
…
}
key(键)︰相当于属性名
value(值):相当于属性值，可以是任意类型的值（数值型、字符串型、布尔型，函数等)
字面量声明的对象不需要实例化
调用属性︰对象名.key, (例如:Star.name)
调用属性︰对象名[key], (例如:Star[“name”])
调用方法︰对象名.key(), (例如:Star.sayHi())- 构造函数: 是—种特殊的函数，主要用来初始化对象
function 构造函数名(形参1,形参2,形参3) {
this.属性名1 = 参数1;
this.属性名2 = 参数2;
this.属性名3 = 参数3;
this.方法名 = 函数体;
}- new Object(): Object是一个特殊的构造函数，可以直接使用new进行实例化，实例化完成后再向对象内添加属性和方法
// 1. 使用 Object 实例化对象
var obj = new Object();
// 2. 向对象中添加属性和方法
obj.name = ‘zs’;
obj.age = 20;
obj.sayHi = function () {
console.log(‘大家好，我叫’ + obj.name + ‘,今年’ + obj.age + ‘岁’);
}- 遍历对象
for…in语句用于对数组或者对象的属性进行循环操作
for (var k in obj){
//k保存属性名
console.log(k);
// obj[k]是属性值
console.log(obj[k]);
}
内置对象
- 内置对象就是JS本身提供的对象
JavaScript提供了多个内置对象:Math、Date 等
MDN: https://developer.mozilla.org/zh-CN/- Math对象:
Math.floor(): 向下取整
Math.ceil(): 向上取整
Math.round(): 四舍五入
Math.random(): 获取范围在[0,1)内的随机值- Date对象:
Date对象用来处理日期和时间
获取当前时间: var now = new Date(); //(格林威治时间)
获取指定时间的日期对象: var future = new Date(‘2050/5/1’);
日期格式化:
getFullYear(): 获取四位年
getMonth(): 获取月份（0-11)
getDate(): 获取日(1-31)
getHours(): 获取小时(0-23)
getMinutes(): 获取分钟(0-59)
getSeconds(): 获取秒钟(0-59)
时间戳:
获取时间戳（ 1970.01.01 00:00:00 )
JavaScript中的时间戳是毫秒数（比秒多了三位)
JavaScript获取时间戳有三种方法:
var date = new Date();
date.valueOf()
date.getTime()
var now = Date.now();- 数组对象
push(a,b,…): 向数组的末尾添加一个或更多元素，并返回新的长度
pop(): 删除并返回数组的最后一个元素
unshift(): 向数组的开头添加一个或更多元素，并返回新的长度
shift(): 删除并返回数组的第一个元素
这些方法会修改数组本身。
join(): 把数组的所有元素放入一个字符串，元素通过指定的分隔符进行分隔，参数为字符串形式的分隔符
splice(): 删除元素（并向数组添加新元素), 第一个参数为开始删除的元素下标，第二个参数为删除的元素数量，第三个参数（可选）为在删除元素的位置新增的元素- 字符串对象
charAt(): 返回在指定位置的字符
indexOf() / lastIndexOf(): 找出指定字符串第一次/最后一次出现的索引
slice(截取的起点元素的下标, 重点元素的下标（不包括, 可选参数）) / substr(截取的起点元素的下标, 截取的长度（可选参数）): 截取字符串
split(): 把字符串分割为数组，参数为字符串形式的分隔符
toLowerCase() / toUpperCase(): 转换为小写字母\转换为大写字母
扫一扫
1724
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
