JavaScript的基本使用，使用一个小案例快速入门JavaScript_function check() { console.log(11) return false: }-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_42193813/article/details/108476503

JavaScript常用语法

声明变量

var a = 10;
var b = "hello";
var c = true;
var array = [1, 2, 3];
var student = {id:1, name:"张三", age=21};

变量符

var a = true;
var b = false;
a === b // 判断两个变量的值和类型是否相等
a == b // 判断两个变量的值是否相等
a && b // 逻辑与
a || b // 逻辑或
a ! // 逻辑非

var i = 10;
i++; // 自增1
i--; // 自减一
document.write(i>100?true:false); // 三目运算符

// 其它常用变量符：+ - * / % = += -= *= /= %= >= <= > < !=

分支结构

if-else分支

if (a > b) {
    a++;
} else {
  b++;  
}

switch分支

switch (num) {
    case 1:
        document.write(1);
        break;
    default:
        document.write(num);
}

循环结构

for循环

for (let i = 0 ; i < 10 ; i++) {
    document.write(i)
}

while循环

var i = 0;
while (i < 10) {
    document.write(i);
    i++;
}

do-while循环

do {
    document.write(i);
    i++;
} while (i < 10);

函数

script标签是一个HTML标签，可以写在HTML的头部，也可以写在body中

<script>
    // 声明函数
    function fun() {
        document.write("function")
    }
    // 调用函数
    fun();
</script>

还可以在其它标签中添加点击事件来调用函数

<button type="button" οnclick="fun()">按钮1</button>

带参数和返回值的函数

function fun2(a, b) {
    return a + b;
}
let result = fun2(1, 2);

弹窗

普通弹窗

alert("你好！");

带确定和取消按钮的弹窗

let choice = confirm("我？");

带输入框的弹窗

prompt("你爱学习吗？","爱");

事件

事件名称	描述
onchange	HTML 元素内容改变
onclick	用户点击 HTML 元素
onmouseover	用户将鼠标移入一个HTML元素中
onmousemove	用户在一个HTML元素上移动鼠标
onmouseout	用户从一个HTML元素上移开鼠标
onkeyup	键盘
onkeydown	用户按下键盘按键
onload	浏览器已完成页面的加载
onsubmit	表单提交

举例分析

1、当键盘按下时触发事件，会调用keydown()函数

<input type="text" οnkeydοwn="keydown(this);">

<script>
    function keydown(self) {
        console.log("keyDown " + self.value)
    }
</script>

2、onsubmit：当表单提交时，会触发事件

<form action="https://www.baidu.com" οnsubmit=" return check();">
    <input type="text">
    <button type="submit" >提交</button>
</form>

<script>
    function check() {
        console.log("KO")
        return false;
    }
</script>

check函数会返回false，所以当表单提交时，会提交不成功，常用于表单提交前的一些判断

正则表达式

语法

var re = new RegExp("\\w+");
var re = /\w+/;

使用

// 表达式去匹配字符串
re.test("ascA340"); // 返回boolean类型的值，判断是否匹配成功
re.exec("ascA340"); // 返回查找到符合条件的值

// 字符串去匹配表达式
b.search(re); // 返回第一个找到的下标
b.match(re); // 返回一个或多个找到的值
b.replace("o", "A"); // 将字符串中的字符o，替换为A

修饰符

修饰符	描述
i	执行对大小写不敏感的匹配。
g	执行全局匹配（查找所有匹配而非在找到第一个匹配后停止）。
m	执行多行匹配。

举例

var re = /\w\d/i;
re.test("ascA340"); // 返回true

表达式

表达式	描述
[abc]	查找方括号之间的任何字符。
[^abc]	查找任何不在方括号之间的字符。
[0-9]	查找任何从 0 至 9 的数字。
[a-z]	查找任何从小写 a 到小写 z 的字符。
[A-Z]	查找任何从大写 A 到大写 Z 的字符。
[A-z]	查找任何从大写 A 到小写 z 的字符。
[adgk]	查找给定集合内的任何字符。
[^adgk]	查找给定集合外的任何字符。
(red\|blue\|green)	查找任何指定的选项。

元字符

元字符	描述
.	查找单个字符，除了换行和行结束符。
\w	查找单词字符。字母，数字，下划线
\W	查找非单词字符。
\d	查找数字。
\D	查找非数字字符。
\s	查找空白字符。
\S	查找非空白字符。
\b	匹配单词边界。
\B	匹配非单词边界。
\0	查找 NULL 字符。
\n	查找换行符。
\f	查找换页符。
\r	查找回车符。
\t	查找制表符。
\v	查找垂直制表符。
\xxx	查找以八进制数 xxx 规定的字符。 a 的 ASCII 编码为 97，八进制为 141 \141
\xdd	查找以十六进制数 dd 规定的字符。 a 的 ASCII 编码为 97，十六进制为 61 \x61
\uxxxx	查找以十六进制数 xxxx 规定的 Unicode 字符。 a为 /\u0061/

