JavaScript

JavaScript 快速入门

1.JavaScript 介绍

  1. JavaScript 是一种客户端脚本语言。运行在客户端浏览器中,每一个浏览器都具备解析JavaScript 的引擎。
  2. 脚本语言:不需要编译,就可以被浏览器直接解析执行了。
  3. 核心功能就是增强用户和HTML 页面的交互过程,让页面有一些动态效果。以此来增强用户的体验!
  4. 1995 年,NetScape (网景)公司,开发的一门客户端脚本语言:LiveScript。后来,请来SUN 公司的专家来 进行修改,后命名为:JavaScript。
  5. 1996 年,微软抄袭 JavaScript 开发出 JScript 脚本语言。
  6. 1997 年,ECMA (欧洲计算机制造商协会),制定出客户端脚本语言的标准:ECMAScript,统一了所有客户 端脚本语言的编码方式

2.js的作用

和用户交互,实现页面的动态效果的:

  • 操作浏览器:用户做某些操作,让js操作浏览器 前进一步、后退一步、弹窗、刷新页面等等
  • 操作网页:用户做某些操作,让js操作网页 操作网页样式、操作标签内容、操作属性
<!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>
    
</script>
</html>
  1. 创建一个 HTML。
  2. 在< body>标签下面编写一个

JavaScript 基本语法

1.js的注释

<script>
	//单行注释
    
    /*
    	多行注释
    	多行注释
    	多行注释
     */
</script>

2.输入输出语句

<script>
	//1. 弹窗输出
    alert("hello, world1");
    
    //2. 输出到页面。可输出html代码
    document.write("<h1>hello, world2</h1>");
    
    //3. 输出到浏览器的控制台
    console.log("hello, world3");
</script>

3.变量和常量

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>变量定义</title>
</head>
<body>

<script>

    //----------定义变量---------------
    //定义整数
    let v = 1;
    console.log(v);

    //定义小数
    v = 3.14;
    console.log(v);

    //定义布尔
    v = true;
    console.log(v);

    //定义字符串
    v = "hello";
    console.log(v);

    //定义对象
    v = new Date();
    console.log(v);

    //----------定义常量---------------
    const PI = 3.14;
    console.log(PI);

    //修改常量值,会报错
    PI = 1;

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

4.letvar的区别

  • 在ES5及更低版本中,使用var定义变量
  • 在ES6及更高版本中,使用let定义变量
  • 两者的区别是:
    • let定义变量仅在当前代码块有效;var定义变量是全局变量
    • let不允许重复定义变量;var允许重复定义变量
    • 开发中建议使用let定义变量,语法更严谨
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>var和let</title>
</head>
<body>

<script>
    //--------var和let的区别-----------
    //1. var定义的不具备块级作用域的特征,在{}里用var定义的变量,{}之外也可访问
    //   let定义的是局部变量,具备块级作用域的特征,只在let所在的块{}内有效,{}外不能访问
    {
        var a = "1a";
        let b = "2b";
    }
    console.log(a);//输出结果:1a
    console.log(b);//运行时报错

    //2. var可重复定义变量;let不能重复定义变量
    var v = 1;
    var v = 2;
    console.log(v);//正常运行,输出结果:2

    let l = 1;
    let l = 2;
    console.log(l);//运行时报错,因为let不允许重复定义变量
</script>
</body>
</html>

5.数据类型

数据类型描述示例
number数字类型1, 2, 3, 3.14
boolean布尔类型布尔类型true, false
string字符串类型字符串"hello", 'hello'
object对象类型new Date(), null
undefined未定义类型代表变量未定义undefined
bigint大整数例如:let num = 10n

6.typeof 方法

typeof 用于判断变量的数据类型

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>typeof方法</title>
</head>
<body>
    
