第三周：JS入门

目录

一、JavaScript基本内容

（一）JavaScript介绍

（二）JS引入

二、变量

三、数据类型

（一）数据类型简介

（二）数据类型分类

（三）获取变量数据类型

（四）数据类型转换

三、基本语法

1.注释

2.输入输出语句

3.运算符(同C)

4.流程控制

5.数组

四、基本语法

---

一、JavaScript基本内容

（一）JavaScript介绍

1.JavaScript历史

JavaScript的历史可以追溯到1995年，当时它主要是由网景公司的布兰登·艾奇发明的。最初，它被命名为LiveScript，但随后SUN公司将其更名为JavaScript。这一语言最初的设计目的是处理网页中的前端验证，例如检查用户输入的内容是否符合特定的规则，如用户名的长度、密码长度和密码格式等。

2.JavaScript是什么

• JavaScript是世界上最流行的语言之一，是一种运行在客户端的脚本语言（script是脚本的意思）
• 脚本语言：不需要编译，运行过程中由js解释器（js引擎）逐步来进行解释并执行
• 现在也可以基于Node.js技术进行服务器编程

3.JavaScript的作用

• 表单动态校验（密码强度检测）（最初的目的）
• 网页特效
• 服务端开发（Node.js）
• 桌面程序（Electron）
• APP（Cordova）
• 控制硬件-物联网（Ruff）
• 游戏开发（cocos2d-js）

4.浏览器执行JS简介

浏览器分为两部分：渲染引擎和JS引擎

• 渲染引擎：用来解析HTML和CSS，俗称内核
• JS引擎：也称为JS解释器。用来读取网页中的JavaScript代码，对其处理后运行

（二）JS引入

1.行内式

可以将单行或少量js代码写在HTML标签的事件属性中（以on开头的属性），如：onclick

推荐使用单引号' '

eg:在body中输入以下语句，可形成弹窗效果

<input type="button" value="按钮" onclick="alert('弹窗')"/>

这是效果展示（点击按钮会弹出弹窗） 

2. 内嵌式

写在css内嵌式相同位置，用<script>  </script>包含

eg:会有弹窗效果

    <script>
        alert('hello js');
    </script>

3.外部JS文件

新建一个文件，后缀是.js   用<script src="文件名.js"></script>引入

二、变量

1.概述

变量是用于存放数据的容器，通过变量名获取数据。

本质：在内存中申请一块用来存储的空间

2.变量的使用

（1）声明变量+赋值

①声明变量：var 变量名

②赋值：变量名=变量值

eg:结果是18

    <script>
        var age;
        age=18;
        alert(age);
    </script>

（2）变量的初始化

var 变量名=变量值

3.变量语法扩展

（1）更新变量

一个变量被重新赋值后，它原有的值会被覆盖，变量值以最后一次赋值为准

（2）同时声明多个变量

var  变量名=变量值，变量名=变量值，...，；

    <script>
        var age=18,
        name='某某',
        grade=99;
    </script>

（3）特殊情况

①只声明不赋值结果是undefined

②必须先声明后再使用

③不声明直接赋值可以使用

3.变量命名

注意：区分大小写，遵守驼峰命名法，首字母小写，后面单词的首字母大写 

三、数据类型

（一）数据类型简介

1.数据类型作用：便于把数据分成所需内存大小不同的数据，充分利用存储空间。

2.js的变量数据类型是在程序运行过程中，根据等号右边的值来确定的。

3.js是动态语言，变量的数据类型是可变的。

（二）数据类型分类

1.简单数据类型

（1）Number：数字型，包含整型值和浮点型值，默认值为0

默认输出十进制，八进制前加0，十六进制前加0x

数字型范围：Number.MIN_VALUE ~ Number.MAX_VALUE

几个特殊值：Infinity（无穷大，当超出范围时会输出），-Infinity（无穷小），NaN（非数字）

isNaN()：用来判断非数字，是数字返回false,不是返回true

eg:输入以下内容

    <script>
        console.log(Number.MIN_VALUE);
        console.log(Number.MAX_VALUE);
        console.log(isNaN('wwww'));
        console.log(isNaN('1234'));
    </script>

这是控制台的运行结果

（2）字符串型（加引号）

①字符串引号嵌套（内单外双，内双外单）

var str='这是一个"字符"串';
var str2="这是一个'字符'串";

 ②字符转义符(写在引号里)

        \n         \t        \b(空格)        \'        \"        \\

③字符串长度：字符串名.length

④字符串拼接：用+连接，只要有字符型结果就是字符型

注：变量不要写在引号里

eg:

    <script>
        var age=18;
        console.log('字符串1'+11);
        console.log('字符串1'+'字符串2');
        console.log(11+11);
        console.log('字符串1'+age+'字符串2');
    </script>

输出结果

（3）布尔型Boolean

