第五周--JavaScript基础知识

最新推荐文章于 2022-09-20 00:39:22 发布

weixin_49995254

最新推荐文章于 2022-09-20 00:39:22 发布

阅读量347

点赞数 1

本文链接：https://blog.csdn.net/weixin_49995254/article/details/108565664

版权

JavaScript基础

JavaScript脚本语⾔

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

JavaScript简介

什么是JavaScript？

JavaScript 是⼀种客户端脚本语⾔（脚本语⾔是⼀种轻量级的编程语⾔）。

JavaScript 通常被直接嵌⼊ HTML ⻚⾯，由浏览器解释执⾏

JavaScript 是⼀种解释性语⾔（就是说，代码执⾏不进⾏预编译）。

特点：弱类型和基于对象。(因为⾯向对象需要具有封装、继承、多态的特征)

JavaScript语⾔中包含三个核⼼：ECMAScript基本语法、DOM、BOM

在这里插入图片描述

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

HTML是⼀种标记语⾔，⽤来结构化我们的⽹⻚内容并赋予内容含义，例如定义段落、标题和数据表，或在⻚⾯中嵌⼊图⽚和视频。

CSS 是⼀种样式规则语⾔，可将样式应⽤于 HTML 内容，例如设置背景颜⾊和字体，在多个列中布局内容。

JavaScript 是⼀种脚本语⾔，可以⽤来创建动态更新的内容，控制多媒体，制作图像动画，还有很多。（虽然它不是万能的，但可以通过简短的代码来实现神奇的功能。）

JavaScript使⽤⽅法

可以像添加CSS那样将 JavaScript 添加到 HTML ⻚⾯中。CSS 使⽤元素链接外部样式表，使⽤

JavaScript的使用(三种)

1、内部JavaScript: 使⽤标签
属性：
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基础语法

JavaScript的输出：

JavaScript 没有任何直接打印或者输出的函数。
若有显示数据可以通过下⾯不同的⽅式来输出：

window.alert() 弹出警告框
document.write() ⽅法将内容写到 HTML ⽂档中
innerHTML 写⼊到 HTML 元素
console.log() 写⼊到浏览器的控制台

参考示例：

变量

什么是变量

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

为什么要使⽤变量

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

如何使⽤变量使⽤var声明变量

var name;

变量的赋值

var name;
name = "zhangsan";

同时声明多个变量

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

同时声明多个变量并赋值

var name = 'wangwu', age = 25;

变量的命名规则和规范

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

语句与注释

语句：

1、⼀般程序中的语句是由表达式加分号构成 ; 组成。(js中的每条语句之间的分割符可以是回⻋换⾏也可以是";"分号(推荐))
2、⽽表达式的种类很多：
如：算术表达式、赋值表达式、关系表达式、逻辑表达式等等…
也可以是⼀个函数、⽅法的调⽤

脚本注释：

// 单⾏注释和 /* 多⾏注释 */

1、单⾏注释
单⾏注释以 // 开头。
任何位于 // 与⾏末之间的⽂本都会被 JavaScript 忽略（不会执⾏）。
2、多⾏注释
多⾏注释以 /* 开头，以 / 结尾。
任何位于 / 和 */ 之间的⽂本都会被 JavaScript 忽略。
3、注释的⽬的：
为程序添加辅助说明，便于阅读理解。
注释掉临时不需要执⾏的代码、便于调试、排错。

JavaScript数据类型

JavaScript中数据类型：

1、值类型(基本类型)：

字符串（String）、数字(Number)、布尔(Boolean)、对空（Null）、未定义（Undefined）、 Symbol。

注意：Symbol 是 ES6 引⼊了⼀种新的原始数据类型，表示独⼀⽆⼆的值。

2、引⽤数据类型：对象(Object)、数组(Array)、函数(Function)。

 //我们使⽤typeof操作符获取基本数据类型
 //Undefined 这个值表示变量不含有值
 a = null //可以通过将变量的值设置为 null 来清空变量
 a = function(){} //定义空⽩函数
 /*
 //整数的进制的输出
 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)//把这个字符串当做⼗六进制， 转为⼗进制
 */

3、typeof 操作符获取⼀个变量的类型,返回结果如下：

undefined - 如果变量是 Undefined 类型的

boolean - 如果变量是 Boolean 类型的

number - 如果变量是 Number 类型的 (整数、浮点数)

