1.页面内的script代码书写格式
1 2 3 | <script> code..... </script> |
2.script标签写在页面的哪个位置?
2.1.页面head里和body后都可以写
2.2.一般我们建议写在body之后
3.是否可以引入第三方js文件?
1 | <script type='text/javascript' src='/path/to/js文件'></script> |
4.JS的注释方式
1 2 3 4 5 | // 这个是单行注释 /** 这个是多行注释 **/ |
快捷键:Ctrl + /
5.JS的结束符号,以分号“;”为结束符号,如果没有的话,js引擎会自动加上
命名规范
1.JS的变量名 可以使用 _,数字,字母,$ 组成,且不能以数字开头
2.声明变量使用 var 变量名 来进行声明
1 2 3 4 5 6 7 8 9 | var a = 34; var b = 45; console.log(a+b); var $ = 'jquery' alert($); c = 56; alert(c); |
注意:变量名区分大小写str和Str不是一个变量,也就是js对变量名的大小写是敏感的
js的变量类型主要包括:
数值
字符串
布尔
null
undefined
数组
对象
1) 数值类型
js不区分 整型和浮点型
1 2 3 | var a = 23; var b = 34; console.log(a); |
常用的方法
parseInt(..) 将某值转换成数字, 不成功则NAN
parseFloat(..) 将某值转换成浮点数,不成功则NAN
1 2 | parseInt('3.5') parseFloat('2.3dd') |
2) 字符串类型
1 2 3 4 5 | var a = 'hello' var b = 'world' var str = a + b; console.log(str); |
常用的方法:
obj.length 长度
obj.trim() 移除空白
obj.trimLeft() 移除左侧空白
obj.trimRight() 移除右侧空白
obj.charAt(n) 返回字符串中的第n个字符
obj.concat(value, …) 拼接
obj.indexOf(substring,start) 子序列位置
obj.substring(from, to) 根据索引获取子序列
obj.slice(start, end) 切片
obj.toLowerCase() 小写
obj.toUpperCase() 大写
obj.split(delimiter, limit) 分割
注意:拼接字符串的操作符:”+”
1 2 3 4 5 6 7 8 9 10 11 | console.log(3 + 2 + "hello" + 5 + "world"); ``` **3) 布尔类型** **true和false要求是要小写的** ```javascript var a = true; var b = false; |
4) 数组型
javascript中的数组类似于我们Python中的列表
1 2 | var arr = ['alex','凤姐','苍老师']; console.log(arr[2]); |
常用的方法:
obj.length 数组的大小
obj.push(ele) 尾部追加元素
obj.pop() 尾部获取一个元素
obj.unshift(ele) 头部插入元素
obj.shift() 头部移除元素
obj.slice( ) 切片
obj.reverse( ) 反转
obj.join(sep) 将数组元素连接起来以构建一个字符串
obj.concat(val,..) 连接数组
obj.sort( ) 对数组元素进行排序
此时如果我们想要循环数组中的内容,我们可以这样:
1 2 3 4 5 | var arr = ['alex','凤姐','苍老师']; for(var i = 0; i < arr.length; i++){ console.log(arr[i]); } |
5) 对象型
javascript中的对象类似于我们Python中的字典,json数据格式
1 2 3 | var info = {"name":'alex',"age":73} console.log(info.name); console.log(info['name']); |
此时如果我们想要循环对象中的内容,我们可以这样:
1 2 3 4 | var info = {"name":'alex',"age":73} for(var i in info){ console.log(info[i]); } |
6) null和undefined
1.undefined 表示的是当声明的变量未初始化时,该变量的默认值是 undefined
2.null 表示的是值不存在
两者的区别在于:
undefined 是声明了变量但未对其赋予值
null 则用于表示尚未存在的空值
1) 算数运算符
1 | + - * / % ++ -- |
2) 比较运算符
1 | > >= < <= != == === !== |
=== 比较值和类型
== 比较值
3) 逻辑运算符
1 | && || ! |
4) 赋值运算符
1 | = += -= *= /= |
1)if–else语句
1 2 3 4 5 | if (条件){ 当条件为 true 时执行的代码 }else{ 当条件不为 true 时执行的代码 } |
2)if–else if–else语句
1 2 3 4 5 6 7 | if (条件 1){ 当条件 1 为 true 时执行的代码 }else if (条件 2){ 当条件 2 为 true 时执行的代码 }else{ 当条件 1 和 条件 2 都不为 true 时执行的代码 } |
3)switch语句
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | var day=new Date().getDay(); switch (day){ case 0: x="Today it's Sunday"; break; case 1: x="Today it's Monday"; break; case 2: x="Today it's Tuesday"; break; case 3: x="Today it's Wednesday"; break; default: x="Looking forward to the Weekend"; } |
4)while循环语句
1 2 3 4 | while (i<5){ x=x + "The number is " + i + "<br>"; i++; } |
5) 三元运算符
1 2 3 4 5 | var a = 3; var b = 5; c = a > b ? a : b console.log(c); |
1.函数的定义
注意:javascript中的函数和python的中函数大同小异,唯一不同的是函数的定义方式
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | 1.正常的定义方式 ---- 普通青年 function test(a,b){ return a + b; } 2.匿名函数的定义方式 ---- 2B青年 var sum = function(a, b){ return a + b; } 3.立即调用函数方式 ----- 文艺青年 (function(a, b){ return a + b; })(); |
2.函数的全局变量和局部变量
全局变量:定义在函数外部,并且推荐使用var进行显式声明
局部变量:定义在函数内部,并且必须使用var进行显式声明
1 2 3 4 5 6 7 8 9 10 | // 全局变量 age = 73; function test(){ // 局部变量 var height = 178; // 默认全局变量 leg = 4; } |
3.函数作用域
首先在函数内部查找变量,找不到则到外层函数查找,逐步找到最外层
即window对象,并操作window对象上的属性
1 2 3 4 5 6 | console.log(window.a, window.b); function test(){ var a = "local"; b = "global"; } console.log(window.a, window.b); |
var d = new Date(); 返回当日的日期和时间
getYear() 从 Date 对象返回一个月中的某一天 (1 ~ 31)
getFullYear() 从 Date 对象以四位数字返回年份
getMonth() 从 Date 对象返回月份 (0 ~ 11)
getDate() 从 Date 对象返回一个月中的某一天 (1 ~ 31)
getDay() 从 Date 对象返回一周中的某一天 (0 ~ 6)
getHours() 返回 Date 对象的小时 (0 ~ 23)
getMinutes() 返回 Date 对象的分钟 (0 ~ 59)
getSeconds() 返回 Date 对象的秒数 (0 ~ 59)
案例 — 时钟显示:
1 2 3 4 5 6 7 8 | 当前时间:<input type='text' value='' id='time'/> function change(){ var time = document.getElementById("time"); var d = new Date(); time.value = d; } setInterval(change, 1000); |
Math.ceil(数值) 向上取整
Math.floor(数值) 向下取整
Math.round(数值) 把数四舍五入为最接近的整数
Math.min(数值1,数值2) 返回最小值
Math.max(数值1,数值2) 返回最大值
Math.random() 获得0-1之间的随机数
在数据传输流程中,json是以文本,即字符串的形式传递的,而JS操作的是JSON对象,所以,JSON对象和JSON字符串之间的相互转换是关键,例如:
JSON字符串:
var str1 = '{ “name”: “alex”, “sex”: “feng” }’;
JSON对象:
var str2 = { “name”: “alex”, “sex”: “feng” };
JSON字符串转换成JSON对象:
var obj = JSON.parse(str); // 序列化
JSON对象转换成JSON字符串:
var str = JSON.stringify(obj); // 反序列化
eval
python中的eval执行的是表达式,exec执行的是代码,而js中的eval既能执行的表达式,也能执行代码
1 2 3 4 5 6 | decodeURI() 解码URI decodeURIComponent() 解码URI中的组件部分 encodeURI() 编码URI encodeURIComponent() 编码URI中的组件部分 escape() 对字符串进行转义 unescape() 对字符串进行解码 |
javascript中的this有点类似于Python中的self
即哪个对象调用当前的方法或属性,那此时this就是哪个对象,但在js中this的指向总共分为三种:
1 2 3 4 5 6 7 8 9 10 11 | console.log(this); var a = 10; var b = 20; function f1(){ var a = 100; var b = 200; console.log(this); console.log(this.a); console.log(this.b); } f1(); |
1 2 3 4 | var mydiv = document.getElementById('info'); mydiv.onclick = function(){ console.log(this.innerText); }; |
1 2 3 4 5 6 7 8 9 | var name = 'john'; function run(){ console.log(this.name + ' is running...'); } run(); var jim = {'name':'jim', 'leg':4, 'age':28}; jim.walk = run; jim.walk(); |
js在调用函数的那一瞬间,会先进行词法分析
词法分析的过程:
当函数调用的前一瞬间,先形成一个激活对象,叫Active Object, AO,并会分析以下3个方面的东西:
1:函数参数,如有,则将此参数付给AO上,并且值为undefined。如没有,则不做任何操作
函数内部无论是使用参数,还是使用局部变量,都到AO上找.
2:函数局部变量,如AO上有,则不做任何操作。如没有,则将此变量赋给AO,并且值为undefined
3:函数声明,如AO上有,则会将AO上的对象覆盖。如没有,则不做任何操作
1 2 3 4 5 6 7 8 9 | function t(age) { console.log(age); var age = 99; console.log(age); function age() { } console.log(age); } t(12); |
分析过程:
1、分析参数,有一个参数,形成一个 AO.age=undefined;
2、分析变量声明,有一个 var age, 发现 AO 上面已经有一个 AO.age,因此不做任何处理
3、分析函数声明,有一个 function age(){} 声明, 则把原有的 age 覆盖成 AO.age=function(){};最终,AO上的属性只有一个age,并且值为一个函数声明
注意:函数声明的优先级是最高的,谁都覆盖不了这个值
执行过程
注意:执行过程中所有的值都是从AO对象上去寻找1、执行第一个 console.log(age) 时,此时的 AO.age 是一个函数,所以第一个输出的一个函数
2、这句 var age=99; 是对 AO.age 进行赋值, 此时AO.age=99 ,所以在第二个输出的是 99
3、同理第三个输出的是 99, 因为中间没有改变 age 值的语句了
练习:
1 2 3 4 5 6 7 | var str = "global"; function t(){ console.log(str); var str = "local"; console.log(str); } t(); |
联系客服