true的值为1，false的值为0

（4）undefined 和null

 undefined和数字相加结果时NaN,和字符串相加是字符

null和数字相加是数字本身

2.复杂数据类型

（三）获取变量数据类型

typeof

        var num=10;
        console.log(typeof num);

（四）数据类型转换

1.转换为字符串

变量.toString()

String(变量名)

num+' '——隐式转换 

    <script>
        var num=10;
        var str = num.toString();
        console.log(str);
        console.log(typeof str);
        console.log(String(num));
        console.log(num+' ');
    </script>

 2.转换为数字型

parseInt(' ')   ——注：可去掉数字后的字母

parseFloat(' ')

Number(变量)

利用（+ - * /）隐式转换

    <script>
        var str=18;
        console.log(parseInt(str));
        console.log(typeof str);
        console.log(parseInt('10px'));
        console.log(parseFloat('10.2px'));
        console.log(Number(str));
        console.log('12'-0);
    </script>

效果展示

3.转换为布尔型

Boolean（）

代表空，否定的值会转换为false，其余为true 

三、基本语法

1.注释

（1）单行注释，在前面加  //

（2）多行注释 ，/*  ......   */

2.输入输出语句

（1）alert( ) 浏览器弹出警示框

（2）console.log(msg) 浏览器控制台打印输出信息

（3）prompt(info) 浏览器弹窗输入框，用户可输入

    <script>
        alert('弹出警示框');
        prompt('这是一个输入框');
        console.log('程序员可见的');
    </script>

效果

3.运算符(同C)

(1)算术运算符

+  -  *  /  %

先乘除后加减

(2)递增(++)递减(--):必须和变量配合使用

前置递增/递减:先加1再使用变量

++num        --num

后置递增/递减:先使用变量再加1

num++        num--

(3)比较运算符:返回一个布尔值(true/false)

== != 判等号（会把字符串型转为数字型再进行比较）

=== !== 全等 要求值和数据类型都一致

(4)逻辑运算符:返回布尔值

&&        逻辑与

||           逻辑或

!            逻辑非

(5)赋值运算符(与c语言相同)

(6)运算符优先级

4.流程控制

(1)分支流程控制(同C)

执行代码多选一的过程

①if分支语句

        if(条件表达式){
            执行语句1
        }
        else {
            执行语句2
        }

 ②switch语句

        switch(表达式){
            case 值:
                执行语句1;
                break;
                default:
                    执行最后的语句;
        }

 注:注意写break

判断是全等关系,类型和值都要相同

(2)循环结构

①for循环

for(初始化变量;条件表达式;操作表达式){
	//循环体
}

②while循环

while(条件表达式){
	//循环体代码
}

③do while循环

do {
	//循环体
}while(条件表达式)

5.数组

(1)创建数组

利用new关键字创建数组

var 数组名 = new Array(); 

利用数组字面量创建数组

var 数组名 = [];
var arr = [1,3,2];

(2)访问数组元素

数组下标从0开始

数组名[索引号]
var arr=[1,2,4];
console.log(arr[2])

(3)新增数组元素

数组长度:  数组名.length

var arr = [1,2,3,4];
arr[4] = 5;

这个代码新增了元素5

四、基本语法

1.函数的使用

(1)声明函数

function 函数名（）{
    //函数体
}

function sayhi（）{
    console.log('hi');
}

(2)调用函数

函数名();

sayhi();

注意:不要忘记加小括号,函数不调用时不会执行

2.函数的参数

(1)形参和实参

形参----在声明函数的小括号里面是形参

实参----在函数调用的小括号里面是实参

形参是接受实参的

function 函数名（形参1，形参2...）{

}
函数名（实参1，实参2）；

(2)实参个数与形参个数不匹配

• 个数一致,直接输出结果
• 如果实参个数多于形参,会取到形参的个数
• 如果实参个数小于形参个数, 多余的形参定义为undefined, 最终的结果就是NaN

3.函数的返回值

格式:

function 函数名（）{
    return 需要返回的结果；
}

只要函数遇到了return就把后面的结果返回给函数的调用者  函数名()=return后面的结果

注意:  函数遇到return就停止,  后面的代码不会执行

return只能返回一个值,如果有多个以最后一个为准

eg:最后输出111

    <script>
        function ex(){
            return 111;
        }
        ex();
        console.log(ex());
    </script>

4.argument的使用

当我们不确定有多少个参数传递的时候，可以用arguments来获取，在js中，arguments实际上是当前函数的一个内置对象，所有函数都内置了一个arguments对象，arguments对象中存储了传递的所有实参。 

 argument展示形式是一个伪数组

• 具有length属性
• 按照索引方式存储数据
• 不具有数组的push、pop方法

•     //示例
      <script>
          function ex(){
              console.log(arguments);
          }
          ex(1,2,3);
      </script>