JavaScript 语言

基础语法

输出

JavaScript

 prompt("请输入你的年龄");//弹出输入框的函数--> 该函数的返回值为字符型(类似 python 的 input 函数)
 alert("这是一个警示框");//弹出警示框
 console.log("this is in console");//输出到控制台

变量

JavaScript

//变量
        var age=10;//var 表示变量, 没有默认值，必须初始化
        //变量示例
        var name=prompt("please input your name");
        console.log(name);

数据类型

Text Only

//数据类型
        //js为弱类型/动态语言-->变量会自动根据赋的值来确定类型

简单数据类型

JavaScript

//--> Number/Boolean/String/Undefined/Null(空值)

数字类型

JavaScript

//数字型--> 前面加 0 表示八进制，加 0x 表示十六进制
        //特殊的几个 Number 类型数值--> NaN, INfinty,-Infinty
        console.log(Number.MAX_VALUE*2);//INfinty
        console.log(Number.MAX_VALUE*(-2));//-Infinty
        console.log("yyf"-100);//NaN
        //isNaN 函数--> 判断是否是非数字

String 类型

JavaScript

//String 类型
        //转义符和 c 相同
        var str='myname is \n yyf';
        console.log(str);
        //字符串的长度和拼接--> length 和+(拼接)
        var str1='hello world';
        console.log(str1.length);
        console.log(str1+'123456');//拼接--> 不限类型

布尔类型

JavaScript

//布尔类型
        var flag=true;
        var flag1=false;
        console.log(flag+1);//true 当成 1
        console.log(flag1+1);//false 当成 0

Undefined 类型

JavaScript

//Undefined 类型--> 只声明不赋值
        var undefined;
        console.log(undefined+1);//和数字相加得到 NaN

Null 类型

JavaScript

//Null 类型
        var a=null;
        console.log(a+123);//得到 123

typeof 关键字

JavaScript

//typeof 关键字--> 返回数据类型
        var name="hxj";
        console.log(typeof name);

类型转换

JavaScript

//类型转换
        // 1.数字--> String--> 1.toString 方法  2.String(变量)  3.加号拼接
        var num=10;
        console.log(num.toString());
        console.log(String(num));
        console.log(num+'');
        //String--> 数字--> parseInt/parseFloat--> 转换为 int/float 类型(只能转换数字字符串)
        var str='12346';
        console.log(parseInt(str));
        var str1='12.456';
        console.log(parseFloat(str1));
        //转换为 Boolean 类型--> Boolean()--> 0, NaN, undefined, null 等会被转换成 false，其他为 true
        var bool=null;
        console.log(Boolean(bool));

复杂数据类型

数组

JavaScript

//数组
        //创建--> new/直接创建(可以混合类型)
        var arr=new Array(1,2,3,4,5,"string",true);
        var arr1=[5,7,8,9,4,5,6];
        //数组访问--> 和 c 相同(索引访问)
        //数组长度--> 数组名.length 获取
        // console.log(arr.length);
        //新增数组元素
        var arr=new Array("length",12,true);
        // 1.修改数组长度
        arr.length=5;
        console.log(arr);
        // 2.通过索引直接追加元素
        arr[5]="test";
        console.log(arr);
        // 3.push 函数为末尾追加元素--> 返回值为新数组的长度
        arr.push("helloworld");
        // 4.unshift 函数为开头追加一个或多个元素--> 返回值为新数组的长度
        arr.unshift("you",true);
        // 删除数组元素
        // 1.pop 函数--> 删除最后一个元素(一次删一个)--> 返回值为删除的那个元素
        // arr.pop();
        // 2.shift()--> 删除第一个元素(一次删一个)--> 返回值为删除的那个元素
        // 获取数组元素索引
        // 1.indexof(元素)--> 返回数组元素的索引(从开头--> 末尾找)--> 找不到返回-1
        // 2.lastindexof(元素)--> 返回数组元素索引(从末尾--> 开头)--> 找不到返回-1

        //数组转换为字符串
        var arr=[1,2,3,true,"yyf"];
        // 1.toString()
        console.log(arr.toString());
        // 2.join(分隔符)--> 用指定分隔符分隔的字符串
        console.log(arr.join('|'));

数组删除指定位置的元素

对象

JavaScript

