javaScript的认识 -- 第五课

莘薪

于 2024-10-02 09:00:00 发布

阅读量762

点赞数 11

分类专栏：框架文章标签： javascript 开发语言 html 前端框架

本文链接：https://blog.csdn.net/ZxVSaccount/article/details/142671728

版权

框架专栏收录该内容

8 篇文章 0 订阅

订阅专栏

文章目录

前言
一、javaScript是什么？
二、初识JavaScript
三、JavaScript变量
四、数值类型
五、数据类型转换
六、运算符
七、流程控制
八、数组 -- array
总结

前言

前面几节已经介绍完了html和css,接下来我们要介绍框架的最后一个基础内容javaScript,这是控制动态内容很重要的一部分

一、javaScript是什么？

JavaScript是一种运行在浏览器端的脚本语言，用于给网页添加交互和动态效果。它由网景公司（Netscape）的布兰登·艾奇（Brendan Eich）在1995年创造，最初被称为LiveScript。后来，由于Java语言的流行，网景公司将其改名为JavaScript。JavaScript是一种解释性的、动态类型的语言，与HTML和CSS一起被广泛用于制作网页。它可以通过嵌入在HTML代码中的<script>标签来执行，也可以作为外部文件引入。通过JavaScript，可以操作网页的元素、响应用户的交互、发送网络请求、处理数据等。现在，JavaScript已经发展成为一种可以在服务器端（通过Node.js）和移动端（通过React Native等）运行的全球范围内最流行的编程语言之一。

二、初识JavaScript

1.网页组成

网页组成：对于制作一个网页而言，HTML、CSS和JavaScript分别代表了结构、样式和行为，三者之间的区别如下。

HTML：决定网页的结构和内容，相当于人的身体。
css：决定网页呈现给用户的模样，相当于给人穿衣服、化妆。
JavaScript：实现业务逻辑和页面控制，相当于人的各种动作。

2.javaScript组成

JavaScript内嵌于HTML网页中，通过浏览器内置的JavaScript引擎进行解释执行，把一个原本只用来显示的页面转变成支持用户交互的页面程序。浏览器是访问互联网中各种网站所必备的工具，JavaScript主要就是运行在浏览器中的。

JavaScript由ECMAScript、DOM、BOM三部分组成。请添加图片描述
JavaScript组成部分的简单介绍如下：

ECMAScript：是JavaScript的核心。它规定了JavaScript的编程语法和基础核心内容，是所有浏览器厂商共同遵守的一套JavaScript语法工业标准
DOM：文档对象模型，是W3C组织推荐的处理可扩展标记语言的标准编程接口，通过DOM提供的接口，可以对页面上的各种元素进行操作
BOM：浏览器对象模型，它提供了独立于内容的、可以与浏览器窗口进行互动的对象结构。通过BOM，可以对浏览器窗口进行操作

3.引入方式

JavaScript代码的3种书写位置：

行内式：是将单行或少量的JavaScript代码写在HTML标签的事件属性中
内嵌式（嵌入式）：使用<script>标签包裹JavaScript代码，<script>标签可以写在<head>或<body>标签中
外部式（外链式）：将JavaScript代码写在一个单独的文件中，一般使用 "js”作为文件的扩展名，在HTML页面中使用<script>标签进行引入，适合JavaScript代码量比较多的情况。注意外部式的<script>标签内不可以编写JavaScript代码

4. 基本语法规则

在编写JavaScript代码时，需要注意基本的语法规则：

JavaScript严格区分大小写，在编写代码时一定注意大小写的正确性
JavaScript代码对空格、换行、缩进不敏感，一条语句可以分成多行书写
如果一条语句结束后，换行书写下一条语句，后面的分号可以省略

5. 注释方式

JavaScript代码的注释方式，以及在VS Code编辑器中对应的快捷键如下：

单行注释：以“//”开始，到该行结束或<<script>标签结束之前的内容都是注释。快捷键：ctrl +/
多行注释：以“/T”开始，以“”/”结束。需要注意的是，多行注释中可以嵌套单行注释，但不能再嵌套多行注释。快捷键：shift + alt + a

6.输入和输出

JavaScript代码中提供了输入和输出语句，可以在网页中实现用户交互效果。

常用的输入和输出语句如下所示：alert（msg）：浏览器弹出警告框
console.log（msg）：浏览器控制台输出信息
prompt（msg）：浏览器弹出输入框，用户可以输入内容

三、JavaScript变量

1. 什么是变量?

变量是程序在内存中申请的一块用来存放数据的空间。例如，程序在内存中保存字符串“小明”和“小张”，如下图所示。请添加图片描述

2. 变量的使用

变量的使用，分为两步：声明变量和变量赋值。

1. 声明变量

var age;

