零基础入门JavaWeb——JS的基本语法

痛定思痛。 2024-03-31 13:12 98阅读 0赞

## 一、JavaScript的起源 ##

在1995年时，由NetScape公司在网景导航者浏览器上首次设计实现而成。NetScape在最初将其脚本语言命名为LiveScript，因为NetScape和SUN公司合作，网景公司管理层希望蹭Java的热度，因此取名为JavaScript。

JavaScript共分成三部分：

1.  ECMAScript（基本语法）
2.  BOM（浏览器对象模型）
3.  DOM（文档对象模型）

## 二、JavaScript的特性 ##

### 2.1 脚本语言 ###

JavaScript是一种解释型的脚本语言。不同于C、C++、Java等语言先编译后执行，JavaScript不会产生编译出来的字节码文件，而是在程序的运行过程中对源文件逐行进行解释。

### 2.2 基于对象 ###

JavaScript是一种基于对象的脚本语言，它不仅可以创建对象，也能使用现有的对象。但是面向对象的三大特性：封装、继承、多态中，JavaScript能够实现封装，可以模拟继承，不支持多态，所以它不是一门面向对象的编程语言。

### 2.3 弱类型 ###

JavaScript中也有明确的数据类型，但是声明一个变量后它可以接收任何类型的数据，并且会在程序执行过程中根据上下文自动转换类型。

### 2.4 事件驱动 ###

JavaScript是一种采用事件驱动的脚本语言，它不需要经过Web服务器就可以对用户的输入做出响应。

### 2.5 跨平台性 ###

JavaScript脚本语言不依赖于操作系统，仅需要浏览器的支持。因此一个JavaScript脚本在编写后可以带到任意机器上使用，前提是机器上的浏览器支持JavaScript脚本语言。目前JavaScript已被大多数的浏览器所支持。

## 三、JavaScript的基本语法 ##

### 3.1 JavaScript的引入方式 ###

#### 3.1.1 内部脚本方式 ####

1.  JavaScript代码要写在script标签内
2.  script标签可以写在文档内的任意位置
3.  为了能够方便查询或操作HTML标签（元素）script标签可以写在body标签后面

#### 3.1.2 外部脚本方式 ####

在script标签内通过src属性指定外部xxx.js文件的路径即可。

1.  引用外部JavaScript文件的script标签里面不能写JavaScript代码
2.  先引入，再使用
3.  script标签不能写成单标签

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>JS的引入方式</title>
        
        <script src="../js/outer.js"></script>
    </head>
    <body>
        
        <script type="text/javascript">
            alert("hello world")
        </script>
    
        
        <script type="text/javascript">
            showMessage()
        </script>
    </body>
    </html>

### 3.2 声明和使用变量 ###

#### 3.2.1 JavaScript数据类型 ####

##### 基本数据类型 #####

1.  数值型number：JavaScript不区分整数、小数
2.  字符串string：JavaScript不区分字符、字符串；单引号、双引号意思一样。
3.  布尔型boolean：true、false

在JavaScript中，其他类型和布尔类型的自动转换。

*  true：非零的数值，非空字符串，非空对象
 *  false：零，空字符串，null，undefined

##### 引用数据类型 #####

1.  所有new出来的对象
2.  用\[\]声明的数组
3.  用\{\}声明的对象

#### 3.2.2 变量 ####

1.  关键字：var，其实ECMAScript6之后建议使用let
2.  数据类型：JavaScript变量是弱类型的，可以接收任意类型的数据
3.  标识符：严格区分大小写
4.  变量使用规则：如果使用了一个没有声明的变量，那么会在运行时报错；如果声明了一个变量没有初始化，那么这个变量的值为undefined。

### 3.3 函数 ###

#### 3.3.1 内置函数 ####

内置函数就是JavaScript中内置好的函数，可以直接使用。

##### 弹出警告框 #####

// 弹出警告框：alert()
        alert("警告一下！")

##### 弹出确认框 #####

//弹出确认框：confirm()，可以让用户选择确定或者取消，选择确定就返回true，否则就返回false。
        var flag = confirm("你确定要删除吗？")
        alert(flag)

##### 在控制台打印日志 #####

//在控制台输出日志：console.log()
        console.log("我是一条日志.....")

#### 3.3.2 声明函数 ####

声明函数就是使用者自己定义一个函数，有两种写法：

##### 写法1：命名函数 #####

function showMessage(message) {
            console.log(message)
        }

##### 写法2：匿名函数 #####

var sum = function (a,b) {
            console.log("求"+a+"和"+b+"的和")
            return a+b
        }

声明一个函数，相当于创建了一个函数对象，将这个对象的引用赋值给变量total。如果不给这个对象赋值，可以将其作为匿名函数使用。

#### 3.3.3 调用函数 ####

JavaScript中函数本身就是一种对象，函数名就是这个对象的引用。而调用函数的格式是：**函数引用()**。

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>声明和创建函数</title>
    </head>
    <body>
    <script>
        //声明函数的两种方式：
        //    1. 命名函数（普通函数）
        //JS中声明函数的特点：
        //    1. 没有返回值类型
        //    2. 没有参数
        function showMessage(message) {
          
            console.log(message)
        }
    
        //     2. 匿名函数：声明函数的时候不取名字
        var sum = function (a,b) {
          
            console.log("求"+a+"和"+b+"的和")
            return a+b
        }
    
        // 调用函数，通过函数名调用即可
        showMessage("你好啊")
    
        // JS的函数，在声明时和调用时的参数个数可以不一致，所以在JS里面没有方法重载的概念。
        // 如果出现同名函数以后面的为准
        var total = sum(1,2)
        console.log(total)
    </script>
    </body>
    </html>

