Javaweb基础知识chapter03 - JavaScript

最新推荐文章于 2024-07-20 23:54:17 发布

王家小女

最新推荐文章于 2024-07-20 23:54:17 发布

阅读量197

点赞数

分类专栏： Javaweb 文章标签： javascript 前端

本文链接：https://blog.csdn.net/a_small_angel/article/details/125595558

版权

第1章 JavaScript起源

1.1 起源

N年前
- 拨号上网，网速很慢，数据提交到服务器端验证，体验很差
- 于是，就有人在想：能不能让这些数据在浏览器端验证呢？
20世纪90年代
- 1995年，由Netscape公司的Brendan Eich，在网景导航者浏览器上首次设计实现而成。Netscape在最初将其脚本语言命名为LiveScript。
- 后来Netscape与Sun合作，网景公司管理层希望它外观看起来像Java，因此取名为JavaScript。
- 1996年，微软公司在其最新的 IE3浏览器中引入了自己对JavaScript的实现JScript，于是市面上存在两个版本的JavaScript。一个是网景的JavaScript，一个是微软的JScript。为了确保不同的浏览器上运行JavaScript 标准一致，1996年11月，JavaScript 的创造者网景公司将 JS 提交给国际化标准组织 ECMA（European computer manufactures association，欧洲计算机制造联合会），希望这种语言能够成为国际标准，随后 ECMA 发布了规定浏览器脚本语言的标准，即 ECMAScript。
- JavaScript是一门客户端脚本语言，主要运行在浏览器中，浏览器中负责运行JavaScript脚本代码的程序叫JavaScript引擎。
五彩缤纷的现在
- 时至今日JavaScript已经不仅仅局限于表单验证，网页上很多炫丽动感的特效都有它的功劳

1.2 Java与JavaScript的关系

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-gYG85br2-1656902714697)(尚硅谷_张春胜_JavaScript.assets/1557388917021.png)]

1.3 特性

① 解释型语言。 JavaScript是一种解释型的脚本语言，C、C++、Java等语言先编译后执行, 而JavaScript是在程序的运行过程中逐行进行解释，不需要被编译为机器码再执行。

② 面向对象。 JavaScript是一种面向对象的脚本语言，它不仅可以创建对象，也能使用现有的对象。

③ 类C和Java的语法。 JavaScript的语法结构与C和Java很像，像for、if、while等语句和Java的基本上是一模一样的。

④ 简单。 JavaScript语言中采用的是弱类型的变量类型，对使用的数据类型未做出严格的要求，是基于Java基本语句和控制的脚本语言。（补充：Java是强类型的语言）

⑤ 动态性。 所谓的动态性，可以暂时理解为在语言中的一切内容都是不确定的。比如一个变量，这一刻是个整数，下一刻可能会变成字符串了。

⑥ 跨平台性。 JavaScript脚本语言不依赖于操作系统（Java依赖于JVM），仅需要浏览器的支持。因此一个JavaScript脚本在编写后可以带到任意机器上使用，前提是机器上的浏览器支持JavaScript脚本语言。目前JavaScript已被大多数的浏览器所支持。

⑦ 安全性。 JavaScript是不允许直接访问本地硬盘的。

1.4 JavaScript构成

一个完整的JavaScript实现应该由以下三个部分构成：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-E95ehmoK-1656902714706)(尚硅谷_张春胜_JavaScript.assets/1561384117495.png)]

ECMAScript： ECMAScript是一个标准，而这需要由各厂商去实现。
DOM： 即：文档对象模型。用于操作HTML文档，只要理解了DOM就可以随心所欲的操作 WEB 页面。
BOM： 即：浏览器对象模型。BOM提供了很多对象，通过修改这些对象的属性，调用他们的方法，用于控制浏览器的各种行为。

1.5 体验

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ll9o7y5W-1656902714710)(尚硅谷_张春胜_JavaScript.assets/1556467409277.png)]

对应的代码实现如下：

