【无标题】

最新推荐文章于 2024-07-12 16:27:40 发布

m0_61625918

最新推荐文章于 2024-07-12 16:27:40 发布

阅读量1.1k

点赞数

文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/m0_61625918/article/details/124465456

版权

JavaScrip基础（蓝旭第四次培训预习博客）

文章目录

前言
一、了解JavaScrip
- 1.1、JavaScrip是什么？
- 1.2、JavaScrip的作用
- 1.3、JavaScrip的优势
- 1.4、JavaScrip不能做
二、js的引入方式
- 2.1、head中的JavaScrip
- 2.2、body中的JavaScrip
- 2.3、外部脚本
三、JavaScrip语法规范
- 3.1、JavaScrip基本语法要求
- 3.2、JavaScrip值
- 3.3、JavaScript 运算符
- 3.4、JavaScript 表达式
- 3.5、JavaScript 标识符
四、JavaScrip数据类型
- 4.1、字符串值
- 4.2、数值
- 4.3、布尔值
- 4.4、typeof运算符
五、数组
- 5.1、数组基本了解
- 5.2、数组属性和方法
六、对象
- 6.1、对象的简单认识
- 6.2、对象属性
- 6.3、对象方法
七、作用域
- 7.1、局部JavaScrip变量
- 7.2、全局JavaScrip变量
八、函数
- 8.1、函数的定义
- 8.2、函数的调用
- 8.3、函数的参数
九、条件循环语句
- 9.1、条件语句
- 9.2、循环语句
- 9.3、循环的嵌套
- 9.4、 break语句与continue语句
十、预编译

前言

提示：这里可以添加本文要记录的大概内容：
本文主要内容为：js的引入方式、js语法规范、变量、数据类型、运算符、条件循环语句、数组、对象、函数、作用域、预编译。

提示：以下是本篇文章正文内容，下面案例可供参考

一、了解JavaScrip

JavaScript 在 1995 年由 Brendan Eich 发明，并于 1997 年成为一部 ECMA 标准。ECMA-262 是其官方名称。ECMAScript 6 （发布于 2015 年）是最新的 JavaScript 版本

1.1、JavaScrip是什么？

JavaScript 是一种驱动脚本语言（脚本语言是一种轻量级编程语言）。
JavaScript 是属于 HTML 和 Web 的编程语言。编程令计算机完成您需要它们做的工作。
JavaScrip是可以插入HTML页面的编程代码，可以由所有现代web浏览器执行。

1.2、JavaScrip的作用

JavaScript 能够改变 HTML 内容
JavaScript 能够改变 HTML 属性
JavaScript 能够改变 HTML 样式 (CSS)
JavaScript 能够隐藏 HTML 元素
JavaScript 能够显示 HTML 元素

JavaScrip可以与通过允许你执行计算、检查表单、编写交互式游戏、添加特殊效果、自定义图形选择、创建安全密码等来增强页面的动态性和交互动能。

1.3、JavaScrip的优势

容易学习。
提供与用户的交互。
允许使用文档对对象模型（DOM）创建动态网页。
JavaScrip仅限于web浏览器的上下文。

1.4、JavaScrip不能做

JavaScrip仅限于web浏览器的上下文。
图形功能还没有得到很好的开发。
没有文件输入/输出，但HTML5中有本地存储和文件API。
网络能力有限：
- URL操作
- 能够将GET/POST与XmlHttpRequest结合使用，但需遵守相同来源的JSONP协议。

二、js的引入方式

在 HTML 中，JavaScript 代码必须位于标签之间。

2.1、head中的JavaScrip

代码如下（示例）：

<!DOCTYPE html>
<html>
<head>
<script>
function myFunction() {
    document.getElementById("demo").innerHTML = "段落被更改。";
}
</script>
</head>

<body>

<h1>一张网页</h1>
<p id="demo">一个段落</p>
<button type="button" onclick="myFunction()">试一试</button>

</body>
</html>

2.2、body中的JavaScrip

JavaScript 函数被放置于 HTML 页面的 <body>部分