//对象
        //创建对象--> 1.字面量创建
        var obj={};
        var objnew={
            uname:"yyf",
            age:18,
            sex:"男",
            say:function(){
                console.log("helloworld");
            }
        }
        //键值对--> key: value，每对都以逗号分隔
        console.log(objnew.uname);//引用对象的成员--> 点号调用
        console.log(objnew['uname']);//也可以用 [] 来引用属性
        objnew.say();
        //--> 2.new Object 创建
        var obj_new=new Object();//创建空对象
        obj_new.uname="love";
        obj_new.age=45;
        obj_new.num=777;
        obj_new.say=function()
        {
            console.log("this is say function");
        }
        //添加属性和方法
        //--> 3.构造函数创建对象--> 这里的构造函数相当与 java 的类
        function Test(age,name,number){
            this.age=age;
            this.name=name;
            this.number=number;
        }
        var obj=new Test(12,"hxj",78);//new 创建对象
        console.log(obj.name);
        //遍历对象--> for in
        for(var key in obj)
        {
            console.log(key);//得到的是属性名
            console.log(obj[key]);//得到的是属性值
        }

基本包装类型(这里以 String 类型为例)

JavaScript

//基本包装类型--> 和 java 的包装类差不多
        var str="yyf";
        console.log(str.length);//这里的 String 类型实际上是对象，所以才有 length 属性
        //字符串为不可变类型
        //字符串类型常用方法
        //字符获取
        //1.根据字符返回字符索引
        // --> indexof()/lastindexof()
        console.log(str.indexOf('f'));
        //2.根据索引获取字符
        // --> charAt()/charCodeAt()--> 返回字符的 ascii 码
        console.log(str.charAt(1));
        console.log(str.charCodeAt(1));
        //字符串拼接--> concat(字符串)//等价于+
        console.log(str.concat("hello"));
        //字符串截取--> substr(开始索引, 截取个数)
        var strnew="helloworld and my love";
        console.log(strnew.substr(1,5));
        //字符串替换--> replace(原字符, 目标字符)--> 只会替换第一个字符
        console.log(strnew.replace('o','y'));
        //字符串转换为数组--> split(分隔符)
        var strtest="1,2,3,4,5,true,'yyf'"
        console.log(strtest.split(','));

运算符，分支，循环

JavaScript

//运算符--> 与 c 大致相同--> 逻辑运算符(&& ||)--> 存在逻辑中断(即已经为真或为假时不在往后判断)

        //分支--> if else switch 与 c 相同
        //循环--> for while do while break continue 等与 c 相同

函数

JavaScript

//函数--> function 声明--> 如果没有 return 返回 undefined
        function max(a,b)
        {
            return (a>b)?a:b;
        }
        console.log(max(1,5));
        //arguments 使用--> js 的一个内置类--> 存储了所有传递的实参--> 以伪数组形式存储(有 length 属性/能以索引访问)
        //tips：arguments 只存在于函数中，是函数的内置对象
        function print_arg(a,b,c)
        {
            console.log(arguments);
            console.log(arguments.length);
            for(i=0;i<arguments.length;i++)
            {
                console.log(arguments[i]);
            }
        }
        print_arg(1,2,3);
        // 示例：用函数求任意个数的最大值
        function max()
        {
            var max=arguments[0];
            for(i=0;i<arguments.length;i++)
            {
                if(arguments[i]>max)
                {
                    max=arguments[i];
                }
            }
            console.log(max);
        }
        max(1,2,56,8,9,2,21,1,45);

DOM 和 BOM

API 概念

JavaScript

// jsAPI--> DOM/BOM
        //API 就是接口(一般是函数实现)

DOM

JavaScript

//DOM--> 文档对象模型--> 改变网页的内容，样式，结构
        //文档页面从下往上加载，所以要先有标签

获取元素

JavaScript

