web前端：JavaScript入门

目录

What is JavaScript?

JavaScript的用途

JavaScript的引入

1. 行内式，将单行或少量JS代码写到标签的属性中

2. 内嵌式，将多行JS代码写在

3. 外链式，通过

JavaScript语法

1. JavaScript的输入/输出

2. JavaScript变量

2.1 JavaScript变量的定义

2.2 JavaScript常量的定义：

2.3 JavaScript变量/常量命名规范：

3. JavaScript数据类型

3.1 JavaScript数据类型介绍

3.3 获取变量的数据类型

3.4 数据类型转换

4. 数组

4.1 数组的定义

4.2 数组新增元素

5. 函数

5.1 函数的定义

5.2 函数的使用

       

---

What is JavaScript?

        JavaScript是前端的脚本语言，负责web前端三要素中的行为。虽然是Java开头的，但是跟Java语言没有直接关系相比较Java开发起来更加高效和灵活，这是因为JavaScript不需要JVM虚拟机，直接在浏览器上即可运行（浏览器内置了js的解释器），免去了C/C++/Java所需的编译操作。

        JavaScript由三部分组成，分别是基本语法（ECMScript）、文档对象模型（DOM）、浏览器对象模型（BOM）。其中，DOM是负责操作页面元素的位置、大小、颜色等；BOM则是用来控制窗口的。

JavaScript的用途

1. 前后端交互

2. 桌面应用

3. 游戏(如Cocos2d-x JS版)

4. 服务端开发

5. 页面元素的特效

JavaScript的引入

        在HTML中引入JS和引入CSS的方式基本一致，分为：

1. 行内式，将单行或少量JS代码写到标签的属性中

<button onclick = "alert('Halo')">Button</button>

Notice: 这种方式当且仅当JS代码非常简单时才会用，实际上无论是学习还是开发过程中基本都不用。

2. 内嵌式，将多行JS代码写在<script>标签中

<button>Button
    <script>
        onclick = function () {
            alert('Halo');
        }
    </script>
</button>

Notice: 这种方式一般在我们初学JS时用，script标签一般写在整个body部分的末尾，可以确保页面元素加载完之后再执行JS。

3. 外链式，通过<script src="..."></script>

        HTML部分就不展示了，但要提一嘴: 外链方式引入的脚本是一个js文件(xxx.js，为单个页面定制的脚本最好要和对应页面的HTML文件名相同)，这些js文件统一存放在项目根目录下的js文件夹。这种方式适合在JS代码非常多的时候使用，将JS代码从html中抽离出来更方便维护。

JavaScript语法

Notice:

1. JavaScript基本语法和Java有太多重合的了，在这只讲不同的部分，相同部分就长话短说或者直接带过

2. JS语句末尾加不加分号都行，但为了养成良好的习惯这个分号还是要加上

1. JavaScript的输入/输出

        目前已知的JavaScript输出方式有两种：

1. console.log()

这个和Java中的System.out.println()基本一致，将参数中的内容打印到控制台，一般用于调试JavaScript

2. alert() 

这个会将参数中的内容以弹出对话框的形式显示，可以用于调试和页面提醒

JavaScript用prompt("提示信息")来实现输入，prompt返回的是输入的信息。

2. JavaScript变量

2.1 JavaScript变量的定义

之前ES5标准中，定义变量的方式是var 变量名 = 值，ES6开始，定义变量多用let来声明，var和let虽然可以声明任意类型的数据，但不同的是：

let声明的变量是局部变量，出了离它最近的大括号就不起作用了；

var声明的变量作用域比let大一些，只要不是在函数里面定义的就都是全局变量，在函数里面定义的都是局部变量。

2.2 JavaScript常量的定义：

在Java中用final修饰的是常量，只能赋值一次，but在JavaScript中定义常量方式却与C++相似，用const声明任意类型的常量。

2.3 JavaScript变量/常量命名规范：

JS变量/常量的命名规则与Java/C++基本一致，支持数字字母下划线美元符号的组合，数字不能开头，对于变量依然遵循小驼峰，对于常量直接全部大写。

3. JavaScript数据类型

3.1 JavaScript数据类型介绍

由于刚刚接触JavaScript本次只讲基本数据类型

基本数据类型	描述	默认值
Number	支持整数和浮点数	0
Boolean	true和false，可以用1和0代替	false
String	字符串类型，用单双引号括起来都可以	""
Undefined	已声明未被赋初值的变量	undefined
Null	赋值为null的变量	null

3.3 获取变量的数据类型

用typeof 变量名来获取数据类型

比如：

let num = 0;
console.log(typeof num);//控制台输出Number

3.4 数据类型转换

JS支持3种强制类型转换

1）转换为字符串

1. 用String(待转换数据)

2. 用变量名.toString()

3. 将变量与字符串用加号拼接起来，自动转换为字符串

2）转换为数字

1. 用Number(待转换数据)

2. 用parseInt(待转换数据)转换为整数，会自动向下取整

3. 用paseFloat(待转换数据)转换为浮点数

4. 用算术运算符，自动将字符串的中的纯数字转换为数字类型

3）转换为布尔类型

Boolean(待转换数据)

当且仅当数据的值为0、""(空字符串)、undefined、NaN、null时转换为false，其余转换为true

4. 数组

4.1 数组的定义

JS的数组定义方式与Java/C++都不相同，一般有两种定义方式

1. let 数组名 = new Array()

        1个参数：数组的长度，并且不会给数组元素赋初值

        2个以上参数：直接指定元素初值

2. let 数组名 = [数组元素]

        这种方式直接指定元素初值，相当于静态初始化数组

4.2 数组新增元素

用 数组名[数组长度] = 新的元素值 来实现数组的新增元素，此时数组长度自动 +1 

5. 函数

5.1 函数的定义

JS中的函数在功能上和调用方式上与C++/Java相同，但定义方式有所不同

JS函数定义的格式：

        function 函数名(参数列表) {

                函数体

        }

参数列表表示的参数都是局部变量，所以参数列表中的每个参数直接写变量名，不用声明什么类型。

系统会根据函数体中有无return语句自动判断返回值类型。

5.2 函数的使用

除了可以用函数名（实参列表）调用以外，用以下方式也能完成调用

1. (function() {函数体})()

2. xxx.onclick = function() {函数体}