</body>
<script>
    let l1 = true;
    document.write(typeof(l1) + "<br>");    // boolean

    let l2 = null;
    document.write(typeof(l2) + "<br>");    //    object  js原始的一个错误

    let l3;
    document.write(typeof(l3) + "<br>");    // undefined

    let l4 = 10;
    document.write(typeof(l4) + "<br>");    // number

    let l5 = "hello";
    document.write(typeof(l5) + "<br>");    // string

    let l6 = 100n;
    document.write(typeof(l6) + "<br>");    // bigint
</script>
</html>

7.算数运算符

  • js也有:+,-,*,/,%,+=,-=,*=,/=,%=,++,--,>,<,=,>=,<=,==,!=,&&,||,! 三元运算 等等

  • 需要说明的有:

    • =====
运算符描述示例
==比较值。只要值一样,就是true1=="1",结果是true
===(推荐)比较值和类型。只有值和类型都一样,才是true1==="1",结果是false
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>运算符</title>
</head>
<body>

<script>
    //1. ==和===
    let v1 = 3;
    let v2 = "3";

    console.log(v1 == v2); //输出结果:true。只要值相等,结果即是true
    console.log(v1 === v2);//输出结果:false。只有值和类型都相同,结果才是true

    //2. + - * /
    console.log("2" + 1);//输出结果:21。 有字符串的加法是拼接字符串
    console.log("2" - 1);//输出结果:1。  把字符串转换成数字再运算
    console.log("a" - 1);//输出结果:NaN。字符串不能转换成数字,结果NaN:Not a Number
    console.log("2" * 3);//输出结果:6
    console.log("10" / 2);//输出结果:5
    console.log("10" / 0);//输出结果:Infinity。表示数字无穷大
</script>
</body>
</html>

8.比较运算符

运算符说明
==判断值是否相等
===判断数据类型和值是否相等
>大于
>=大于等于
<小于
<=小于等于
!=不等于

9.逻辑运算符

运算符说明
&&逻辑与,并且的功能
||逻辑或,或者的功能
!取反

10.三元运算符

  1. 三元运算符格式
    1. (比较表达式) ? 表达式1 : 表达式2;
  2. 执行流程
  3. 如果比较表达式为true,则取表达式1
  4. 如果比较表达式为false,则取表达式2

11.流程控制和循环语句

  • js也有:if, else, else if, while, switch, for
  • 特殊的是if判断:任何类型的数据,都可以作为判断条件
    • boolean类型:true/false
    • number类型:0是false,非0是true
    • string类型:空串""是false,非空字符串是true
    • object类型:null是false,非null是true
    • undefined类型:始终是false
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>流程控制语句</title>
</head>
<body>

<script>
    // if判断
    let v = true;
    v = 1; //number类型:0为false;非0为true
    v = "";//string类型:""为false;非空串为true
    v = null;//object类型:null为false;非null为true
    v = undefined;//undefined类型:始终为false
    
    if (v) {
        console.log("true");
    }else{
        console.log("false");
    }
</script>
</body>
</html>
<!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>
    //if语句
    let month = 3;
    if(month >= 3 && month <= 5) {
        document.write("春季");
    }else if(month >= 6 && month <= 8) {
        document.write("夏季");
    }else if(month >= 9 && month <= 11) {
        document.write("秋季");
    }else if(month == 12 || month == 1 || month == 2) {
        document.write("冬季");
    }else {
        document.write("月份有误");
    }

    document.write("<br>");

    //switch语句
    switch(month){
        case 3:
        case 4:
        case 5:
            document.write("春季");
            break;
        case 6:
        case 7:
        case 8:
            document.write("夏季");
            break;
        case 9:
        case 10:
        case 11:
            document.write("秋季");
            break;
        case 12:
        case 1:
        case 2:
            document.write("冬季");
            break;
        default:
            document.write("月份有误");
            break;
    }

    document.write("<br>");

    //for循环
    for(let i = 1; i <= 5; i++) {
        document.write(i + "<br>");
    }

    //while循环
    let n = 6;
    while(n <= 10) {
        document.write(n + "<br>");
        n++;
    }
