JavaScript入门【2】语法基础

1.JavaScript的引⼊⽅式(使用):

1.方式1:行内引用:

 此种方式是将<font style="color:rgb(38,38,38);">JavaScript代码作为HTML标签的属性值使⽤,示例如下:</font>

<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<a href="javascript:alert('警告')">点击弹窗</a>
</body>
</html>

上面案例中是将javascript代码作为了html文档的超链接标签的属性值使用,测试结果如下:

当点击该超链接时,浏览器就会出现警告弹窗;

2.方式2:标签引用:

此方式是在html文档中添加script标签,在script标签中编写javascript代码,示例如下:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body><script type="text/javascript">window.alert("警告")</script></body>
</html>

在上面代码中,在html文档中添加了script的标签,并声明此标签的type属性为text/javascript,在标签中我们通过浏览器窗口对象window的alert方法向用户展示了一个警告弹窗,运行结果如下:

3.方式3:文件引用:

 此方式是通过创建一个javascript的文件,在此文件中编写代码,然后在html文档中引用该文件,实现JavaScript的功能;

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body><script src="index.js"></script></body>
</html>

    引用js文件index.js内容如下**(js文件中直接编写代码,不加标签**):

测试结果如下:

2.JavaScript的输出:

某些情况下，我们需要将程序的运⾏结果输出到浏览器中，JavaScript为我们提供了多种不同形式输出内容：

使⽤ window.alert() 函数弹出提示框
使⽤ window.confirm() 函数弹出对话框
使⽤ window.prompt() 函数弹出可以让⽤户输⼊的提示框
使⽤ console.log() 在浏览器的控制台输出内容
使⽤ document.write() ⽅法将内容写⼊到HTML⽂档中

1.window.alert():无返回值

此方式主要是在浏览器中弹出提示框,在上面我们演示JavaScript的使用时,就是通过这种方式;

 alert("come on的喂，abc~");

输出结果展示:

2.window.confirm():返回值为boolean

JavaScript中的 confirm() 函数与 alert() 函数相似，同样可以在浏览器窗⼝弹出⼀个提示框
使⽤ confirm() 函数创建的提示框中，包含了“确定”和“取消”两个按钮
点击“确定”按钮， confirm() 函数返回⼀个布尔值 true ；点击“取消”按钮，返回⼀个布尔值false

confirm("确定删除吗？");

测试结果:

3. window.prompt():返回值为string或者null

使⽤JavaScript中的 prompt() 函数可以弹出提示框，该提示框可以让⽤户输⼊信息。
该函数返回⽤户输⼊的字符串

prompt("请输入密码：");

测试结果:

4.console.log():无返回值

<font style="color:rgb(38,38,38);">使⽤JavaScript中的 console.log() 可以在浏览器的控制台输出信息，我们通常使⽤ console.log() 来调试程序</font>

<font style="color:rgb(38,38,38);">  控制台的其他打印信息如下所示:</font>

console.info(“输出信息”);
console.warn(“输出警告”);
console.error(“输出异常”);

window.alert() 和 window.confirm() 可以分别简写成 alert() 和 confirm() 不同， console.log() 不能简写。
要看到 console.log() 的输出内容需要先打开浏览器的控制台，打开⽅式有两种：

在浏览器窗⼝按 F12 快捷键，在控制台中选择" Console "或“ 控制台 ”选项;
点击⿏标右键，在弹出菜单中选择“ 检查 ”选项，在控制台中选择" Console "或“ 控制台 ”选项 ;

 console.log("控制台打印输出")

测试结果:

5.方式5:document.write():无返回值

<font style="color:rgb(38,38,38);">使⽤JavaScript中的 document.write() 可以向HTML⽂档中写⼊HTML或者JavaSctipt代码，可直接将写入内容展示到浏览器页面上;</font>

document.write('hello world')

测试结果:

3.代码编写规范:

1. 代码位置:

JavaScript必须出现在以 .js 作为后缀名的⽂件中，或者出现在 html ⻚⾯的

2. 代码分段:

