JavaScript学习笔记

浏览器执行JS步骤

  • 渲染引擎：用来解析HTML和CSS,俗称内核，比如chrome的浏览器的bink，老版本的webkt
  • JS引擎：也称为JS解释器。用来读取网页中的JavaScript代码，对其处理后运行，比如chrome的V8

JS的组成

  • JavaScript语法
  • DOM:页面文档对象模型
  • BOM:浏览器对象模型

JS的书写位置

直接书写在元素的内部

1
2
3
4
5
6
7
8
9
10
11
12
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>初始引言</title>
</head>
<body>
    <!-- 行内JS方法，写道元素内部 -->
     <input type="button" value="点击我" onclick="alert('铛铛铛铛~我是一个弹窗')">
</body>
</html>

内嵌方法写在头部,

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>初始引言</title>
    <!-- 内嵌方法,写在这里-->
     <script>
        alert('铛铛铛铛~我是一个弹窗');
     </script>
</head>
<body>
</body>
</html>

需要先新建一个.js文件，文件内容为

直接写这一句就可以了

1
alter('这是一个弹窗')

然后在html文件中直接引用

1
2
3
4
5
6
7
8
9
10
11
12
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>初始引言</title>
     <!-- 外部JS -->
     <script src="filename.js"></script>
</head>
<body>
</body>
</html>

顺带一提，JavaScript中代码行尾不需要加;分号，除非一行要写多个语句需要加分号，例如

语句1;语句2 |||||||||||||||||||||||||||||||||||||||||||||||||||||||最后一句不需要加分号的

注释

在JavaScript语法中，注释还是以html的注释方法一样的

单行注释

1
//注释内容

多行注释

1
2
3
/*
注释内容
*/

输入输出

1
2
3
4
5
6
7
8
9
10
<head>
    <title>输入输出语句</title>
    <script>
        //这是一个输入框
        prompt('请输入你的年龄');
    </script>
</head>
<body>
</body>
</html>

输出结果：

1
2
3
4
5
6
7
8
9
10
<head>
    <title>输入输出语句</title>
    <script>
        //alter弹出警示框
        alert('这是弹出框');
    </script>
</head>
<body>
</body>
</html>

弹出框的结果

1
2
3
4
5
6
7
8
9
10
<head>
    <title>输入输出语句</title>
    <script>
        //输出控制台 是给程序员看到的
        console.log('我是程序员能看到的');
    </script>
</head>
<body>
</body>
</html>

数据类型

javascript的数据类型是动态的，同时也意味着相同的变量可以用作不同的类型

JavaScript 只有一种数字类型。数字可以带小数点，也可以不带

typeof可以用来判断数据类型

1
2
3
4
5
6
7
8
var x=6;    //为数字型，这是官方叫法
var z='嗨' //为字符串型
//例如
typeof "John"                // 返回 string
typeof 3.14                  // 返回 number
typeof false                 // 返回 boolean
typeof [1,2,3,4]             // 返回 object
typeof {name:'John', age:34} // 返回 object

极大或极小的数字可以通过科学（指数）计数法来书写：

1
2
var y=123e5;      // 12300000
var z=123e-5;     // 0.00123

isNaN可以用来判断非数字，并且返回一个值，注意 一定要区分大小写！！

1
conosle.log(isNaN(15));

返回值false

字符串

定义变量，字符串需要用单引号或双引号包裹着

1
var a = '我是字符串'

length

length可以用来检测字符串的长度

1
2
var str ='我是\n字符串'
console.log(str.length)			//输出结果：6

字符串转义符

类似html里面的特殊字符，转义符都是以\开头的，

常用的转义符

转义符 解释说明
\n 换行符，n是newline的意思
\\ 斜杠\
\' ‘ 单引号
\" “ 双引号
\t tab 缩进
\b 空格,b是blank的意思

字符串的拼接

1
2
console.log('这里是字符串1'+'字符串2')
console.log('1+1='+(1+1))

1输出结果：这里是字符串1字符串2

2输出结果：1+1=2

Boolean