</script>
</html>

12.数组

  1. 数组的使用和 java 中的数组基本一致,但是在 JavaScript 中的数组更加灵活,数据类型和长度都没有限制。
  2. 定义格式
    1. let 数组名 = [元素1,元素2,…];
  3. 索引范围
    1. 从 0 开始,最大到数组长度-1
  4. 数组长度 数组名.length
  5. 数组高级运算符…
    1. 数组复制
    2. 合并数组
    3. 字符串转数组
<!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>

13.函数

普通函数
//定义
function add(a, b){
    return a+b;
}

//调用
let result = add(1, 2);
匿名函数
//1.把匿名函数赋值给一个变量,通过变量名调用
let fn = function(){
    console.log("fn");
}

fn();

//2.把匿名函数作为其它函数的实参传递进去
setInterval(function(){
    console.log("aaa");
}, 2000)

注意:

  • js的函数没有重载,同名函数会覆盖掉
  • js的函数,形参个数与实参个数无关,仅仅是通过函数名称调用的。建议:形参个数和实参个数相同

JavaScript DOM

DOM 介绍

  • dom:Document Object Model,文档对象模型,可以理解为是把整个html网页封装成的对象,dom对象提供了操作网页的方法
  • 作用:操作网页的
    • 可以操作标签:获取标签、创建标签、插入标签、删除标签
    • 可以操作属性:获取标签的属性值,设置标签的属性值
    • 可以操作css样式

DOM树

在这里插入图片描述

网页被加载到浏览器的内存中后,网页上所有的标签、属性、文本全部都会转换成节点对象,然后按照层级结构形成一个树形结构,这棵树叫dom树

获取标签

1. ES5老版本获取标签方法
方法说明参数返回值
getElementById("id值")根据id获取标签对象标签的idElement
getElementsByName("name值")根据标签name获取标签对象标签的nameElement类数组
getElementsByTagName("标签名")根据标签名称获取标签对象标签名称Element类数组
getElementsByClassName("类名")根据标签class获取标签对象标签的classElement类数组
<!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>
    <div id="div1">div1</div>
    <div id="div2">div2</div>
    <div class="cls">div3</div>
    <div class="cls">div4</div>
    <input type="text" name="username"/>
</body>
<script>
    //1. getElementById()   根据id属性值获取元素对象
    let div1 = document.getElementById("div1");
    //alert(div1);

    //2. getElementsByTagName()   根据元素名称获取元素对象们,返回数组
    let divs = document.getElementsByTagName("div");
    //alert(divs.length);

    //3. getElementsByClassName()  根据class属性值获取元素对象们,返回数组
    let cls = document.getElementsByClassName("cls");
    //alert(cls.length);

    //4. getElementsByName()   根据name属性值获取元素对象们,返回数组
    let username = document.getElementsByName("username");
    //alert(username.length);

    //5. 子元素对象.parentElement属性   获取当前元素的父元素
    let body = div1.parentElement;
    alert(body);
</script>
</html>
2. ES6提供的获取标签方法
方法说明参数返回值
querySelector("选择器")获取一个标签选择器字符串Element
querySelectorAll("选择器")获取多个标签选择器字符串Element类数组

document对象提供了创建标签Element的方法

注意:创建出来的标签不会立即生效,必须要插入到dom树里

方法说明参数返回值
createElement("标签名称")创建标签标签名称,比如:optionElement对象
3. 插入标签

标签Element对象提供了插入标签的方法

方法说明参数返回值
父标签对象.appendChild(element)追加插入子标签要插入的标签Element
4. 删除标签

标签Element对象提供了删除的方法

方法说明参数返回值
remove()删除标签
<!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>
    <select id="s">
        <option>---请选择---</option>
        <option>北京</option>
        <option>上海</option>
        <option>广州</option>
    </select>
