JavaScript（一）

最新推荐文章于 2022-09-01 14:43:02 发布

Brilliance02

最新推荐文章于 2022-09-01 14:43:02 发布

阅读量1k

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/weixin_62814848/article/details/122496246

版权

介绍

JavaScript 是世界上最流行的语言之一，是一种运行在客户端的脚本语言（Script 是脚本的意思）
脚本语言：不需要编译，运行过程中由 js 解释器( js 引擎）逐行来进行解释并执行
浏览器分成两部分：渲染引擎和 JS 引擎
渲染引擎：用来解析HTML与CSS，俗称内核，比如 chrome 浏览器的 blink ，老版本的 webkit
JS 引擎：也称为 JS 解释器。用来读取网页中的JavaScript代码，对其处理后运行，比如 chrome 浏览器的 V8
浏览器本身并不会执行JS代码，而是通过内置 JavaScript 引擎(解释器) 来执行 JS 代码。JS 引擎执行代码时逐行解释每一句源码（转换为机器语言），然后由计算机去执行，所以 JavaScript 语言归为脚本语言，会逐行解释执行。

JavaScript的功能

JavaScript 能够改变 HTML 内容（文字内容）

document.getElementById("demo").innerHTML = "Hello JavaScript";

JavaScript 能够改变 HTML 属性

document.getElementById('myImage').src='/i/eg_bulbon.gif'

JavaScript 能够改变 HTML 样式 (CSS)，属于改变 HTML 属性的一种。

document.getElementById("demo").style.fontSize = "25px";

JavaScript 能够隐藏 HTML 元素

document.getElementById("demo").style.display="none";

JavaScript 能够显示 HTML 元素

document.getElementById("demo").style.display="block";

JavaScript 组成

JavaScript 包括 ECMAScript、DOM、BOM

ECMAScript：JavaScript语法
DOM：页面文档对象模型
BOM：浏览器对象模型

ECMAScript

ECMAScript 是由ECMA 国际（原欧洲计算机制造商协会）进行标准化的一门编程语言，这种语言在万维网上应用广泛，它往往被称为 JavaScript 或 JScript，但实际上后两者是 ECMAScript 语言的实现和扩展。

ECMAScript：ECMAScript 规定了JS的编程语法和基础核心知识，是所有浏览器厂商共同遵守的一套JS语法工业标准。

DOM文档对象模型

文档对象模型（Document Object Model，简称DOM），是W3C组织推荐的处理可扩展标记语言的标准编程接口。通过 DOM 提供的接口可以对页面上的各种元素进行操作（大小、位置、颜色等）。

BOM浏览器对象模型

BOM (Browser Object Model，简称BOM) 是指浏览器对象模型，它提供了独立于内容的、可以与浏览器窗口进行互动的对象结构。通过BOM可以操作浏览器窗口，比如弹出框、控制浏览器跳转、获取分辨率等。

JS的引用

< head > 或 < body > 中的 JavaScript

在 HTML 中，JavaScript 代码必须位于< script> 与 < /script>标签之间。
旧的 JavaScript 例子会使用 type 属性：< script type=“text/javascript”>。
type 属性不是必需的。JavaScript 是 HTML 中的默认脚本语言。

能够在 HTML 文档中放置任意数量的脚本。
脚本可被放置与 HTML 页面的 < body> 或 < head> 部分中，或兼而有之。
把脚本置于 < body> 元素的底部，可改善显示速度，因为脚本编译会拖慢显示。

外部脚本

外部文件：myScript.js

外部脚本很实用，可用于相同的脚本被用于许多不同的网页。
JavaScript 文件的文件扩展名是 .js。
如需使用外部脚本，要在 < script> 标签的 src (source) 属性中引入脚本
可以在 < head> 或 < body> 中放置外部脚本引用。
脚本的表现与它被置于 < script> 标签中是一样的。
外部脚本不能包含 < script> 标签。

外部 JavaScript 的优势

分离了 HTML 和代码
使 HTML 和 JavaScript 更易于阅读和维护
已缓存的 JavaScript 文件可加速页面加载
如需向一张页面添加多个脚本文件 - 使用多个 script 标签引入脚本

JS输出

JavaScript 不提供任何内建的打印或显示函数。

使用 innerHTML

如需访问 HTML 元素，JavaScript 可使用 document.getElementById(id) 方法。

id是在HTML中定义的id。innerHTML 属性表示 HTML的内容。

更改 HTML 元素的 innerHTML 属性是在 HTML 中显示数据的常用方法。

<!DOCTYPE html>
<html>
<body>
<h1>我的第一张网页</h1>
<p>我的第一个段落</p>
<p id="demo"></p>//显示5+6的结果
<script>
 document.getElementById("demo").innerHTML = 5 + 6;
</script>
</body>
</html>

使用 document.write()

出于测试目的，使用 document.write() 比较方便，document.write() 方法仅用于测试。

<!DOCTYPE html>
<html>
<body>
<h1>我的第一张网页</h1>
<p>我的第一个段落</p>
<script>
document.write(5 + 6);
</script>
</body>
</html>

在 HTML 文档完全加载后结合按钮使用 document.write() 将删除所有已有的 HTML 。

<!DOCTYPE html>
<html>
<body>
<h1>我的第一张网页</h1>
<p>我的第一个段落</p>
<button onclick="document.write(5 + 6)">试一试</button>//点击按钮后，HTML中输出的文字消失。
</body>
</html>

使用 window.alert()

使用警告框来显示数据

<!DOCTYPE html>
<html>
<body>
<h1>我的第一张网页</h1>
<p>我的第一个段落</p>
<script>
alert("hello");
</script>
</body>
</html>

使用 console.log()

使用JavaScript向控制台输出一句话

按F12弹出控制台

<script>
    console.log("输出一条日志");//最常用
    console.info("输出一条信息");
    console.warn("输出一条警告");
    console.error("输出一条错误");
</script>

JS语句语法

分号

分号分隔 JavaScript 语句。在每条可执行的语句之后应该添加分号。
如果有分号分隔，允许在同一行写多条语句：
以分号结束语句不是必需的，但仍强烈建议加分号。

JavaScript 行长度和折行

为了达到最佳的可读性，程序员们常常喜欢把代码行控制在 80 个字符以内。
如果 JavaScript 语句太长，对其进行折行的最佳位置是某个运算符：

JavaScript 代码块

JavaScript 语句可以用花括号{…}组合，形成代码块。
代码块的作用是定义一同执行的语句。

JavaScript的运算符

JavaScript 使用算数运算符（+ - * /）来计算值
JavaScript 使用赋值运算符（=）向变量赋值

JavaScript 表达式

表达式是值、变量和运算符的组合，计算结果是值；以分号结尾。
值可以是多种类型，比如数值和字符串。
例如，“Bill” + " " + “Gates”，计算为 “Bill Gates”。

JavaScript 注释

单行注释：用//，后边加被注释的内容
多行注释：/* 被注释的内容*/

JavaScript 对大小写敏感
所有 JavaScript 标识符对大小写敏感。
变量 lastName 和 lastname，是两个不同的变量。

把多个单词连接为一个变量名的方法

连字符
first-name, last-name, master-card, inter-city.
注释：JavaScript 中不能使用连字符。它是为减法预留的。
下划线
first_name, last_name, master_card, inter_city.
驼峰式大小写（Camel Case）
以大小写来区分单词
FirstName, LastName, MasterCard, InterCity.

JavaScript变量

JavaScript 语句定义了两种类型的值：混合值和变量值。
混合值被称为字面量（literal）。变量值被称为变量。

字面量

数值：可以是小数也可以是整数。
字符串：是文本，由双引号或单引号包围

变量

JavaScript 变量是存储数据值的容器。
构造变量名（唯一标识符）的通用规则是：
- 名称可包含字母、数字、下划线和美元符号
- 名称必须以字母开头
- 名称也可以 $ 和 _ 开头
- 名称对大小写敏感（y 和 Y 是不同的变量）
- 保留字（比如 JavaScript 的关键词）无法用作变量名称

定义变量：var + 变量名；

声明之后，变量是没有值的。（技术上，它的值是 undefined。）
JavaScript 变量可存放数值，比如 100，以及文本值，比如 “Bill Gates”。
字符串被包围在双引号或单引号中，数值不用引号；如果把数值放在引号中，会被视作文本字符串。
没有初始化的变量，它的值将是 undefined。

<p id="demo"></p>
<script>
var carName = "porsche";
document.getElementById("demo").innerHTML = carName; 
</script>

重复声明 JavaScript 变量

如果再次声明某个 JavaScript 变量，将不会丢失它的值。

在这两条语句执行后，变量 carName 的值仍然是 “porsche”：

var carName = "porsche";
var carName;

JavaScript Let

全局作用域

全局（在函数之外）声明的变量拥有全局作用域。全局变量可以在 JavaScript 程序中的任何位置访问。

var carName = "porsche";
// 此处的代码可以使用 carName
function myFunction() {
  // 此处的代码也可以使用 carName
}

函数作用域

局部（函数内）声明的变量拥有函数作用域。局部变量只能在它们被声明的函数内访问。

// 此处的代码不可以使用 carName
function myFunction() {
  var carName = "porsche";
  // 此处的代码可以使用 carName
}
// 此处的代码不可以使用 carName

JavaScript 块作用域

通过 var 关键词声明的变量没有块作用域。在块 { } 内声明的变量可以从块之外进行访问。

{ 
  var x = 10; 
}
// 此处可以使用 x

可以使用 let 关键词声明拥有块作用域的变量。使在块 { } 内声明的变量无法从块外访问

{ 
  let x = 10;
}
// 此处不可以使用 x，将变量的作用域限制在{ }内

在函数内和全局内，var和let作用相似

重新声明变量

用var在块中重新声明变量也将重新声明块外的变量

var x = 10;
// 此处 x 为 10
{ 
  var x = 6;
  // 此处 x 为 6
}
// 此处 x 为 6

使用 let 关键字在块中重新声明变量不会影响块外的变量。

var x = 10;
// 此处 x 为 10
{ 
  let x = 6;
  // 此处 x 为 6
}
// 此处 x 为 10

允许在程序的任何位置使用 var 重新声明 JavaScript 变量
在相同的作用域，或在相同的块中，通过 let 重新声明一个 var 变量是不允许的
在相同的作用域，或在相同的块中，通过 let 重新声明一个 let 变量是不允许的
在相同的作用域，或在相同的块中，通过 var 重新声明一个 let 变量是不允许的
在不同的作用域或块中，通过 let 重新声明变量是允许的

在循环中var和let的区别

var i = 7;
for (var i = 0; i < 10; i++) {
  // 一些语句
}
// 此处，i 为 10

使用let不影响循环外边

let i = 7;
for (let i = 0; i < 10; i++) {
  // 一些语句
}
// 此处 i 为 7

HTML 中的全局变量

使用 JavaScript 的情况下，全局作用域是 JavaScript 环境。

在 HTML 中，全局作用域是 window 对象。

通过 var 关键词定义的全局变量属于 window 对象：

<p id="demo"></p>
<script>
var carName = "Audi";
// 此处的代码能够使用 window.carName
document.getElementById("demo").innerHTML = "我可以显示 " + window.carName;
</script>

通过 let 关键词定义的全局变量不属于 window 对象：

<p id="demo"></p>
<script>
let carName = "Audi";
// 此处的代码不能够使用 window.carName
document.getElementById("demo").innerHTML = "我不能显示 " + window.carName;
</script>

先后问题

通过 var 声明的变量会提升到顶端。可以在声明变量之前就使用它
通过 let 定义的变量不会被提升到顶端。在声明 let 变量之前就使用它会导致 ReferenceError。变量从块的开头一直处于“暂时死区”，直到声明为止。

JavaScript const

在块作用域内使用 const 声明的变量与 let 变量相似。

var x = 10;
// 此处，x 为 10
{ 
  const x = 6;
  // 此处，x 为 6
}
// 此处，x 为 10

JavaScript const 变量必须在声明时赋值
如果将一个原始值赋给常量，就不能改变原始值了；无法重新为常量对象赋值。

const PI = 3.14159265359;

可以更改常量对象的属性

// 您可以创建 const 对象：
const car = {type:"porsche", model:"911", color:"Black"};
// 可以更改属性：
car.color = "White";
// 可以添加属性：
car.owner = "Bill";

常量数组可以更改，可以更改常量数组的元素

// 可以创建常量数组：
const cars = ["Audi", "BMW", "porsche"];
// 可以更改元素：
cars[0] = "Honda";
// 可以添加元素：
cars.push("Volvo");

但无法重新为常量数组赋值

const cars = ["Audi", "BMW", "porsche"];
cars = ["Honda", "Toyota", "Volvo"];    // ERROR

重新声明

在同一作用域或块中，不允许将已有的 var 或 let 变量重新声明或重新赋值给 const
在同一作用域或块中，为已有的 const 变量重新声明声明或赋值是不允许的；在另外的作用域或块中重新声明 const 是允许的
通过 const 定义的变量不会被提升到顶端。const 变量不能在声明之前使用

JavaScript运算符

在 JavaScript 中，等号（=）是赋值运算符，而不是“等于”运算符；
JavaScript 中的“等于”运算符是 ==
运算符也可用于对字符串进行相加（concatenate，级联）；在用于字符串时，+ 运算符被称为级联运算符

txt1 = "Bill";
txt2 = "Gates";
txt3 = txt1 + " " + txt2; //Bill Gates

+= 赋值运算符也可用于相加（级联）字符串

txt1 = "Hello ";
txt1 += "Kitty!"; //Hello Kitty!

相加两个数字，将返回和，但对一个数字和一个字符串相加将返回一个字符串。

区分

var x = "8" + 3 + 5;//835
var x = 3 + 5 + "8";//88

在第一个例子中，JavaScript 把 911 和 7 视作数值，直到遇见 “Porsche”。
在第二个例子中，由于第一个操作数是字符串，因此所有操作数都被视为字符串。

JavaScript 算数运算符

幂
取幂运算符（**）第一个数是底数，第二个数是指数

var x = 5;
var z = x ** 2;          // 结果是 25

x ** y 产生的结果与 Math.pow(x,y) 相同

var x = 5;
var z = Math.pow(x,2);   // 结果是 25

JavaScript 数据类型

JavaScript 拥有动态类型。意味着相同变量可用作不同类型

JavaScript 字符串

字符串被引号包围。可使用单引号或双引号。
可以在字符串内使用引号，只要这些引号与包围字符串的引号不匹配（外部用双引号内部就用单引号，反之一样。）

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

JavaScript 数值
JavaScript 只有一种数值类型。

写数值时用不用小数点均可；3.0和3是一样的。
超大或超小的数值可以用科学计数法来写；1e5.

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

数组
JavaScript 数组用方括号书写。数组的项目由逗号分隔。

var cars = ["Porsche", "Volvo", "BMW"];

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

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

上例中的对象（person）有四个属性：firstName、lastName、age 以及 eyeColor。（类似于结构体）

typeof 运算符

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

typeof "Bill"              // 返回 "string"
typeof 314                 // 返回 "number"

字符串返回string
数字返回number
布尔型返回boolean
undefined返回undefined
对象，数组返回object
函数返回function
typeof 运算符对数组返回 “object”，因为在 JavaScript 中数组属于对象

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

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

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

var car = "";                // 值是 ""，类型是 "string"

Null
null 的数据类型是对象（可以把 null 在 JavaScript 中是对象理解为一个 bug。它本应是 null）；可以通过设置值为 null 清空对象

var person = null;           // 值是 null，但是类型仍然是对象
var person = undefined;      // 值是 undefined，类型是 undefined。

Undefined 与 Null 的区别
Undefined 与 null 的值相等，但类型不相等

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

函数

如果访问没有 () 的函数将返回函数定义；即函数代码

对象

//把多个值（porsche, 911, white）赋给名为 car 的变量：
var car = {type:"porsche", model:"911", color:"white"};

对象属性
名称:值对被称为属性

对象方法
对象也可以有方法。
方法是在对象上执行的动作。
方法以函数定义被存储在属性中（属性：属性值是一个函数）。

var person = {
  firstName: "Bill",
  lastName : "Gates",
  id       : 678,
  fullName : function() {
    return this.firstName + " " + this.lastName;
  }
};

this 关键词
在函数定义中，this 引用该函数的“拥有者”。（this.firstName=person.firstName）
在上例子中，this 指的是“拥有” fullName 函数的 person。
换言之，this.firstName 的意思是 this 对象的 firstName 属性。

访问对象属性

//以下两种方法都可以
objectName.propertyName
objectName["propertyName"]

访问对象方法

objectName.methodName()
//如果不使用 () 访问 fullName 方法，则将返回函数定义

不要把字符串、数值和布尔值声明为对象类型！
如果通过关键词 “new” 来声明 JavaScript 变量，则该变量会被创建为对象：

var x = new String();        // 把 x 声明为 String 对象
var y = new Number();        // 把 y 声明为 Number 对象
var z = new Boolean();       //	把 z 声明为 Boolean 对象

要避免字符串、数值或逻辑是对象类型。会增加代码的复杂性并降低执行速度。

事件

HTML 事件
HTML 事件是浏览器或用户做的某些事情。

下面是 HTML 事件的一些例子：

HTML 网页完成加载
HTML 输入字段被修改
HTML 按钮被点击

当用户执行一些操作时，计算机的反应

每当页面加载时应该做的事情
当页面被关闭时应该做的事情
当用户点击按钮时应该被执行的动作
当用户输入数据时应该被验证的内容

世界	描述
onchange	HTML 元素已被改变
onclick	用户点击了 HTML 元素
onmouseover	用户把鼠标移动到 HTML 元素上
onmouseout	用户把鼠标移开 HTML 元素
onkeydown	用户按下键盘按键
onload	浏览器已经完成页面加载

Brilliance02

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
JavaScript（一）

目录介绍JavaScript的功能JavaScript 组成ECMAScriptDOM文档对象模型BOM浏览器对象模型JS的引用< head > 或 < body > 中的 JavaScript外部脚本外部文件：myScript.js外部 JavaScript 的优势JS输出使用 innerHTML使用 document.write()使用 window.alert()使用 console.log()JS语句语法JavaScript变量JavaScript Let全局作用域函数作用域
复制链接

扫一扫