代码如下（示例）：

<!DOCTYPE html>
<html>
<body> 

<h1>A Web Page</h1>
<p id="demo">一个段落</p>
<button type="button" onclick="myFunction()">试一试</button>

<script>
function myFunction() {
   document.getElementById("demo").innerHTML = "段落被更改。";
}
</script>

</body>
</html>

把脚本置于 <body> 元素的底部，可改善显示速度，因为脚本编译会拖慢显示。

2.3、外部脚本

脚本可放置在外部文件中
外部文件：1.js

function myFunction() {
   document.getElementById("demo").innerHTML = "段落被更改。";
}

代码如下（实例）：

<!DOCTYPE html>
<html>
<body>

<h2>外部 JavaScript</h2>

<p id="demo">一个段落。</p>

<button type="button" onclick="myFunction()">试一试</button>

<p>（myFunction 存储在名为 "1.js" 的外部文件中。）</p>

<script src="/demo/1.js"></script>

</body>
</html>

以及：
外部url
外部文件夹

外部脚本很实用，相同的脚本可被用于许多不同的网页。 JavaScript 文件的文件扩展名是 .js。
如需使用外部脚本，请在 <script> 标签的 src (source)
属性中设置脚本的名称(外部脚本不包含<script>标签)
如果一张页面添加多个脚本文件，需使用多个script标签。

外部JavaScrip的优势

分离了 HTML 和代码
使 HTML 和 JavaScript 更易于阅读和维护
已缓存的 JavaScript 文件可加速页面加载

三、JavaScrip语法规范

3.1、JavaScrip基本语法要求

#1、JavaScript对换行、缩进、空格不敏感。
#2 、每一条语句末尾要加上分号，虽然分号不是必须加的，但是为了程序今后要压缩，如果不加分号，
     压缩之后将不能运行。
#3、所有的符号，都是英语的。比如括号、引号、分号。
#4、JavaScrip对大小写敏感。
#5、JavaScript 中不能使用连字符。它是为减法预留的。
#6、JavaScript的注释：
单行注释：             // 我是注释
多行注释：     /*   */

3.2、JavaScrip值

混合值被称为字面量（literal）

书写规则：
写数值有无小数点均可。
字符串是文本，由双引号或者单引号包围

变量值被称为变量

变量用于存储数据值
用var关键词来声明变量
=用于变量赋值
可以在一条语句中声明许多变量。
以var作为语句的开头，并以逗号分隔变量
如果再次声明某个 JavaScript 变量，将不会丢它的值。

3.3、JavaScript 运算符

算数运算符

运算符	描述
+	加法
-	减法
*	乘法
/	除法
%	取模（余数）
++	递加
- -	递减

赋值运算符

运算符	例子
=	x = y
+=	x += y
-=	x -= y
/=	x /= y
*=	x *= y
%=	x %= y

字符串运算符
请添加图片描述
此外还有 +=

比较运算符
请添加图片描述
逻辑运算符

类型运算符

位运算符

3.4、JavaScript 表达式

表达式是值、变量和运算符的组合，计算结果是值。
表达式也可包含变量值
值可以是多种类型，比如数值和字符串。
从左向右计算表达式

3.5、JavaScript 标识符

标识符是名称。
在 JavaScript 中，标识符用于命名变量（以及关键词、函数和标签）。
在 JavaScript 中，首字符必须是字母、下划线（-）或美元符号（$)。
连串的字符可以是字母、数字、下划线或美元符号。
对大小写敏感。
保留字（如JS的关键词）无法用作变量名称。

提示：数值不可以作为首字符。这样，JavaScript 就能轻松区分标识符和数值.

四、JavaScrip数据类型

了解数据类型才可以准确地操作变量
JavaScrip拥有动态类型，这意味着相同变量可用作不同类型

字符串值
数值
布尔值
数组
对象

var length = 7;                             // 数字
var lastName = "Gates";                      // 字符串
var cars = ["Porsche", "Volvo", "BMW"];         // 数组
var x = {firstName:"Bill", lastName:"Gates"};    // 对象