### 3.4 对象 ###

JavaScript中没有类的概念，对于系统内置的对象可以直接创建使用。

#### 3.4.1 使用new关键字创建对象 ####

// 在JS中使用new的方式创建对象
        var obj1 = new Object()
        // 给对象的属性赋值
        obj1.age=10
        obj1.name="jay"
        obj1.address = "中国台湾省台北市"
    
        console.log(obj1.name)

#### 3.4.2 使用\{\}创建对象（常用） ####

// 在JS中使用{}的方式创建对象
        var obj2 = {
            "name":"张飞",
            "age":30,
            "address":"蜀国",
        }
        console.log(obj2.name)

#### 3.4.3 给对象设置函数属性 ####

// 在JS中使用{}的方式创建对象
        var obj2 = {
            "name":"张飞",
            "age":30,
            "address":"蜀国",
            "showMessage":function (message) {
                console.log(message)
            }
        }
        console.log(obj2.name)
    
        obj2.showMessage(obj2.name)

#### 3.4.4 this关键字 ####

this关键字只有两种情况：

*  在函数外面：this关键字指向window对象（代表当前浏览器窗口）
 *  在函数里面：this关键字指向调用函数的对象

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>this的介绍</title>
    </head>
    <body>
    <script>
        var name = "刘备"
        this.name = "刘皇叔"
        function showName() {
          
            console.log(this.name)
        }
    
        var obj1 = {
          
            "name":"张飞",
            "showName":function () {
          
                console.log(this.name)
            }
        }
    
        showName()
    
        obj1.showName()
    </script>
    </body>
    </html>

### 3.5 数组 ###

#### 3.5.1 使用new关键字创建数组 ####

// 创建数组对象
    var array = new Array();

#### 3.5.2 使用\[\]创建数组 ####

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>JS的数组</title>
    </head>
    <body>
        <script>
            // 1. 创建一个数组，JS中的数组长度不是固定的，并且存放的数据类型也不是固定的。
            var arr = [1,2,3,"马超","赵云"]
            arr[5] = "黄忠"
    
            // reverse方法是将数组中的内容进行反转
            // arr.reverse()
    
            // join方法是将数组中的元素通过分隔符拼接成一个字符串
            var str = arr.join("&");
            console.log(str)
    
            // split方法是将字符串通过分隔符拆分成数组
            var strings = str.split("&");
    
            // pop方法是弹出数组中的最后一个元素
            console.log(strings.pop())
    
            // 2.对于数组而言最重要的就是遍历
            for ( i = 0; i <strings.length ; i++) {
          
                console.log(arr[i])
            }
        </script>
    </body>
    </html>

### 3.6 JSON ###

#### 3.6.1 JSON格式的用途 ####

在开发中涉及到跨平台数据传输，JSON格式是首选。

#### 3.6.2 JSON格式的说明 ####

JSON数据两端要么是`{}`，要么是`[]`。

1.  \{\}定义JSON对象
2.  \[\]定义JSON数组
3.  JSON对象的格式是：`{key:value,key:value}`
4.  JSON数组的格式是：`[{key:value,key:value}，{key:value,key:value}]`
5.  key的类型固定是字符串类型
6.  value的类型可以是基本数据类型，也可以是引用类型（JSON对象或JSON数组）

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>JSON的介绍</title>
    </head>
    <body>
    <script>
        // json的格式：{key:value,key:value}
        var person = {
          
            "name":"关羽",
            "age":18,
            "address":"蜀国"
        }
    
        var person2 = {
          
            "name":"关羽",
            "age":18,
            "address":"蜀国",
            "child":{
          
                "name":"关凤",
                "age":1,
                "address":"蜀国"
            }
        }
    
        console.log(person2.child.name)
    
        // json数组的格式：[{key:value,key:value}，{key:value,key:value}]
        var person3 = {
          
            "name":"关羽",
            "age":18,
            "address":"蜀国",
            "child":[
                {
          
                    "name":"关凤",
                    "age":1,
                    "address":"蜀国"
                },
                {
          
                    "name":"关平",
                    "age":2,
                    "address":"蜀国"
                }
            ]
        }
    
    
    </script>
    </body>
    </html>

#### 3.6.3 JSON对象和JSON字符串互转 ####

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>JSON转换</title>
    </head>
    <body>
        <script>
            var person = {
          
                "name":"刘备",
                "age":18,
                "address":"蜀国"
            }
    
            // person对于js而言是一个对象
            // 将JSON字符串转成字符串
            var str = JSON.stringify(person);
            console.log(str)
    
            // 假设str是服务器传输到客户端的，在拿到json字符串之后，需要将其转成JSON对象才能解析出数据
            var p = JSON.parse(str);
            console.log(p.name)
    
        </script>
    </body>
    </html>

## 学海无涯苦作舟 ##