黑马2023JavaScript笔记

一、js知识点

DOCTYPE html>
<html lang="en">
<head>
    <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>Documenttitle>
    <script>
        //js自定义对象
        var user = {
            name:"Tom",
            sex:"male"
        };
        console.log(user.name);


        //json字符串
        var json = '{"name":"XiaoMing","sex":"female"}';
        // 将json字符串转换为json对象
        var jsonobj = JSON.parse(json);
        console.log(jsonobj.name);//XiaoMing
        //将json对象转换为字符串
        alert(JSON.stringify(jsonobj));


        // js数组
        var arr = [1,2,3,4];
        //普通js函数
        arr.forEach(function(e){
            console.log(e);})
        console.log("------------------------");
        //es6中函数
        arr.forEach((e) => {console.log(e)});
        // 两个种函数表达方式效果都是一样的
        

        //在BOM对象中,我们只需要了解window和location两个对象就够了!!!
        // BOM中的两个对象:window和location
        // 一、window对象的方法:
        // 1、confirm
        var result = confirm("你确定吗?");
        alert(result);//点了确定返回true,取消返回false
        // 2、setInterval()。输出执行了多少次。
        let i = 0;
        window.setInterval(function(){
            i++;
            console.log(i+"次");
        },1000);
        // 3、setTimeout(),隔多长时间,执行一次函数(只执行一次)
        var myfun1 = function(){alert("(*´▽`)ノノ");};
        window.setTimeout(myfun1,5000);

        // 二、location对象
        // 只需要知道location对象的href属性!!!!
        alert(location.href);/* 返回整个url地址 */
        location.href = "https://www.itcast.cn";//自动跳转到改地址

    script>
head>
<body>
    <label><input type="radio" name="x">小明label>
    <label><input type="radio" name="x">huahualabel>
body>
html>

黑马2023JavaScript笔记_第1张图片

黑马2023JavaScript笔记_第2张图片

黑马2023JavaScript笔记_第3张图片

二、js综合案例

DOCTYPE html>
<html lang="en">
<head>
    <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>
    <style>
        #center{
            max-width: 1000px;
            width: 60%;
            margin-left: auto;
            margin-right: auto;
        }
    style>
    <script>
        window.onload = function(){
            var lamps = document.getElementById("lamp");
            var opens = document.getElementById("open");
            var closes = document.getElementById("close");
            var text = document.getElementById("textcontent");
            var chooseall = document.getElementById("chooseAll");
            var chooseno = document.getElementById("chooseNo");

            opens.onclick = function(){
                lamps.src = 'on.gif';
            }
            closes.onclick = function(){
                lamps.src = 'off.gif';
            }
            // 将字符串转换为小写
            text.onfocus = function(){
                //text.value可读可写,可返回值
                let str = text.value;
                text.value = str.toLowerCase();
            }
            // 将字符串转换为大写
            text.onblur = function(){
                let str = text.value;
                text.value = str.toUpperCase();
            }
            // 全选
            chooseall.onclick = function () {
                var myhobby = document.getElementsByName("hobby");
                for (let i = 0; i < myhobby.length; i++) {
                    myhobby[i].checked = true;
                }
            }
            // 全不选
            chooseno.onclick = function () {
                var myhobby = document.getElementsByName("hobby");
                for (let i = 0; i < myhobby.length; i++) {
                    myhobby[i].checked = false;
                }
            }
        }
    script>
head>
<body>
    
    <div id="center">
        <img src="off.gif" id="lamp"><br/>
        <input type="button" value="点亮灯泡" id="open">
        <input type="button" value="熄灭灯泡" id="close">
        <br/>
        <input type="text" id="textcontent" value="Hello">
        <br/>
        <input type="checkbox" name="hobby">C
        <input type="checkbox" name="hobby">C++
        <input type="checkbox" name="hobby">JAVA
        <br/>
        <input type="button" value="全选" id="chooseAll">
        <input type="button" value="全不选" id="chooseNo">
    div>
    
body>
html>

黑马2023JavaScript笔记_第4张图片

你可能感兴趣的:(23黑马javaweb,javascript,前端,开发语言)