4.1、字符串值

字符串（或文本字符串）是一串字符（比如 “Bill Gates”）。

字符串被引号包围。可使用单引号或双引号：

var carName = "Porsche 911";   // 使用双引号
var carName = 'Porsche 911';   // 使用单引号

可以在字符串内使用引号，只要这些引号与包围字符串的引号不匹配：

var answer = "It's alright";             // 双引号内的单引号
var answer = "He is called 'Bill'";    // 双引号内的单引号
var answer = 'He is called "Bill"';    // 单引号内的双引号

4.2、数值

JavaScript 只有一种数值类型。

写数值时用不用小数点均可
超大或超小的数值可以用科学计数法来写

var x1 = 34.00;     // 带小数点
var x2 = 34;        // 不带小数点
var y = 123e5;      // 12300000

4.3、布尔值

布尔值只有两个值：true 或 false。
经常用在条件测试中。

4.4、typeof运算符

可使用 JavaScript 的 typeof 来确定 JavaScript 变量的类型
typeof 运算符返回变量或表达式的类型：

空值与 undefined 不是一回事。空的字符串变量既有值也有类型。

typeof ""                  // 返回 "string"
typeof "Bill"              // 返回 "string"
typeof 3.14                // 返回 "number"
typeof (7)                 // 返回 "number"

在 JavaScript 中，没有值的变量，其值是 undefined。typeof 也返回 undefined 。
任何变量均可通过设置值为 undefined 进行清空。其类型也将是 undefined。

var person;                  // 值是 undefined，类型是 undefined。
person = undefined;          // 值是 undefined，类型是 undefined。

null 的数据类型是对象,可以通过设置值为 null 或undefined 清空对象。（它们的值相等但是类型不相等)

五、数组

5.1、数组基本了解

定义用于在单一变量中存储多个值
数组只能用数字索引

语法数组用方括号书写，其各个项目用逗号分隔，声明可横跨多行。

数组文本方法（是创建数组最简单的方法）：

var array-name = [item1, item2, ...];		//语法
var cars = ["Porsche", "Volvo", "BMW"];

使用JS关键词new创建：

var cars = new Array("Saab", "Volvo", "BMW");   //差
var cars = [];									//优

访问数组元素
通过引用索引号（下标号）来引用某个数组元素。
数组索引基于零，这意味着第一个项目是 [0]，第二个项目是 [1]，以此类推。

访问完整数组
通过引用数组名来访问完整数组

数组是一种特殊类型的对象
在 JavaScript 中对数组使用 typeof 运算符会返回 “object”。
数组使用数字来访问其“元素”。例：

var person = ["Bill", "Gates", 62];	    //person[0]返回Bill

对象使用名称来访问其“成员”。例:

var person = {firstName:"Bill", lastName:"Gates", age:19};  //person.firstName 返回 Bill

数组元素可以是对象
JavaScript 变量可以是对象。数组是特殊类型的对象。
正因如此，可以在相同数组中存放不同类型的变量，可以在数组保存对象。您可以在数组中保存函数。你甚至可以在数组中保存数组：

myArray[0] = Date.now;
myArray[1] = myFunction;
myArray[2] = myCars;

5.2、数组属性和方法

属性
length属性返回数组的长度（数组元素的数目）

var x = cars.length;   // length 属性返回元素的数量

var fruits = ["Banana", "Orange", "Apple", "Mango"];
flen=fruits.length;                       // fruits 的长度是 4
var last = fruits[fruits.length - 1];   //访问最后一个元素
for (i = 0; i < fLen; i++) {
     text += "<li>" + fruits[i] + "</li>";		//遍历数组元素
} 
fruits[fruits.length] = "Lemon";     // 向 fruits 添加一个新元素 (Lemon)

方法

方法 toString() 把数组转换为数组值（逗号分隔）的字符串。

