JavaScript

@Zeal

已于 2024-05-08 19:02:31 修改

阅读量908

点赞数 17

分类专栏：前端文章标签： javascript 开发语言 ecmascript

于 2024-04-25 21:21:23 首次发布

本文链接：https://blog.csdn.net/m0_69266818/article/details/138199947

版权

前端专栏收录该内容

5 篇文章 0 订阅

订阅专栏

介绍

JavaScript是一门跨平台、面向对象的脚本语言，来控制网页行为，它能使网页可交互
JavaScript和Java是完全不同的语言，不论是概念还是设计。但是基础语法类似
javaScript插入HTML页面后，可由所有的现代浏览器执行。
JavaScript语言不需要编译，直接由各大浏览器解析运行
学习这门语言不需要单独安装软件，只需要浏览器即可
浏览器执行JS介绍：
浏览器分成俩部分：

渲染引擎：用来解析HTML和CSS，俗称内核
JS引擎：也称JS解释器。用来读取网页中的JS代码，对其处理后运行

浏览器本身并不会执行JS代码，而是通过内置JavaScript引擎(解释器)来执行JS代码。JS引擎执行代码时逐行解释每一行源码(转换为机器语言)，然后由计算机去执行。所有JavaScript语言归为脚本语言，会逐行解释执行。

引入方式

内部脚本

将JS代码定义在HTML页面中
在HTML中，JavaScript代码必须位于<script></script>之间
注意：

在HTML文档中可以在任意位置，放置任意数量的

外部脚本

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

注意：

外部的js文件中不能包含

基础语法

书写语法

区分大小写：与Java一样，变量名、函数以及其他一切东西都区分大小写
每行结尾的分号可有可无
注释：
1. 单行注释：//注释内容
2. 多行注释：/注释内容/
大括号表示代码块

输出语句

使用window.alert() 写入警告框
使用document.write() 写入HTML输出
使用console.log() 写入浏览器控制台

变量

JavaScript中var关键字来声明变量
JavaScript是一门弱类型语言，变量可以存放不同类型的值
变量名和Java类似
ECMAScript6新增了用let关键字来定义变量。它的用法类似于var，但是所声明的变量，只在let关键字所在的代码块内有效，且不允许重复声明
ECMAScript6新增了const关键字，用来声明一个只读的常量。一旦声明，常量的值就不能改变

数据类型

JavaScript中分为：原始类型和引用类型

原始类型

number：数字(整数，小数，NAN(Not a Number))
string：字符、字符串，单双引号皆可
boolean：布尔 true，false
null：对象为空
undefined：当声明的变量未初始化时，该变量的默认值是undefined

undefined==null
es6开始定义字符类型可以使用返单引号，可以简化字符类型数据的拼接

console.log(`哈哈` + 10 + "ss" + true );
//哈哈10sstrue

引用类型

就是对象 Object，Date等

使用typeof运算符可以获取数据类型
typeof 变量名

运算符

和=的区别：

==属于非严格比较，如果运算符俩侧的数据类型不一致，那么先转换成一致，然后再比较数值
===属于严格比较，如果运算符俩侧的数据类型不一样，直接返回false；如果俩侧数据类型一致再比较数值

！=和！==的区别：

！=是==的取反
！是=的取反

类型转换：

字符串转化为数字，方法parseInt()，从左向右解析，遇到非数值就停止解析，字面值不是数字，转为NaN
boolean转换数字，用方法Number()
其他类型转化为boolean类型使用Boolean(balue)函数
- 0，NAN，空字符串，null，undefined转为false
- 其他都转为true

流程控制语句

if，switch，for，while，do…while

函数

函数(方法)是被设计为执行特定任务的代码块

普通函数

语法：
function 函数名(参数1，参数2…){
函数体
}
注：

形式参数不需要类型，JavaScript是弱类型语言
返回值也不需要定义类型，可以在函数内部直接使用return返回即可

JavaScript中的函数必须被调用才能执行
JavaScript中不存在方法的重载，只要函数名相同，那么就认为是一个函数，后面的函数会覆盖掉前面的函数
注意事项：

调用有参数的函数可以不传递实参
调用无参数的函数可以传递实参，传递的实参会放到js中的一个内置数组对象arguments中，我们可以遍历数组取出数据

