文章目录
JavaScript 概述
1.1 JavaScript 是什么
- 运行环境:是一种运行在客户端(浏览器)的脚本语言。
- 解释性脚本语言:不需要编译,一行一行解析,解析一行执行一行。
- 功能:主要增加页面的交互效果。
- 面对对象和基于事件驱动的脚本语言。
- 是一种弱类型语言。
- JS区分大小写。
1.2 JavaScript 的组成
1.3 BOM(浏览器对象模型)
1.4 DOM(文档对象模型)
JavaScript 基础
2.1 JavaScript 的 使用
2.1.1 内嵌使用
JS代码写在script标签内,script标签可以写在html的任意位置
<head>
<!-- 可以写在head中 -->
<!-- 如果需要在网页预处理之前运行的脚本,写在head中 -->
<script>
script标签中遵循是JS的语法规范,不适用HTML的语法规范。
比如在script标签里面使用html标签是错误的
</script>
</head>
<body>
<!-- 可以写在body中 -->
<!-- 如果网页加载完成后才运行的脚本,写在body的最后面 -->
<script></script>
</body>
2.1.2 外部使用
<!-- 如果引入的是外部的JS文件,script标签之内的代码是无效的,一般不允许写 -->
<script src="js/index.js">
// 不要在引入外部文件的script标签内写代码,是无效的
</script>
在开发中推荐使用该方法
2.1.3 标签指定属性
<body>
<button onclick="alert('点我干嘛')"></button>
<!-- 超链接不会跳转而是弹出警告框显示括号里的内容 -->
<a href="javascript:alert('点我干嘛')">我是一个超链接</a>
</body>
2.2 JavaScript 的 Hello world
<body>
<script>
//alert() 用来在窗口弹出一个警告框
alert("Hello World");
//console.log() 用来在控制台输出一个日志
console.log("Hello World");
//document.write() 在当前页面中输出一个内容
document.write("Hello World");
</script>
</body>
document是文档的意思,在我们的网页里,一个网页就是一个文档,一个网页就是一个document,所以这里表示当前网页。write表示写,组合起来就是在当前页面写
效果:
2.3 JavaScript 基本语法
- JS中每一个语句都应该以分号(;)结尾
- 在JS中有自动添加分号机制,所以即使不写也不会报错(有可能报错)
- JS严格区分大小写
- JS会忽略多个空格和换行,所以我们可以通过空格和换行来对我们的代码进行格式化
2.3.1 注释
单行注释
双斜杠之前无效 // 只在双斜杠之后生效
跨行无效
多行注释
/*
多行注释
通过注释可以对代码进行注释说明
也可以禁止一些代码的执行
*/
2.3.2 字面量和变量
- 字面量
- 字面量就表示的是一个值,它所表示的意思就是它的字面意思
- 比如:1,2,3,“hello”,true …
- 字面量可以在 js 中直接使用,但是通常不会这么做 - 变量
- 可以用来存储字面量,一个变量可以存储任意类型的字面量
- 我们一般都是通过变量去存储字面量,而不是直接使用字面量
1.声明没有赋值
var a; //声明了一个变量
//这个时候的a的没有值的
console.log(a);
//undefined
2.没有声明变量
console.log(a);
//这个时候就会报错 a is not defined 这个a没有定义
1.变量使用步骤:
//第一步:利用var定义全局变量(会自动添加全局window对象的属性)
var a; // 创建一个变量
//var a,b,c,d; 可同时创建多个变量
//第二步:给变量赋值(初始化变量)
a = 1; // 为变量赋值
//var a=1,b=2,c=3,d=4; 可同时多个变量赋值
//第三步:使用变量
console.log(a); // 打印 a 这个变量
// 1
2.JS是一个动态类型的语言 变量是没有类型概念的
var a;
a = 1;
console.log(a); // 1
a = "哈哈"; // 字符串哈哈把1给覆盖了
console.log(a); // 哈哈
变量命名规范
- 变量可以使用短名称(比如 x和 y),也可以使用描述性更好的名称(比如 age, sum, totalvolume)
- 变量必须以字母开头
- 变量也能以 $ 和 _ 符号开头(不过我们不推荐这么做)
- 变量名称对大小写敏感(y 和 Y 是不同的变量)
- 不能为关键字
- 驼峰命名法: 第一个单词首字母小写, 后面的单词首字母大写(varAgeShu 或 var_age_shu)
//在开发中我们一般声明和赋值同时进行
var a = 33;
console.log(a);
// 33
2.3.3 标识符
所谓的标识符,就是指变量、函数、属性的名字,或者函数的参数。标识符可以是按照下列格式规则组合起来的一个或多个字符:
- 第一个字符必需是一个字母或下划线( _ )或一个美元符号($)
- 其他字符可以是字母、下划线、美元符号或数字。
- 也一样遵循驼峰命名法
例子:
正确:abc_$123 abc123 $123
错误:123 abc
不能把关键字、保留字、true、false、null作为标识符,如:var true = 1;
2.3.4 数据类型
基本数据类型
- 字符串(string)
- 数值(number)
- 布尔值(Boolean)
- 空值(null)
- 未定义(undefined)
复杂数据类型
- object
字符串(string)
JS中的字符串由双引号(" ")或单引号( ’ ’ )表示,双引号开头必需双引号结尾,单引号开头单引号结尾。
var str = "hello"; //双引号写法
var name = '张三'; //单引号写法
var name = '李四"; //语法错误(左右引号必需匹配)
模板字符串(``)
- 使用反单引号(Tab键上面,按键1的前面)来创建模板
- 特点:
1.可以换行,并保留字符串中的格式
2.可以直接嵌入变量
特点1:
var a = ` hello
hello
hello
hello`;
特点2:
var name = "张三";
var str = `我好喜欢${name},因为他好帅!`;
任何字符串的长度都可以使用 length 属性获取
var a = "This is JS";
console.log(a.length); // 输出10; (空格也算)
在JS中我们使用反斜杠( \ )作为转义字符
字面量 | 含义 |
---|---|
\n | 换行 |
\t | Tab(制表) |
\b | 退格 |
\r | 回车 |
\f | 进纸 |
\ \ | 斜杠 |
’ | 单引号 |
" | 双引号 |
数值(number)
在JS中,所有数值包含整数和浮点数(小数)都属于number 类型
var num1 = 10;
var num2 = 3.5;
var num3 = 10;
var num4 ="10";
console.log(num3); //10
console.log(num4); //10
两个输出都是10,但是他们的类型不一样
/*
* typeof 运算符
* -用来检查一个值的类型
* -检查一个字符串时,会返回一个string
* -检查一个数值时,会返回一个number
* -检查一个布尔时,会返回一个boolean
* -检查一个null时,会返回 "object"
* -检查一个undefined时,会返回一个 "undefined"
*/
console.log(typeof num3); // number
console.log(typeof num4); // string
在JS中可以确保大部分的整数运算得到一个精准的结果
var num5 = 100 + 10;
console.log(num5); // 110
//如果运算的数值太大,就得不到精准的结果,会使用科学计数法
var num6 = 1254658456542565256546+10;
console.log(num6); //1.2546584565425654e+21
超过了JS的运算那么会得到一个 Infinity(正无穷)或-Infinity(负无穷),该值无法继续参与下一次的运算。
var num6 = Infinity; // 可以给变量直接赋值Infinity
console.log(typeof num6); // number Infinity也是number类型
在JS中,小数运算有可能得到一个不精准的结果
var num7 = 0.1 + 0.2;
consolelog(num7); //0.30000000000000004
所以,在JS中不要直接对精度要求特别高的运算(尤其是涉及到钱的),尽量放在后台算。
var num9 = 10 - "hello";
console.log(num9); // NaN
//NaN(Not a Number)非数值,避免出现。
var num10 = NaN;
console.log(typeof num10); //number
布尔值(Boolean)
布尔值用来进行逻辑判断
// 布尔值只有两个值:true(真)和false(假)
var a = true;
var b = false;
conso.log(a); //true
conso.log(b); //false
conso.log(typeof a); //boolean
//使用typeof检查一个布尔值后返回 boolean
null
null 通常表示一个空的对象,一个不存在的东西
null 类型只有一个值 就是 null
//使用typeof检查一个null后返回 "object"
var a = null;
console.log(typeof a); // "object"
undefined
表示未定义,当我们定义一个变量但是不赋值是它就是undefined。
var a;
console.log(a); // undefined
console.log(typeof a); // "undefined"
//使用typeof检查一个undefined后返回 "undefined"
当你想把一个值设为空时
var a = null; //可以这样使用
var a = undefined; //不要这样做
var a = NaN; //不要这样做