web前端开发：JavaScript网页脚本语言
JavaScript网页脚本语言
JavaScript是一种完整的网页脚本语言，有自己独立的语法，可以完成复杂的程序逻辑，而HTML和CSS仅仅是标记语言，不具备编程语言的程序逻辑。
-
JavaScript的作用
JavaScript主要负责网页的各式各样的动态功能，因此可以为用户提供更流畅美观的页面浏览效果，以及添加页面交互行为，给用户更好的视觉和使用体验。
-
JavaScript的工作原理
JavaScript的工作原理是通过在HTML网页中直接嵌入JS脚本，可以实现相应浏览器时间，读写HTML元素内容，更改HTML元素样式等功能。
一、JavaScript简介
JavaScript与Java没有关系，JavaScript是一门前端工程师的编程语言，但是它本身有很多逻辑错误
Brendan Eich设计JavaScript的思路
（1）借鉴C语言的基本语法；
（2）借鉴Java语言的数据类型和内存管理；
（3）借鉴Scheme语言，将函数提升到"第一等公民"（first class）的地位；
（4）借鉴Self语言，使用基于原型（prototype）的继承机制。
- JavaScript的组成
ECMAScript，描述了该语言的语法和基本对象。
文档对象模型（DOM），描述处理网页内容的方法和接口。
浏览器对象模型（BOM），描述与浏览器进行交互的方法和接口二、JS基础
1.注释语法
- 单行注释
// 单行注释
- 多行注释
/*多行注释*/
2.引入JS的方式
（1）head内script标签内编写
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
prompt('天气很冷','多喝热水')
</script>
</head>
<body>
</body>
</html>
（2）head内script标签src属性引入外部JS资源
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js.js"></script>
</head>
<body>
</body>
</html>
- js.js
prompt('天气很冷','多喝热水')
（3）body内最底部通过script标签src属性引入外部js资源（最常用）
由于代码从上而下运行，操作js代码一定要等待标签加载完毕次执行才可以正常运行，js代码则要放在最下面
3.结束符号
JS的结束符号是分号;，也可以不写
三、变量与常量
JS代码的IDE
1.pycharm中创建JS文件，或者在html文件中编写js代码（适合编写复杂的JS代码）
2.浏览器的console中编写JS代码
1.JS中声明变量需要的关键字
var
// 声明的时候定义变量
var username = 'jason'
// 先声明后定义
var name
name='qiuqiu'
'qiuqiu'
name
'qiuqiu'
-
letlet是ECMA6新语法，用法类似于var可以在局部定义变量不影响全局，用于声明变量（声明的变量属于块级作用域），流程控制语句的{}就是块级作用域。
var n = 999
for (let n=0;n<10;n++){
console.log(n)
}
VM741:1 0
VM741:1 1
VM741:1 2
VM741:1 3
VM741:1 4
VM741:1 5
VM741:1 6
VM741:1 7
VM741:1 8
VM741:1 9
n
999
python中，for循环中使用的变量名，会在全局中生效
2.声明常量的关键字
声明常量使用关键字const
const p = 3.14
pageXOffset
0
p
3.14
四、JS中的基本数据类型
JS是动态语言：变量中可以存储数值类型、字符类型的数据，从而根据存储内容的类型不同，来动态决定自己的类型
- 在JS中查看数据的基本数据类型
typeof + 数据
1.数值类型Number
在JS中整型和浮点型都属于Number，并没有细分
- 转换整型
parseInt
parseInt('456.56')
456
- 转成浮点型
parseFloat
parseFloat('456.56')
456.56
- 数值类型
NaN
NaN也属于数值类型，意思是：不是一个数字Not A Number
2.字符类型String
（1）类型
- 单引号
'duoduo'
- 双引号
"球球"
- 模版字符串(类似于python中的格式化输出)
let name1=`duoduo`
let age1=18
let desc=`my name is${name1} my age is ${age1}`
desc
'my name isduoduo my age is 18'
字符串拼接在js中推荐使用
+ 号，虽然在python中使用+号底层效率较低，但是在例如JS的其他语言中+ 号底层的拼接效率较高
（2）内置方法
| 方法 | 说明 |
|---|---|
.length |
返回长度 |
.trim() |
移除空白 |
.trimLeft() |
移除左边的空白 |
.trimRight() |
移除右边的空白 |
.charAt(n) |
返回第n个字符 |
.concat(value, ...) |
拼接,拼接字符串通常使用“+”号 |
.indexOf(substring, start) |
子序列位置 |
.substring(from, to) |
根据索引获取子序列 |
.slice(start, end) |
切片 |
.toLowerCase() |
小写 |
.toUpperCase() |
大写 |
.split(delimiter, limit) |
分割 |
let s1 = ' mofei定律998 '
s1.length
16
s1.trim()
'mofei定律998'
s1.charAt(9)
'律'
s1.concat('多喝热水')
' mofei定律998 多喝热水'
s1+'多喝热水'
' mofei定律998 多喝热水'
s1.indexOf('律')
9
s1.slice(5,9)
'fei定'
s1.toLowerCase()
' mofei定律998 '
s1.toUpperCase()
' MOFEI定律998 '
s1.split('9',1)
[' mofei定律']0: " mofei定律"length: 1[[Prototype]]: Array(0)
3.布尔类型Boolean
在JS里面的布尔值为纯小写
var a = true;
var b = false;
-
JS中布尔值为false的数据类型
空字符串、 0 、 null、 undefined、 NaN
Boolean('')
false
Boolean(0)
false
Boolean(null)
false
Boolean(undefined)
false
Boolean(NaN)
false
空数组的布尔值为true
Boolean([])
true
4.null和undefined
| 名称 | 含义 |
|---|---|
null |
表示值为空--曾经拥有过 |
undefined |
表示没有定义--从来没有过 |
null表示值为空，一般在需要指定或者清空一个变量时才会使用，如
name=null
-
undefined表示当声明一个变量但未初始化时，该变量的默认值是undefined或 函数无返回值的时候，也返回
undefined
5.对象object
JavaScript 中的所有事物都是对象：字符串、数值、数组、函数...此外，JavaScript 允许自定义对象。
JavaScript 提供多个内建对象，比如 String、Date、Array 等等。
对象只是带有属性和方法的特殊数据类型
（1）对象之数组（Array）
数组对象的作用是使用单独的变量名来储存一系列的值，类似于python中的列表
- 数组的方法
| 方法 | 作用 |
|---|---|
.length |
数组的大小 |
.push(ele) |
尾部追加元素 |
.pop() |
获取尾部的元素 |
| .unshift(ele)`` | 头部插入元素 |
.shift() |
头部移除元素 |
.slice(start, end) |
切片 |
.reverse() |
反转 |
.join(seq) |
将数组元素连接成字符串 |
.concat(val, ...) |
连接数组 |
.sort() |
排序 |
.forEach() |
将数组的每个元素传递给回调函数 |
.splice() |
删除元素，并向数组添加新元素。 |
map() |
返回一个数组元素调用函数处理后的值的新数组 |
let ar1=[11,22,33,'duoduo']
ar1[2] //按索引取值
33
ar1.length
4
ar1.push(ar1)
5
ar1.pop()
(4) [11, 22, 33, 'duoduo']0: 111: 222: 333: "duoduo"length: 4[[Prototype]]: Array(0)
ar1.unshift(ar1)
5
ar1.shift(0)
(4) [11, 22, 33, 'duoduo']
ar1.slice(1,3)
(2) [22, 33]
ar1.reverse()
(4) ['duoduo', 33, 22, 11]
ar1.join('|')
'duoduo|33|22|11'
ar1.concat('球球')
(5) ['duoduo', 33, 22, 11, '球球']
ar1.sort()
(4) [11, 22, 33, 'duoduo']
ar1.splice(1,'qiuqiu')
[]length: 0[[Prototype]]: Array(0)
map()
ar2.map(function(value,index,arr){
return value + 1
})
[23, 34, 45, 56]
（2）对象之自定义对象object
类似于python 的字典
//定义自定义对象
let d1={'name':'duoduo','pwd':123}
//查看 d1类型
typeof d1
'object'
// 获取值可以索引也可以直接点
d1.name
'duoduo'
d1['name']
'duoduo'
//直接通过点的方法新增键值对
d1.gender = 'male'
'male'
d1
{name: 'duoduo', pwd: 123, gender: 'male'}
五、运算符
1.算数运算符
| 符号 | 作用 |
|---|---|
| + | 加 |
| - | 减 |
| * | 乘 |
| / | 除 |
| % | 去余数 |
| ++ | 自增1 |
| -- | 子减1 |
var x=10;
var res1=x++; 加号在后面 先赋值后自增
var res2=++x; 加号在前面 先自增后赋值
2.比较运算符
!=(值不等 弱)
==(值相等 弱)
===(值相等 强)
!==(值不等 强)
3.逻辑运算符
| 逻辑运算符 | 含义 |
|---|---|
&& |
与 |
| ` | |
! |
非 |
六、流程控制
1.条件语句
（1）单if分支
if (条件){
条件成立执行的代码
}
（2）if...else分支
if(条件){
条件成立执行的代码
}else{
条件不成立执行的代码
}
（3）if...else if...else分支
if(条件1){
条件1成立执行的代码
}else if(条件2){
条件1不成立条件2执行的代码
}
else{
条件1和2都不成立执行的代码
}
var d=new Date()
if (d.getDay()==0){
alert("今天周末")
} else if (d.getDay()==6 ) {
alert("今天周末")
} else {
alert("今天工作日")
}
（4）如果分支结构中else if很多还可以考虑使用switch语法
switch(条件){
case 条件1:
条件1成立执行的代码;
break;
case 条件2:
条件2成立执行的代码;
break;
case 条件3:
条件3成立执行的代码;
break;
case 条件4:
条件4成立执行的代码;
break;
default:
条件都不满足执行的代码
}
let d3=new Date()
switch (d3) {
case d3 ==0:
console.log("今天是周末")
break;
case d3 ==6:
console.log("今天是周六")
break;
default:
console.log("工作日")
}
工作日
break结束case后条件的语句，如果没有break会基于某个case一直执行下去
2.循环语句
（1）for循环
for(起始条件;循环条件;条件处理){
循环体代码
}
for(let i=0;i<10;i++){
console.log(i)
}
let dd = {'name':'jason','age':18}
for(let k in dd){
console.log(k)
}
（2）while循环
while(循环条件){
循环体代码
}
七、函数
1.语法
function 函数名(形参数){
// 函数注释
函数体代码
return 返回值
}
2.函数类型
- 无参函数
function f1() {
console.log('你好')
};
f1()
----
你好
- 有参函数
function f2(a, b) {
console.log(arguments);
console.log(arguments.length);
console.log(arguments[0],argument[1]);
console.log(a, b);
};
-
匿名函数
和python中的匿名函数
lambda相似，不单独使用，配合其他好函数一起使用
var s1 = function(a, b){
return a + b;
}
- 箭头函数
var f=v=>v;
// 完整写法
var f=function(v){
return v
}
3.函数中的注意事项
（1）JS中函数的形参与实参可以不对应，传少了就是显示underfined
（2） 函数中的arguments，对于一个普通的函数，函数内部设置了一个arguments对象，当用于接收实参个数不确定时，函数中的arguments对象会自动接收多余参数
function fn(){
console.log(arguments)
}
fn(1,2,3)
（3）JS中函数的返回值只会返回位于末尾一个，当需要多个返回值时，需要我们自己将其处理成一个整体
八、内置对象
1.时间对象
// 通过new方法产生时间对象
var d = new Date();
| 时间对象的方法 | 含义 |
|---|---|
.getDate() |
获取日 |
.getDay () |
获取星期 |
.getMonth () |
获取月（0-11） |
.getFullYear () |
获取完整年份 |
.getYear () |
获取年 |
.getHours () |
获取小时 |
.getMinutes () |
获取分钟 |
.getSeconds () |
获取秒 |
.getMilliseconds () |
获取毫秒 |
.getTime () |
返回累计毫秒数(从1970/1/1午夜) |
2.JSON对象
- 先定义一个自定义对象
let dd = {name:'duoduo',pwd:123}
-
序列化
JSON.stringify序列化的结果需要用变量名来接收
JSON.stringify(dd)
'{"name":"duoduo","pwd":123}'
- 反序列化
JSON.parse
JSON.parse(j1)
3.正则对象RegExp
- 定义正则的方式一：
var reg1 = new RegExp("^[a-zA-Z][a-zA-Z0-9]{5,11}");
- 定义正则的方式二：
var reg2 = /^[a-zA-Z][a-zA-Z0-9]{5,9}$/;
编写代码，将当前日期按“2017-12-27 11:11 星期三”格式输出
function time_string () {
const WEEK_NUM = {
0: "星期日",
1: "星期一",
2: "星期二",
3: "星期三",
4: "星期四",
5: "星期五",
6: "星期六",
}
// 对时间对象t进行操作
let t = new Date() //产生一个时间对象t
let t_year = t.getFullYear();
let t_month = t.getMonth();
let t_day = t.getDate();
let t_hour = t.getHours();
let t_minute = t.getMinutes();
let week = WEEK_NUM[t.getDay()];
let t_string= `
${t_year}-${t_month}-${t_day} ${t_hour}:${t_minute} ${week}
`;
console.log(t_string)
}
