前端之JavaScript光速入门（基础语法）-EW帮帮网

今天我们要学习的前端三剑客最后一剑客就是大家经常在耳边听到的JavaScript。

一、JavaScript是什么？和Java有什么关系？

首先，JavaScript是当下最流行的前端开发语言之一，是一个脚本语言, 通过解释器运行；主要在客户端(浏览器)上运行, 也可以基于 node.js 在服务器端运行；虽然JS主要用于前端开发，但是实际上也可以进行服务器开发/客户端程序的开发；

其次，JavaScript和Java没有半毛钱关系，纯粹就是为了蹭蹭Java的热度，你可以把二者的关系想象成鱼和鱼香肉丝的关系一样！

二、JS的书写形式有哪些？

1、内嵌式

即把js写到script标签中，如上的hello world就是写在script标签中的。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=<device-width>, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        alert("原神启动!")
    </script>
</body>
</html>

2、行内式

即把js写到html内部。

<button onclick="alert('hello')">这是一个按钮</button>

3、外部式

即把js写到一个单独的.js文件中；然后在html通过script来引入。

demo.js代码

alert('hello js外部式')

html代码

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

1.内部样式（内嵌式）会出现大量代码冗余,不方便后期的维护,所以不常用.

2.行内样式,只适合于简单样式.只针对某个标签生效,缺点是不能使用太复杂的js.

3.外部样式,html和js实现了分离,这也是企业开发种常用的方式.

JS和用户交互的常用方式？

刚才我们可以看到运行js结果都是一个弹窗的样式，那么能不能直接输出结果那种格式呢?答案是可以的！

这里我们会使用到一个方法叫做console.log，会把日志给输出到控制台上，这里的控制台指的是浏览器自己的控制台。

    <script>
        console.log("这是一个控制台代码");
    </script>

三、认识JS的基础语法

（1）、变量

关键字	解释	示例
var	早期JS中声明变量的关键字,作用域在该语句函数范围内	var name='zhangsan';
let	ES6种新增声明变量的关键字,作用域在该语句所在代码块内	let name='zhangsan';
const	声明变量的,声明变量后不能修改	const name='zhangsan';

变量我们在java已经十分熟悉了，那么在js中如何定义变量呢？

格式：var 变量名 = 初始值；

  var a = 1;//定义了一个常数1
  var str = "hello";//定义了一个字符串str
  var arr = [];//定义了一个空的数组

需要注意的是：

1、这里js不区分整数与浮点数；

2、' ' 和 " "都可以表示字符串，二者没有区别；

3、变量可以不初始化，不初始化是一个特殊的值undefined。

4、变量的类型可以在运行的过程中，随着赋值而发生改变。

 var a = 1;
 a = "dodo";
 console.log(a);

接下来看着一段：

      {
            var a = 1;
      }
        console.log(a);

可以发现运行结果在括号之外，也就是作用域之外，仍然可以打印，那么是不是有点违背我们正常的编程认识！确实这里var是比较老旧得版本，现在更倾向于使用let来替代var。

        {
            let a = 1;
        }
        console.log(a);

(2)、JS中的比较相等是如何规定的？

==和!= 只是比较两个变量的值，而不比较两个变量的类型，如果两个变量能够通过隐式类型转换，那么认为此时也是相等的。

=== 和 !== 既需要比较变量的值，也需要比较类型，如果类型不相同，就直接认为不相等。

        let a = "100";
        let b = 100;
        console.log(a == b);    //true
        console.log(a === b);   //false

(3)、Boolean类型如何使用？

注意在js当中会把布尔类型当做0(false)和1(true)来处理。

        let a = true;
        console.log(a - 1);

结果为：0

总结：

那么这种设定本身很不科学，若一个编程语言越支持隐式类型转换，则认为类型越弱；(C,JS,PHP等……)

反之，若一个编程语言越不支持隐式类似转换，则认为类型越强。（Java、Go、Python）

（4）、逻辑运算符

JS中的 && 和 || 返回的是其中一个表达式。

c = a || b ；

若a的值为真(非0)，此时c的值就是表达式a的值；

若a的值为假(0)，此时c的值就是表达式b的值。

c = a && b 也是类似
如果 a 的值为假,此时 c的值, 就是表达式 a 的值

如果 a 的值,为真,此时 c 的值, 就是表达式 b 的值。

四、JavaScript对象

（1）数组

数组定义

创建数组有两种方式

1.使用new关键字进行创建.

//Array 的 A要大写
var arr = new Array();

