JavaScript基础学习目录
Posted zhutiancheng
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了JavaScript基础学习目录相关的知识,希望对你有一定的参考价值。
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
12parseInt(‘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);
|
1.日期类Date
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);
|
2.Math数学对象
- Math.ceil(数值) 向上取整
- Math.floor(数值) 向下取整
- Math.round(数值) 把数四舍五入为最接近的整数
- Math.min(数值1,数值2) 返回最小值
- Math.max(数值1,数值2) 返回最大值
- Math.random() 获得0-1之间的随机数
3.常见的其他函数
在数据传输流程中,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既能执行的表达式,也能执行代码
4.URI转义
1
2
3
4
5
6
|
decodeURI() 解码URI
decodeURIComponent() 解码URI中的组件部分
encodeURI() 编码URI
encodeURIComponent() 编码URI中的组件部分
escape() 对字符串进行转义
unescape() 对字符串进行解码
|
javascript中的this有点类似于Python中的self
即哪个对象调用当前的方法或属性,那此时this就是哪个对象,但在js中this的指向总共分为三种:
1.this指向window
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();
|
2.this指向元素节点对象
1
2
3
4
|
var mydiv = document.getElementById(‘info‘);
mydiv.onclick = function(){
console.log(this.innerText);
};
|
3.this指向当前对象
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();
|
以上是关于JavaScript基础学习目录的主要内容,如果未能解决你的问题,请参考以下文章