//1.获取元素
        // --> id 获取
        var time=document.getElementById("time");
        //get 获得 Element 元素 by 通过 id--> 参数为 id，字符串类型--> 返回对象类型
        console.dir(time);//console.dir 专门用来打印对象
        // --> 标签名获取
        var list=document.getElementsByTagName("li");//返回一个伪数组
        console.dir(list);
        //查看元素对象--> 遍历
        for(var i=0;i<list.length;i++)
        {
            console.log(list[i]);
        }
        //获取父元素内部指定标签名的子元素
        var ol=document.getElementById("ol");
        console.log(ol.getElementsByTagName("li"));
        // --> 类名获取
        var box=document.getElementsByClassName("box");
        console.log(box);
        // --> 选择器获取
        //querySelector--> 返回指定选择器的第一个元素对象
        var time=document.querySelector("#time");//选择 id 要加上#
        console.dir(time);
        var list=document.querySelector("li");//选择标签直接写标签名
        console.dir(list);
        var box=document.querySelector(".box");
        console.dir(box);
        //querySelectorAll--> 返回指定选择器的所有对象
        var timenew=document.querySelectorAll(".box");
        // --> 获取 body 标签
        //1.getElementsByTagName 获取
        var body=document.getElementsByTagName("body");
        console.dir(body);
        //2.document.body 获取
        var body_new=document.body;
        console.dir(body_new);
        // --> 获取 html 标签
        //1.getElementsByTagName 获取
        var html =document.getElementsByTagName("html");
        console.dir(html);
        //2.document.documentElement 获取
        var htmlnew =document.documentElement;
        console.dir(htmlnew);

事件

JavaScript

//事件基础
        //事件三要素--> 1.事件源     2.事件类型      3.事件处理程序
        //事件源--> 被触发的对象
        var btn=document.getElementById("btn");
        //事件类型--> 如何触发，什么事件(如鼠标点击，键盘按下等)
        //事件处理程序--> 通过一个函数赋值的方式完成
        //示例
        btn.onclick=function()
        {
            alert("this is alert");
        }
        //1.获取事件源
        var click=document.getElementById("cli");
        //绑定事件+事件处理程序
        click.onclick=function()
        {
            alert("click here");
        }

事件流

操作元素

JavaScript

// 操作元素
        // 1.改变元素内容
        // --> innerText = "文本内容"
        var gettime=document.getElementById("gettime");
        gettime.onclick=function()
        {
            document.getElementById("sometime").innerText="2023-4-14";
        }
        //若要页面刷新直接显示时间，可不用事件处理
        var gettime=document.getElementById("sometime");
        gettime.innerText="2023-4-14";
        // --> innerHTML
        var gettime=document.getElementById("gettime");
        gettime.onclick=function()
        {
            document.getElementById("sometime").innerHTML="<strong>2023-4-14</strong>";
        }
        //innerText/innerHTML 的区别，innerHTML 识别 html 标签，innerText 不识别
        // 修改图片属性示例
        var png1=document.getElementById("png1");
        var png2=document.getElementById("png2");
        png1.onclick=function()
        {
            document.querySelector("img").src="C:\\Users\\yifan\\Pictures\\c语言\\Snipaste_2023-02-04_19-46-04.png";
        }

操作表单属性

JavaScript

//操控表单属性
        var btn=document.getElementById("an");
        var input=document.getElementById("input");
        btn.onclick=function()
        {
            input.value="点击了";
            //如果想要禁用按钮--disabled 设为 true
            btn.disabled="true";
        }
        //显示/隐藏密码案例
        var btn=document.getElementById("sos");
        var input=document.getElementById("passwd");
        var flag=1;
        btn.onclick=function()
        {
            if(flag== 1)
            {
                input.type="text";
                flag=0;
            }
            else
            {
                input.type="password";
                flag=1;
            }
        }

节点操作

JavaScript