</body>
<script>
    //1. createElement()   创建新的元素
    let option = document.createElement("option");
    //为option添加文本内容
    option.innerText = "深圳";

    //2. appendChild()     将子元素添加到父元素中
    let select = document.getElementById("s");
    select.appendChild(option);

    //3. removeChild()     通过父元素删除子元素
    //select.removeChild(option);

    //4. replaceChild()    用新元素替换老元素
    let option2 = document.createElement("option");
    option2.innerText = "杭州";
    select.replaceChild(option2,option);

</script>
</html>

Attribute 属性的操作

方法说明参数返回值
getAttribute(attrName)获取属性值属性名称属性值
setAttribute(attrName, attrValue)设置属性值属性名称,属性值
removeAttribute(attrName)删除属性属性名称
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>属性的操作</title>
    <style>
        .aColor{
            color: blue;
        }
    </style>
</head>
<body>
    <a>点我呀</a>
</body>
<script>
    //1. setAttribute()    添加属性
    let a = document.getElementsByTagName("a")[0];
    a.setAttribute("href","https://www.baidu.com");

    //2. getAttribute()    获取属性
    let value = a.getAttribute("href");
    //alert(value);

    //3. removeAttribute()  删除属性
    //a.removeAttribute("href");

    //4. style属性   添加样式
    //a.style.color = "red";

    //5. className属性   添加指定样式
    a.className = "aColor";

</script>
</html>

Text 文本的操作

属性名说明
innerText添加文本内容,不解析标签
innerHTML添加文本内容,解析标签
<!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>
    <div id="div"></div>
</body>
<script>
    //1. innerText   添加文本内容,不解析标签
    let div = document.getElementById("div");
    div.innerText = "我是div";
    //div.innerText = "<b>我是div</b>";

    //2. innerHTML   添加文本内容,解析标签
    div.innerHTML = "<b>我是div</b>";

</script>
</html>

JavaScript 事件

事件介绍

  • 事件:用户在浏览器上做一些事情、动作
  • 事件源:事件、动作发生在哪个标签、对外上,即:事件发生的源头
  • 响应行为:事件发生之后,要执行的代码,通常是封装成函数来调用

常见的事件

事件属性描述,监听什么
onclick监听鼠标单击
ondblclick监听鼠标双击
onsubmit监听表单提交了,事件源是表单form标签
onchange监听域内容改变,通常用于监听下拉框的选项变化
onload监听加载完成,通常用于监听浏览器加载完了页面
onfocus监听获取焦点(光标)
onblur监听失去焦点(光标)
onkeydown监听键盘按键按下
onkeypress监听键盘按键按下或按住
onkeyup监听键盘按键弹起
onmousedown监听鼠标按键按下
onmouseup监听鼠标按键弹起
onmouseover监听鼠标移入
onmouseout监听鼠标移出
onmousemove监听鼠标移动

绑定事件

1. 普通函数方式
<input type="button" value="点击弹窗1" onclick="show1()">
<script>
    function show1() {
        alert("点我干嘛");
    }
</script>
2. 匿名函数方式
<input type="button" value="点击弹窗2" id="btn2">
<script>
    document.getElementById("btn2").onclick = function(){
        alert("点我干嘛");
    }
</script>

按住 |
| onkeyup | 监听键盘按键弹起 |
| onmousedown | 监听鼠标按键按下 |
| onmouseup | 监听鼠标按键弹起 |
| onmouseover | 监听鼠标移入 |
| onmouseout | 监听鼠标移出 |
| onmousemove | 监听鼠标移动 |

绑定事件

1. 普通函数方式
<input type="button" value="点击弹窗1" onclick="show1()">
<script>
    function show1() {
        alert("点我干嘛");
    }
</script>
2. 匿名函数方式
<input type="button" value="点击弹窗2" id="btn2">
<script>
    document.getElementById("btn2").onclick = function(){
        alert("点我干嘛");
    }
</script>
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值