JavaScript学习笔记day01

置顶 kitty_Happy

已于 2022-05-09 20:47:22 修改

阅读量690

点赞数 1

分类专栏： JavaScript 文章标签： javascript 学习前端开发语言

于 2022-05-09 20:33:57 首次发布

本文链接：https://blog.csdn.net/kitty_Happy/article/details/124674551

版权

JavaScript 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

✨写在前面，喵~

💖作者简介：大家好，我是 **kitty_Happy**。
😉正在学习的小白一名，很乐于与大家交流各种技术，共同进步！
🎉点赞 ➕ 评论 ➕ 收藏 == 养成习惯😜
💬 总结：希望你看完之后，能对你有所帮助，不足请指正！共同学习交流 🖊
✉️ 不要被任何人打乱自己的脚步，因为没有谁会像你一样清楚和在乎自己的梦想。♦

文章目录

- 1、JavaScript基础

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的全部关键字：

关键字：

ECMAScript关键字

保留字：

ECMA保留字

ps:以上图片来源于网络

1.4、系统对话框

1.4.1、alert（）

alert() 方法用于向用户显示一个警告框，其中包含指定的文本和一个“确定”按钮。
alert() 输出内容，可以是字符串或变量，与 document.write()相似

在这里插入图片描述

alert（）方法没有返回值

1.4.2、confirm（）

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() 提示对话框

kitty_Happy

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript学习笔记day01

✨写在前面，喵~💖作者简介：大家好，我是 kitty_Happy。😉正在学习的小白一名，很乐于与大家交流各种技术，共同进步！🎉点赞 ➕ 评论 ➕ 收藏 == 养成习惯😜💬 总结：希望你看完之后，能对你有所帮助，不足请指正！共同学习交流 🖊✉️ 不要被任何人打乱自己的脚步，因为没有谁会像你一样清楚和在乎自己的梦想。♦文章目录1、JavaScript基础1.1、JavaScript概述(百度百科)1.2、JavaScript 的组成及其基本结构1.2.1、JavaScript 的组成1.2.
复制链接

扫一扫

专栏目录