每⼀⾏JavaScript代码描述⼀个⾏为/动作，结束时由分号 ; 结尾。以回⻋作为换⾏符，⽤来描述下⼀个⾏为/动作。
如果每⼀条语句结束时不加分号，浏览器会⾃动补上分号，但是会消耗⼀部分系统资源。
JavaScript中会忽略多个空格和换⾏。

3. 字符串 :

JavaScript中的字符串需要包裹在英⽂输⼊法格式下的单引号或双引号中。

4. 代码⼤⼩写:

在JavaScript中严格区分⼤⼩写;

4.JavaScript代码执⾏顺序:

1.概述:

<font style="color:rgb(68,68,68);">浏览器在解析 HTML ⽂档时，将根据⽂档流从上到下逐⾏解析和显示。 JavaScript 代码也是HTML ⽂档 的组成部分，因此 JavaScript 脚本的执⾏顺序也是根据 <script> 标签 的位置 来确定的。 </font>

<font style="color:rgb(68,68,68);">   通常建议将JavaScript代码放在⽂档的最后部分。</font>

<!DOCTYPE html>
<script>alert("顶部脚本");
</script>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<script>alert("头部脚本");
</script>
<body><h1>猿究院官⽹</h1><script>alert("⻚⾯脚本");</script><p>正⽂内容</p>
</body>
<script>alert("底部脚本");
</script>
</html>

2.图解:

5.JavaScript注释:不具备文档注释

注释是给开发⼈员看的，程序在执⾏时会⾃动忽略注释的内容，所以我们通常使⽤注释来为代码添加⼀些解释说明或描述，以提⾼代码的可读性。

JavaScript注释分为单⾏注释和多⾏注释两种，具体格式如下：

1.单行注释:

<font style="color:rgb(38,38,38);">单⾏注释是以双斜杠 // 开头， // 之后本⾏所有内容都会被看作是注释的内容，对 // 之前的内容则不会产⽣影响，示例如下：</font>

<script>//document表示⽹⻚⽂档对象；document.write()表示调⽤document对象的write()⽅法document.write("<h1>JavaScript注释</h1>")
</script>

2.多行注释:

  <font style="color:rgb(68,68,68);">多⾏注释以 /* 开头，并以 */ 结尾，出现在 /* 和 */ 之间的所有内容都会看作是注释的内容，示例代码如下：</font>

<script>/* document表示⽹⻚⽂档对象；document.write()表示调⽤document对象的write()⽅法 */document.write("<h1>JavaScript注释</h1>")
</script>

6.标识符:

1.概述:

标识符指JavaScript中的变量名,属性名,方法名,函数名,参数名等;

2.命名规则:同java中的命名规则一致

   1.第一个字母必须是字母、下划线_、美元符号$

   2.其他字母可以是字母、下划线_、美元符号$、数字

   3.ECSMScript 惯例采用 驼峰命名

   4.不能是关键字 或者 保留字

7.字面量与变量:

1.字面量:

概述:

           就是固定值,不发生变化;

举例:

sum = 1 + 1;其中的'1'就是字面量,不发生变化;

2.变量:

概述:

         给一个值 或者对象 标注了名称,即为变量;

         在代码执行过程中JavaScript中的变量的类型可发生改变,而在Java中一旦声明了一个变量,此变量的类型是一般是不可变的;

变量声明及初始化:

方式1:直接申明变量及初始化(不常用)

   a = 3;  console.log(a);

测试结果:

方式2:通过var关键字申明及初始化:(不常用)

通过此关键字可以申明多个相同名称的变量,但前面的值会被后面的值覆盖;

<script>var a=3;var a=4;var a=5;console.log(a);</script>

测试结果:

方式3:通过let关键字声明及初始化:

通过此方式声明变量时,变量名不可重复,否则会报错

<script>let a=3;let a=4;let a=5;console.log(a);</script>

测试结果:

<script>let a='变量a';let b='变量b';console.log(a,b);</script>

注意事项:

**声明的变量必须初始化后才能使用**,否则会出现undefined错误

<script>let a;console.log(a);</script>

8.数据类型:

1.基本数据类型:

       在js中基本数据类型分别有以下几种:

```
  字符串 String:
```

  数值 Number:(不区分整型和浮点数)  Infinity:正无穷   -Infinity:负无穷   NaN 非法数字

