JavaScript基础
01. JS简介
JavaScript基础分为三个部分:
- ECMAScript:JavaScript 的语法标准。包括变量、表达式、运算符、函数、if语句、for语句等。
- DOM:Document Object Model(文档对象模型),操作页面上的元素的API。比如让盒子移动、变色、改变大小、轮播图等等。
- BOM:Browser Object Model(浏览器对象模型),操作浏览器部分功能的API。通过BOM可以操作浏览器窗口,比如弹框、控制浏览器跳转、获取浏览器分辨率等等。
通俗理解就是:ECMAScript 是 JS 的语法;DOM 和 BOM 浏览器运行环境为 JS提供的API。
JavaScript 的特点
- 特点1:解释型语言
JavaScript 是解释型语言,不需要事先被翻译为机器码;而是边翻译边执行(翻译一行,执行一行)。
- 特点2:单线程
- 特点3:ECMAScript标准
ECMAScript在2015年6月,发布了ECMAScript 6版本(ES6),语言的能力更强(也包含了很多新特性)
02. HelloWorld
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- JS代码需要写到script标签当中 -->
<script>
alert("你好,HelloWorld !") //窗口中弹出警告框
document.write("向body中输出内容") //向body中输出一个内容
console.log("向控制台输出内容")
</script>
</head>
<body>
</body>
</html>
【注意】Javascript代码按从上至下执行,多条语句按顺序先后输出
03. JS编写位置
①<script> </script>标签当中,如上文“02. HelloWorld”所示
②编写到标签、超链接等的属性中
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- JS代码编写到标签的onclick属性中 -->
<button onclick="alert('别点击我!');">
点击我一下!
</button>
<!-- JS代码编写到超链接的herf属性中 -->
<a href="javascript:alert('点击我干嘛!');">你也点击我一下!</a>
</body>
</html>
【注意】οnclick="alert(‘别点击我!’);"中’别点击我!'为单引号,双引号会报错
在JS中使用单引号双引号没有什么区别,当嵌套使用时,错开使用即可,一般建议外部使用双引号,里面使用单引号
③外部声明一个script.html文件,引入该文件
<script src="./02.script.html"></script>
【注意】<script src=“./02.script.html”>
alert(“我是内部的javascript代码”);
</script>
在外部声明的script标签中,再想编写JS代码输出语句无法执行,需要重新声明新的script标签
04. 基本语法
JS中注释:注释中内容不会被执行,但可以在源代码中查看
- 单行注释: // 快捷键:Ctrl + /
- 多行注释: /* */ 快捷键:Shift + Alt + A
【注意】JS中严格区分大小写, Alert( )和alert( )不一样
【注意】JS中每一条语句以分号结尾,如果不写分号,浏览器会自动添加,但是会消耗一些系统资源。有时候浏览器会加错分号,因此在开发中必须加上英文分号,避免出错
【注意】JS中会自动忽略多个空格和换行,可以利用多个空格和换行对代码进行格式化
05. 字面量和变量
字面量:不可改变的值。比如:1,2,3,…,“a”,“b”,“c”…,字面量是可以直接使用的
变量:值可以任意改变。在JS中通常使用var关键字来声明一个变量
06. 标识符
在JS中所有可由我们自主命名的都可以称为标识符
例如:变量名,函数名,属性名
命名要遵循如下规则:
- 可以含有字母,数字,下划线,$
- 标识符不能以数字开头
- 标识符不能是ES中的关键字或保留字 例如:var var = 123 (错误)
- 标识符一般采用驼峰命名法,除首字母外每个单词首字母大写,其余字母小写 例如:xxYyZz
【注意】JS底层保存标识符实际上都是采用Unicde编码,所以理论上讲,所有utf-8都可以作为标识符。(例如: var 锄禾日当午 = 789;但不建议,推荐使用英文)
07. 字符串
JS数据类型是指字面量的类型,一共有6中数据类型:
- String 字符串
- Number 数字
- Boolean 布尔值
- Null 空值
- Undefined 未定义
- Object 对象
其中String,Number,Boolean,Null,Undefined属于基本数据类型,Object属于引用数据类型
String字符串需要用引号引起来,使用双引号或单引号都可以,但不能引号的嵌套使用
在字符串中可以使用\作为转义字符来表示单纯的单引号、双引号、反斜杠等
08. Number
在JS中所有的数值都是Number类型,包括整数和浮点数
JS中表示的数字最大值,Number.MAX_VALUE 1.7976931348623157e+308
JS中表示的最小正数值,Number.MIN_VALUE 5e-324
如果使用Number表示的数字超过了最大值,则会返回Infinity表示正无穷,返回-Infinity表示负无穷
在控制台中输出123与"123"相同,为了区分类型,JS中使用typeof检查数据类型
NAN是一个特殊的数字,表示Not A Number
【注意】使用JS进行浮点运算,可以得到一个不精确的结果,所以千万不要使用JS进行精度要求比较高的运算,例如:0.1+0.2= 0.30000000000000004
09. 布尔值
布尔值只有2个
- true:表示真
- false:表示假
10. Null和Undifined
Null类型只有一个值,就是null,表示空值
Undifined类型只有一个值,就是undifined,当声明一个变量但不给变量赋值时,它的值就是undifined