你好赵伟

这个屌丝很懒，什么也没留下！

热门标签

JavaScript快速入门-基础_javascrip快速入门文档

作者：你好赵伟 | 2024-05-15 01:31:30

踩

javascrip快速入门文档

JavaScript介绍

JavaScript 是一种客户端脚本语言,不需要编译,就可以直接被浏览器解析运行
核心功能:增强用户和 HTML 页面的交互过程，让页面有一些动态效果。以此来增强用户的体验！

快速入门

创建一个 HTML
在<body>标签下面编写一个<script>标签
在<script>标签中编写代码。

通过浏览器查看。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HelloWorld</title>
</head>
<body>
    <h1>HelloWorld</h1>
</body>
<script>
    alert("HelloWorld");
</script>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14

引入方式

内部方式
- 在<body>标签下通过<script>标签编写代码
外部方式
- 定义独立的 js 文件，将代码编写在文件中，在 HTML文件的<body>标签下通过<script src=文件路径>来引入 js 文件。
- 注意:<script>标签不能写成自闭和标签

JavaScript基本语法

注释
- 单行注释: // 注释的内容
- 多行注释: /*注释内容*/
输入输出语句
- 输入框:prompt(“提示内容”);
- 弹出警告框:alert(“提示内容”);
- 控制台输出:console.log(“显示内容”);
- 页面内容输出:document.write(“显示内容”);
变量和常量
- JavaScript 属于弱类型的语言，定义变量时不区分具体的数据类型
- 定义局部变量:let 变量名 = 值;
- 定义全局变量:变量名 = 值; 或者使用var
- 定义常量:const 常量名 = 值;
数据类型

数据类型说明
boolean 布尔类型，true或false
null 声明null值的特殊关键字
undefined 代表变量未定义
number 整数或浮点数
string 字符串
bigint 大整数，例如：let num = 10n
typeof 关键字
- typeof 用于判断变量的数据类型
- 例如:let age = 18;document.write(typeof(age)); // number
运算符
- 其他运算符正常使用,特殊的有
- ==:判断值是否相等
- ===:判断数据类型和值是否相等
- &&:逻辑与，并且的功能
- ||:逻辑或，或者的功能
流程控制和循环语句
- if 语句
- switch 语句
- for 循环
- while 循环
- 正常使用

数据类型	说明
boolean	布尔类型，true或false
null	声明null值的特殊关键字
undefined	代表变量未定义
number	整数或浮点数
string	字符串
bigint	大整数，例如：let num = 10n

数组

用法与java大致相同,但是在 JavaScript 中的数组更加灵活，数据类型和长度都没有限制
定义格式: let 数组名 = [元素1,元素2,…];
索引范围:从 0 开始，最大到数组长度-1
数组长度: 数组名.length

数组高级运算符…

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>数组</title>
</head>
<body>
    
</body>
<script>
    //定义数组
    let arr = [10,20,30];
    //arr[3] = 40;  js中的数组长度可变
    //遍历数组
    for(let i = 0; i < arr.length; i++) {
        document.write(arr[i] + "<br>");
    }
    document.write("==============<br>");

    // 数组高级运算符 ...
    //复制数组
    let arr2 = [...arr];
    //遍历数组
    for(let i = 0; i < arr2.length; i++) {
        document.write(arr2[i] + "<br>");
    }
    document.write("==============<br>");

    //合并数组
    let arr3 = [40,50,60];
    let arr4 = [...arr2 , ...arr3];
    //遍历数组
    for(let i = 0; i < arr4.length; i++) {
        document.write(arr4[i] + "<br>");
    }
    document.write("==============<br>");

    //将字符串转成数组
    let arr5 = [..."heima"];
    //遍历数组
    for(let i = 0; i < arr5.length; i++) {
        document.write(arr5[i] + "<br>");
    }
</script>
</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

函数
- 函数类似于 java 中的方法，可以将一些代码进行抽取，达到复用的效果
- 定义格式
  function 方法名(参数列表) {
  方法体;
  return 返回值;
  }
  
  匿名函数
  function(参数列表) {
  方法体;
  }
  
  参数也可以是可变参数

JavaScript DOM

DOM介绍

DOM(Document Object Model)：文档对象模型
将 HTML 文档的各个组成部分，封装为对象。借助这些对象，可以对 HTML 文档进行增删改查的动态操作。