<head>
    <!-- JavaScript代码写在Script标签中 -->
    <script type="text/javascript">
        window.onload = function(){
   //main
        //获取#btnId对应的元素节点
        var btn = document.getElementById("btnId");
        //为#btnId绑定单击响应函数
        btn.onclick = function(){
   
        //弹出警告框，显示字符串Hello
               alert("Hello");
        }
        }
    </script>
</head>
<body>
    <button id="btnId">SayHello</button>
</body>

第2章 JavaScript基本语法

JavaScript需要包括在<script>标签中，这个标签可以出现在页面的任何位置。

2.1 编写位置

方式一：编写到HTML中<script>标签中，声明在head标签或者body标签中。

<script type="text/javascript">
		alert("如果能用金钱换时间，你愿意吗？");
</script>

说明：一般声明在head标签中，与style标签有点像。

方式二：写在外部的.js文件中。然后通过script标签的src属性引入。
这里的文件路径，可以是相对路径，也可以是绝对路径。

<script type="text/javascript" src="script.js"></script>

说明：type属性：默认值 text/javascript可以不写，不写也是这个值。

src属性：当需要引入一个外部的js文件时，使用该属性指向文件的地址。

特别注意：方式一和方式二不要同时使用。一旦同时使用，会默认执行方式二js文件中的js代码。

2.2 标识符与关键字保留字

2.2.1 标识符的命名规则：

由26个英文字母大小写，0-9，_或 $ 组成。
数字不可以开头。
不可以使用关键字和保留字，但能包含关键字和保留字。
JavaScript中严格区分大小写。
标识符不能包含空格。

2.2.2 关键字和保留字

关键字
保留字

2.3 变量

2.3.1 JavaScript的数据类型

基本数据类型（5种）
- 数值类型：number
- 字符串类型：string
- 布尔类型：boolean
- null型：null
- undefined型（Undefined）
对象类型：
- 函数对象：Function
- 数组对象：Array
- 一般对象：Object

2.3.2 JavaScript中特殊的常量值

undefined：表示未定义。所有的的变量在未初始化的时候默认值都是undefined。
null：表示空值。
- 从语义上看 null表示的是一个空对象。所以使用 typeof检查 null会返回一个Object。
- undefined是由null值衍生出来的，所以undefined和null是否相等，会返回true。
NaN：not a number(非数值)，在数学运算中对数值进行计算时，没有结果返回，则返回NaN
```
var a = "abc";
var b = 12;
var c = b * a;
alert(c);
```

boolean类型：只能取值真(true)或假(false)。

其他值与boolean的转换规则：

0、null、undefined、“”（空串）在运算时，都认为是false

<script type="text/javascript">
// 	var i = 0;
// 	var i = null;
// 	var i = undefined;
	var i = "";
	if (i) {
       
		alert("真");

	} else {
       
		alert("假");
	}
</script>

2.3.3 变量的声明

使用var定义即可。比如：var num = 65; var name = “马大云”；
变量声明时不需要指定类型，可以接受所有的数据类型。

2.3.4 变量的赋值

变量在赋值过程中可以接受不同类型的值。比如：var x = 123; x = “atguigu.com”;
没有赋值的变量，默认为undefined
使用typeof(变量名)，判断变量的类型
JS中每一条语句以分号(;)结尾。

2.4 注释

首先，在js中也有注释。即为如下两种方式：

// 表示单行注释
/* */ 表示多行注释

2.5 运算符

运算符是一种特殊的符号，用以表示数据的运算、赋值和比较等。

2.5.1 算术运算符

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-bqxYMJPa-1656902714722)(尚硅谷_张春胜_JavaScript.assets/1561472213124.png)]

2.5.2 赋值运算符

符号：=
扩展赋值运算符： +=, -=, *=, /=, %=

2.5.3 关系运算符

<, >, <=, >=, !=, ===（全等）, !==（不全等）

== 与 === 举例：

var i = 12;
var j = "12";
alert(i == j);//true。此时的==只是简单的比较字面值
alert(i === j);//false。此时的===除了比较字面值之外，还比较两个变量的类型是否一致