例：输出结果是Banana,Orange,Apple,Mango

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript 数组方法</h1> 
<h2>toString()</h2>
<p>toString() 方法以逗号分隔的字符串返回数组：</p>
<p id="demo"></p>

<script>
var fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo").innerHTML = fruits.toString();
</script>

</body>
</html>

join() 方法也可将所有数组元素结合为一个字符串。
它的行为类似 toString()，但是您还可以规定分隔符

例：结果是 Banana * Orange * Apple * Mango

var fruits = ["Banana", "Orange","Apple", "Mango"];
document.getElementById("demo").innerHTML = fruits.join(" * ");

pop() 方法从数组中删除最后一个元素,返回被弹出的值。
push() 方法（在数组结尾处）向数组添加一个新的元素。
push() 方法返回新数组的长度：

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.push("Kiwi");       //  向 fruits 添加一个新元素
var x =  fruits.push("Kiwi");   //  x 的值是 5

shift() 方法会删除首个数组元素，并把所有其他元素“位移”到更低的索引，
返回被“位移出”的字符串
unshift()方法（在开头）向数组添加新元素，并“反向位移”旧元素
unshift() 方法返回新数组的长度:

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.unshift("Lemon");    // 向 fruits 添加新元素 "Lemon"
fruits.unshift("Lemon");    // 返回 5

splice() 方法可用于向数组添加新项
例：新数组：Banana,Orange,Lemon,Kiwi,Apple,Mango
第一个参数（2）定义了应添加新元素的位置（拼接）。
第二个参数（0）定义应删除多少元素。
其余参数（“Lemon”，“Kiwi”）定义要添加的新元素。

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.splice(2, 0, "Lemon", "Kiwi");

splice() 方法返回一个包含已删除项的数组：
例：新数组：Banana,Orange,Lemon,Kiwi

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.splice(2, 2, "Lemon", "Kiwi");

使用 splice() 在数组中不留“空洞”的情况下移除元素:

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.splice(0, 1);        // 删除 fruits 中的第一个元素

8.concat()方法通过合并（连接）现有数组来创建一个新数组：

concat() 方法不会更改现有数组。它总是返回一个新数组。
concat() 方法可以使用任意数量的数组参数
concat() 方法也可以将值作为参数(将值直接合并到数组)
slice() 方法用数组的某个片段切出新数组。
例：从数组元素 1（“Orange”）开始切出数组的一部分：
Banana,Orange,Lemon,Apple,Mango
Orange,Lemon,Apple,Mango

var fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"];
var citrus = fruits.slice(1);

注意 slice() 方法创建新数组。它不会从源数组中删除任何元素。

slice() 可接受两个参数，比如 (1, 3)。该方法会从开始参数选取元素，直到结束参数（不包括）为止
如果结束参数被省略，比如第一个例子，则 slice() 会切出数组的剩余部分。

toString() 方法以逗号分隔的字符串返回数组

六、对象

6.1、对象的简单认识

在 JavaScript 中，几乎“所有事物”都是对象。

布尔是对象（如果用 new 关键词定义）
数字是对象（如果用 new 关键词定义）
字符串是对象（如果用 new 关键词定义）
日期永远都是对象
算术永远都是对象
正则表达式永远都是对象
数组永远都是对象
函数永远都是对象
对象永远都是对象

所有 JavaScript 值，除了原始值，都是对象。

JavaScrip原始值：没有属性或方法的值
原始数据类型：指的是拥有原始值的数据。
JavaScript 定义了 5 种原始数据类型：

string
number
boolean
null
undefined
原始值是一成不变的（它们是硬编码的，因此不能改变.

语法：对象用花括号来书写。
对象属性是 name:value 对，由逗号分隔。

var person = {firstName:"Bill", lastName:"Gates", age:62, eyeColor:"blue"};

对象是包含变量的变量
JavaScript 变量能够包含单个的值
对象也是变量。但是对象能够包含很多值。

6.2、对象属性

属性指的是与 JavaScript 对象相关的值。
JavaScript 对象是无序属性的集合。
属性通常可以被修改、添加和删除，但是某些属性是只读的。
语法：