string - 如果变量是 String 类型的（采⽤""、 ‘’）

object - 如果变量是⼀种引⽤类型或 Null 类型的如： new Array()/ new String()…

function – 函数类型

4、undefined 和 null 的区别

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

5、object引⽤类型引⽤类型通常叫做类（class），也就是说，遇到引⽤值，所处理的就是对象。 Object 对象⾃身⽤处不⼤，不过在了解其他类之前，还是应该了解它。因为 ECMAScript 中的 Object 对象与 Java 中的 java.lang.Object 相似， ECMAScript 中的所有对象都由这个对象继承⽽来，Object 对象中的所有属性和⽅法都会出现在其他对象中，所以理解了 Object 对象，就可以更好地理解其他对象。

6、值类型理解：变量之间的互相赋值，是指开辟⼀块新的内存空间，将变量值赋给新变量保存到新开辟的内存⾥⾯；之后两个变量的值变动互不影响，例如：

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

类型转换：

JavaScript 变量可以转换为新变量或其他数据类型：

通过使⽤ JavaScript 函数

通过 JavaScript ⾃身⾃动转换

 ECMAScript 中可⽤的 3 种强制类型转换如下：
 	Boolean(value) - 把给定的值转换成 Boolean 型；
 	Number(value) - 把给定的值转换成数字（可以是整数或浮点数）；
 	String(value) - 把给定的值转换成字符串；
 使⽤：Number（）、parseInt() 和parseFloat（） 做类型转换
	Number()强转⼀个数值(包含整数和浮点数)。
 	parseInt()强转整数，
 	parseFloat（）强转浮点数
 函数isNaN()检测参数是否不是⼀个数字。 is not a number

常见类型转换表
在这里插入图片描述

JavaScript运算符

运算符的优先级

优先级从⾼到底

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

JavaScript流程控制

任何编程语⾔都是由⼀系列语句构成的。

⼀条语句可以是⼀个赋值语句，⼀个函数调⽤，⼀个循环，甚⾄⼀个什么也不做的（空语句）条件语句。

在任何⼀⻔程序设计语⾔中，都需要⽀持满⾜程序结构化所需要的三种基本结构: 顺序结构分⽀结构（选择结构）循环结构

顺序结构：在程序结构中，最基本的就是顺序结构。程序会按照⾃上⽽下的顺序执⾏。由于结构简单所以这⾥我就不多介绍

分⽀结构（条件语句）：

JavaScript 中，我们可使⽤以下分⽀语句：

if 语句 - 只有当指定条件为 true 时，使⽤该语句来执⾏代码

if…else 语句 - 当条件为 true 时执⾏代码，当条件为 false 时执⾏其他代码

if…else if…else 语句 - 使⽤该语句来选择多个代码块之⼀来执⾏

switch…case 语句 - 使⽤该语句来选择多个代码块之⼀来执⾏

循环结构：

JavaScript ⽀持不同类型的循环：

for - 循环代码块⼀定的次数

for/in - 循环遍历对象的属性

while - 当指定的条件为 true 时循环指定的代码块

do/while - 同样当指定的条件为 true 时循环指定的代码块

for 循环：

for(语句1; 语句2; 语句3){
 被执⾏的代码块
}
语句1： 在循环（代码块）开始前执⾏，常⽤于初始化循环条件
语句2： 定义运⾏循环（代码块）的条件，⽤于判断何时结束循环
语句3： 在循环（代码块）已被执⾏之后执⾏，常⽤于递增或递减来影响语句2的判断，直⾄结束循环

for…in 循环遍历对象：

for(属性变量 in 被遍历对象){
 被执⾏的代码块
}

while 循环

While 循环会在指定条件为真时循环执⾏代码块。

while (条件){
 需要执⾏的代码
}

注意：如果您忘记增加条件中所⽤变量的值，该循环永远不会结束。该可能导致浏览器崩溃。

do/while 循环

do/while 循环是 while 循环的变体。

该循环会执⾏⼀次代码块，在检查条件是否为真之前，然后如果条件为真的话，就会重复这个循环。

该循环⾄少会执⾏⼀次，即使条件是 false，隐藏代码块会在条件被测试前执⾏。

do{
 需要执⾏的代码;
}while(条件);

循环中的 break 和 continue continue 语句

break 语句⽤于跳出循环。