布尔型boolean是可以参与计算的，即true为1，false为0，这样在后期进行判断的时候就会很方便

例如：

1
2
3
4
var bool1=true
var bool2=false
console.log(bool1+1)
console.log(bool2+1)

输出结果

1输出结果：2

2输出结果：1

undefined

一个未定义的变量未赋值，就是undefined未定义数据类型

如果手动给一个变量值为undefined，那么他也是未定义的数据类型

例如

1
var a = undefined

输出也是undefined

扩展：

1
2
console.log(a+'pink')   //输出结果是字符串拼接undpinkdefine
console.log(a+1)		//NaN  undefined和数字相加 最后的结果是NaN 表示 not a number不是一个数字

null

空值null

1
2
3
var c=null
console.log(c+'pink')//输出结果为nullpink
console.log(c+1)    // 空置加1结果还是1

数据类型的转换

转为字符串型

方式 说明 案例
toString() 转为字符串 var num=1;alert(num.toString())
String()强制转换 转为字符串 var num=1;alert(String(num))
加号拼接字符串 和字符串拼接的结果都是字符串 var num=1;alert(num+”我是字符串”) 
1
2
3
4
5
6
7
8
9
10
11
12
//转为字符串型    toString
var num=10
var str=num.toString()
console.log(num)
console.log(str)
console.log('我是num'+'变量，用typeof的返回值为'+typeof(num)+'型')
console.log('我是str'+'变量，用typeof的返回值为'+typeof(str)+'型')
//强制转换      String
var num2=8
console.log('我是String方法更改的变量结果，用sypeof检测类型为'+typeof(String(num2))+'型')
//加号拼接转换
console.log(typeof('加号拼接转换'+ num))        //结果string
点击查看控制台输出结果

转换为数字型

方式 说明 案例
parselnt(string)函数 讲string类型转成整数数值型 parselnt(‘78’)
parseFloat(string)函数 讲string类型转成浮点数数值型 parseFloat(‘78.21’)
Number()强制转换函数 讲string类型转换为数值型 Number(‘78.21’)
js隐式转换(- * /) 利用算数运算隐式转换为数值型 ‘12’-0

代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
//数字类型的转换，将字符型转换为数字型
//parseInt 方法
var age=prompt('请输入你的年龄')
console.log(parseInt(age))
console.log(parseInt('3.14'))       //取整，结果为3
console.log(parseInt('120px'))//parseInt功能强大，可以将px像素单位进行转换，会自动将后面的字母去掉
console.log(parseInt('rem120px'))       //结果是NaN，无法转换，主要功能是将数字型，转换为数值型，但是一个为字母就会报错
//parseFloat()  可以将字符型转换为数字型 可以取到小数/浮点数 部分
console.log(parseFloat('3.14'))
console.log(parseInt('120px'))  //120 会去掉px这个单位 和上面功能一样
console.log(parseFloat('rem120px'))  //NaN
//利用Number变量
var str='123'
console.log(Number(str))
console.log(Number('12'))
//利用算术运算 - * / 隐式转换
console.log('16'- 0)
console.log('2'* 2)

转换为布尔型

方式 说明 案例
Boolean()函数 其他类型转成布尔值 Boolean(‘true’)
  • 代表空、否定的值会被转换为false，如”、0、NaN、null、nudefined
  • 其余值都会被转换为true

如：

1
2
3
4
5
6
7
8
9
console.log(Boolean(''));	//false
console.log(Boolean(0));	//false
console.log(Boolean(NaN));	//false
console.log(Boolean(null));	//false
console.log(Boolean(undefined));	//false
console.log(Boolean('小白'));	//true
console.log(Boolean(12));	//true
console.log(Boolean('12'));	//true
console.log(Boolean('你好吗'));	//true

运算符与表达式

运算符的优先级

优先级 运算符 顺序
1 小括号 ()
2 一元运算符 ++ -- !
3 算术运算符 先* / % 后+ -
4 关系运算符 > >= < <=
5 相等运算符 == != === !==
6 逻辑运算符 先&& 后 `
7 赋值运算符 =
8 逗号运算符 ,