匿名函数

没有名字的函数
格式一：将匿名函数赋值给一个变量

<!-- 文档类型声明标签，告知浏览器这个页面采取html版本来显示页面 -->
<!DOCTYPE html>
<!-- 告诉浏览器这是一个英文网站，本页面采取英文显示，单也可以书写中文 -->
<html lang="en">

<head>
    <!-- 必须书写，告知浏览器以UTF-8编码表编解码中文，如果不书写就会乱码 -->
    <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>title</title>
</head>
<body>
  <script type="text/javascript">
      /*
        js中的函数：匿名函数，就是没有名字的函数
        定义格式
        let 函数名 = function(参数列表){
          函数体
        }
       */

       let sum = function(a,b){
        return a+b;
       };

       console.log(sum(3,4));
    
  </script>
</body>
</html>

格式二：匿名函数作为另一个函数的参数传递

<!-- 文档类型声明标签，告知浏览器这个页面采取html版本来显示页面 -->
<!DOCTYPE html>
<!-- 告诉浏览器这是一个英文网站，本页面采取英文显示，单也可以书写中文 -->
<html lang="en">

<head>
    <!-- 必须书写，告知浏览器以UTF-8编码表编解码中文，如果不书写就会乱码 -->
    <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>title</title>
</head>
<body>
<script type="text/javascript">
    /*
      js中的函数：匿名函数，就是没有名字的函数
      匿名函数作为另一个函数的参数传递
     */
    
    function add(x){
        console.log("普通函数");

       x();
    }

    add(function(){
        console.log("匿名函数");
    });


</script>
</body>
</html>

这个就相当于let x = function(){};

对象

Array

格式1：
let arr = new Array(元素列表);
注：

当元素列表中就一个整数时，表示数组的长度为整数
当元素列表为一个小数时，会报错，数组长度不可能为小数
当元素列表为一个非number类型的值，表示数组的元素
js的数组长度是可变的

格式2：
let arr = [元素列表];
当元素列表为一个数时，都为该数组的元素
函数
push() 将新元素添加到数组的末尾，并返回新的数组长度
splice(index,n) 从数组中删除元素。index表示从哪个索引删除，n表示删除数据个数
增强for
for{let x of arr}{
console.log(x);
}

RegExp正则对象

定义了字符串组成的规则
格式1：
let reg = /^正则表达式符号 $br />**格式2**：<br />let reg = new RegExp("^正则表达式符号$ ");
语法：

方法：
test(str):判断指定字符串是否符合规则，返回true和false

String

格式1：
let 变量名 = new String(s);
格式2：
let 变量名 = s
属性：
length 字符串的长度
方法：
charAt() 返回在指定位置的字符
indexOf() 查找指定字符串在原字符串中最开始出现的索引
lastIndexof() 查找指定字符串在原字符串从右往左第一次出现的索引

自定义对象

let 对象名称 = {
          属性名称1:属性值1,
          属性名称2:属性值2,
          ...
          函数名称:function (形参列表){}
          ...
        };

要想使用属性值，使用对象名称调用
方法中要相使用属性值，可以使用this或对象名称

BOM对象

Browser Object Model 浏览器对象模型
js将浏览器的各个组成部分封装为对象
组成：

Window：浏览器窗口对象
Navigator：浏览器对象
Screen：屏幕对象
History：历史记录对象
Location：地址栏对象

Window

直接使用window调用window对象中的属性和函数，其中window可以省略
属性：获取其他BOM对象

方法：
alter() 带有一个确认按钮的弹出框
confirm() 带有确定、取消的确认框，确认返回true
setInterval(匿名函数，毫秒) 定时器
clearInterval(定时器变量名) 取消定时器
setTimeout(匿名函数，毫秒) 定时器(只执行一次)

History

使用window.history获取，其中window.可以省略
方法：
back() 回退到前一个url
forward() 加载下一个url

Location

使用window.location获取，其中window.可以省略
属性：
href 设置或返回完整的URL

DOM对象

Document Object Model 文档对象模型
将标记语言的各个组成部分封装为镀对象

Document：整个文档对象
Element：元素对象
Attrubute：属性对象
Text：文本对象

获取Element

