JavaScript学习

最新推荐文章于 2024-02-27 19:02:15 发布

gsylove

最新推荐文章于 2024-02-27 19:02:15 发布

阅读量172

点赞数

文章标签： javascript html5 html java

本文链接：https://blog.csdn.net/gsylove/article/details/120285479

版权

这篇博客详细介绍了JavaScript的基础知识，包括数据类型、流程控制、对象、数组、Map和Set，以及函数和面向对象编程。重点讲解了操作BOM和DOM对象，包括表单验证，还涉及到了jQuery库的使用。JavaScript被强调为后端人员必备技能，同时提到了ES6的新特性如Map、Set和iterator。

摘要由CSDN通过智能技术生成

1、什么是JavaScript

1.1概述

JavaScript是一门世界上最流行的脚本语言

一个合格的后端人员，必须要精通JavaScript

ECMAScript它可以理解为是JavaScript的一个标准

2、快速入门

2.1、引入JavaScript

1.内部标签

<script>
    //...
</script>

2.外部引用

qj.js

//...

test.html

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <!--Script标签内写JavaScript代码-->
   <!-- <script>
        alert("Hello，JavaScript！");
    </script>
    -->

    <!--外部引入js-->
    <!--注意：Script标签要成对出现！-->
    <script src="js/qj.js"></script>


</head>
<body>

<!--这里也可以存放Script-->
</body>
</html>

2.2、语法入门

浏览器调试：

<!--JavaScript严格区分大小写！-->
    <script>
        // 1. 定义变量  变量类型 变量名 = 变量值;
        var score=71;
        // alert(num);  弹窗
        // 2. 条件控制
        if (score>60 && score<70){
            alert("60~70")
        }else if (score>70 && score<80){
            alert("70~80")
        }else{
            alert("other");
        }

        //console.log(sore)  :在控制台打印变量
        /*
        * asa
        * */

    </script>

2.3、数据类型

数值，文本，图形，音频，视频

变量：不能数字开头

number

js不区分小数和整数，number

123 //整数123
123.1 //浮点数123.1
1.123e3 //科学计数法
-99 //复数
NaN   //not a number
Infinity  //表示无限大

字符串

‘abc’ "abc"

布尔值

true ， false

逻辑运算

&&   都为真则为真

||   一个真，则真

！   真即假，假即真

比较运算符

=   赋值
==  等于    (类型不一样，值一样，也会判断为true)
=== 绝对等于   (类型一样，值一样，则为true)

这是一个JS的缺陷，坚持不要使用 == 比较

须知：

NaN===NaN ，这个与所有的数值都不想等，包括自己
只能通过isNaN(NaN)来判断这个数是否是 NaN

浮点数问题：

console.log((1/3)===(1-2/3))   //结果为false

尽量避免使用浮点数进行计算，存在精度问题！

Math.abs(1/3-(1-2/3))<0.00000001  //true

null和undefined

null 空
undefined 未定义

数组

JAVA数组必须列相同类型的对象，js中不需要这样

//保证代码的可读性，尽量使用[]
var array = [1,2,3,4,5,'hello',null,true];

new Array(1,2,3,4,5,'hello');

去数组下标：如果越界了，就会undefined

对象

对象是大括号，数组是中括号

每个属性之间用逗号隔开，，最后一个不需要逗号

//Person person = new Person();
        var person = {
            name: "xiaohu",
            age: 3,
            tags: ['js','java','web','...']
        }

去对象的值

person.属性

2.4、严格检查模式

<!--
    前提：IDEA需要支持ES6语法
    'use strict';   严格检查模式，预防js随意性导致产生一些问题
    必须写在javascript的第一行
    局部变量最好使用let定义
    -->
    <script>
        'use strict';
         let i =1;
    </script>

3、数据类型

3.1、字符串

1.正常字符串使用单引号，或者双引号包裹

2.注意转义字符 \

\'
\n
\t
\u4e2d  \u#### Unicode字符
\x41     Ascll字符

3.多行字符串编写 ``括起来

var msg =
            `hello
             world
             你好`

4.模板字符串 ${}

var msg = `hello world 你好`;
        let name = "xiaohu";
        var m = `你好，${name}`;

5.字符串长度

str.length

6..字符串的可变性，不可变（赋值没用）

7.大小写转换

// 注意，这里是方法，不是属性了
student.toUpperCase()

8.student.indexOf('t')

9.substring

[)
student.substring(1) //从第一个字符串截取到最后一个字符串
student.substring(1,3)  //  [1,3)

3.2、数组

Array可以包含任意的数据类型

var arr = [1,2,3,4,5,6];  //通过下表取值和赋值
arr[0]
arr[0] = 1

1.长度

arr.length

注意：假如给arr.length 赋值，数组大小就会发生变化，如果赋值过小，元素会丢失

2.indexOf, 通过元素获得下标索引

arr.indexOf(2)
1

字符串的"1" 和数字 1是不同的

3.slice() 截取Array的一部分类似String中的substring ，返回一个新数组

4.push ， pop 尾部

push: 压入到尾部
pop：弹出尾部的一个元素

5.unshift() , shift() 头部

unshift: 压入到头部
shift：弹出头部的一个元素

6.排序 sort()

["B","C","A"]
arr.sort()
["A","B","C"]

7.元素反转 reverse()

["A","B","C"]
arr.reverse()
["C","B","A"]

8.concat()

["C","B","A"]
arr.concat([1,2,3])
["C","B","A",1,2,3]
arr
["C","B","A"]

注意： concat（）并没有修改数组，这是会返回一个新的数组

9.连接符 join

打印拼接数组，使用特定的字符串连接

["C","B","A"]
arr.join('-')
"C-B-A"

10.多维数组

arr = [[1,2],[3,4],["5","6"]];
arr[1][1]
4

3.3、对象

若干个键值对

var 对象名 = {
    属性名: 属性值,
    属性名: 属性值,
    属性名: 属性值
}

//定义了 person对象，有四个属性
var person = {
    name:

最低0.47元/天解锁文章

gsylove

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