目录
- JavaScript网页脚本语言
- 一、JavaScript简介
- 1.注释语法
- 2.引入JS的方式
- （1）head内script标签内编写
- （2）head内script标签src属性引入外部JS资源
- （3）body内最底部通过script标签src属性引入外部js资源（最常用）
- 3.结束符号
- 三、变量与常量
- 1.JS中声明变量需要的关键字
- 2.声明常量的关键字
- 四、JS中的基本数据类型
- 1.数值类型Number
- 2.字符类型String
- （1）类型
- （2）内置方法
- 3.布尔类型Boolean
- 4.null和undefined
- 5.对象object
- （1）对象之数组（Array）
- （2）对象之自定义对象object
- 五、运算符
- 1.算数运算符
- 2.比较运算符
- 3.逻辑运算符
- 六、流程控制
- 1.条件语句
- （1）单if分支
- （2）if...else分支
- （3）if...else if...else分支
- （4）如果分支结构中else if很多还可以考虑使用switch语法
- 2.循环语句
- （1）for循环
- （2）while循环
- 七、函数
- 1.语法
- 2.函数类型
- 3.函数中的注意事项
- 八、内置对象
- 1.时间对象
- 2.JSON对象
- 3.正则对象RegExp
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）内置方法
方法 | 说明 |
| 返回长度 |
| 移除空白 |
| 移除左边的空白 |
| 移除右边的空白 |
| 返回第n个字符 |
| 拼接,拼接字符串通常使用“+”号 |
| 子序列位置 |
| 根据索引获取子序列 |
| 切片 |
| 小写 |
| 大写 |
| 分割 |
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([])
true4.null和undefined
名称 | 含义 |
| 表示值为空--曾经拥有过 |
| 表示没有定义--从来没有过 |
-
null表示值为空，一般在需要指定或者清空一个变量时才会使用，如
name=nullundefined表示当声明一个变量但未初始化时，该变量的默认值是undefined或 函数无返回值的时候，也返回undefined
5.对象object
JavaScript 中的所有事物都是对象：字符串、数值、数组、函数...此外，JavaScript 允许自定义对象。
JavaScript 提供多个内建对象，比如 String、Date、Array 等等。
对象只是带有属性和方法的特殊数据类型
（1）对象之数组（Array）
数组对象的作用是使用单独的变量名来储存一系列的值，类似于python中的列表
- 数组的方法
方法 | 作用 |
| 数组的大小 |
| 尾部追加元素 |
| 获取尾部的元素 |
.unshift(ele)`` | 头部插入元素 |
| 头部移除元素 |
| 切片 |
| 反转 |
| 将数组元素连接成字符串 |
| 连接数组 |
| 排序 |
| 将数组的每个元素传递给回调函数 |
| 删除元素，并向数组添加新元素。 |
| 返回一个数组元素调用函数处理后的值的新数组 |
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();时间对象的方法 | 含义 |
| 获取日 |
| 获取星期 |
| 获取月（0-11） |
| 获取完整年份 |
| 获取年 |
| 获取小时 |
| 获取分钟 |
| 获取秒 |
| 获取毫秒 |
| 返回累计毫秒数(从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)
}
