本文详细介绍了JavaScript的基础知识，包括JavaScript的起源、组成部分和特性。重点讲解了ECMAScript的基础，包括与HTML的结合方式、注释、数据类型、变量、运算符和常用语句。此外，还探讨了函数的概念、闭包和回调函数，以及一些常用对象和系统函数。文章旨在帮助读者建立扎实的JavaScript和ECMAScript基础。
一、JavaScript介绍
1.1 什么是JavaScript？
JavaScript（简称“JS”）是一种具有函数优先的轻量级，解释型或即时编译型的编程语言。虽然它是作为开发Web页面的脚本语言而出名的，但是它也被用到了很多非浏览器环境中，JavaScript 基于原型编程、多范式的动态脚本语言，并且支持面向对象、命令式和声明式（如函数式编程）风格。
1.2 JavaScript的发展历程
它最初由Netscape的Brendan Eich设计。JavaScript是甲骨文公司的注册商标。Ecma国际以JavaScript为基础制定了ECMAScript标准。JavaScript也可以用于其他场合，如服务器端编程。完整的JavaScript实现包含三个部分：ECMAScript，文档对象模型（DOM Document Object Model），浏览器对象模型(BOM Browser Object Model)。
Netscape在最初将其脚本语言命名为LiveScript，后来Netscape在与Sun合作之后将其改名为JavaScript。JavaScript最初受Java启发而开始设计的，目的之一就是“看上去像Java”，因此语法上有类似之处，一些名称和命名规范也借自Java。但JavaScript的主要设计原则源自Self和Scheme。JavaScript与Java名称上的近似，是当时Netscape为了营销考虑与Sun微系统达成协议的结果。为了取得技术优势，微软推出了JScript来迎战JavaScript的脚本语言。为了互用性，Ecma国际（前身为欧洲计算机制造商协会）创建了ECMA-262标准（ECMAScript）。两者都属于ECMAScript的实现。尽管JavaScript作为给非程序人员的脚本语言，而非作为给程序人员的脚本语言来推广和宣传，但是JavaScript具有非常丰富的特性。
发展初期，JavaScript的标准并未确定，同期有Netscape的JavaScript，微软的JScript和CEnvi的ScriptEase三足鼎立。1997年，在ECMA（欧洲计算机制造商协会）的协调下，由Netscape、Sun、微软、Borland组成的工作组确定统一标准：ECMA-262。
1.3 JavaScript的组成部分
ECMAScript，描述了该语言的语法和基本对象
文档对象模型（DOM），描述处理网页内容的方法和接口
浏览器对象模型（BOM），描述与浏览器进行交互的方法和接口
1.4 JavaScript的特性
JavaScript具有的特性有脚本语言、基于对象、简单、动态性、跨平台
1.5 JavaScript的特点
JavaScript是一种属于网络的脚本语言,已经被广泛用于Web应用开发,常用来为网页添加各式各样的动态功能,为用户提供更流畅美观的浏览效果。通常JavaScript脚本是通过嵌入在HTML中来实现自身的功能的。
- 是一种解释性脚本语言（代码不进行预编译）
- 主要用来向HTML（标准通用标记语言下的一个应用）页面添加交互行为
- 可以直接嵌入HTML页面，但写成单独的js文件有利于结构和行为的分离
- 跨平台特性，在绝大多数浏览器的支持下，可以在多种平台下运行（如Windows、Linux、Mac、Android、iOS等）
- Javascript脚本语言同其他语言一样，有它自身的基本数据类型，表达式和算术运算符及程序的基本程序框架。Javascript提供了四种基本的数据类型和两种特殊数据类型用来处理数据和文字。而变量提供存放信息的地方，表达式则可以完成较复杂的信息处理
- 可以实现web页面的人机交互
1.6 JavaScript的用途
有些用途因知识我们目前没有学习到，先做了解即可！
- 嵌入动态文本于HTML页面
- 对浏览器事件做出响应
- 读写HTML元素
- 在数据被提交到服务器之前验证数据
- 检测访客的浏览器信息
- 控制cookies，包括创建和修改等
- 基于Node.js技术进行服务器端编程
二、ECMAScript基础
2.1 ECMAScript与JSP或HTML的结合方式
HTML和JSP嵌入ECMAScript方式和作用相同，这里默认演示嵌入JSP！
2.1.1 内部结合方式
将<script>的一对标签写在一对<head>标签内，然后在写好的标签内编写JS代码，如下：
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>ECMAScript和页面结合之内部结合</title>
<%--js脚本内部结合--%>
<script>
alert("alert hello world"); //弹出页面窗口提示内容
document.write("document hello world"); //将内容显示在浏览器中
console.log("log hello world"); //将内容显示在浏览器F12中的Console中
</script>
</head>
<body>
</body>
</html>
2.1.2 外部结合方式
在web下创建并命名一个JavaScript文件，再将将<script>的一对标签写在一对<head>标签内，扩展标签属性src并引入JavaScript文件路径，如下：
注意：外部结合方式，JS代码的编写工作要写在JavaScript文件中，不允许再在标签内编写JS代码，如果编写了，也不报错。但是JS代码默认无任何效果
JavaScript文件，此文件命名为js
alert("alert hello world"); //弹出页面窗口提示内容
document.write("document hello world"); //将内容显示在浏览器中
console.log("log hello world"); //将内容显示在浏览器F12中的Console中
JSP页面文件
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>ECMAScript和页面结合之外部结合</title>
<%--js脚本外部结合--%>
<script src="${pageContext.request.contextPath}/js.js"></script>
</head>
<body>
</body>
</html>
2.2 ECMAScript的注释
2.2.1 单行注释
单行注释以
//开头。任何位于 // 与行末之间的文本都会被 JavaScript 忽略（不会执行）
var x = 5; // 声明 x，为其赋值 5
var y = x + 2; // 声明 y，为其赋值 x + 2
2.2.2 多行注释
多行注释以
/*开头，以*/结尾。任何位于 /* 和 */ 之间的文本都会被 JavaScript 忽略。
/*
* 声明了x、y
* 并为x、y分别赋值
* */
var x = 5;
var y = x + 2;
2.3 ECMAScript数据类型
数据类型分别有： 字符串值、数值、布尔值、数组、对象、null、undefined
| 数据类型 | 描述 |
|---|---|
| number（数值） | 数值包括整数、小数和NaN（not a number 一个不是数字的数值类型） |
| string（字符串值） | 字符串值可以使用"abc"、‘abc’ （注意：与Java不同，JavaScript没有字符类型） |
| boolean（布尔值） | 布尔值分为true和false |
| array（数组） | 定义数组var names = [“Join”, “Ziph”, “Marry”]; |
| 对象 | 后面的对象类型很多，这里不解释太多，以免把你们混淆 |
| null（空） | 一个对象为空的占位符 |
| undefined（未定义） | 未定义。如果一个变量没有给初始化值，则会被默认赋值为undefined |
2.4 ECMAScript变量
2.4.1 定义变量的语法
语法：
var 变量名 = 值;（var代表所有数据类型）
2.4.1 强、弱类型语言
Java语言是强类型语言，而JavaScript是弱类型语言
- 强类型： 在开辟变量存储空间时，定义了空间将来存储的数据的数据类型。只能存储固定类型的数据（简单来说，Java语言定义变量遵循
数据类型 变量名 = 值;，只能定义指定的类型值；比如：String str = “Ziph”）- 弱类型： 在开辟变量存储空间时，不定义空间将来的存储数据类型，可以存放任意类型的数据（简单来说，JavaScript语言定义变量遵循
var 变量名 = 值;，var代表多种所有数据类型，它会根据我们定义的值而精确匹配）
2.4.2 ECMAScript变量的定义
JavaScript 变量是存储数据值的容器
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>ECMAScript变量</title>
<script>
// var 变量名 = 初始化值;
// 一个num定义了多个数据类型
var num = 1;
console.log(num);
num = "abc";
console.log(num);
num = true;
console.log(num);
num = null;
console.log(num);
num = undefined;
console.log(num);
</script>
</head>
<body>
</body>
</html>
是不是可以看见JavaScript中var定义num变量的所有值呢？
2.5 ECMAScript运算符
2.5.1 算数运算符
算数运算符用于对数字执行算数运算
注意：与Java不用，1/0的运算结果得到的是Infinity；而特殊的0/0的运算结果得到的是NaN
| 运算符 | 描述 |
|---|---|
| + | 加法 |
| - | 减法 |
| * | 乘法 |
| / | 除法 |
| % | 系数 |
| ++ | 递加 |
| – | 递减 |
var num1 = 1;
var num2 = num1++;
console.log(num1); //2
console.log(num2); //1
var num3 = 10;
var num4 = "2";
console.log(num3 / num4); //5
2.5.2 赋值运算符
赋值运算符向 JavaScript 变量赋值
注意： 加法赋值运算符（+=）向变量添加一个值
| 运算符 | 例子 | 等同于 |
|---|---|---|
| = | x = y | x = y |
| += | x += y | x = x + y |
| -= | x -= y | x = x - y |
| *= | x *= y | x = x * y |
| /= | x /= y | x = x / y |
| %= | x %= y | x = x % y |
var num5 = 1;
var num6 = 1;
num5 += num6;
console.log(num5); //2
2.5.3 JavaScript 字符串运算符
字符串拼接
+运算符也可用于对字符串进行相加
txt1 = “Ziph ”;
txt2 = "Good!";
txt3 = txt1 + txt2; //Ziph Good!
字符串级联
+=赋值运算符也可用于相加（级联）字符串
txt1 = "Hello ";
txt1 += "Kitty!"; //Hello Kitty!
字符串与数字相加
相加两个数字，将返回和，但对一个数字和一个字符串相加将返回一个字符串
x = 6 + 9; //15
y = "6" + 9; //69
z = "Hello" + 6; //Hello6
2.5.4 比较运算符
| 运算符 | 描述 |
|---|---|
| == | 等于 |
| === | 等值等型 |
| != | 不相等 |
| !== | 不等值或不等型 |
| > | 大于 |
| < | 小于 |
| >= | 大于或等于 |
| <= | 小于或等于 |
| ? | 三元运算符 |
var num7 = 10;
var num8 = "10";
console.
最低0.47元/天 解锁文章
扫一扫
399
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
