前端系列-JavaScript01

AIains

已于 2023-10-21 11:27:12 修改

阅读量38

点赞数

分类专栏：前端文章标签： javascript

于 2023-10-17 08:42:50 首次发布

本文链接：https://blog.csdn.net/aiains/article/details/133387650

版权

前端专栏收录该内容

14 篇文章 1 订阅

订阅专栏

一、JavaScript介绍

1、JavaScript的概念

JavaScript（js）若脚本语言

js（基础语法+DOM+BOM）

专业前端js：ecmascript（语法）        es，es5      es6      es7...

BOM：Document Object Model        文档对象模型，让js可以通过DOM操作也能操作标签。

BOM：Browser Object Model        浏览器对象模型，让js可以同BOM操作浏览器。

2、JavaScript的特点

1、几乎每个浏览器都有JavaScript的解析引擎。
2、不需要编译，直接由浏览器解析运行。

3、JavaScript的作用

JavaScript 是用来控制网页行为的，它能使网页可交互；那么它可以做什么呢？如改变页面内容、修改指定元素的属性值、对表单进行校验等

二、JavaScript的引入方式

JavaScript 引入方式就是 HTML 和 JavaScript 的结合方式。JavaScript引入方式有两种：

1、内部：将 JS代码定义在HTML页面中

                在 HTML 中，JavaScript 代码必须位于 <script> 与 </script> 标签之间

                在 HTML 文档中可以在任意地方，放置任意数量的<script>标签。

                一般把脚本置于 <body> 元素的底部，可改善显示速度

     <script> js代码 </script>

2、外部：将 JS代码定义在外部 JS文件中，然后引入到 HTML页面中

                定义外部 js 文件。如定义名为 demo.js的文件。外部脚本不能包含 <script> 标签

                在js文件中直接写 js 代码即可，不要在 js文件中写 script 标签

                在页面使用 script 标签中使用 src 属性指定 js 文件的 URL 路径。

                <script src="js文件路径"> </script>

三、JavaScript的基础语法

1、书写语法

1、区分大小写：与Java一样，变量名、函数名以及其他一切东西都是区分大小写的。

2、每行结尾的分号可有可无，如果一行上写多条语句的时候，需要用分号区分语句。

3、注释方法

单行注释：//注释内容

多行注释：/* 注释内容 */

2、输出语句

alert(11111)        alert弹窗

console.log("hello js 3");        //写入浏览器的控制台

prompt( )        弹窗提示并且可以输入，可用var x = prompt( );接收输入的内容

document.write("hello js 2~");        //写入html页面

3、变量

1、变量：程序运行过程中可以变化的量。声明变量的方式有两种（var和let）

        var x = 10;        var定义的变量不是唯一的，可重复定义

        let y = 90;        let定义的变量是唯一的，不可重复定义

2、变量的命名规范：

        2.1、变量名可以包含数字、字母、下划线，但是不能以数字开头

        2.2、不能和系统关键词冲突

        2.3、遵循小驼峰或大驼峰命名法

        2.4、命名尽量见名知意

3、常量：程序执行过程中不可改变的量。（const）

        const PI = 3.1415926

        常量一旦被赋值，就不能更改（二次赋值）

4、数据类型

JavaScript中提供了两种数据类型：“原始类型”和“引用类型”

使用 typeof 运算符可以获取变量或对象的数据类型 例如：alert(typeof(age));

原始数据类型：

1、数值（number）：整数、小数、NaN

NaN是一个特殊的number类型的值，表示不是一个数字

2、字符串（string）：字符、字符串（单引号或双引号皆可）

3、布尔（boolean）：布尔值。true、false

4、null：对象为空，若设置var x = null，则x的数据类型为object

5、undefined：当声明的变量未初始化时，该变量的默认值是undefined

5、运算符

1、算术运算符：+，-，*，/，%，++，--

2、赋值运算符：=，

3、比较运算符：>，<，>=，<=，!=，==，===(全等于)

4、复合运算符：+=，-=，*=，/=，%=

5、逻辑运算符：与、或、非

        与             &&        真真为真，有假即假        条件表达式1 && 条件表达式2

        或              ||          有真为真，假假为假        条件表达式1 || 条件表达式2

        非              !           真取反为假，假取反为真        !表达式

        与的短路：条件表达式1为假的时候，条件表达式2不再进行

        或的短路：条件表达式1为真的时候，条件表达式2不再进行

