✨写在前面,喵~
- 💖作者简介:大家好,我是 **kitty_Happy**。
- 😉正在学习的小白一名,很乐于与大家交流各种技术,共同进步!
- 🎉点赞 ➕ 评论 ➕ 收藏 == 养成习惯😜
- 💬 总结:希望你看完之后,能对你有所帮助,不足请指正!共同学习交流 🖊
- ✉️ 不要被任何人打乱自己的脚步,因为没有谁会像你一样清楚和在乎自己的梦想。♦
文章目录
1、JavaScript基础
1.1、JavaScript概述(百度百科)
概述:
JavaScript(简称“JS”) 是一种具有函数优先的轻量级,解释型或即时编译型的编程语言。虽然它是作为开发Web页面的脚本语言而出名,但是它也被用到了很多非浏览器环境中,JavaScript 基于原型编程、多范式的动态脚本语言,并且支持面向对象、命令式、声明式、函数式编程范式。
历程:
JavaScript在1995年由Netscape公司的Brendan Eich,在网景导航者浏览器上首次设计实现而成。因为Netscape与Sun合作,Netscape管理层希望它外观看起来像Java,因此取名为JavaScript。但实际上它的语法风格与Self及Scheme较为接近。
标准:
JavaScript的标准是ECMAScript 。截至 2012 年,所有浏览器都完整的支持ECMAScript 5.1,旧版本的浏览器至少支持ECMAScript 3 标准。2015年6月17日,ECMA国际组织发布了ECMAScript的第六版,该版本正式名称为 ECMAScript 2015,但通常被称为ECMAScript 6 或者ES2015。
1.2、JavaScript 的组成及其基本结构
1.2.1、JavaScript 的组成
JavaScript 由三部分组成:
1、ECMAScript:
ECMAScript是一种由Ecma国际(前身为欧洲计算机制造商协会,European Computer Manufacturers Association)通过ECMA-262标准化的脚本程序设计语言。这种语言在万维网上应用广泛,它往往被称为JavaScript或JScript,所以它可以理解为是JavaScript的一个标准,但实际上后两者是ECMA-262标准的实现和扩展。
2、DOM:
文档对象模型(Document Object Model,简称DOM),是W3C组织推荐的处理可扩展置标语言的标准编程接口。它是一种与平台和语言无关的应用程序接口(API),它可以动态地访问程序和脚本,更新其内容、结构和www文档的风格(HTML和XML文档是通过说明部分定义的)。文档可以进一步被处理,处理的结果可以加入到当前的页面。DOM是一种基于树的API文档,它要求在处理过程中整个文档都表示在存储器中。另外一种简单的API是基于事件的SAX,它可以用于处理很大的XML文档,由于大,所以不适合全部放在存储器中处理。
3、BOM:
BOM(Browser Object Model) 是指浏览器对象模型,是用于描述这种对象与对象之间层次关系的模型,浏览器对象模型提供了独立于内容的、可以与浏览器窗口进行互动的对象结构。BOM由多个对象组成,其中代表浏览器窗口的Window对象是BOM的顶层对象,其他对象都是该对象的子对象。
ps:以上来源百度百科
1.2.2、JavaScript 的基本结构
在使用 JavaScript 时,可以用****结束标签为止。
基本结构:
<script type="text/javascript">
// JavaScript 语句;
</script>
type:
type 属性用于指定文本使用的语言类别是 text/javascript
注意:
- document.write() 表示用来向页面输出可以包含 HTML 标签的内容。
- <script></script> 可以包含在文档中的任何地方,需要保证这些代码在被使用前已读取并加载到内存。
1.2.3、在网页中引入 JavaScript 代码
将 JavaScript 代码引入网页中有三种方式,分别是内部 JavaScript 文件,外部 JavaScript 文件 及 行内 JavaScript(直接写在 HTML 标签中)
1、内部 JavaScript 文件:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JavaScript 的基本结构</title>
</head>
<body>
<script>
document.writeln("你好,JavaScript")
</script>
</body>
</html>
2、外部 JavaScript 文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>外部 JavaScript 文件</title>
</head>
<body>
<script type="text/javascript" src="index.js"></script>
</body>
</html>
index.js 文件代码如下:
document.writeln("你好,JavaScript")
3、直接写在 HTML 标签中
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>直接写在 HTML 标签中</title>
</head>
<body>
<input type="button" value="单击弹出 对话框" onclick="Javascript:alert('你好,JavaScript');">
</body>
</html>
onclick: 表示单击的事件处理程序,当用户单击按钮时,就会执行 Javascript:alert(‘你好,JavaScript’);
应用场景:
- 内部 JavaScript 文件仅适用于代码量较少的单个页面的情况。
- 外部 JavaScript 文件适用于代码量多,并且可以重复应用于多个页面的情况。
- 直接写在 HTML 标签中则适用于代码量极少的情况,但是这种方式增加了 HTML 代码,没有将结构与交互分离开,所以不推荐使用。
1.3、JavaScript 的核心语法
JavaScript 的核心语法包含变量的声明和赋值、数据类型、运算符、逻辑控制语句等基本语法。
变量:
变量是指程序中一个已经被命名的存储单元,它的主要作用是为数据操作提供存放信息的容器。
JavaScript 声明变量时无须为其指定数据类型。
1、变量的声明
var 变量名; // 使用 var 声明变量
可以使用一个关键字 var 同时声明多个变量,语法如下:
var 变量1,变量2,变量3;
注意:
- 在 JavaScript 中,变量名区分英文字母大小写,所以字母大小写不同的变量名表示不同的变量。
- 变量可以不经过声明而被直接使用,但是这种方法很容易出错,且很难排错,不推荐使用。
- 变量命名规范:见命知意,还可以使用驼峰命名法:如 userName
- 变量命名不可以使用关键字命名,如 this,new,return…
2、变量的赋值:
var 变量名 = 变量值;
把右边的值使用 = 赋给左边的变量
JavaScript 自动识别赋值的类型,所以无需定义变量类型
1.3.2、JavaScript 的数据类型
JavaScript 的弱类型脚本语言,声明变量时无须指定变量的数据类型,因为 JavaScript 变量的数据类型是解释时动态决定的。
在 JavaScript 中,提供了 3 种基本数据类型和 2 种特殊数据类型。
1. 基本数据类型:
基本数据类型包括数值类型(number)、字符串类型(string)及布尔类型(boolean)。
1)数值类型:
JavaScript 的数值类型不仅包括所有的整型变量,还包括所有的浮点型变量,如下:
var num = 15;
var num = 15.8;
此外,JavaScript 支持八进制和十六进制。八进制以 0 开头,其后的数字可以任何八进制数字(0~7);十六进制以 0x 或 0X 开头,其后的数字是任意的十六进制数字和字母(0~9 和 A ~ F)。如下:
var num1 = 065; //065 等于十进制的 53
var num2 = 0X3f; //0X3f 等于十进制的 63
当数值类型超出了其表述范围时,将出现两个特殊值:Infinity(正无穷大)和 -Infinity(负无穷大)。
另外,在 JavaScript 中还有一个特殊值——NaN(Not a Number),表示非数字,它是数值类型。如下:
typeof(NaN); // 返回值为 number
以上的 typeof() 函数用于判断某个值或变量的数据类型。
2)字符串类型:
JavaScript 的字符串必须用引号括起来,此处的引号既可以是单引号,也可以是双引号。如下:
var str1 = "123abc";
var str2 = '123abc';
字符串方法:
JavaScript 以 string 类表示字符串,string 类包含了一系列方法,如下:
方法 | 用处 |
---|---|
charAt() | 返回指定位置的字符串。 |
toUpperCase() | 把字符串转换成大写。 |
toLowerCase() | 把字符串转换成小写。 |
indexOf() | 返回某个指定的字符串在字符串中首次出现的位置。 |
subString() | 用于提取字符串中介于两个指定下标之间的字符。(要前不要后) |
split() | 用于把一个字符串分割成字符串数组。 |
replace() | 用于在字符串中用一些字符替换另一些字符。 |
示例代码如下:
<script type="text/javascript">
var str = "123abc456DEF";
document.write("下标为 1 的字符是:"+str.charAt(1)+'<br>');
document.write("把字符串转换成大写:"+str.toUpperCase()+'<br>');
document.write("把字符串转换成小写:"+str.toLowerCase()+'<br>');
document.write("查找 abc 在 str 中首次出现的位置:"+str.indexOf("abc")+'<br>');
document.write("查找 xyz 在 str 中首次出现的位置:"+str.indexOf("xyz")+'<br>');
document.write("返回索引 6 和 9 之间的字符串:"+str.substring(6,9)+'<br>');
document.write("把字符串 str 分割为字符串数组:"+str.split("")+'<br>');
document.write("把 DEF 替换成 789:"+str.replace("DEF","789"));
</script>
运行结果如下:
3)布尔类型:
布尔类型的值只有两个:true 和 false。布尔类型的值通常是逻辑运算的结果。
2.特殊数据类型:
特殊数据类型包括空类型(null)和未定义类型(undefined)。
null 表示变量的值为空,可以用来检测某个变量是否被赋值
undefined 类型的值只有一个 undefined,该值用于表示某个变量不存在,或者没有为其分配值,也用于表示对象的属性不存在。
null与undefined
实际上,undefined 是 null 派生来的,如下为 true:
alert(null == undefined); // 返回值为 true
尽管这两个值相等,但是它们的含义不同,其区别在于 undefined 表示没有为变量设置值或属性不存在;null 表示变量是有值的,只是其值为 null
3.判断数据类型:
ECMAScript 提供了 typeof 运算符来判断某个值或变量的数据类型,其语法如下:
语法:
typeof(值或变量);
返回值:
其返回值有如下几种:
- number:如果变量是数值类型,则返回 number。
- string:如果变量是字符串类型,则返回 string。
- boolean:如果变量是布尔类型,则返回 boolean。
- object:如果变量是空类型,或者是一种引用类型,如对象 、函数、数组、则返回 object。
- undefined:如果变量是未定义类型,则返回 undefined。
1.3.3、运算符
在 JavaScript 中,运算符可分为算术运算符,比较运算符,逻辑运算符和赋值运算符,如下表:
运算符 | 符号 | 描述 |
---|---|---|
算术运算符 | + | 加法 |
- | 减法 | |
* | 乘法 | |
/ | 除法 | |
% | 取余 | |
++ | 自增1 | |
- - | 自减1 | |
比较运算符 | > | 大于 |
< | 小于 | |
>= | 大于等于 | |
<= | 小于等于 | |
== | 是否等于 | |
!= | 不等于 | |
=== | 等值等型 | |
!== | 不等值或不等型 | |
逻辑运算符 | && | 逻辑与 |
|| | 逻辑或 | |
! | 逻辑非 | |
赋值运算符 | = | x=y,等同于 x=y |
+= | x+=y,等同于 x=x+y | |
- = | x-=y,等同于 x=x-y |
注意:
"==“用于一般比较,在比较时会自动进行数据类型隐式转换;”==="用于严格比较,即只要数据类型不匹配就返回 false。
1.3.4、逻辑控制语句
在 JavaScript 中,逻辑控制语句用于控制程序的执行顺序,其可以分为条件语句和循环语句。
1.条件语句:
条件语句可基于不同的条件执行不同的代码,其可以分为 if 语句和 switch 语句
1)if 语句:
在 if 语句中,可以有单分支语句,也可能有双分支语句,还可能有多分支语句。
(1)单分支语句:
由一个 if 组成,如果条件成立,则进入代码块开始执行语句,其语法如下:
if(条件){
// 条件为真(true)时执行的代码
}
(2)双分支语句:
由两个分支线组成,如果 if 条件不成立,那么就会跳入 else 语句中,其语法如下:
if(条件){
// 条件为真(true)时执行的代码
}esle{
// 条件为假(false)时执行的代码
}
(3)多分支语句:
由多个 if…else 语句组合在一起,其语法如下:
if(条件){
// 执行语句
}else if(条件){
// 执行语句
}else{
// 执行语句
}
1)switch 语句:
switch 语句比多分支语句结构更清晰,其语法如下:
switch(条件){
case 1:
// 执行语句
break;
case 2:
// 执行语句
break;
case 3:
// 执行语句
break;
default:
// 执行语句
}
以上语法中:break 关键字用于跳出某个 case 语句。如果不书写 break 语句,则进入 case 语句以后会继续进入后面的 case 语句;default 关键字用于书写默认的条件。如果前面的 case 语句都不满足,就进入 default 语句。
小结:
JavaScript 中的 switch 语句和 if 语句都是用于条件判断的,但是当用于等值的多分支比较时,使用 switch 语句可以使程序的结构更加清晰。
2.循环语句:
在 JavaScript 中,循环语句分为 for 循环、while 循环、do-while 循环、for-in 循环,其中前三种循环语句与 Java 中的循环语句用法相同。
1)for 循环
基本语法如下:
for(表达式1;表达式2;表达式3){
// 循环体
}
执行顺序:
首先执行表达式 1 初始化变量,然后进行表达式 2 循环条件的判断。如果表达式 2 成立,那么执行循环体。循环体执行结束后,表达式 3 增加/减少初始化变量的值,然后再判断表达式 2 是否成立。如果成立就执行循环体;否则,循环结束。
2)while 循环
基本语法如下:
while(条件){
// 循环体
}
特点:
先判断后执行,当条件为真时,就执行循环体;当条件为假时,就退出循环。
3)do - while 循环
基本语法如下:
do{
// 循环体
}while(条件);
特点:
先执行后判断,该语句表示反复执行循环体,直到条件为假时才退出循环。
4)for-in 循环
for - in 循环常用于对数组或对象的属性进行循环操作,基本语法如下:
for(变量 in 对象){
// 循环体
}
以上语法中,“变量” 为指定的变量,可以是数组元素,也可以是对象的属性。
1.3.5、注释
JavaScript 注释用于解释于标注 JavaScript 代码。
单行注释:
//
多行注释:
/* */
养成一个在开发中写注释的编程习惯很重要。
1.3.6、关键字和保留字
一组具有特定用途的关键字,这些关键字可用于表示控制语句的开始或结束,或者用于执行特定操作等。按照规则,关键字也是语言保留的,不能用作标识符。
以下ECMAScript的全部关键字:
关键字:
保留字:
ps:以上图片来源于网络
1.4、系统对话框
1.4.1、alert()
alert() 方法用于向用户显示一个警告框,其中包含指定的文本和一个“确定”按钮。
alert() 输出内容,可以是字符串或变量,与 document.write()相似
alert()方法没有返回值
1.4.2、confirm()
confirm() 方法用于向用户显示一个消息对话框,该对话框包含一个 ”确定“ 按钮和一个 ”取消按钮“。
其返回值是 true(确定)与 false(取消)
1.4.3、prompt()
prompt()方法会弹出一个提示对话框,等待用户输入一些数据。语法如下:
prompt("提示信息","输入框的默认信息");
点击 确定 按钮返回文本框的值,点击 取消按钮 关闭对话框
1.5、总结
JavaScript的组成三部分:
- ECMAScript
- DOM
- BOM
引入JavaScript的三种方式:
- 直接把 JavaScript 代码写在标签 <script> </script>之间;
- 使用外部 JavaScript 文件;
- 直接把简短的 JavaScript 代码写在 HTML 标签中
JavaScript 的基本数据类型:
- 数值类型(number)
- 字符串类型(string)
- 布尔类型(boolean)
JavaScript 的特殊数据类型:
- 空类型(null)
- 未定义类型(undefined)
JavaScript 的运算符:
- 算术运算符
- 比较运算符
- 逻辑运算符
- 赋值运算符
JavaScript 的逻辑控制语句:
- 条件语句
- 循环语句
向用户显示信息:
- alert() 警告对话框
- confirm() 消息对话框
- prompt() 提示对话框