// 节点操作--> 比 domAPI 更方便的获取元素
        //文本节点/属性节点等等--> 一个节点一般有节点名称，节点类型，节点值三个属性
        //操作元素节点
        // 1.父节点--> parentNode
        var box=document.querySelector(".erweima");
        console.log(box.parentNode);//得到的是最近一层的父节点
        // 2.子节点--> childNodes
        var ul=document.querySelector("ul");
        console.log(ul.childNodes);//返回的是所有的子节点元素--> 一般不用 childNodes
        console.log(ul.children);//返回的是子元素节点伪数组--> 大多使用这个
        //示例--> 获取指定子节点的元素
        var ol=document.getElementById("test");
        console.log(ol.children[0]);//第一个
        console.log(ol.children[ol.children.length-1]);//最后一个
        // 3.兄弟节点
        //上一个/下一个元素节点--> previousElementSibling/nextElementSibling
        var b=document.getElementById("b");
        console.log(b.previousElementSibling);
        console.log(b.nextElementSibling);
        // 4.创建添加节点
        //创建节点--> createElement
        var li=document.createElement("li");//创建 li 元素节点
        //添加节点--> node.appendChild
        var testadd=document.getElementById("testadd");//获取父节点
        testadd.appendChild(li);//添加节点--> 为末尾追加
        //指定位置添加节点--> node.insertBefore(在指定位置之前插入)
        testadd.insertBefore(li,testadd.children[1]);
        // 5.删除节点--> removeChild(子节点元素)--> 返回被删除的子节点
        //示例：点击按钮就删除一个
        var testadd=document.getElementById("testadd");
        var remove=document.getElementById("remove");
        remove.onclick=function()
        {
           if(testadd.children.length==0)
           {
                remove.disabled="true";//删完时将按钮变灰
           }
           else
           {
                testadd.removeChild(testadd.children[0]);
           }
        }
        // 6.复制节点
        var ul=document.getElementById("testadd");
        var copy=ul.children[0].cloneNode();//参数为空或为 false 表示只复制标签元素，不复制内容
        var copynew=ul.children[1].cloneNode(true);//参数为 true 表示标签和内容都复制
        ul.appendChild(copy);
        ul.appendChild(copynew);

事件高级用法

JavaScript

//事件高级用法
        //给元素添加事件--> 注册事件
        //分为传统注册(onclick 等 on 开头的)--> 一个事件只能设置一个处理函数
        //方法监听注册(监听函数实现)--> 一个事件可以注册多个监听器
        // 事件监听注册示例--> addEventListener(触发方式, 处理函数)
        var listen=document.getElementById("listen");
        listen.addEventListener('click',function(){
            alert("this is a listen process");
        });
        listen.addEventListener('click',function(){
            alert("again");
        });//实现多个监听，事件处理

        //删除事件
        //1.传统事件绑定的方法--> 将事件赋值为 null
        //2.监听注册--> removeEventListener
        var listen=document.getElementById("listen");
        listen.addEventListener("click",fn)
        function fn()
        {
            alert("this is a listen process");
            listen.removeEventListener("click",fn);
        }

事件对象和事件委托

JavaScript

// 事件对象
        var listen=document.getElementById("listen");
        listen.addEventListener("click",function(event){//这里的 event 就是事件对象
            alert("this is a click event");
            console.log(event);
        })
        //tips: 事件对象会随着事件自动创建，不需要我们传入参数
        //事件对象中有很多关于对应事件的属性
        //常见属性和方法
        var testadd=document.getElementById("testadd");
        testadd.addEventListener('click',function(e){
            //this 和 target 的区别
            console.log(this);//this 返回绑定事件的对象(元素)
            console.log(e.target);//target 返回触发事件的对象(元素)
            console.log(e.type);//返回事件类型
        })
        //阻止默认事件
        var a=document.querySelector("a");
        a.addEventListener("click",function(e){
            e.preventDefault();//阻止跳转
        })
        //事件委托
        var testaddnew =document.getElementById("testadd");
        testaddnew.addEventListener("click",function(){
            alert("this is a click");
            //随便点击一个 li 元素，都会弹出窗口
        })

常见的鼠标事件

JavaScript

//常见的鼠标事件
        //1.禁用右键菜单--> contextmenu
        document.addEventListener("contextmenu",function(e){
            e.preventDefault();
        })
        //2.禁止鼠标选中文字--> selectstart
        document.addEventListener("selectstart",function(e){
            e.preventDefault();
        })
        //3.获得鼠标坐标
        document.addEventListener("click",function(e){
            console.log(e.clientX);
            console.log(e.clientY);
        })
        document.addEventListener("mousemove",function()//mousemove 鼠标移动
        {
            console.log(1);
        })

常见键盘事件

JavaScript

//常见的键盘事件
        //按键弹起时触发--> keyup
        document.addEventListener("keyup",function()
        {
            console.log("我弹起了");
        })
        //按下时触发--> keydown
        document.addEventListener("keydown",function(){
            console.log("我按下了");
        })
        //按下时触发--> keypress(与 keydown 的区别在于 keypress 不识别功能键如 shift，ctrl 等)
        document.addEventListener("keypress",function(){
            console.log("press");
        })
        //获取用户按下键的 ASCII 码
        document.addEventListener("keypress",function(e){
            console.log(e.keyCode);//返回用户按键的 ASCII 码值
            //tips：keyprss 区分大小写，keydown/keyup 不区分
        })