2. 变量赋值

var age = 10

3. 变量初始化

var age = 10

4.变量的命名规范

在对变量进行命名时，需要遵循变量的命名规范，具体如下：

由字母、数字、下划线和美元符号（$）组成严格区分大小写不能以数字开头
不能是关键字、保留字
要尽量做到“见其名知其意”
建议遵循驼峰命名法，首字母小写，后面的单词首字母大写

四、数值类型

1.数字

JavaScript中的数字型可以用来保存整数或浮点数（小数）

var age = 18；//整数
var pi = 3.14；//浮点数（小数）

2. 字符串

字符串是指计算机中用于表示文本的一系列字符，在JavaScript中使用单引号或双引号来包裹字符串。

var str1 ='单引号字符串'；var str2 ="双引号字符串"；

转义符：在字符串中使用换行、Tab等特殊符号时，可以用转义符来进行转义，转义符以"\”开始。常见转义符见下表。
请添加图片描述
字符串长度：字符串是由若干字符组成的，这些字符的数量就是字符串的长度。通过字符串的length属性可以获取整个字符串的长度。

var str1 = 'I\'m a programmer'; 
console. log(str1. length);

3. 布尔型

布尔型通常用于逻辑判断，它有两个值：true和false，表示事物的“真”和“假”。

console.log（true）；输出结果：true 
console.log（false）；输出结果：false 
console.log（true + 1）；//输出结果：2
console.log（false + 1）：//输出结果：1

4.undefined和null

如果一个变量声明后没有赋值，则变量的值就是undefined.下面通过代码示undefined的使用。

//演示undefined的使用
console.log（true）；输出结果：true 
var a；console.log（a）；输出结果：undefined 
console.log（a +'_'）；输出结果：undefined_（字符串型）
console.log（a + 1）；输出结果：NaN

当然也可以给一个变量赋一个null值。一个声明变量给null值，里面存的值为空下面通过代码演示null值的使用。

//演示null的使用
var b = null；
console.log（b +'_'）；//输出结果：null_（字符串型）
console.log（b + 1）；//输出结果：1（b转换为0）
console.log（b + true）；//输出结果：1（b转换为0，true转换为1）

5.数据类型的检测

可以利用typeof运算符进行数据类型检测。

console.log（typeof 12）；输出结果：number 
console.log（typeof null）；输出结果：object 
var a ='12'；
console.log（typeof a =='string'）；//输出结果：true

五、数据类型转换

1.转换成字符串

转换为字符串型的3种常见的方式：

利用“+”拼接字符串（最常用的一种方式，也叫隐式转换）
利用toString（）转换成字符串
利用String（）转换成字符串
注意：null和undefined无法使用toSting（）方式进行转换；对于数字型的变量，可以在toString（）的小括号中传入参数，来进行进制转换。

2.转换成数字类型

转换为数字型的4种常见的方式：

使用parselnt（）将字符串转为整数
使用parseFloat（）将字符串转为浮点数
使用Number（）将字符串转为数字型
利用算术运算符（-、*、1）隐式转换

3.转换成布尔类型

转换为布尔型使用Boolean（），在转换时，代表空、否定的值会被转换为false如空字符串、0、NaN、null和undefined，其余的值转换为true。

console.log（Boolean（''））；//false
console.log（Boolean（0））；//false
console.log（Boolean（NaN））；//false
console.log（Boolean（null））；//false
console.log（Boolean（undefined））；//false 
console.log（Boolean（'小白'））；//true
console.log（Boolean（12））；//true

六、运算符

1.算术运算符

算术运算符用于对两个变量或值进行算术运算，与数学上的加、减、乘、除类似，常用的算术运算符如下。请添加图片描述

2. 递增递减运算符

使用递增（++）、递减（–）运算符可以快速地对变量的值进行递增和递减操作，它属于一元运算符，只对一个表达式进行操作。

前置递增（递减）运算符：递增和递减运算符写在变量前面，返回的是计算后的结果
后置递增（递减）运算符：递增和递减运算符写在变量后面，返回的是计算前的结果
递增和递减运算符的优先级高于“+”“-”等运算符

3. 比较运算符

比较运算符用于对两个数据进行比较，其结果是一个布尔值，即true或false，常用的比较运算符及用法见下表。
请添加图片描述

4. 逻辑运算符

逻辑运算符用于对布尔值进行运算，其返回值也是布尔值。在实际开发中，逻辑运算符经常用于多个条件的判断，常用的逻辑运算符见下表。
请添加图片描述

5. 赋值运算符

赋值运算符用于将运算符右边的值赋给左边的变量，常用的逻辑运算符及示例如下。