DOM树
在这里插入图片描述

Element 元素的操作

DOM(Document Object Model)：文档对象模型
Document：文档对象、Element：元素对象、Attribute：属性对象、Text：文本对象
元素的操作
- 根据id获得一个元素:getElementById(id属性值)
- 根据标签名称获得多个元素:getElementsByTagName(标签名称)
- 根据name属性获得多个元素:getElementsByName(name属性值)
- 根据class属性获得多个元素:getElementsByClassName(class属性值)
- 获取当前元素的父元素:.parentElement属性
- 根据class属性获得多个元素:createElement(标签名)
- 将指定子元素添加到父元素中:appendChild(子元素)
- 用父元素删除指定子元素:removeChild(子元素)
- 用新元素替换子元素:replaceChild(新元素,旧元素)
属性的操作
- 设置属性:setAtrribute(属性名, 属性值)
- 根据属性名获取属性值:getAtrribute(属性名)
- 根据属性名移除指定的属性:removeAtrribute(属性名)
- 为元素添加样式:style属性
文本的操作
- innerText
- innerHTML:可以解析标签

JavaScript 事件

事件

事件指的就是当某些组件执行了某些操作后，会触发某些代码的执行

常用事件
- onload :某个页面或图像被完成加载
- onsubmit:当表单提交时触发该事件
- onclick :鼠标单击事件
- ondblclick :鼠标双击事件
- onblur :元素失去焦点
- onfocus :元素得到焦点
- onchange:用户改变域的内容

事件的绑定

方式一

通过标签中的事件属性进行绑定。

<button id="btn" onclick="执行的功能"> </button>

方式二

通过 DOM 元素属性绑定。

document.getElementById("btn").onclick = 执行的功能

<!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>
    <button onclick="up()">进入</button>
    <button id = "down">退出</button>
    <button id="zg">正规按钮</button>
</body>
<script>
    //绑定事件方式1
    function up(){
        alert("我来了!!!")
    }
    //绑定事件方式2
    let downbtn = document.getElementById("down");
    downbtn.onclick = function(){
        alert("xxx")
    }
    document.getElementById("zg").onclick = function(){
        while(true){
            alert("xxx")
        }
    }
</script>
</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

JavaScript 面向对象

类的定义和使用

//定义Person类
    class 类名{
        //构造方法
        constructor(变量列表){
            变量赋值;
        }
        //方法
        方法名(参数列表){
            方法体;
            return 返回值;
        }
    }
    
    //使用Person类
    let 对象名 = new 类名(实际变量值);
    对象名.方法名();
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

字面量定义类和使用

定义

  let 对象名 = {
        变量名:变量值,
        变量名:变量值,
        ...
        //方法
        方法名(参数列表){
            方法体;
            return 返回值;
        },
        ...
    }
1
2
3
4
5
6
7
8
9
10
11

使用格式

对象名.方法名(参数);
对象名.变量名;

继承

继承：让类与类产生子父类的关系，子类可以使用父类有权限的成员。
继承关键字：extends
顶级父类：Object

JavaScript 内置对象

Number
Math
Date
构造方法

成员方法
JSON

JavaScript BOM

BOM(Browser Object Model)：浏览器对象模型。

Window 窗口对象

定时器

唯一标识 setTimeout(功能，毫秒值)：设置一次性定时器。
clearTimeout(标识)：需要拿到定时器的唯一标识才能取消一次性定时器。
唯一标识 setInterval(功能，毫秒值)：设置循环定时器。
clearInterval(标识)：同上
加载事件

window.onload：在页面加载完毕后触发此事件的功能

Location 地址栏对象

就是浏览器的地址栏。我们可以通过为该属性设置新的 URL，使浏览器读取并显示新的 URL 的内容
//跳转
location.href = "目标资源路径";
1
2
3

JavaScript 封装

封装思想

封装：将复杂的操作进行封装隐藏，对外提供更加简单的操作。
简单封装

//将复杂的操作进行封装隐藏，对外提供更加简单的操作
//引入该js文件就可以使用,
function getById(id){
    return document.getElementById(id);
}

function getByName(name) {
    return document.getElementsByName(name);
}

function getByTag(tag) {
    return document.getElementsByTagName(tag);
}
...
1
2
3
4
5
6
7
8
9
10
11
12
13
14

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/你好赵伟/article/detail/570993