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

    一、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>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26

    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("警告一下！")

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

    • 1
    • 2
    • 3
    在控制台打印日志
        //在控制台输出日志：console.log()
    console.log("我是一条日志.....")

    • 1
    • 2

    3.3.2 声明函数

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

    写法1：命名函数
        function showMessage(message) {
        console.log(message)
    }

    • 1
    • 2
    • 3
    写法2：匿名函数
        var sum = function (a,b) {
        console.log("求"+a+"和"+b+"的和")
        return a+b
    }

    • 1
    • 2
    • 3
    • 4

    声明一个函数，相当于创建了一个函数对象，将这个对象的引用赋值给变量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>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33

    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)

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8

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

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

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7

    3.4.3 给对象设置函数属性

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

    obj2.showMessage(obj2.name)

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12

    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>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27

    3.5 数组

    3.5.1 使用new关键字创建数组

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

    • 1
    • 2

    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>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32

    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>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51

    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>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26

    学海无涯苦作舟

  • 相关阅读:
    linux-OpenSSL升级
    流量回放－The Big Picture
    PCL点云处理之点云重建为Mesh模型并保存到PLY文件 ---方法二 （二百一十一）
    时序预测 | MATLAB实现基于SVM-Adaboost支持向量机结合AdaBoost时间序列预测
    mysql面试题51：你是如何监控你们的数据库的？你们的慢日志都是怎么查询的？
    堆排序的实现原理
    安防监控系统/视频云存储/监控平台EasyCVR服务器解释器出现变更该如何修改？
    Spearman、Pearson相关系数
    Python 机器学习入门之ID3决策树算法
    【进阶篇】使用 Stream 流和 Lambda 组装复杂父子树形结构
  • 原文地址：https://blog.csdn.net/HunterArley/article/details/128100683