量词

量词	描述
n+	匹配任何包含至少一个 n 的字符串。例如，/a+/ 匹配 “candy” 中的 “a”，“caaaaaaandy” 中所有的 “a”。
n*	匹配任何包含零个或多个 n 的字符串。例如，/bo*/ 匹配 “A ghost booooed” 中的 “boooo”，“A bird warbled” 中的 “b”，但是不匹配 “A goat grunted”。
n?	匹配任何包含零个或一个 n 的字符串。例如，/e?le?/ 匹配 “angel” 中的 “el”，“angle” 中的 “le”。
n{X}	匹配包含 X 个 n 的序列的字符串。例如，/a{2}/ 不匹配 “candy,” 中的 “a”，但是匹配 “caandy,” 中的两个 “a”，且匹配 “caaandy.” 中的前两个 “a”。
n{X,}	X 是一个正整数。前面的模式 n 连续出现至少 X 次时匹配。例如，/a{2,}/ 不匹配 “candy” 中的 “a”，但是匹配 “caandy” 和 “caaaaaaandy.” 中所有的 “a”。
n{X,Y}	X 和 Y 为正整数。前面的模式 n 连续出现至少 X 次，至多 Y 次时匹配。例如，/a{1,3}/ 不匹配 “cndy”，匹配 “candy,” 中的 “a”，“caandy,” 中的两个 “a”，匹配 “caaaaaaandy” 中的前面三个 “a”。注意，当匹配 “caaaaaaandy” 时，即使原始字符串拥有更多的 “a”，匹配项也是 “aaa”。
n{X}	前面的模式 n 连续出现X 次时匹配
n$	匹配任何结尾为 n 的字符串。
^n	匹配任何开头为 n 的字符串。
?=n	匹配任何其后紧接指定字符串 n 的字符串。
?!n	匹配任何其后没有紧接指定字符串 n 的字符串。

DOM

通过 HTML DOM，可访问 JavaScript HTML 文档的所有元素。
当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）

查找HTML元素

document.getElementById()：根据ID名查找
document.getElementsByClassName()：根据类名查找
document.getElementsByTagName()：根据标签名查找

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

<input type="text" id="inid" value="Hello">
<input type="text" class="in" value="1">
<input type="text" class="in" value="2">
<input type="button" value="点击" onclick="find();">

<script>
    function find() {
        let id = document.getElementById("inid");
        let className = document.getElementsByClassName("in");
        let inputTag = document.getElementsByTagName("input");
        console.log(id);
        console.log(className);
        console.log(inputTag);
    }
</script>
</body>
</html>

修改HTML元素

直接输出到页面

document.write("hello");

设置HTML内容，HTML标签会被解析

document.getElementById("box").innerHTML = "<h1>Hello</h1>"

设置文本内容，HTML标签会被转为字符串

document.getElementById("sp1").innerText = "<h1>World</h1>"

修改HTML属性

document.getElementById("box").style.backgroundColor = "red";

设置DOM事件

document.getElementById("btn1").onclick = function () {
    alert("OK");
};

创建HTML元素

<script>
    // 创建p标签
    let p = document.createElement("p");
    // 创建内容
    let text = document.createTextNode("新段落");
    // 给标签添加内容
    p.appendChild(text);
    // 将标签添加到div块中
    document.getElementById("box").appendChild(p);
</script>

删除HTML元素

// 获取父标签的元素
let parent = document.getElementById("box");
// 获取子标签的元素
let child = document.getElementById("p1");
// 用父标签来删除子标签
parent.removeChild(child);
// 删除标签
// child.remove();

BOM

window对象

所有浏览器都支持window对象，它表示浏览器窗口

JavaScript全局对象、函数以及变量，均自动成为window对象的成员

// 浏览器内部宽度
window.innerWidth
// 浏览器内部高度
window.innerHeight

screen对象


// 屏幕宽度
screen.availWidth
// 屏幕高度
screen.availHeight

location对象

// 获取当前页面的url信息，可省略window
window.location
// 获取主机名
location.hostname
// 获取当前页面的路径
location.pathname
// 获取当前web的主机端口
location.port
// 获取使用的协议
location.protocol
// 获取当前页面的url地址
location.href
// 加载新的文档（跳转到新页面）
location.assign("https://www.baidu.com")
// 重新加载页面
location.reload()