continue ⽤于跳过循环中的⼀个迭代。

break语句我们已经在本教程稍早的章节中⻅到过 break 语句。它⽤于跳出 switch() 语句。 break 语句可⽤于跳出循环。 break 语句跳出循环后，会继续执⾏该循环之后的代码（如果有的话）：

continue 语句中断循环中的迭代，如果出现了指定的条件，然后继续循环中的下⼀个迭代。

JavaScript函数

JavaScript的函数：

1、函数是什么:
函数（function）是⼀段完成指定任务的已命名代码块。函数可以遵照给它的⼀组值或参数
完成特定的任务，并且可能返回⼀个值。
2、在JavaScript中有两种函数：⾃定义函数与系统函数。
3、函数的优越性：
控制程序设计的复杂性
提⾼软件的可靠性
提⾼软件的开发效率
提⾼软件的可维护性
提⾼程序的重⽤性
4、标准格式：

function 函数名（[参数列表..]）{
 函数体。。。
 [return 返回值;]
}

5、JavaScript三种定义函数⽅法：
第⼀种是使⽤function语句定义函数如上⾯格式
第⼆种是使⽤Function()构造函数来定义函数（不常⽤）
var 函数名 = new Function(“参数1”，”参数2”，”参数3”……”函数体”);
如： var 函数名 = new Function(”x”,”y”,”var z=x+y;return z;”);
第三种是在表达式中定义函数
var 函数名 = function(参数1，参数2，…){函数体};

6、函数的使⽤：

通过函数名直接调⽤函数
函数名(参数1，参数2，…)
函数⾃调⽤
( function () {} ) ();

7、arguments 对象
1.在函数代码中，使⽤特殊对象 arguments，开发者⽆需明确指出参数名，就能访问它们。

2.arguments是⼀个对象,是⼀个伪数组，arguments[索引]---->实参的值

3.也可以访问这个值，即第⼀个参数的值（第⼀个参数位于位置 0，第⼆个参数位于位置 1，依此类推）。

4.arguments.length—>是实参的个数

8、关于变量作⽤域：

1.由于函数的出现导致了变量的定义分为函数内定义和函数外定义，即全局和局部变量

2.全局变量:在函数外使⽤var声明的变量就是全局变量,全局变量可以在⻚⾯的任何位置使⽤

3.全局变量,如果⻚⾯不关闭,那么就不会释放,就会占空间,消耗内存。
局部变量:在函数内使⽤var关键字定义的变量是局部变量，即出了函数外边⽆法获取。

4.隐式全局变量:没有使⽤var声明的变量,就叫隐式全局变量，在函数外可以获取到。
全局变量是不能被删除的,隐式全局变量是可以被删除的（使⽤delete）
定义变量使⽤var是不会被删除的,没有var是可以删除的

5.函数外⾯定义的变量是全局变量，函数内可以直接使⽤。

6.在函数内部没有使⽤var定义的=变量则为全局变量。

9、函数中的返回值：

1.如果⼀个函数中有return ,那么这个函数就有返回值

2.如果⼀个函数中没有return,那么这个函数就没有返回值

3.如果⼀个函数中没有明确的返回值,那么调⽤的时候接收了,结果就是undefined

4.(没有明确返回值:函数中没有return或函数中有return,但是return后⾯没有任何内容)

5.函数内容执⾏遇到return，则⽴刻执⾏返回，且下⾯的代码是不会被执⾏的

系统中常⽤的内置函数：

 escape() //字串编码
 unescape() //字串反编码
 eval() //将参数字符串作为脚本代码来执⾏。
 isNaN() // is not a number (不是⼀个数值)
 parseInt()
 parseFloat()

weixin_49995254

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
第五周--JavaScript基础知识

JavaScript基础JavaScript脚本语⾔JavaScript 编程语⾔允许你在 Web ⻚⾯上实现复杂的功能。如果你看到⼀个⽹⻚不仅仅显示静态的信息，⽽是显示依时间更新的内容，或者交互式地图，或者 2D/3D 动画图像，或者滚动的视频播放器，等等——你基本可以确定，这需要 JavaScript 的参与。JavaScript简介什么是JavaScript？JavaScript 是⼀种客户端脚本语⾔（脚本语⾔是⼀种轻量级的编程语⾔）。JavaScript 通常被直接嵌⼊ HTML ⻚
复制链接

扫一扫