```
  布尔 Boolean: true----false
```

  undefined(undefined):<font style="color:rgba(0, 0, 0, 0.85);">表示变量声明但尚未赋值</font>

  null （Null 对象）:<font style="color:rgba(0, 0, 0, 0.85);">表示一个空值，通常用于表示有意缺少对象值;</font>

2.对象:除上面几种类型之外都是对象类型(引用类型)

3.unfined与null的区别:

本质含义:

- `**undefined**`：表示变量已声明但未赋值，或者函数没有明确返回值的返回结果，是一种 “未定义” 的状态。
- `**null**`：代表一个空值，用于有意表示对象值的缺失，是一种 “空” 的概念。

2.类型检测差异:

- `**typeof**`**操作符**：* `typeof undefined`返回`"undefined"`，能直接识别`undefined`。* `typeof null`返回`"object"`，这是历史遗留问题，不能准确反映`null`的真实类型。
- **精准类型判断方法（如**`**Object.prototype.toString.call()**`**）**：* 可以准确区分，`Object.prototype.toString.call(undefined)`返回`"[object Undefined]"`，`Object.prototype.toString.call(null)`返回`"[object Null]"`。

3.应用场景差异:

- **变量初始化方面**：* 变量刚声明还没赋值时为`undefined`。* 当需要表示对象不存在或被清空时，使用`null`赋值给相关变量。
- **函数参数方面**：* 未设置默认值的函数参数，未传入时在函数内为`undefined`。* `null`作为函数参数可用于表示特殊的、与`undefined`不同的空状态。

4.对逻辑判断的影响:

- **条件判断中的假值情况**：* `undefined`和`null`在条件判断中都被视为假值。* 但在精确区分时，要使用`===`严格相等判断，因为`undefined == null`为`true`（宽松相等比较），`undefined === null`为`false`（严格相等比较）。

4.数据类型的查看:

1.typeof:

可以通过运算符** typeof** 来检查当前值或变量的类型

    <script>console.log(typeof 1); // Numberconsole.log(typeof 'Hello'); // string  ``(模板字符串),'', "" 都是字符串console.log(typeof true); //booleanconsole.log(typeof undefined); // undefinedconsole.log(typeof null);// Object null 对象</script>

2.模板字符串:

 <font style="color:rgba(0, 0, 0, 0.85);">模板字符串是一种在 JavaScript 中方便创建多行字符串以及嵌入表达式的语法。</font>

<script>let li1 = "列表项目1";//模板字符串let  str = `<ul><li>${li1}</li></ul>`;console.log(str)</script>

以反引号开始和结束，在这个例子中，它构建了一个包含无序列表（

）的HTML结构，用于换行输出模板类对象str的内容

9.JavaScript中的转义符:

1.概述:

 在JavaScript中通常使用'\'来对特殊含义的字符进行转义

    \n 换行:表示换行,在前面再加一个反斜杠表示输出'\n'字符串

    \\ 斜杠:单个'\'表示转义符,两个则表示输出'\'

    \t 制表:表示制表符,再加一个反斜杠表示输出'\t'

```
    \b 空格:表示生成空格
```
```
    \' 单引号:表示输出单引号
```
```
    \" 双引号:表示输出双引号
```
```
    \r 回车:回车,也表示换行
```

2.案例:

 console.log("\" hello\bworld");console.log("\" hello\tworld");

10.数据类型转换:

1.转String:

1.数字转String:

方式1:toString();

let num = 123;console.log(typeof num);
num=ToString(num);console.log(typeof num);

方式2:String():

 let num = 123;console.log(typeof num);
num=String(num);console.log(typeof num);

方式3:字符串拼接

  let num = 123;console.log(typeof num);
num=num+"";console.log(typeof num);

2.其他类型转字符串:和上面方式类似

2.转数字:

1.字符串转数字:

   **如果字符串中有非数字字符,则转换后会出现NaN非法数字**

   **       如果字符串为空,或者为空格,则转换后全为0;**

方式1:使用Number()

<script>let num = "12.6";console.log(typeof num);num = Number(num);console.log(typeof num);</script>

方式2:parseInt或parseFloat方法:

<script>let num = "12.6";console.log(typeof num,num);num = parseFloat(num);console.log(typeof num,num);</script>

