一、认识JS
1.JavaScript的组成 2.浏览器执行js简介 3.JavaScript是什么? 4.扩展内容
二、JS基础语法
1.代码书写位置 2.变量 3.注释 4.数据类型 5.基础输入输出 6.扩展内容:关键字、保留字和标识符
一、认识JS
1.JavaScript的组成
组成部分 | 说明 |
---|---|
ECMAScript:JavaScript语法 | 是javascript的核心,也是学习重点。 |
BOM:浏览器对象模型 | 一套提供给程序员操作浏览器功能的API,比如alert()。通过BOM可以操作浏览器窗口,如:弹出框、控制浏览器跳转、获取分辨率等 |
DOM:文档对象模型 | 通过DOM提供的API可以对页面上的各种元素进行操作(大小、位置、颜色等) |
2.浏览器执行js简介
(1)浏览器内核组成
分成渲染引擎和js引擎,由于js引擎越来越独立,内核就倾向于只指渲染引擎。
内核组成 | 作用 |
---|---|
渲染引擎 | 用来解析HTML与CSS,俗称内核。比如chrome浏览器的blink |
JS引擎 | js解释器用来读取网页中的js代码,对其处理后运行。比较经典的就是chrome浏览器的V8。 |
(2)五大浏览器四大内核
浏览器 | 内核 |
---|---|
IE浏览器 | Trident内核 |
Chrome浏览器 | 以前是Webkit内核,现在是Blink内核 |
Firefox浏览器 | Gecko内核 |
Safari浏览器 | Webkit内核 |
Opera浏览器 | 最初是自己的Presto内核,后来是Webkit内核 |
3.JavaScript是什么?
(1)概念
- 一种运行在客户端的脚本语言,现在也可以基于Node.js技术进行服务器端编程。
- 脚本语言:不需要编译,由js解释器(js引擎)逐行进行解释并执行。
- 世界上最流行的语言。(很多语言都自称最流行)
(2)JS的功能
- 页面各类动态广告,各类动画效果。
- 表单效验(密码强度检测,也是最初目的)。
- 在线游戏(水果忍者、三国志、偷菜)。
(3)HTML/CSS/JS的关系
- HTML/CSS是标记语言——描述类语言。
- CSS决定网页的妆容。
- javascript是脚本语言——编程类语言。
4.扩展内容
(1)JS的历史
JS之父:布兰登·艾奇(Brendan Eich,1961年~) (小猪佩奇)
Netscape网景公司在最初将其脚本语言命名为LiveScript,后来Netscape在与Sun合作之后将其改名为JavaScript。
(2)解释型语言和编译型语言
编译器翻译的方式有两种:一个是编译,另外一个是解释。两种方式之间的区别在于翻译时间点的不同。
编译器是在代码执行之前进行编译,生成中间代码文件。
解释器是在运行时进行及时解释,并立即执行。
当编译器以解释方式运行的时候,也称之为解释器。
二、JS基础语法
1.代码书写位置
(1)行内式
<a href="#" onclick="alert('hello world')">点击我</a>
缺点:可读性差,引号易出错。
(2)内部式
<script type="text/javascript">
alert("hello world...");
</script>
内部式标签里的type可以省略,因为script标签的type默认就是text/javascript。
(3)外部式
<script src="js/hello.js" type="text/javascript"></script>
注意:外部js文件的标签中不写代码是规范的写法,就算写了不会生效。
2.变量
(1)什么是变量
- 通俗:变量就是一个装东西的盒子。
- 概念:变量是用于存放数据的容器,我们通过变量名 获取数据,甚至数据可以修改。
- 本质:变量是程序在内存中申请的一块用来存放数据的空间。
(2)变量的使用
声明:var age;
赋值:age = 10;
我们一般连写为:
var age = 10;
(3)变量命名规则和规范
规则:
- 由字母(A-Za-z)、数字(0-9)、下划线(_)、美元符号( $ )组成。
- 区分大小写。
- 不能 以数字开头。
- 不能 是关键字、保留字 和 代码符号。
规范:
- 变量名必须有意义。
- 遵守小驼峰命名法。首字母小写,后面单词的首字母需要大写。(如:usrName)
3.注释
- 单行注释:
//
- 多行注释:
/* */
4.数据类型
(1)五大基本数据类型
①.number
1)整数:int
2)小数:float
3)数值范围:
最大值:Number.MAX_VALUE,这个值为: 1.7976931348623157e+308
最小值:Number.MIN_VALUE,这个值为:5e-324
4)isNaN(x) 方法:x是一个数值则返回false,x非数值则返回true
浮点数值的最高精度是 17 位小数,但在进行算术计算时其精确度远远不如整数。
var result = 0.1 + 0.2;
结果不是 0.3,而是:0.30000000000000004
console.log(0.07 * 100);
结果不是 7, 而是:7.000000000000001
所以:不要直接判断两个浮点数是否相等 !
②.boolean
boolean布尔类型只有true/false两种值。
③.string
1)字符串嵌套:
JS 可以 用 单引号 嵌套 双引号 ,或者 用 双引号 嵌套 单引号 (外双内单,外单内双)。
2)字符串转义符
符号 | 转义符 |
---|---|
\n | 换行符 |
\\ | 斜杠 |
’ | 单引号 |
" | 双引号 |
\t | tab |
\b | 空格 |
\r | 回车符 |
3)字符串长度:str.length
4)字符串拼接:数值相加,字符相连。
④.undefined
未定义类型,一个声明后没有被赋值的变量会有个默认值 undefined。
⑤.null
空
(2)检测变量的数据类型
.typeof()方法可以返回变量的数据类型吗,例如:
例子 | 结果 |
---|---|
typeof(“小白”) | string |
typeof(0306) | number |
typeof(true) | boolean |
typeof(undefined) | undefined |
typeof(null) | object(js的一个bug) |
(3)数据类型的转换
①.转换为字符串
- toString 把变量转成字符串
- String() 把特殊值转成字符串
- 加号拼接字符串,任何基本类型和字符串拼接的结果都是字符串
②.转换为数值
- parseInt(string)函数——转成整数
- parseFloat(string)函数——转成浮点数
- Number()强制转换函数
- js隐式转换——利用算术运算隐式转换
③.转换为Boolean值
- Boolean——将布尔字符串转成布尔值
代表空、否定的值会被转换为false有五种:“”、0、NaN、null、undefined。
其余任何值都会被转换为true。
(4)引用数据类型
Object 、Array 、Function 、Data等,以及自定义类型,为js的引用数据类型。
创建方式:
- 字面量方式:
var person = {name:'zhangsan'};
- 构造方法:
var obj1= new Object();
5.基础输入输出
代码 | 说明 |
---|---|
alert(msg) | 在浏览器页面弹出一个只有确定项的小窗口 |
prompt(msg) | 在浏览器页面弹出一个可输入值的小窗口,(用户输入的 任何内容 都是一个 字符串) |
console.log(msg) | 在控制台输出信息 |
6.扩展内容:关键字、保留字和标识符
关键字:指JS本身已经使用了的名字。
break、case、catch、continue、default、delete、do、else、finally、for、function、if、in、instanceof、new、return、switch、this、throw、try、typeof、var、void、while、with 等
保留字:实际上就是预留的“关键字”,意思是现在虽然现在还不是关键字,但是未来可能会成为关键字的。
boolean、byte、char、class、const、debugger、double、enum、export、extends、fimal、float、goto、implements、import、int、interface、long、mative、package、private、protected、public、short、static、super、synchronized、throws、transient、volatile 等
表示符:指开发人员为变量、属性、函数、参数取的名字。
标识符不能是 关键字 或 保留字 。