html 代码

HTML

<div id="time">2019-9-9</div>
    <ul>
        <li>yyf</li>
        <li>yyf</li>
    </ul>
    <ol id="ol">
        <li>hxj</li>
        <li>hy</li>
    </ol>
    <ol id="test">
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
    </ol>
    <div class="box">盒子1</div>
    <div class="box">盒子2</div>
    <button id="btn">唐伯虎</button>
    <div id="cli">click</div>
    <div id="sometime">sometime</div>
    <button id="gettime">gettime</button>
    <button id="png1">1.png</button>
    <button id="png2">2.png</button>
    <img src="C:\\Users\\yifan\\Pictures\\c语言\\Snipaste_2023-02-04_19-44-00.png" alt="this is a photo">
    <br>
    <button id="an">按钮</button>
    <input id="input" type="text" value="输入内容">
    <br>
    <button id="sos">显示/隐藏密码</button>
    <input id="passwd" type="password" value="请输入你的密码">
    <div class="demo">
        <div class="boxnew">
            <span class="erweima"></span>
        </div>
    </div>
    <div>a</div>
    <div id="b">b</div>
    <div>c</div>
    <ul id="testadd">
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ul>
    <button id="remove">删除列表元素</button>
    <button id="listen">监听注册事件</button>
    <a href="https://www.baidu.com/">百度</a>

BOM

概念

JavaScript

//BOM--> 浏览器对象模型--> 与浏览器进行交互，核心对象为 window
        //BOM 范围更大，包含了 document
        console.dir(window);

window 常用事件

JavaScript

//window 常用事件
        //onload --> 当页面(全部内容，css 等)加载完时触发
        window.addEventListener("load",function()
        {
            console.log("页面加载完了");
        })
        //resize --> 页面大小变化时触发
        window.addEventListener("resize",function(){
            console.log("size is change");
        })

定时器

JavaScript

//定时器
        //setTimeout(函数，延迟的时间(单位为毫秒))--> 延迟一定时间后调用函数
        // window.setTimeout(function(){
        //     alert("the time is right");
        // },5000)
        var timeout=window.setTimeout(fun,2000);
        function fun()
        {
            console.log("this is settimeout function");
        }
        //停止 setTimeout 定时器
        var btn=document.querySelector("button")
        btn.addEventListener("click",function(){
            console.log("stop");
            window.clearTimeout(timeout);
        })
        //setInterval(函数，时间(秒为单位))--> 每隔一段时间就调用一次函数，实现重复调用
        var inter=window.setInterval(fn,10)
        var i=1;
        function fn()
        {
            console.log("the function count="+i);
            i++;
        }
        //停止 setInterval
        var btninter=document.getElementById("inter");
        btninter.addEventListener("click",function(){
            window.clearInterval(inter);
        })

location 对象

JavaScript

//location 对象
        console.log(location.href);//返回 url
        console.log(location.search);//返回 url 参数
        //示例：实现跳转页面
        var url=document.getElementById("url");
        url.addEventListener("click",function(){
            location.href="https://baidu.com";
        })
        //实现 5 秒钟自动跳转
        var url=document.getElementById("url");
        var time=window.setTimeout(function(){
                location.href="https://baidu.com";
            var i=5;
            window.setInterval(function(){
                console.log(i);
                i--;
            },1)
        },5000)
        //location 常用方法
        //1.assign(url)--> 会保留历史记录(能够回退)
        //2.replace(url)--> 不会保留历史记录(不能回退)
        //3.reload(参数)--> 刷新(参数为 true 时为强制刷新--> 无视浏览器缓存)
        var str="https://baidu.com";
        var url =document.getElementById("url");
        url.addEventListener("click",function(){
            // location.assign(str);
            // location.replace(str);
            location.reload();
        })

navigator 对象

JavaScript

//navigator 对象--> 包含有关浏览器的信息
        console.dir(navigator);
        console.log(navigator.userAgent);

history 对象

html 代码

HTML

    <button>停止settimeout定时器</button>
    <br>
    <button id="inter">停止setInterval定时器</button>
    <br>
    <button id="url">跳转到百度</button>