JavaScript快速入门（含ECMAScript基本语法相关介绍）

精选原创

wx64071ec923ce6 2023-03-07 20:45:42 博主文章分类：js ©著作权

文章标签 js 文章分类 Java 后端开发

©著作权归作者所有：来自51CTO博客作者wx64071ec923ce6的原创作品，请联系作者获取转载授权，否则将追究法律责任

一.概念

二.功能

三.ECMAScript：客户端脚本语言的标准

1. JavaScript引入方式

1. 内部脚本：

2. 外部脚本：

2.书写语法

3.输出语句

1.使用 window.alert() 写入警告框

2.使用 document.write() 写入 HTML 输出

4.变量

5.数据类型

1.原始数据类型：

2. 引用数据类型：对象(本篇不介绍)

6.运算符

7.类型转换

1.其他类型转为number

2.boolean 转换为 number 类型：true 转为1，false转为0

3.其他类型转为boolean

4.使用场景

8.流程控制语句

一.概念

*JavaScript 是一门跨平台、面向对象的脚本语言，而Java语言也是跨平台的、面向对象的语言，只不过Java是编译语言，是需要编译成字节码文件才能运行的；JavaScript是脚本语言，行在客户端浏览器中的，不需要编译，由浏览器直接解析并执行。每一个浏览器都有JavaScript的解析引擎

*JavaScript 和 Java 是完全不同的语言，不论是概念还是设计，只是名字比较像而已。但是基础语法类似，所以我们有java的学习经验，再学习JavaScript 语言就相对比较容易些。

* JavaScript = ECMAScript + JavaScript自己特有的东西(BOM+DOM)

二.功能

可以来增强用户和html页面的交互过程，可以来控制html元素，让页面有一些动态的效果，增强用户的体验。

eg：

如改变页面内容

JavaScript快速入门（含ECMAScript基本语法相关介绍）_js

JavaScript快速入门（含ECMAScript基本语法相关介绍）_js_02 编辑

当我点击上面左图的 `点击我` 按钮，按钮上面的文本就改为上面右图内容，这就是js 改变页面内容的功能。

修改指定元素的属性值

JavaScript快速入门（含ECMAScript基本语法相关介绍）_js_03

JavaScript快速入门（含ECMAScript基本语法相关介绍）_js_04 编辑

当我们点击上图的 `开灯` 按钮，效果就是上面右图效果；当我点击 `关灯` 按钮，效果就是上面左图效果。其他这个功能中有两张灯泡的图片（使用img标签进行展示），通过修改 img 标签的 src 属性值改变展示的图片来实现。

对表单进行校验

JavaScript快速入门（含ECMAScript基本语法相关介绍）_js_05

JavaScript快速入门（含ECMAScript基本语法相关介绍）_js_06 编辑

在上面左图的输入框输入用户名，如果输入的用户名是不满足规则的就展示右图(上) 的效果；如果输入的用户名是满足规则的就展示右图(下) 的效果。

三.ECMAScript：客户端脚本语言的标准

基础语法：

1. JavaScript引入方式

JavaScript 引入方式就是 HTML 和 JavaScript 的结合方式。JavaScript引入方式有两种：

* 内部脚本：将 JS代码定义在HTML页面中

* 外部脚本：将 JS代码定义在外部 JS文件中，然后引入到 HTML页面中

1. 内部脚本：

* 定义<script>，标签体内容就是js代码

代码演示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<script>
    alert("hello js1");
</script>
</body>
</html>

JavaScript快速入门（含ECMAScript基本语法相关介绍）_js_07

效果如下：

JavaScript快速入门（含ECMAScript基本语法相关介绍）_js_08

JavaScript快速入门（含ECMAScript基本语法相关介绍）_js_09 编辑

补充：

1.`alert(数据)` 是 JavaScript 的一个方法，作用是将参数数据以浏览器弹框的形式输出出来

2.可以在 HTML 文档中可以在任意地方，放置任意数量的<script>标签，但一般把脚本置于 <body> 元素的底部，可改善显示速度。因为浏览器在加载页面的时候会从上往下进行加载并解析。我们应该让用户看到页面内容，然后再展示动态的效果。

2. 外部脚本：

* 定义<script>，通过src属性引入外部的js文件

代码演示：

项目结构如下：

JavaScript快速入门（含ECMAScript基本语法相关介绍）_js_10

JavaScript快速入门（含ECMAScript基本语法相关介绍）_js_11 编辑

demo.js 文件内容如下：

alert("hello js");

JavaScript快速入门（含ECMAScript基本语法相关介绍）_js_12

在页面使用 `script` 标签中使用 `src` 属性指定 js 文件的 URL 路径。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<script src="../js/demo.js"></script>
</body>
</html>

JavaScript快速入门（含ECMAScript基本语法相关介绍）_js_13

注意：

1.外部脚本不能包含 `<script>` 标签

在js文件中直接写 js 代码即可，不要在 js文件中写 `script` 标签

2.`<script>` 标签不能自闭合

