JavaScript学习笔记

最新推荐文章于 2023-06-17 16:44:40 发布

要当工程狮

最新推荐文章于 2023-06-17 16:44:40 发布

阅读量241

点赞数

分类专栏：笔记文章标签： javascript

本文链接：https://blog.csdn.net/weixin_43541852/article/details/109284292

版权

笔记专栏收录该内容

15 篇文章 0 订阅

订阅专栏

前言

JavaScript 编程语言允许你在 Web 页面上实现复杂的功能。如果你看到⼀个网页不仅仅显示静态的信息，而是显示依时间更新的内容，或者交互式地图，或者 2D/3D 动画图像，或者滚动的视频播放器，等等——你基本可以确定，这需要 JavaScript 的参与。

一、JavaScript简介

1.什么是JavaScript？

JavaScript 是⼀种客户端脚本语言（脚本语⾔是⼀种轻量级的编程语⾔）。
JavaScript 通常被直接嵌入 HTML页面，由浏览器解释执行
JavaScript 是⼀种解释性语言（就是说，代码执行不进行预编译）。
特点：弱类型和基于对象。(因为面向对象需要具有封装、继承、多态的特征)
JavaScript语⾔中包含三个核心：ECMAScript基本语法、DOM、BOM

2.前端Web技术的组成：HTML、CSS、JavaScript

HTML是⼀种标记语言，用来结构化我们的网页内容并赋予内容含义，例如定义段落、标题和数据表，或在页面中嵌入图片和视频。
CSS 是⼀种样式规则语言，可将样式应⽤于 HTML 内容，例如设置背景颜色和字体，在多个列中布局内容。
JavaScript 是⼀种脚本语言，可以用来创建动态更新的内容，控制多媒体，制作图像动画，还有很多。（虽然它不是万能的，但可以通过简短的代码来实现神奇的功能。）

二、JavaScript使用方法

可以像添加CSS那样将 JavaScript 添加到 HTML 页面中。CSS 使用元素链接外部样式表，使用 <style> 元素向 HTML 嵌⼊内部样式表，JavaScript 这里只需⼀个元素 <script> 。

1.内部JavaScript

使用 <script> … </script> 标签
属性：

charset（可选）字符集设置
defer（可选执⾏顺序）值：defer
language(已废除)
src（可选）使⽤外部的js脚本⽂件
type(必选)类型：值：text/javascript

代码如下（示例）：

<script type="text/javascript"> 
	<!
	-- javaScript语⾔ 
	//--> 
</script>

2.外部 JavaScript

使用外部导入js会使代码更加有序，更易于复用，且没有了脚本的混合，HTML也会更加易读。

代码如下（示例）：

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

3.内联JavaScript处理器

就是将js代码写入html代码中，如在html标签的事件中或超级链接里。

<button onclick="javaScript语⾔"></button> 
<a href="javascript:alert('aa');alert('bb')">点击</a>

三、JavaScript基础语法

1.JavaScript的输出

JavaScript 没有任何直接打印或者输出的函数。
若有显示数据可以通过下⾯不同的⽅式来输出：
- window.alert() 弹出警告框
- document.write() ⽅法将内容写到 HTML ⽂档中
- innerHTML 写⼊到 HTML 元素
- console.log() 写⼊到浏览器的控制台
参考示例：

<!DOCTYPE html> 
<html> 
	<head> 
		<meta charset="UTF-8"> 
		<title>JavaScript实例</title> 
	</head> 
	<body> 
		<h3>测试JavaScript的输出</h3> 
		<div id="did">div层</div> 
	</body> 
	<script> 
		//弹出⼀个信息提示框 
		window.alert("Hello JavaScript!"); 
		//输出到浏览器⻚⾯中 
		document.write("这个是⻚⾯中的输出"); 
		//通过写⼊HTML标签中，完成⻚⾯中的输出 
		document.getElementById('did').innerHTML="div层中的输出"; 
		//控制台上的输出 
		console.log("控制台上的输出"); 
	</script> 
</html>

2.变量

（1）什么是变量

变量是计算机内存中存储数据的标识符，根据变量名称可以获取到内存中存储的数据

（2）为什么要使用变量

使用变量可以方便的获取或者修改内存中的数据

（3）如何使用变量使用var声明变量

var name;

（4）变量的赋值

var name; 
name = "zhangsan";

（5）同时声明多个变量

var name,age,sex; 
name = 'lisi'; 
age = 20; 
sex = "man";

（6）同时声明多个变量并赋值

var name = 'wangwu', age = 25;

3.变量的命名规则和规范

规则 - 必须遵守的，不遵守会报错
- 由字母、数字、下划线、$符号组成，不能以数字开头
- 不能是关键字和保留字，例如：for、 if、while。
- 区分大小写
规范 - 建议遵守的，不遵守不会报错
- 变量名必须有意义
- 遵守驼峰命名法。首字母小写，后面单词的首字母需要大写。例如：userName、userPassword

4.语句与注释