2.5.4 逻辑运算符

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-3vPdSLhj-1656902714727)(尚硅谷_张春胜_JavaScript.assets/1561472289351.png)]

逻辑运算符，结果返回一个布尔值。
如果进行逻辑运算时，操作数不是布尔类型，则会将其转换为布尔类型再进行计算。

&& ：与运算

情况一：当表达式全为真的时候，返回最后一个表达式的值

情况二：当表达式中有一个为假的时候，返回第一个为假的表达式的值

var a = "abc";
var b = true;
var c = false;
var d = null;
//情况一
alert(a && b);//true
alert(b && a);//"abc"
//情况二
alert(c && b);//false
alert(b && d);//null

||：或运算
- 情况一：当表达式全为假时，返回最后一个表达式的值
- 情况二：只要有一个表达式为真，就会返回第一个为真的表达式的值
```
var a = "abc";
var b = true;
var c = false;
var d = null;
	
//情况一
alert(c || d);//null
//情况二
alert(c || b);//true
alert(a || b);//"abc"
```
&& 和 || 也存在短路的情况，一旦得到结果，就不再继续运算了。

2.5.5 三元运算符

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Vm7Ly99H-1656902714728)(尚硅谷_张春胜_JavaScript.assets/1561473450691.png)]

例如： x > 0? x : -x;  // 求x的绝对值

2.6 流程控制结构（条件判断、循环）

java中的for，while，if-else，switch，try-catch，break，continue，在js中也是按照同样的方式使用的。

2.6.1 if结构

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-0NcB66t5-1656902714730)(尚硅谷_张春胜_JavaScript.assets/1561473721836.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-CRtFpJOS-1656902714734)(尚硅谷_张春胜_JavaScript.assets/1561474401232.png)]

2.6.2 switch-case结构

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-mP2nTupB-1656902714736)(尚硅谷_张春胜_JavaScript.assets/1561474801676.png)]

2.6.3 while结构

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-fX4XYm7t-1656902714739)(尚硅谷_张春胜_JavaScript.assets/1561474940785.png)]

2.6.4 for结构

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-nwp4voRG-1656902714741)(尚硅谷_张春胜_JavaScript.assets/1561474907572.png)]

2.6.5 do-while结构

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-yqCbxFuz-1656902714743)(尚硅谷_张春胜_JavaScript.assets/1561474926090.png)]

2.6.6 break和continue

break只能用于switch语句和循环语句中。
continue 只能用于循环语句中。
二者功能类似，但continue是终止本次循环，break是终止本层循环。
break、continue之后不能有其他的语句，因为程序永远不会执行其后的语句

2.7 数组

2.7.1 数组的定义

定义一个空数组：var arr = [];
定义一个非空数组：var arr1 = ["Tom","atguigu.com",true];

2.7.2 数组的调用

数组的角标是从0开始的，直接通过角标进行调用。比如： alert(arr[0]);

2.7.3 数组的长度

通过调用数组的属性length获取数组的长度
在JavaScript的数组中，只要我们通过元素的下标给数组赋值，js就可以根据赋值的最大下标自动给数组扩容
```
var arr = [1,2,3];
alert(arr.length);//3
arr[5] = 15;
alert(arr.length);//6
```

2.7.4 数组的遍历

var arr = [];
arr[0] = 10;
arr[5] = 20;
for(var i = 0;i < arr.length;i++){
   
    alert(arr[i]);
}

2.8 函数

2.8.1 函数声明与调用

使用function关键字
不需要指定返回值。如果函数有返回值，只需要在函数体内直接使用return语句返回需要的值即可。
不需要指定形参类型（因为js所有类型都使用var来声明）
函数在js中也是一种对象，可以将函数的引用赋值给变量

方式一：

声明格式：

function 函数名(形参列表){
       
    函数体
}

举例：

function sum(n, m) {
       
	return n + m;
}

调用：函数名(参数)。
```
var result 
```

最低0.47元/天解锁文章