这是我参与「第四届青训营」笔记创作活动的第3天

1，JavaScript的基本作用

改变页面内容
修改指定元素的属性值
对表单进行校验

2，JavaScript引入方式

有两种：

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

2.1 内部脚本

在 HTML 中，JavaScript 代码必须位于 <script> 与 </script> 标签之间

2.2 外部脚本

第一步：定义外部 js 文件。如定义名为 demo.js的文件

第二步：在页面中引入外部的js文件

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

3，JavaScript基础语法

3.1 书写语法

区分大小写：与 Java 一样，变量名、函数名以及其他一切东西都是区分大小写的
每行结尾的分号可有可无

如果一行上写多个语句时，必须加分号用来区分多个语句。
注释
- 单行注释：// 注释内容
- 多行注释：/* 注释内容 */
大括号表示代码块

下面语句大家肯定能看懂，和 java 一样大括号表示代码块。
```
if (count == 3) { 
   alert(count); 
} 
```

3.2 输出语句

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

使用 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>

使用 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>


* **使用 console.log() 写入浏览器控制台**

  ```html
  <!DOCTYPE html>
  <html lang="en">
  <head>
      <meta charset="UTF-8">
      <title>Title</title>
  </head>
  <body>
  
  <script>
      console.log("hello js 3");//写入浏览器的控制台
  </script>
  </body>
  </html>

3.3 变量

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

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

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

组成字符可以是任何字母、数字、下划线（_）或美元符号（$）
数字不能开头
建议使用驼峰命名

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

作用域：全局变量

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

变量可以重复定义

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

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

例如：

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

3.4 数据类型

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

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

alert(typeof age); 以弹框的形式将 age 变量的数据类型输出

原始数据类型：

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

var age = 20;
var price = 99.8;

alert(typeof age); // 结果是 ： number
alert(typeof price);// 结果是 ： number

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

var ch = 'a';
var name = '张三'; 
var addr = "北京";

alert(typeof ch); //结果是  string
alert(typeof name); //结果是  string
alert(typeof addr); //结果是  string

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

boolean：布尔。true，false

var flag = true;
var flag2 = false;

alert(typeof flag); //结果是 boolean
alert(typeof flag2); //结果是 boolean

null：对象为空

var obj = null;

alert(typeof obj);//结果是 object

undefined：当声明的变量未初始化时，该变量的默认值是 undefined
```
var a ;
alert(typeof a); //结果是 undefined
```

3.5 运算符

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

一元运算符：++，--
算术运算符：+，-，*，/，%
赋值运算符：=，+=，-=…
关系运算符：>，<，>=，<=，!=，==，===…
逻辑运算符：&&，||，!
三元运算符：条件表达式 ? true_value : false_value

3.5.1 ==和===区别

概述:

==：
1. 判断类型是否一样，如果不一样，则进行类型转换
2. 再去比较其值
===：js 中的全等于
1. 判断类型是否一样，如果不一样，直接返回false
2. 再去比较其值

代码：

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

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

3.6 流程控制语句

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

if
switch
for
while
dowhile

3.6.1 if 语句

var count = 3;
if (count == 3) {
    alert(count);
}

3.6.2 switch 语句

var num = 3;
switch (num) {
    case 1:
        alert("星期一");
        break;
    case 2:
        alert("星期二");
        break;
    case 3:
        alert("星期三");
        break;
    case 4:
        alert("星期四");
        break;
    case 5:
        alert("星期五");
        break;
    case 6:
        alert("星期六");
        break;
    case 7:
        alert("星期日");
        break;
    default:
        alert("输入的星期有误");
        break;
}

3.6.3 for 循环语句

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

3.6.4 while 循环语句

var sum = 0;
var i = 1;
while (i <= 100) {
    sum += i;
    i++;
}
alert(sum);

3.6.5 dowhile 循环语句

var sum = 0;
var i = 1;
do {
    sum += i;
    i++;
}
while (i <= 100);
alert(sum);

JavaScript | 青训营笔记

这是我参与「第四届青训营 」笔记创作活动的第3天