objectName.property           // person.age
objectName["property"]       // person["age"]
objectName[expression]       // x = "age"; person[x]

通过简单的赋值，向已存在的对象添加新属性
delete 关键词从对象中删除属性(包括属性值和属性本身)
delete 不会删除被继承的属性

属性值
所有属性都有名称。此外它们还有值。值是属性的特性之一。

6.3、对象方法

JavaScript 方法是包含函数定义的属性。

创建对象语法

methodName : function() { 代码行 }

访问对象方法

objectName.methodName()

使用内建方法：库里已有的方法

何时使用数组，何时使用对象？
JavaScript 不支持关联数组
如果希望元素名为字符串（文本）则应该使用对象。
如果希望元素名为数字则应该使用数组

七、作用域

两种类型：

局部作用域
全局作用域
作用域决定了这些变量的可访问性（可见性）。
函数内部定义的变量从函数外部是不可访问的（不可见的）。

7.1、局部JavaScrip变量

局部变量的作用域是局部的：只能在函数内部访问它们。

// 此处的代码不能使用 carName 变量

function myFunction() {
    var carName = "porsche";

    // 此处的代码能使用 carName 变量

}

由于只能在函数内部识别局部变量，因此能够在不同函数中使用同名变量。
在函数开始时会创建局部变量，在函数完成时会删除它们。

7.2、全局JavaScrip变量

全局变量的作用域是全局的：网页的所有脚本和函数都能够访问它。

var carName = "liu";

// 此处的代码能够使用 carName 变量

function myFunction() {

    // 此处的代码也能够使用 carName 变量

}

如果为尚未声明的变量赋值，此变量会自动成为全局变量。
在脚本中声明表示全局作用域
JavaScript 变量的有效期
JavaScript 变量的有效期始于其被创建时。
局部变量会在函数完成时被删除。
全局变量会在您关闭页面是被删除。

八、函数

JavaScript 函数是被设计为执行特定任务的代码块。
JavaScript 函数会在某代码调用它时被执行。
函数的使用分为两步：声明函数和调用函数

8.1、函数的定义

JavaScript 函数是通过 function 关键词定义的。可以使用函数声明或函数表达式。
语法：

function 函数名() {
					函数体
}

function声明函数的关键字全部小写
函数名一般为动词
声明函数本身并不会执行代码

8.2、函数的调用

调用函数通常也可以说“启动函数”或“执行函数”。

函数不调用，自己不执行
调用的时候千万不要忘记加小括号

调用方法有三种：

1.以函数形式调用函数
示例：

<script>
function myFunction(a, b) {
  return a * b;
}
document.getElementById("demo").innerHTML = myFunction(10, 2); 
</script>

2.把函数定义为对象方法来调用函数
示例：

<script>
var myObject = {
  firstName:"Bill",
  lastName: "Gates",
  fullName: function() {
    return this.firstName + " " + this.lastName;
  }
}
document.getElementById("demo").innerHTML = myObject.fullName(); 
</script>

3.通过函数构造器来调用函数
示例:

<script>
function myFunction(arg1, arg2) {
  this.firstName = arg1;
  this.lastName  = arg2;
}

var x = new myFunction("Bill","Gates")
document.getElementById("demo").innerHTML = x.firstName; 
</script>

this 关键词

在 JavaScript 中，被称为 this 的事物，指的是“拥有”当前代码的对象。

this 的值，在函数中使用时，是“拥有”该函数的对象。

this 并不是变量。它属于关键词。无法改变它的值。

8.3、函数的参数

函数参数（parameter）指的是在函数定义中列出的名称。

函数参数（argument）指的是传递到函数或由函数接收到的真实值。arguments 对象包含函数调用时使用的参数数组。

规则：

JavaScript 函数定义不会为参数（parameter）规定数据类型。
JavaScript 函数不会对所传递的参数（argument）实行类型检查。
JavaScript 函数不会检查所接收参数（argument）的数量。