<script>let num = "12.6";console.log(typeof num,num);num = parseInt(num);console.log(typeof num,num);</script>

特殊场景模拟:

字符串中有除数字外的其他字符,则转换后会出现转换异常,出现非法数字

<script>let num = "12a6";console.log(typeof num,num);num = Number(num);console.log(typeof num,num);</script>

字符串为空或为空格,转换后为0;

<script>let num1 = "";let num2 = "  ";console.log(typeof num1,num1);console.log(typeof num2,num2);num1 = Number(num1);num2 = Number(num2);console.log(typeof num1,num1);console.log(typeof num2,num2);</script>

2.布尔类型转数字:

布尔类型转数字,true转换后为1,false转换后为0;

<script>let num1 = true;let num2 = false;console.log(typeof num1,num1);console.log(typeof num2,num2);num1 = Number(num1);num2 = Number(num2);console.log(typeof num1,num1);console.log(typeof num2,num2);</script>

3.undefined类型转数字:

undefined类型转成数字后为非法数字NaN

<script>let num1 = undefined;console.log(typeof num1,num1);num1 = Number(num1);console.log(typeof num1,num1);</script>

4.null类型转成数字:

null类型转成数字后为0

<script>let num1 =null;console.log(typeof num1,num1);num1 = Number(num1);console.log(typeof num1,num1);</script>

3.转成boolean:通过Boolean()

1.数字转boolean:

数字中除了0和NaN转成boolean为false,其他的都为true;

 <script>let num1 = 1;let num2 = 0;console.log(typeof num1,num1);console.log(typeof num2,num2);num1 = Boolean(num1);num2 = Boolean(num2);console.log(typeof num1,num1);console.log(typeof num2,num2);</script>

2.字符串转Boolean:

除了空字符串,剩下的都为true

 <script>let num1 = "";let num2 = "  ";console.log(typeof num1,num1);console.log(typeof num2,num2);num1 = Boolean(num1);num2 = Boolean(num2);console.log(typeof num1,num1);console.log(typeof num2,num2);</script>

3.undefined和null转成boolean:

  undefined和null转成boolean都为false

 <script>let num1 = undefined;let num2 = null;console.log(typeof num1,num1);console.log(typeof num2,num2);num1 = Boolean(num1);num2 = Boolean(num2);console.log(typeof num1,num1);console.log(typeof num2,num2);</script>

4.转undefined和null:直接用=赋值即可

11.运算符:

1.类型检验运算符:typeof

     用来检验变量或值得类型

2.算数运算符:+ ,- ,*, /, %, ++, –

       注意++/--得位置不同,其含义也不同(参考java中的规则)

     let a = 1;console.log(++a);  //先加再输出

     let a = 1;console.log(a++);  //先输出再加

3.关系运算符:>, < , >= ,<=

4.赋值运算符:= , += , -=, *= , /= , %=

5.比较运算符:== , !=, =(全等于) , !

6.逻辑运算符:&&(&) ,||(|) ,!

12.流程控制:

1.选择结构:

1.if选择:

<script>if(布尔表达式){........}</script>

2.if-else选择:

 <script>if(布尔表达式){........}else{........}</script>

3.if-else if-else选择:

 <script>if(布尔表达式1){........}else if(布尔表达式2){........}........{}else{.........}</script>

2.switch选择:注意使用break,防止执行穿透

switch(值/表达式){case 值1:.....break;case 值2:.....break;..........default:........
}

let month = 10;switch (month) {default:console.log("输入错误 ")break;case 1:case 3:case 5:case 7:case 8:case 10:case 12:console.log("31天")break;case 4:case 6:case 9:case 11:console.log("30天");break;case 2:console.log("28天");break;}

2.循环结构:

1.while循环:布尔表达式成立时执行循环体

while(布尔表达式){
...............
}

2.do-while循环:先执行后判断

do{
.......
}while(布尔表达式)

3.for循环:

for (let i = 0; i < 5; i++) {.....}

4.foreach:

let numbers = [1, 2, 3, 4, 5];
numbers.forEach(function (element) {console.log(element);
});

5.for -in:适用于遍历对象

for (const arrayKey in array) {......  }