语句：
- ⼀般程序中的语句是由表达式加分号构成 ; 组成。(js中的每条语句之间的分割符可以是回⻋换⾏也可以是";"分号(推荐))
- 而表达式的种类很多：
- 如：算术表达式、赋值表达式、关系表达式、逻辑表达式等等…
- 也可以是⼀个函数、方法的调用
脚本注释： // 单行注释和 /* 多行注释 */
- 单⾏注释：单行注释以 // 开头；任何位于 // 与行末之间的⽂本都会被 JavaScript 忽略（不会执行）。
- 多行注释：多行注释以 /* 开头，以 */ 结尾；任何位于 /* 和 */ 之间的文本都会被 JavaScript 忽略。
注释的目的：为程序添加辅助说明，便于阅读理解；注释掉临时不需要执行的代码、便于调试、排错。

四、JavaScript数据类型

1.JavaScript中数据类型

值类型(基本类型)：
- 字符串（String）、数字(Number)、布尔(Boolean)、对空（Null）、未定义（Undefined）、Symbol；
- 注意：Symbol 是 ES6 引入了⼀种新的原始数据类型，表示独一无二的值。
引用数据类型：
- 对象(Object)、数组(Array)、函数(Function)

//我们使⽤typeof操作符获取基本数据类型 
//Undefined 这个值表示变量不含有值 
console.log(typeof a); //undefined 未定义的 
var a = 10; 
console.log(typeof a); //number 
a = 3.14 
console.log(typeof a); //number 
a = 'zhangsan' 
console.log(typeof a); //string 
a = true 
console.log(typeof a); //boolean 
//可以通过将变量的值设置为 null 来清空变量 
a = null 
console.log(typeof a); //object 
console.log(a); //null 
a = [10,20,30]; 
//或 a = new Array(10,20,30); 
console.log(typeof a); //object 
console.log(a instanceof Array); //true 
a = function(){} //定义空⽩函数 
console.log(typeof a); //function 
console.log(a instanceof Function); //true 
//整数的进制的输出 
console.log(10); //输出⼗进制数的值 
console.log(0b10); //输出⼆进制数10的值
console.log(0o10); //输出⼋进制数10的值 
console.log(0x10); //输出⼗六进制数10的值 
//⼗进制转换其他进制 
var x = 110; 
x.toString(2)//转为2进制 
x.toString(8)//转为8进制 
x.toString(16)//转为16进制 
//其他进制转⼗进制 
var x = "110"//这是⼀个⼆进制的字符串表示 
parseInt(x, 2)//把这个字符串当做⼆进制， 转为⼗进制 
var x = "70"//这是⼀个⼋进制的字符串表示 
parseInt(x, 8)//把这个字符串当做⼋进制， 转为⼗进制 
var x = "ff"//这是⼀个⼗六进制的字符串表示 
parseInt(x, 16)//把这个字符串当做⼗六进制， 转为⼗进制

typeof 操作符获取⼀个变量的类型,返回结果如下：
- undefined - 如果变量是 Undefined 类型的
- boolean - 如果变量是 Boolean 类型的
- number - 如果变量是 Number 类型的 (整数、浮点数)
- string - 如果变量是 String 类型的（采⽤""、 ‘’）
- object - 如果变量是⼀种引⽤类型或 Null 类型的如： new Array()/ new String()…
- function – 函数类型

typeof "zhangsan" // 返回 string 
typeof 3.14 // 返回 number 
typeof NaN // 返回 number 
typeof true // 返回 boolean 
typeof [10,20,30,40] // 返回 object 
typeof {name:'lisi', age:20} // 返回 object 
typeof new Date() // 返回 object 
typeof function(){} // 返回 function 
typeof myCar // 返回 undefined (如果 myCar 没有声明) 
typeof null // 返回 object

undefined 和 null 的区别
- null 和 undefined 的值相等，但类型不等：

typeof undefined // undefined 
typeof null // object 
null === undefined // false 
null == undefined // true

object引⽤类型引⽤类型通常叫做类（class），也就是说，遇到引⽤值，所处理的就是对象。
- Object 对象⾃身⽤处不⼤，不过在了解其他类之前，还是应该了解它。因为 ECMAScript 中的Object 对象与 Java 中的 java.lang.Object 相似， ECMAScript 中的所有对象都由这个对象继承⽽来，Object 对象中的所有属性和⽅法都会出现在其他对象中，所以理解了 Object 对象，就可以更好地理解其他对象。
值类型理解：变量之间的互相赋值，是指开辟⼀块新的内存空间，将变量值赋给新变量保存到新开辟的内存⾥⾯；之后两个变量的值变动互不影响，例如：

var a = 10; //开辟⼀块内存空间保存变量a的值“10”； 
var b = a; //给变量 b 开辟⼀块新的内存空间，将 a 的值 “10” 赋值⼀份保存到新的内存⾥； 
//a 和 b 的值以后⽆论如何变化，都不会影响到对⽅的值；

引⽤类型理解：变量之间的互相赋值，只是指针的交换，⽽并⾮将对象（普通对象，函数对象，数组对象）复制⼀份给新的变量，对象依然还是只有⼀个，只是多了⼀个指引。