console.log（Boolean（"））//false 
var age = 10；age += 5；//相当于age = age + 5；
console.log（age）；//输出结果：15
age-= 5；//相当于age = age-5；
console.log（age）；//输出结果：10
age*= 10；//相当于age = age*10；
console.log（age）；//输出结果：100

6. 三元运算符

三元运算符是一种需要三个操作数的运算符，运算的结果根据给定条件决定。

条件表达式？表达式1：表达式2

语法说明：先求条件表达式的值，如果为true，则返回表达式1的执行结果；如果条件表达式的值为false，则返回表达式2的执行结果。

七、流程控制

流程控制：通过控制代码的执行顺序来完成要实现的功能，流程控制的3种结构如下：

顺序结构是程序中最基本的结构，程序会按照代码的先后顺序依次执行
分支结构用于根据条件来决定是否执行某个分支代码
循环结构用于根据条件来决定是否重复执行某一段代码

1. if语句

if语句也称为条件语句、单分支语句，当满足某种条件时，就进行某种处理。

if(条件){
	表达式
}
else if{
    
}
else{
	表达式
}

2. Switch语句

switch语句也是多分支语句，功能与if…else if语句类似，不同的是它只能针对某个表达式的值作出判断，从而决定执行哪一段代码。

switch（表达式）{
	case 值1:
		代码段1；
		break；
	case 值2:
		代码段2；
		break；
	default：
		代码段n；
}

3. for语句

for语句是最常用的循环语句，它适合循环次数已知的情况。请添加图片描述

4. while循环

while语句可以在条件表达式为true的前提下，循环执行指定的一段代码，直到条件表达式为false时结束循环。
请添加图片描述

5. do…while

do…while语句会无条件地执行一次循环体中的代码，然后再判断条件，根据条件决定是否循环执行。请添加图片描述

6.continue

跳过本次循环

7. break

break关键字的用法：

用在switch语句中，当遇到break语句时，跳出switch语句
循环语句中使用时，其作用是立即跳出整个循环（将循环结束）
注意：break语句还可跳转到指定的标签语句处，实现循环嵌套中的多层跳转

八、数组 – array

1. 创建数组

创建数组的两种常见方式的用法

使用“new Array（）”创建数组
使用“[]”字面量来创建数组

使用new Array（）创建数组var arr1 = new Array（）；
使用字面量来创建数组var arr1 =[];

2.元素访问

使用索引来访问数组中的元素，索引是一个数字，从0开始。

var arr =['苹果'，橘子'，'香蕉'，‘桃子']；
console.log（arr[O]）；//输出结果：苹果
console.log（arr[1]）；//输出结果：橘子
console.log（arr[2]）；//输出结果：香蕉
console.log（arr[3]）；//输出结果：桃子
console.log（arr[4]）；//输出结果：undefined（数组元素不存在）

3. 数组遍历

数组遍历是将数组中的元素全部访问一遍，可以利用for循环来实现，在for循环中让索引从0开始自增。
如果数组元素比较多时，计算数组元素的个数不太方便，这时候可以利用“数组名.length"来快速地获取数组长度。

4. 修改数组中的元素

使用“数组名.length”可以获取或修改数组的长度。

1. 获取数组的长度

var arr =['a'，'b'，'c']；console.log（arr.length）；
//输出结果：3

2. 修改数组的长度

var arr1 =[1，2]；arr1.length = 4；//大于原有长度
console.log（arr1）；输出结果：（4）[1，2，empty × 2]
var arr2 =[1，2，3，4]；arr2.length = 2；//小于原有长度
console.log（arr2）；//输出结果：（2）[1，2]

3.访问空元素

访问空元素时，返回结果为undefined

var arr1 =[1，2]；var arr =[1]；arr.length = 4；//修改数组的长度为4
console.log（arr）；//输出结果：（4）[1，empty × 3]
console.log（arr[1]）；//输出结果：undefined

出现空元素的其他的常见情况

//情况1：在使用字面量创建数组时出现空元素
var arr =[1，2，，4]；
console.log（arr）；//输出结果：（4）[1，2，empty，4]

//情况2：在new Array（）中传入数组长度的参数
var arr = new Array（4）；
console.log（arr）；//输出结果：（4）[empty × 4]

//情况3：为数组添加索引不连续的元素
var arr =[1]；arr[3]= 4；//向数组中添加一个元素，索引为3
console.log（arr）；//输出结果：（4）[1，empty ×2，4]

4. 新增或修改数组的元素

如果给定的索引超过了数组中的最大索引，则表示新增元素，否则表示修改元素.

var arr =['red'，'green'，'blue']；arr[3]='pink'；
//新增元素
console.log（arr）；//（4）["red"，"green"，"blue"，"pink"]
arr[0]='yellow'；//修改元素
console.log（arr）；//（4）["yellow"，"green"，"blue"，"pink"]