Javascript入门||基础篇-编程知识

Javascript入门||基础篇

定义

一种运行在客户端（浏览器）的编程语言，实现人机交互效果

作用

网页特效（监听用户的一些行为让网页做出对应的反馈）

表单验证（针对表单数据的合法性进行判断）

数据交互（获取后台数据，渲染到前端）

服务器编程（node.js）

组成

ECMAScript：基础语法，如变量，循环，对象等

Web APi

DOM：操作文档，比如对页面元素进行移动

BOM：操作浏览器，比如页面弹窗，检测窗口宽度，储存数据到浏览器等

书写位置

内部JavaScript

直接写在html标签里，用script标签包住

规范：写在/body上面

原因在于浏览器会按照代码在文件中的顺序加载HTML，如果先加载的javascript期望修改其下方的HTML，那么它可能由于HTML尚未被加载而失败

HTML
<!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('你好，js')
    </script>
</body>
</html>

外部JavaScript

新建一个以.js文件结尾的文件

内联JavaSript

代码写在标签内部

HTML
<body>
<button οnclick="alert('逗你玩--')">点击领奖</button>
</body>

输出语法

语法1：document.write

作用：向body内输出内容

注意：如果输出的内容写的是标签，也会被解析成网页元素

HTML
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>


</head>
<body>
    <script>
            document.write('hey')
            // 输出hello world
            document.write("<h1>hello world</h1>")
    </script>
</body>
</html>

语法2：alret

页面弹出警告对话框

语法3：console.log

控制台输出语法，程序员调试使用

输入语法

Prompt

作用：显示一个对话框，对话框中包含一条文字信息，用来提示用户输入文字

注：alert和prompt会跳过页面渲染先被执行

变量

定义

变量是计算机中用来存储数据的容器，它可以让计算机变得有记忆

注意：变量不是数据本身，仅仅是一个用于存储数据的容器

基本使用

声明

JavaScript
let 变量名

声明变量由两部分构成：声明关键字，变量名

变量声明要有意义

小驼峰命名法

第一个单词首字母小写，第二个单词首字母大写，userName

赋值

JavaScript
let age = 18

等号两边要有空格

数组

Array

JavaScript
let arr = [数据1，数据2，数据3]

常量

Const

常量不允许重新赋值

运算，判断与循环

注：运算，判断与循环的语法与C相同

并且支持自增和自减

JavaScript
<!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>
        let a = 1, b = 1
        for(let i = 1; i<10; i++)
        {
            for(let j=1;j<=i ;j++)
                {
                    document.write(j+'*'+i+'='+i*j+'  ')
                }
                document.write('<br>')
        }
    </script>

</body>
</html>

输出结果

数组

数组的组成

数组做为数据的集合，它的单元值可以是任意数据类型

CSS

<script>
    // 6. 数组单值类型可以是任意数据类型

    // a) 数组单元值的类型为字符类型
    let list = ['HTML', 'CSS', 'JavaScript']
    // b) 数组单元值的类型为数值类型
    let scores = [78, 84, 70, 62, 75]
    // c) 混合多种类型
    let mixin = [true, 1, false, 'hello']
</script>

数组长度属性

重申一次，数组在 JavaScript 中并不是新的数据类型，它属于对象类型。

操作数组

数组做为对象数据类型，不但有 length 属性可以使用，还提供了许多方法：

push 动态向数组的尾部添加一个单元

unshit 动态向数组头部添加一个单元

pop 删除最后一个单元

shift 删除第一个单元

splice 动态删除任意单元

使用以上4个方法时，都是直接在原数组上进行操作，即成功调任何一个方法，原数组都跟着发生相应的改变。并且在添加或删除单元时 length 并不会发生错乱。

JavaScript
<script>
    // 定义一个数组
    let arr = ['html', 'css', 'javascript']

    // 1. push 动态向数组的尾部添加一个单元
    arr.push('Nodejs')
    console.log(arr)
    arr.push('Vue')

    // 2. unshit 动态向数组头部添加一个单元
    arr.unshift('VS Code')
    console.log(arr)

    // 3. splice 动态删除任意单元
    arr.splice(2, 1) // 从索引值为2的位置开始删除1个单元
    console.log(arr)

    // 4. pop 删除最后一个单元
    arr.pop()
    console.log(arr)

    // 5. shift 删除第一个单元
    arr.shift()
    console.log(arr)
</script>