在声明函数时，可以在函数名称后面的小括号中添加一些参数，这些参数成为形参；而在调用该函数时，同样也需要传递相应的参数，这些参数被称为实参。

参数	说明
形参	形式上的参数函数定义的时候传递的参数当前并不知道是什么
实参	实际上的参数函数调用的时候传递的参数实参是传递给形参的

语法：

function 函数名(形参1，形参2）；{
 函数代码
 }
 函数名（实参1，实参2）；

九、条件循环语句

9.1、条件语句

if结构

if(表达式){
	执行语句
}else if(表达式2) {
	执行语句2 ;
}else if(表达式3 ){
	执行语句3;
}else{
	执行语句n;

当括号内的表达式结果成立(为true时)，则执行大括号内的语句，否则不执行。
括号里的表达式一般是关系表达式或者逻辑表达式

注意
if后面的()不能省略。
一对{ }都不能省略。

switch-case-default结构

switch(表达式){
	case常量1:
		语句1;
		break;
	case常量2:
		语句2;
		break;
	default:
		如果上述语句都不成立，执行这里;
		break;

表达式的结果等于哪个case的常量，则执行其后的语句，执行完break以后，就跳出switch结构，如果都不满足，执行default语句。
break的作用：是跳出switch结构，如果没有break，则继续执行下面分支的的语句(而不进行判断)。

9.2、循环语句

for - 循环代码块一定的次数
for/in - 循环遍历对象的属性
while （do/while ）- 当指定的条件为 true 时循环指定的代码块

for循环
（1）语法格式

for(表达式1:表达式2:表达式3)
{
	循环语句;
}

（2）for循环三个表达式的说明:
三个表达式都可以省略，但分号不能省略，省略后都可改写。
如:省略表达式1,需在循环外初始化循环变量。

var i=1;
for(;<=100;i++){
	sum=sum+i;
}

省略2，陷入死循环

for/in 循环遍历对象的属性或数组中的元素
常用于遍历对象

<script>
	var obj = {
		name: '小王',
		age: 18
	}
	for (var k in obj) {
		console.log(obj[k]);
	}
</script>

while (do while)循环
（1）语法格式:

while(表达式)			do{
	循环语句;				表达式；	
						}
}						while(表达式)

while和do while的区别

执行顺序的问题，while是先判断，do-while,先执行循环体的代码，再判断。当条件第一次就不满足时，更能体现出区别。
在开发中，while用的情况多。如果while处理逻辑比较别扭时，就需要使用do-while。

9.3、循环的嵌套

while(){
	while()
	{..}
}

do{
	do
	{...}while();
}while();

for(;;)
{
	for(;;)
	{..}
}

do{
	while()
	{...}
}while();

for(;;)
{
	while()
	{..}
}

9.4、 break语句与continue语句

（1）break语句

在swith语句中使流程跳出switch。
在循环语句中使流程跳出当前的循环。

（2）continue语句
只能在循环语句中使用，使本次循环结束，即跳过循环体中下面尚未执行的语句，接着进行下次是否执行循环的判断。

十、预编译

JS运动过程：

语法分析
预编译
解释执行

预编译（函数执行的前一刻）四部曲：

创建AO对象（Activation Object）（执行上下文）；
找函数形参和函数内变量声明，将形参名和变量名作为AO对象的属性名，值为 undefined；
将实参值和形参统一，实参值赋给形参；
在函数体里面找函数声明，值赋予函数体。

m0_61625918

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
【无标题】

JavaScrip基础（蓝旭第四次培训预习博客）文章目录前言一、了解JavaScrip1.1、JavaScrip是什么？1.2、JavaScrip的作用1.3、JavaScrip的优势1.4、JavaScrip不能做二、js的引入方式2.1、head中的JavaScrip2.2、body中的JavaScrip2.3、外部脚本总结前言提示：这里可以添加本文要记录的大概内容：本文主要内容为：js的引入方式、js语法规范、变量、数据类型、运算符、条件循环语句、数组、对象、函数、作用域、预编译。提.
复制链接

扫一扫