文章目录
一、JavaScript的背景
Web前端有三层:
- HTML:从语义的角度,描述页面结构
- CSS:从审美的角度,描述样式(美化页面)
- JavaScript:从交互的角度,描述行为(提升用户体验)
JavaScript是世界上用的最多的脚本语言
1、发展历史
JavaScript诞生于1995年,网景公司的布兰登艾奇发明的JavaScript,起初命名为LiveScript,后来由于SUN公司的介入,才更名为JavaScript。(JavaScript和Java不能说是一模一样,可以说是毫无关系)。
2、JavaScript和ECMAScript的关系
ECMAScript是一种由ECMA国际(欧洲计算机制造商协会)制定和发布的脚本语言规范。简单来说,ECMAScript不是一种语言,而是一种标准。
ECMAScript在2015年6月,发布了(es6),语言的能力更强(也包含了很多新特性),但是浏览器厂商不会那么快去追上这个标准,需要时间,所以有一些浏览器不能兼容es6的新特性。
es5是2009年发布的,es6是2015年发布的,间隔6年,两个版本之间的变化比较大,所以es6比较出名。其实现在已经有es10了,只不过es10与es6版本的变化很小,所以很少被提起。
二、JavaScript介绍
1、JavaScript入门易学性
- JavaScript对初学者比较友好。
- JavaScript是有界面效果的(C语言只有白底黑字)
- JavaScript是弱变量类型的语言,变量只需用var来声明。而Java中变量的声明要根据变量的类型来定义。
- JS不用关心其他一些事情(比如内存的释放、指针等),更关心自己的业务。
2、浏览器工作的原理
1、User Interface 用户界面,我们所看到的浏览器
2、Browser 浏览器引擎,用来查询和操作渲染引擎
3、Rendering engine 用来显示请求内容,负责解析HTML、CSS
4、Networking 网络,复制发送网络请求
5、JavaScript Interpreter(解析者) JavaScript解析器,负责执行JS的代码
6、UI Backend UI后端,用来绘制类似组合框和弹出窗口
7、Data Persistence(数据持久化) ,是数据储存 cookie、HTML5中的sessionStorage
参考链接: https://www.2cto.com/kf/201202/118111.html
3、JS是前台语言
JS是前台语言,而不是后台语言。
JS运行在用户的终端网页上,而不是服务器上,所以我们称为“前台语言”。就是服务于页面交互效果、美化页面,不能操作数据库。
后台语言是允许在服务器上的,比如PHP、ASP等,这些语言能够操作数据库进行“增删改查”。Node.js除外。
4、JS的组成
JS基础分成三部分:
- ECMAScript:JS的语法标准。包括变量、运算符、函数、表达式、if语句、for语句等。
- DOM:文档对象模型,操作网页上的元素的API。比如让盒子移动、变色、轮播图等。
- BOM:浏览器对象模型,操作浏览器部分功能的API。比如让浏览器自动滚动。
5、JS的特点
(1)简单易用:可以使用任何文本编辑工具编写,只需要浏览器就可以执行。
(2)解释型语言:事先不需要编译为机器码再执行,而是逐行执行、无需进行严格的变量声明。
(3)基于对象:内置大量现成对象,编写少量程序可以完成目标。
6、JS代码的书写位置
(1)、内嵌:可以在<body>
标签里嵌入<script type="text/javascript" > ...</script>
(2)、外链接:引入外部JS文件<script src=" "> </script>
(3)、调试运行:在浏览器console中直接运行
三、JS的语法规则
(1)、JS对换行、空格、缩进都不敏感。每条语句以分号结尾,如果不加上分号,浏览器会自动添加,但是会消耗系统资源。
(2)、所有的符号都必须是英文的。
(3)、严格区分大小写。
1、注释
(1)、多行注释 /* ……*/
(2)、单行注释 //……
2、JS的输出
(1)、原生弹框(尽量少用)
alert("")
(2)、控制台输出
var a ="今晚吃什么"
console.log(a)
console.error("错误!今晚不能吃东西")
console.warn("警告!该减肥了")
(3)、带确定和取消按钮的弹框
confirm("今晚确定吃鸡吗")
(3)、带输入的弹框
prompt("你是哪里人?")
作业:弹2个弹框,将第一个弹框的值与第二个弹框的值相加。将结果输出到页面
<!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>
<script type="text/javascript">
var num1=parseInt(prompt("请输入第一个数字"));
var num2=parseInt(prompt("请输入第二个数字"));
var sum=num1+num2;
alert(sum);
</script>
</body>
</html>
3、字面量:数字和字符串
“字面量”即常量,是固定值,不可改变。简单的字面量有2种:数字和字符串
(1)数字字面量直接写上去就行了
(2)字符串字面量要加双引号
4、变量
(1)变量的概念
变量:变量可以用来保存字面量,而且变量的值可以任意改变。
(2)变量的定义和赋值
在js种使用var
关键字来声明变量。赋值直接使用=进行赋值
ps:在JS中,永远都是使用var
来定义变量
(3)变量的命名规则
- 建议使用驼峰命名法则
- 变量名必须以字母或者下划线或者$开头
- 变量名长度不能超过255个字符
- 变量名中不允许使用空格,首个字母不能为数字。
- 不能使用脚本语言中保留的关键值作为变量名
- 变量名区分大小写
- 不建议使用拼音作为变量名
(4)变量声明的提升
JS在解释执行之前,有预编译的过程,会将变量声明提升到最前面,但不会将赋值提升。
5、标识符
标识符:在JS中所有可以由我们自主命名的都可以称为标识符。例如:变量名、函数名、属性名等
6、数据类型
- 基本数据类型(值类型):String字符串、Number数值、Boolean布尔值、Null空值、Undefined未定义。
- 引用数据类型(引用类型):Object对象
数据类型之间最大的差别:
- 基本数据类型:参数赋值时,传数值。
- 引用数据类型:参数赋值时,传地址。
String字符串类型
(1)在JS中,字符串需要使用引号引起来。使用单引号或双引号都可以,但不要混着用。
(2)引号不能嵌套:双引号里面不能放双引号,单引号里面不能放单引号。但单引号里面可以嵌套双引号。
(3)转义字符:在字符串里面我们可以使用\
作为转义字符。
\ "
表示"
\ n
表示换行\r
表示回车\t
表示制表符\b
表示空格\ \
表示\
将其他数值转换为字符串有三种方式:
- 拼串
- toString()
- String()
typeof运算符
typeof()
表示获取数据的变量类型,返回的是小写。
返回结果:
typeof 数值
的返回结果:numbertypeof 字符串
的返回结果:stringtypeof 布尔型
的返回结果:booleantypeof undefined
的返回结果:undefinedtypeof null
的返回结果:object
数值型:Number
在JS中所有数值都是Number类型,包括整数和浮点数(小数)。
** 数值范围:**
- 最大值:
Number.MAX_VALUE
- 最小值:
Number.MIN_VALUE
如果使用Number表示的变量超过了最大值,则返回Infinity。
- 无穷大(正无穷):Infinity
- 无穷小(负无穷):-Infinity
NaN和isNaN()函数:
(1)NaN:是一个特殊的数字,表示非数值。
浮点数的运算
在JS中,整数的运算基本可以保证精确,但是小数的运算,可能会的到一个不精确的结果。
连字符和加号的区别
如果加号两边都是数字,则表示加。否则就表示连字符。
NULL和undefined
NULL表示一个空对象。
undefined表示未赋值的变量。