//需要开辟内存空间保存对象，变量 a 的值是⼀个地址，这个地址指向保存对象的空间； 
var a = { x: 1, y: 2 }; 
var b = a; // 将a 的指引地址赋值给 b，⽽并⾮复制⼀给对象且新开⼀块内存空间来保存； 
// 这个时候通过 a 来修改对象的属性，则通过 b 来查看属性时对象属性已经发⽣改变；

2.类型转换

JavaScript 变量可以转换为新变量或其他数据类型：
- 通过使⽤ JavaScript 函数
- 通过 JavaScript ⾃身⾃动转换：
（1）ECMAScript 中可⽤的 3 种强制类型转换如下：
–Boolean(value) - 把给定的值转换成 Boolean 型；
–Number(value) - 把给定的值转换成数字（可以是整数或浮点数）；
–String(value) - 把给定的值转换成字符串；
（2）使⽤：Number（）、parseInt() 和parseFloat（）做类型转换：
–Number()强转⼀个数值(包含整数和浮点数)
–parseInt()强转整数
–parseFloat（）强转浮点数
（3）函数isNaN()检测参数是否不是⼀个数字。 is not a number
参考示例：

//转换字串类型 
String(100 + 23) // 返回 "123" 
String(true) // 返回 "true" 
String(new Date())// 返回 "Tue May 14 2019 11:06:28 GMT+0800 (中国标准时间)" 
String([10,20]) // 返回 "10,20" 
String(null) // 返回 "null"
//转换数值类型 
Number("3.14") // 返回 3.14 
Number("3.14abc") // 返回 NaN 
parseFloat("3.14")//返回 3.14 
parseFloat("3.14abc")//返回 3.14 
parseFloat("b3.14abc")//返回 NaN 
parseInt("3.14") //返回 3 
parseInt("3.14abc")//返回 3 
parseInt("b3.14abc")//返回 NaN

常⻅类型转换：

五、JavaScript运算符

按照种类划分分为如下运算符：

1.算数运算符

算数运算符⽤于对数字执⾏算数运算：
注意：其中+号具有两重意思：字串连接和数值求和。
就是加号”+“两侧都是数值则求和，否则做字串连接

2.赋值运算符

赋值运算符向 JavaScript 变量赋值。

在这里插入图片描述

3.比较运算符

在这里插入图片描述

4.逻辑运算符

在这里插入图片描述

5.位运算符

位运算符处理 32 位数。
该运算中的任何数值运算数都会被转换为 32 位的数。结果会被转换回 JavaScript 数。
上例使⽤ 4 位⽆符号的例⼦。但是 JavaScript 使⽤ 32 位有符号数。
因此，在 JavaScript 中， ~5 不会返回 10，⽽是返回 -6。
~00000000000000000000000000000101 将返回 11111111111111111111111111111010 。
⽆符号位移（>>>）和有符号位移（>>）的区别是：
- 有符号位移运算时如果数字为正数时位移后在前⾯补0，为负数时则在位移后在前⾯补1

6.条件运算符（三元运算符）

JavaScript 也包含了可基于某些条件向变量赋值的条件运算符。

语法 
variablename = (condition) ? value1:value2 
实例 
var voteable = (age < 18) ? "太年轻":"⾜够成熟";

7.逗号运算符

⽤逗号运算符可以在⼀条语句中执⾏多个运算。 
var iNum1=1, iNum2=2, iNum3=3;

8.类型运算符

在这里插入图片描述

instanceof 运算符与 typeof 运算符相似，⽤于识别正在处理的对象的类型。
与 typeof ⽅法不同的是，instanceof ⽅法要求开发者明确地确认对象为某特定类型。

var oStringObject = new String("hello world"); 
console.log(oStringObject instanceof String); // 输出 "true" 
// 判断 foo 是否是 Foo 类的实例 
function Foo(){} 
var foo = new Foo(); 
console.log(foo instanceof Foo)//true 
// 判断 foo 是否是 Foo 类的实例 , 并且是否是其⽗类型的实例 
function Aoo(){} 
function Foo(){} 
Foo.prototype = new Aoo();//JavaScript 原型继承 
var foo = new Foo(); 
console.log(foo instanceof Foo)//true 
console.log(foo instanceof Aoo)//true

9.运算符的优先级

优先级从高到底：

() 优先级最高
⼀元运算符 ++ – !
算数运算符先 * / % 后 + -
关系运算符 > >= < <=
相等运算符 == != === !==
逻辑运算符先 && 后||
赋值运算符 = += -= *= /= %=

总结

以上就是JavaScript语言的基础部分，下期讲JavaScript语言的进阶部分。

要当工程狮

关注

0
点赞
踩
1

收藏

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

文章目录前言一、JavaScript简介1.什么是JavaScript？2.前端Web技术的组成：HTML、CSS、JavaScript二、JavaScript使用方法1.内部JavaScript2.外部 JavaScript3.内联JavaScript处理器三、JavaScript基础语法1.JavaScript的输出2.变量（1）什么是变量（2）为什么要使用变量（3）如何使用变量使用var声明变量（4）变量的赋值（5）同时声明多个变量（6）同时声明多个变量并赋值3.变量的命名规则和规范4.语句与注释四
复制链接

扫一扫