history对象

// 回退
history.back()
// 前进
history.forward()

JavaScript定时器

每固定毫秒值执行一次

// 创建定时器
var timer = setInterval(function(){console.log("Hello")}, 1000);
// 停止定时器
clearInterval(timer);

固定时间之后执行一次

// 创建定时器
var timer = setTimeout(function(){console.log("Hello")}, 2000);
// 停止定时器
timer.clearTimeout(timer);

JavaScript案例

实现功能：

两个输入框，输入姓名和年龄，点击添加按钮，将数据添加到页面上的表格中
每行后面有一个删除按钮，点击即可删除一行
每行前面有一个复选框，点击最上面的标题栏可以全选
一个删除按钮，可以删除选中的全部行
鼠标移动到每一行，那一行就会高亮显示

代码实现

<!DOCTYPE html>
<html lang="ch">
<head>
    <meta charset="UTF-8">
    <title>JS练习</title>
</head>
<body>
<div style="text-align: center;margin-bottom: 5px;" >
    <input type="text" id="name" placeholder="name">
    <input type="text" id="age" placeholder="age">
    <input type="button" value="添加" onclick="addTr();">
    <input type="button" value="删除" onclick="delTrs();">
</div>
<table align="center" width="500px" border="1px" cellspacing="0" style="text-align: center">
    <thead>
    <tr>
        <th>
            <input type="checkbox" name="checkAllName" onclick="checkAll(this)">
        </th>
        <th>id</th>
        <th>name</th>
        <th>age</th>
        <th>op</th>
    </tr>
    </thead>
    <tbody>

    </tbody>
</table>

<script>
    // ID自增长
    let i = 1;
    // 添加一行数据
    function addTr() {
        // 获取输入框
        let name = document.getElementById("name");
        let age = document.getElementById("age");
        let tbody = document.getElementsByTagName("tbody")[0]; // 获取tbody
        // 创建一个空的行
        let tr = document.createElement("tr");
        // 创建空的列
        let tdCheck = document.createElement("td");
        let tdId = document.createElement("td");
        let tdName = document.createElement("td");
        let tdAge = document.createElement("td");
        let tdDel = document.createElement("td");
        // 创建实际内容
        let check = document.createElement("input");
        check.type = "checkbox";
        check.name = "checkName";
        let nodeId = document.createTextNode(i++); // 创建ID文本结点
        let nodeName = document.createTextNode(name.value);
        let nodeAge = document.createTextNode(age.value);
        let btn = document.createElement("input");
        btn.type = "button";
        btn.value = "删除";
        // 删除当前行
        btn.onclick = function() {
            // 获取当前行
            let curTr = this.parentElement.parentElement;
            // 删除当前行
            tbody.removeChild(curTr);
        }
        // 将数据添加到对应列中
        tdCheck.appendChild(check);
        tdId.appendChild(nodeId);
        tdName.appendChild(nodeName);
        tdAge.appendChild(nodeAge);
        tdDel.appendChild(btn);
        // 将列添加到一行中
        tr.appendChild(tdCheck);
        tr.appendChild(tdId);
        tr.appendChild(tdName);
        tr.appendChild(tdAge);
        tr.appendChild(tdDel);
        // 添加鼠标移入移出效果
        tr.onmouseover = function() {
            tr.style.backgroundColor = "red";
        }
        tr.onmouseout = function() {
            tr.style.backgroundColor = "white";
        }
        // 将1行添加到tbody中
        tbody.appendChild(tr);
    }

    // 复选框全选
    function checkAll(self) {
        let checked = self.checked;
        // 获取其它复选框
        let checks = document.getElementsByName("checkName");
        for(let i = 0; i < checks.length; i++) {
            checks[i].checked = checked;
        }
    }

    // 删除选中的全部行
    function delTrs() {
        // 创建存储选中的复选框
        let isChecks = [];
        let index = 0;
        // 获取全部复选框
        let checks = document.getElementsByName("checkName");
        // 遍历所有复选框，将选中的存储
        for (let i = 0; i < checks.length; i++) {
            if (checks[i].checked) {
                isChecks[index] = checks[i];
                index++;
            }
        }
        let tbody = document.getElementsByTagName("tbody")[0];
        // 删除选中的复选框
        for (let i = 0; i < isChecks.length;  i++) {
            let tr = isChecks[i].parentElement.parentElement;
            tbody.removeChild(tr);
        }
    }
</script>
</body>
</html>