2.使用字面变量方式创建(常用):

var arr = [];
arr = [1, 2.0, 'haha', false];//数组中的内容称为元素，注意:JS数组中的元素可以是不同类型.

数组操作

1.读:使用下标的方式访问数组元素(下标从0开始)

2.增:通过下标新增,或者使用push来新增元素.

3.改:通过下标修改.

4.删:通过splice来删除数组元素.

通过console.log即可打印数组

<script>
        var arr = [1, 2, 'haha', false];
        //读取数组
        console.log(arr[0]);//1           //调用数组
        //添加数组元素
        arr[4] = "add";
        console.log(arr[4]);//add
        console.log(arr.length);//5, 获取数组的长度
        //修改数组的元素
        arr[4] = "update";
        console.log(arr[4]);//update
        //删除数组的元素
        arr.splice(4, 1); //第一个参数表示从下标为4的位置开始删除,第二个参数表示要删除的元素数量.
        console.log(arr[4]);//undefined 元素已经删除,如果元素不存在,则结果为undefined.
        console.log(arr.length); //4
    </script>

注意:

1.如果下标超出范围读取元素,则结果为undefined

2.不要给数组名直接赋值,此时数组中的元素会全部消失.

（2）函数

语法格式

创建函数/函数声明/函数定义

function 函数名(形参列表) {
函数体;

return 返回值;

}

//函数调用

函数名(实参列表) //不考虑返回值

返回值 = 函数名(实参列表) //考虑返回值

数定义并不会执行函数体内的内容,必须要调用才会执行.调用几次就执行几次.

function hello() {
    console.log("hello");
}
//如果不调用函数,则不打印执行语句.
hello();

调用函数的时候函数内部执行,函数结束时回到调用位置继续执行.调用几次就会执行几次.

函数的定义和调用先后顺序没有要求.(这一点和变量不同,变量是先定义后使用).

hello();
function hello() {
    console.log("hello");
}

参数个数

实参和形参之间的参数可以不匹配.但是实际开发一般要求形参和实参个数匹配.

1.如果实参个数比形参多,则多出来的参数不参与函数运算.

sum(10, 20, 50); //30

2.如果实参个数比形参少,则返回undefined.

JS相比于其它语言比较灵活,实际上这种灵活性往往不是好事.

（3）对象

在JS中,字符串,数组,数值,函数都是对象.

每个对象都有若干的属性和方法.

属性:事物的特征. 方法:事物的行为.

JavaScript的对象和Java的对象概念基本一致.只是具体的语法表项形式差别较大.

1.使用字面量创建对象.[常用]

使用{}创建对象.

var a = {}; //创建了一个空的对象
var student = {
    name: '蔡徐坤',
    height: 175,
    weight: 140,
    sayHello: function() {
        console.log("hello");
    }
};

使用{}创建对象

属性和方法使用键值对的形式来组织.

键值对之间使用 , 分割最后一个属性后面的 , 可有可无

键和值之间使用 : 分割 .

方法的值是一个匿名函数.

使用对象的属性和方法:

//1.使用 . 成员访问运算符来访问属性,'.'可以理解为"的"
console.log(student.name);
//2.使用[]来访问属性,此时属性应该加上引号
console.log(student['height']);
//3.调用方法,别忘了加上()
student.sayHello();

2.使用new Object来创建对象.

var student = new Object();
student.name = "蔡徐坤";
student.height = 175;
student['weight'] = 170;
student.sayHello = function() {
    console.log("hello");
}
console.log(student.name);
console.log(student['height']);
student.sayHello();

注意:使用{ }创建对象也可以随时使用student.name = '蔡徐坤';这样的方式来新增属性.

3.使用构造函数来创建对象.

function 构造函数名(形参) {

        this.属性值 = 值;

        this.方法 = function...

}

var obj = new 构造函数名(形参);

使用构造函数来创建对象时要注意：

1.在构造函数内部使用this关键字来表示当前构造的对象

2.构造函数的首字母一般是大写的.

3.构造函数的函数名可以是名词.

4.构造函数不需要return

5.创建对象的时候必须使用new关键字.

function Cat(name, type, sound) {
            this.name = name;
            this.type = type;
            this.miao = function () {
                console.log(sound); // 别忘了作⽤域的链式访问规则
            }
        }
 
        var mimi = new Cat('咪咪', '中华田园猫', '喵');
        console.log(mimi);
        mimi.miao();

前端之JavaScript光速入门（基础语法）