JavaScript基础学习目录

Posted zhutiancheng

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了JavaScript基础学习目录相关的知识,希望对你有一定的参考价值。

 


一、JS如何引入及基本语法规范

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变量类型

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);

 


七、常见的模块和常用方法

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() 对字符串进行解码

八、this的指向问题

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。如没有,则不做任何操作
2:函数局部变量,如AO上有,则不做任何操作。如没有,则将此变量赋给AO,并且值为undefined
3:函数声明,如AO上有,则会将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基础学习目录的主要内容,如果未能解决你的问题,请参考以下文章

JavaScript基础学习

HTTP学习目录

HTTP学习目录

JavaScript基础目录

javascript入门经典零基础学习

前端学习 JavaScript基础