6、三元运算符：条件表达式 ? true_value : false_value

== 和 === 的区别

==：

        1、判断类型是否一样，如果不一样，则进行类型转换

        2、再去比较值

===：

        1、判断类型是否一样，如果不一样直接返回false

        2、再去比较值

var age1 = 20;
var age2 = "20";

alert(age1 == age2);// true
alert(age1 === age2);// false

6、数据类型转换

== 运算符，会自动进行类型转换

1、其他类型转为number
   1.1、string 转换为 number 类型：按照字符串的字面值，转为数字。如果字面值不是数字，则转为NaN
   将 string 转换为 number 的方式：
            方式1：var aa = str - 0;
            方式2：var bb = parseInt(str);
            方式3：var cc = Number(str);
   1.2、boolean 转换为 number 类型：true 转为1，false转为0

2、其他类型转为boolean
    number 类型转换为 boolean 类型：0和NaN转为false，其他的数字转为true
    string 类型转换为 boolean 类型：空字符串转为false，其他的字符串转为true
    null类型转换为 boolean 类型是 false
    undefined 转换为 boolean 类型是 false

3、加号左右两侧只要出现字符串，运算结果就是拼接后的字符串

四、数组

数组(array)：是一组数据集合

1、数组的定义

注意：JavaScript中数组的创建的时候，里面的内容不受数据类型的约束，一个数组中可以同时放多种类型的数据
方式1：
var arr = new Array() //实例化一个空数组
方式2：
var arr = [] //创建一个空数组

例如：
var arr = [1,3,5,6,8,9]
var arr2 = [1,'a',true,null,undefined]

2、数组的使用

arr[下标]    获取指定下标的值（下标从0开始）
arr.length>0    判断数组是否为空
arr[arr.length-1]    获取数组最后一个元素
arr[0]    获取数组第一个元素

// 向数组尾部添加元素，可以批量添加，也可以添加单个
arr.push(1,'张三',8,true,6,7,4);
arr.push(9);

3、多维数组

花括号就是对象，对象由键值对（属性和方法）属性名和方法名唯一。
var zhangsan = {
            // 属性
            name:'张三',
            age:20,
            sex:"女",
            // 方法
            walk:function(){
                    console.log("喜欢吃饭");
            }
        }

var students = [
            lisi,
            zhangsan,
            {
                name:"小花"
            },
            1,
            true,
            ['李白','杜甫',['aa','bb']]
        ]

        // 获取张三的名字
        var zsname = students[1].name;
        // 取出bb
        var st = students[5][2][1]

4、数组元素查重

indexOf查找指定的元素是否在数组中存在，存在返回下标，不存在返回-1

用法：

var panduan = nums.indexOf(index);

if(panduan == -1){

console.log("该元素在数组中不存在");

} else{

console.log("该元素在数组中存在");

}

5、数组的排序

sort函数

用法：

nums.sort((a,b)=>a-b) // 将数组元素排序-升序

nums.sort((a,b)=>b-a) // 将数组元素排序-降序

五、函数

1、函数的定义

方式1：

function(){方法体}

方式2：

() => {方法体} 箭头函数

例如：
end.onclick = () => {
            // 清除定时器任务
            clearInterval(num)
        }

2、定时器

// 每隔指定的时间（单位毫秒），函数就会执行一次

setInterval(函数,间隔时间);

用法：

        var num = 0; //保存定时器的执行编号

        // 创建一个定时任务，并返回当前任务编号

        num = setInterval(函数,间隔时间XXX毫秒);

        // 清除定时器任务

        clearInterval(num)

举例：
<body>
    <button id="start">开始</button><br>
    --<span id="per">person</span>--<br>
    <button id="end">结束</button><br>
    <script>
        var num = 0;
        var persons = ['李白','杜甫','曹操','刘备','关羽','张飞','孙权','诸葛亮','卢布','貂蝉'];
        start.onclick = () => {
            // 创建一个定时任务，并返回当前任务编号
            num = setInterval(()=>{
                var rand = Math.floor(Math.random() * persons.length);
                // 将从数组中取到的值赋值给span
                per.innerHTML = persons[rand];
            },100)
        }

        end.onclick = () => {
            // 清除定时器任务
            clearInterval(num)
        }
    </script>
</body>