Element：元素对象
使用document对象的方法来获取

getElementById：根据id属性值获取，返回一个Element对象
getElementsByTagName：根据标签名称获取，返回一个Element对象数组
getElementsByName：根据name属性值来获取，返回Element对象数组
getElementByClassName：根据class属性值获取，返回Element对象数组

常见HTML Element对象的使用

查阅文档：https://www.w3school.com.cn/jsref/index.asp
先去所对应的标签对象中找，没有的话去HTML Element中找

事件监听

事情：HTML事件是发生在HTML元素上的"事情"。
事件监听：JavaScript可以在事件被侦测到时执行代码

事件绑定

方式一：通过HTML标签中的事情属性进行绑定
方式二：通过DOM元素属性绑定

常见事件

对于onsubmit事件来说，如果可以提交表单，那么绑定的匿名函数返回true，反之返回false
对于获取form标签的js代码梵放到form标签上面，会发生获取不到from标签的，我们可以先让浏览器加载下面的html标签，然后回来执行下面的js代码，可以将操作html标签的js代码放到onload事件绑定的函数中。

综合案例

需求

代码

<!-- 文档类型声明标签，告知浏览器这个页面采取html版本来显示页面 -->
<!DOCTYPE html>
<!-- 告诉浏览器这是一个英文网站，本页面采取英文显示，单也可以书写中文 -->
<html lang="en">

<head>
    <!-- 必须书写，告知浏览器以UTF-8编码表编解码中文，如果不书写就会乱码 -->
    <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>欢迎注册</title>
    <link href="css/register.css" rel="stylesheet">
</head>
<body>

<div class="form-div">
    <div class="reg-content">
        <h1>欢迎注册</h1>
        <span>已有帐号？</span> <a href="#">登录</a>
    </div>
    <form id="reg-form" action="#" method="get">

        <table>

            <tr>
                <td>用户名</td>
                <td class="inputs">
<!--                    <input name="username" type="text" id="username" οnblur="checkUsername()">-->
                    <input name="username" type="text" id="username" onblur="checkUsername()">
                    <br>
                    <span id="username_err" class="err_msg" style="display: none">用户名不太受欢迎</span>
                </td>

            </tr>

            <tr>
                <td>密码</td>
                <td class="inputs">
                    <input name="password" type="password" id="password" onblur="checkPassword()">
                    <br>
                    <span id="password_err" class="err_msg" style="display: none">密码格式有误</span>
                </td>
            </tr>


            <tr>
                <td>手机号</td>
                <td class="inputs"><input name="tel" type="text" id="tel" onblur="checkTel()">
                    <br>
                    <span id="tel_err" class="err_msg" style="display: none">手机号格式有误</span>
                </td>
            </tr>

        </table>

        <div class="buttons">
            <input value="注 册" type="submit" id="reg_btn">
        </div>
        <br class="clear">
    </form>

</div>
<script>

    //1. 验证 用户名是否符合规则：长度 6~12,单词字符组成
   function checkUsername(){
    let username = document.getElementById("username").value;

    let reg = new RegExp("^\\w{6,12}$");

    if(reg.test(username)){
        document.getElementById("username_err").style.display = "none";
        return true;
    }else{
        document.getElementById("username_err").style.display = "block";
        return false;
    }
   }

    //2. 验证 密码是否符合规则:长度 6~12任意字符
    function checkPassword(){
        let password = document.getElementById("password").value;

        let reg = new RegExp("\.{6,12}");

        if(reg.test(password)){

            document.getElementById("password_err").style.display="none";
            return true;
        }else{
            document.getElementById("password_err").style.display="block";
            return false;

        }

    };


    //3. 验证 手机号是否符合规则：长度 11，数字组成，第一位是1
    function checkTel(){
        let tel = document.getElementById("tel").value;

        let reg = new RegExp("1\\d{10}");

        if(reg.test(tel)){
            document.getElementById("tel_err").style.display="none";
            return true;
        }else{
            document.getElementById("tel_err").style.display="block";
            return false;

}

    }

    //4. 表单是否可以提交
   
    document.getElementById("reg-form").onsubmit = function(){

        return checkUsername() && checkPassword()  && checkTel();
    }

</script>
</body>
</html>