在页面中引入外部js文件时，不能写成 `<script src="../js/demo.js" />`。

2.书写语法

1.区分大小写：与 Java 一样，变量名、函数名以及其他一切东西都是区分大小写的

2.每行结尾的分号可有可无，如果一行上写多个语句时，必须加分号用来区分多个语句。

3.注释

* 单行注释：// 注释内容

* 多行注释：/* 注释内容 */

注意：JavaScript 没有文档注释

4.大括号表示代码块

3.输出语句

js 可以通过以下方式进行内容的输出，只不过不同的语句输出到的位置不同

1.使用 window.alert() 写入警告框

代码演示：

<!DOCTYPE html>
  <html lang="en">
  <head>
      <meta charset="UTF-8">
      <title>Title</title>
  </head>
  <body>
      
  <script>
      window.alert("hello js");//写入警告框
  </script>
  </body>
  </html>

JavaScript快速入门（含ECMAScript基本语法相关介绍）_js_14

效果演示：

JavaScript快速入门（含ECMAScript基本语法相关介绍）_js_15

JavaScript快速入门（含ECMAScript基本语法相关介绍）_js_16 编辑

2.使用 document.write() 写入 HTML 输出

代码演示：

<!DOCTYPE html>
  <html lang="en">
  <head>
      <meta charset="UTF-8">
      <title>Title</title>
  </head>
  <body>
      
  <script>
      document.write("hello js 2~");//写入html页面
  </script>
  </body>
  </html>

JavaScript快速入门（含ECMAScript基本语法相关介绍）_js_17

效果演示：

JavaScript快速入门（含ECMAScript基本语法相关介绍）_js_18

JavaScript快速入门（含ECMAScript基本语法相关介绍）_js_19 编辑

其中`console.log(内容)` 输出的内容在控制台上，而怎么在控制台查看输出的内容呢？在浏览器界面按 `F12` 就可以看到下图的控制台

JavaScript快速入门（含ECMAScript基本语法相关介绍）_js_20

JavaScript快速入门（含ECMAScript基本语法相关介绍）_js_21 编辑

4.变量

JavaScript 中用 var 关键字（variable 的缩写）来声明变量。格式 `var 变量名 = 数据值;`。而在JavaScript 是一门弱类型语言，变量可以存放不同类型的值；如下在定义变量时赋值为数字数据，还可以将变量的值改为字符串类型的数

var test = 20;
test = "张三";

JavaScript快速入门（含ECMAScript基本语法相关介绍）_js_22

js 中的变量名命名也有如下规则，和java语言基本都相同

* 组成字符可以是任何字母、数字、下划线（_）或美元符号（$）

* 数字不能开头

* 建议使用驼峰命名

JavaScript 中 `var` 关键字有点特殊，有以下地方和其他语言不一样

1.作用域：全局变量

{
      var age = 20;
  }
  alert(age);  // 在代码块中定义的age 变量，在代码块外边还可以使用

JavaScript快速入门（含ECMAScript基本语法相关介绍）_js_23

2.变量可以重复定义

{
      var age = 20;
      var age = 30;//JavaScript 会用 30 将之前 age 变量的 20 替换掉
  }
  alert(age); //打印的结果是 30

JavaScript快速入门（含ECMAScript基本语法相关介绍）_js_24

针对如上的问题，ECMAScript 6 新增了 `let `关键字来定义变量。它的用法类似于 `var`，但是所声明的变量，只在 `let` 关键字所在的代码块内有效，且不允许重复声明。

例如：

{
    let age = 20;
}
alert(age);

JavaScript快速入门（含ECMAScript基本语法相关介绍）_js_25

行上面代码，浏览器并没有弹框输出结果，说明这段代码是有问题的。通过 `F12` 打开开发者模式可以看到如下错误信息

JavaScript快速入门（含ECMAScript基本语法相关介绍）_js_26

JavaScript快速入门（含ECMAScript基本语法相关介绍）_js_27 编辑

而如果在代码块中定义两个同名的变量，IDEA 开发工具就直接报错了

JavaScript快速入门（含ECMAScript基本语法相关介绍）_js_28

JavaScript快速入门（含ECMAScript基本语法相关介绍）_js_29 编辑

ECMAScript 6 新增了 const关键字，用来声明一个只读的常量。一旦声明，常量的值就不能改变。通过下面的代码看一下常用的特点就可以了

JavaScript快速入门（含ECMAScript基本语法相关介绍）_js_30

JavaScript快速入门（含ECMAScript基本语法相关介绍）_js_31 编辑

5.数据类型

JavaScript 中提供了两类数据类型：原始类型和引用类型。

使用 typeof 运算符可以获取数据类型

1.原始数据类型：

*number：数字（整数、小数、NaN(Not a Number)）

var age = 20;
  var price = 99.8;
  
  alert(typeof age); // 结果是 ： number
  alert(typeof price);// 结果是 ： number

JavaScript快速入门（含ECMAScript基本语法相关介绍）_js_32

注意：== NaN是一个特殊的number类型的值，其代表转义过来的数没有意义时的值

*string：字符、字符串，单双引皆可

var ch = 'a';
  var name = '张三'; 
  var addr = "北京";
  
  alert(typeof ch); //结果是  string
  alert(typeof name); //结果是  string
  alert(typeof addr); //结果是  string

JavaScript快速入门（含ECMAScript基本语法相关介绍）_js_33

注意：在 js 中双引号和单引号都表示字符串类型的数据

*boolean：布尔。true，false

var flag = true;
  var flag2 = false;
  
  alert(typeof flag); //结果是 boolean
  alert(typeof flag2); //结果是 boolean

JavaScript快速入门（含ECMAScript基本语法相关介绍）_js_34

*null：对象为空

var obj = null;
  
  alert(typeof obj);//结果是 object

JavaScript快速入门（含ECMAScript基本语法相关介绍）_js_35

为什么打印上面的 obj 变量的数据类型，结果是object；这个官方给出了解释，下面是从官方文档截的图

JavaScript快速入门（含ECMAScript基本语法相关介绍）_js_36

JavaScript快速入门（含ECMAScript基本语法相关介绍）_js_37 编辑

*undefined：当声明的变量未初始化时，该变量的默认值是 undefined

var a ;
  alert(typeof a); //结果是 undefined

JavaScript快速入门（含ECMAScript基本语法相关介绍）_js_38

2. 引用数据类型：对象(本篇不介绍)

6.运算符

JavaScript 提供了如下的运算符。大部分和 Java语言都是一样的，不同的是 JS 关系运算符中的 `==` 和 `===`，一会只演示这两个的区别，其他运算符将不做演示

* 一元运算符：++，--

* 算术运算符：+，-，*，/，%

* 赋值运算符：=，+=，-=…

* 关系运算符：>，<，>=，<=，!=，==，===…

* 逻辑运算符：&&，||，!

* 三元运算符：条件表达式 ? true_value : false_value

注意：==和===区别

*==：

1. 判断类型是否一样，如果不一样，则进行类型转换

2. 再去比较其值

* ===：

js 中的全等于

1. 判断类型是否一样，如果不一样，直接返回false

2. 再去比较其值

var age1 = 20;
var age2 = "20";

alert(age1 == age2);// true
alert(age1 === age2);// false

JavaScript快速入门（含ECMAScript基本语法相关介绍）_js_39

7.类型转换

上述讲解 `==` 运算符时，发现会进行类型转换，所以接下来我们来详细的讲解一下 JavaScript 中的类型转换。

1.其他类型转为number

* string 转换为 number 类型：按照字符串的字面值，转为数字。如果字面值不是数字，则转为NaN

将 string 转换为 number 有两种方式：

1.使用 `+` 正号运算符：

var str = +"20";
      alert(str + 1) //21

JavaScript快速入门（含ECMAScript基本语法相关介绍）_js_40

2.使用 `parseInt()` 函数(方法)：

var str = "20";
  alert(parseInt(str) + 1);

JavaScript快速入门（含ECMAScript基本语法相关介绍）_js_41

建议使用 `parseInt()` 函数进行转换

2.boolean 转换为 number 类型：true 转为1，false转为0

var flag = +false;
    alert(flag); // 0

JavaScript快速入门（含ECMAScript基本语法相关介绍）_js_42

3.其他类型转为boolean

* number 类型转换为 boolean 类型：0和NaN转为false，其他的数字转为true

* string 类型转换为 boolean 类型：空字符串转为false，其他的字符串转为true

* null类型转换为 boolean 类型是 false

* undefined 转换为 boolean 类型是 false

4.使用场景

在 Java 中使用字符串前，一般都会先判断字符串不是null，并且不是空字符才会做其他的一些操作，JavaScript也有类型的操作，代码如下：

var str = "abc";

//健壮性判断
if(str != null && str.length > 0){
    alert("转为true");
}else {
    alert("转为false");
}

JavaScript快速入门（含ECMAScript基本语法相关介绍）_js_43

但是由于 JavaScript 会自动进行类型转换，所以上述的判断可以进行简化，代码如下：

var str = "abc";

//健壮性判断
if(str){
    alert("转为true");
}else {
    alert("转为false");
}

JavaScript快速入门（含ECMAScript基本语法相关介绍）_js_44

8.流程控制语句

JavaScript 中提供了和 Java 一样的流程控制语句，如下:

* if

* switch

在java中，switch语句可以接受的数据类型： byte int short char,枚举(1.5) ,String(1.7)

在JS中,switch语句可以接受任意的原始数据类型

* for

var sum = 0;
for (let i = 1; i <= 100; i++) { //建议for循环小括号中定义的变量使用let
    sum += i;
}
alert(sum);

JavaScript快速入门（含ECMAScript基本语法相关介绍）_js_45

* while

* dowhile

提问和评论都可以，用心的回复会被更多人看到评论

发布评论

相关文章

官方博客	全部文章	热门标签	班级博客
了解我们	网站地图	意见反馈

鸿蒙开发者社区	51CTO学堂
51CTO	软考资讯