2.web前端开发（三）0301 javaScript基础

最新推荐文章于 2024-06-14 20:17:13 发布

转辰

最新推荐文章于 2024-06-14 20:17:13 发布

阅读量224

点赞数

分类专栏： 2.web前端开发文章标签： js javascript

本文链接：https://blog.csdn.net/guozhuanchen/article/details/114256169

版权

2.web前端开发专栏收录该内容

10 篇文章 1 订阅

订阅专栏

js标签大全：https://www.cnblogs.com/yanghj010/p/4883457.html

一、简介以及学习路线

（一）js能干什么

1.改变HTML内容、属性
2.隐藏HTML的元素并且显示隐藏的HTML元素
3.改变CSS样式

（二）学习流程

1.js语法
2.DOM操作（js操作document 即js操作html）
3.BOM操作（js操作浏览器）
4.框架

二、JS语法学习

（一）js写在哪里对html发挥作用

在这里插入图片描述

方法1：下面的讲解和案例都是方法1
方法2：新建一个.js文件在html中引用
在这里插入图片描述

（二）js的输出语句：能使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>js输出</title>
</head>
<body>
    <div>
        <p id="sc1"></p>
        <script>
            // 方式1: innerHTML写入html中  
            document.getElementById("sc1").innerHTML=12+45; //向id为sc1的p标签中输入内容 57

            //方式2:document.write
            document.write(5+6)

            //方式3:alert弹窗
            window.alert(2+6)

            //方式4:日志-调试信息 (浏览器中看不到 一般在Console中)
            console.log("调试信息")

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

在这里插入图片描述

（三）变量

1.命名规则：由字母数字下划线$组成；不能以数字开头；不能用关键字和保留键；大小写敏感

2.多种不同变量的定义：
//一.变量的数据类型
//二.运算型声明变量
//三.重新声明变量
//四.多个变量

<!DOCTYPE html>
<html>
<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>
</head>
<body>
    <div>
        <p id="bl0"></p>
        <p id="bl1"></p>
        <p id="bl2"></p>
        <p id="bl3"></p>
        <p id="bl4"></p>
        <p id="bl5"></p>
        <p id="bl6"></p>
        <p id="bl7"></p>
        <p id="bl8"></p>
        <p id="bl9"></p>
    </div>

    <script>
        //一.变量的数据类型
        var zifuchuan = "小红";   //字符串
        var zhengshu = 100;     //整数
        var xiaoshu = 3.14;   //小数
        var buer = true;  //布尔
        var shuzu = ["a", "b", "c"]  //数组
        var riqi = new Date();  //日期
        // var duixiang = { firstname: "果果", secondname="妹妹" };  //对象
        var meiyou = null; // 不定义或者为null
        var a;  //没有定义



        //二.运算型声明变量
        var b;
        a=10;  //赋值 
        b=20;
        var c=a+b;  //运算型声明变量


        //三.重新声明变量
        var e=10;
        var e=15;  //此时 e等于15

        //四.多个变量
        var ab=5,cd="xiao",ef="da";

        var ws=44,
        de="soos",
        ow="wpw";

        var r,o,p=23;


        document.getElementById("bl0").innerHTML = zifuchuan;
                document.getElementById("bl1").innerHTML = zhengshu;
                document.getElementById("bl2").innerHTML = xiaoshu;
                document.getElementById("bl3").innerHTML = buer;
                document.getElementById("bl4").innerHTML = shuzu;
                document.getElementById("bl5").innerHTML = riqi;
                // document.getElementById("bl6").innerHTML = duixiang["firstname"];
                document.getElementById("bl7").innerHTML = meiyou;
                document.getElementById("bl8").innerHTML = c;
                document.getElementById("bl9").innerHTML = e;
                
    </script>

</body>
</html>

（四）数据类型

在这里插入图片描述

第一部分：详细看字符串

在这里插入图片描述

上图方法的代码

<!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>Document</title>
</head>
<body>
    <p id="pinjie"></p>
    <p id="changdu"></p>
    <p id="huoquzifu"></p>
    <p id="zhuandaxie"></p>
    <p id="zhuanxiaoxie"></p>
    <p id="huoquxiabiao"></p>

    <script>
        //拼接
        var s="a";
        var s2="b";
        document.getElementById("pinjie").innerHTML = s + s2;

        //字符串长度
        var s3=s+s2;
        document.getElementById("changdu").innerHTML = s3.length;  //长度   .length

        //获取某个位置的字符
        var ai="我爱我家";
        document.getElementById("huoquzifu").innerHTML=ai.charAt(1);  // 位置字符  .charAt(1)

        //字符串转大写
        var xiaoxie="wowpdj";
        document.getElementById("zhuandaxie").innerHTML=xiaoxie.toUpperCase();
        
        //字符串转小写
        var daxie="kWOWOW";
        document.getElementById("zhuanxiaoxie").innerHTML=daxie.toLowerCase();

        //某个字符第一次出现的位置
        var huoquzuobiao="wkpkkp";
        document.getElementById("huoquxiabiao").innerHTML=huoquzuobiao.indexOf("p");

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

字符串更多方法使用时可以去看看：
https://www.runoob.com/js/js-strings.html

第二部分详细看对象
1.写法：
以值对的方式定义去写键和值用冒号分隔
2.如何去访问对象的属性值 .property 或 [“property”]
在这里插入图片描述

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>菜鸟教程(runoob.com)</title>
</head>

<body>

    <p>有两种方式可以访问对象属性:</p>
    <p>你可以使用 .property 或 ["property"]。</p>
    <p id="demo"></p>
    <p id="demo2"></p>

    <script>
        var duixiang={firstName:78,secondname:98};
        document.getElementById("demo").innerHTML=duixiang.firstName;
        document.getElementById("demo2").innerHTML = duixiang["secondname"];

    </script>

</body>

</html>

3.如何去访问对象的方法
在这里插入图片描述

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>菜鸟教程(runoob.com)</title>
</head>

<body>
    <p id="demo3"></p>
    <script>
        var fangfa={
            xing:"郭",
            ming:"转晨",
            fangfaming:function(){
                return this.xing+" "+this.ming;
            }
        }
        document.getElementById('demo3').innerHTML=fangfa.fangfaming();

    </script>

</body>

</html>

第三部分详细看事件

在这里插入图片描述

1.如下图中的onclick事件
在这里插入图片描述

<!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>
</head>
<body>

    <!-- 第一组:点击获取时间 -->
    <button onclick="displayDate()"> 点击获取时间</button>
    <p id="time"></p>
    <script>
        function displayDate(){
            document.getElementById("time").innerHTML=Date();
        }
    </script>


    <!-- 第二组:点击获取文字 -->
    <button onclick="displaywords()">点击获取文字</button>
    <p id="words"></p>
    <script>
        function displaywords(){
            document.getElementById("words").innerHTML="hello呀呀";
        }
    </script>

</body>
</html>

2.鼠标滑过内容展示出来onmouseover ；鼠标划走内容消失onmouseout

<button onmouseover="mufunction()" onmouseout="mufunction2()">设置</button>
    <p id="demo1"></p>
    <p id="yi2"></p>
    <script>
        function mufunction(){
            document.getElementById("demo1").innerHTML ="高级设置";
            document.getElementById("yi2").innerHTML = "其他设置";
        }

        function mufunction2() {
                document.getElementById("demo1").innerHTML = "";
            document.getElementById("yi2").innerHTML = "";
            }
        
    </script>

（五）表达式

一共有五种表达式
1.算术表达式
在这里插入图片描述
2.关系运算
大于（>）,小于（<）,小于等于（<=）,大于等于（>=）,相等（），不等（!=），恒等（=），不全等（!==）
https://www.cnblogs.com/davina123/p/11806518.html

3.逻辑运算
与或非
在这里插入图片描述

4.赋值表达式
在这里插入图片描述

5.综合表达式：优先级
在这里插入图片描述

（六）条件语句

1.if语句

if
else if
else
switch
在这里插入图片描述

<!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>Document</title>
</head>
<body>
    <button onclick="hour()">几点</button>
    <p id="demo"></p>
    <script>
        function hour(){
            var gretting;
            var time=new Date().getHours();
            if(time<12){
                gretting="morning";
            }
            else if(time<20){
                gretting="afternoon";
            }
            else{
                gretting="night";
            }
            document.getElementById("demo").innerHTML=gretting;
        }
    </script>
</body>
</html>

2.switch语句
在这里插入图片描述

<!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>Document</title>
</head>
<body>
    <p id="demo"></p>
    <script>
        var text;
        switch(new Date().getDay()){
            case 1:
                text="周一加油";
                break;
            case 2:
                text="周二继续加油";
                break;
            default:
                text="周末最好"
        }

        document.getElementById("demo").innerHTML=text;
    </script>
    
</body>
</html>

（七）循环语句

在这里插入图片描述

1.for in语句：如下图循环键值对
在这里插入图片描述

<!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>Document</title>
</head>
<body>
    <p id="demo"></p>
    <script>
        var text="";
        var x;
        var person={xing:"guo",ming:"zhunchen",age:25};
        for(x in person){
            console.log(x);
            text += person[x]+" ";
        }
        document.getElementById("demo").innerHTML=text;


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

还可以使用for in 循环字符串
在这里插入图片描述

（八）函数

1.函数的声明
在这里插入图片描述
2.函数调用

3.函数的传参和返回

4.局部变量
在这里插入图片描述

5.全局变量
在这里插入图片描述

6.常用的函数库 Math常用的方法
在这里插入图片描述

（九）正在表达式

课件中需要记忆和总结的地方：
在这里插入图片描述

1.search方法返回符合的下标
在这里插入图片描述
2.replace 将字符串匹配到并且替换了

替换一个

<p id="demo2">beijing and Shanghai and hangzhou</p>
    <script>
        // 获取p标签中间的字符串 beijing and Shanghai and hangzhou
        var str=document.getElementById("demo2").innerHTML;

        //使用.replace  对shanghai (i表示 在找shanghai的过程中不区分大小写)进行替换成shanxi
        var strReplace=str.replace(/shanghai/i,"shanxi");

        document.getElementById("demo2").innerHTML=strReplace;
    </script>

替换多个没有加g时
在这里插入图片描述
加了g之后全局替换了

3.exec 找到要匹配的字符串
str.index是坐标

不区分大小写的写法

（十）异常处理

try
catch
finally

在这里插入图片描述

<!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>
</head>
<body>
    <!-- html写一个输入框 -->
    请输入:<input type="text" id="demo" placeholder="请输入数字">

    <!-- html写一个按钮 -->
    <button onclick="jiance()">检测</button>
    <!-- 接收按钮点击完之后 在html展示的文字 -->
    <p id="p01"></p>

    <script>
        function jiance(){
            // 让点完按钮后 html中展示的字 默认为空
            document.getElementById("p01").innerHTML = "";

            //获取输入框输入的值 
            var inputValue=document.getElementById("demo").value;

            //对值进行异常捕获
            try{
                if(inputValue=="") throw "是空的"
                else if(inputValue<5)throw "太小了"
                else if(isNaN(inputValue)) throw "不是数字"
            }catch(err){
                //将错误信息给p01 让点击完按钮之后看
                document.getElementById("p01").innerHTML= err;
            }finally{
                //不论有木有异常都进行调试信息 done
                console.log('done')
                // window.alert("done")
            }

        }
    </script>


</body> 
</html>

（十一）表单验证

如果提交表单时，信息不对弹出提示框的处理在网页中很常见
在这里插入图片描述

<!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>Document</title>
</head>
<body>
    <script>
        function mumu(){
            //对整个document搜索forms  如果名为myForm 且输入框的name是fname 则把其value拿出来
            var x=document.forms["myForm"]["fname"].value;
            var y=document.forms["myForm"]["fage"].value;
            if(x=="" || y==""){
                window.alert("姓名或年龄不可以为空");
                //此处的返回值 如果是false 那么表单不会提交不会跳转 如果是true 那么会提交和跳转
                return false;
            }

        }
    </script>

    <!-- html写一个form 加上οnsubmit="return mumu()" 与js联系起来-->
    <form action="https://www.baidu.com/" name="myForm" onsubmit="return mumu()" method="GET">
        请输入姓名:<input type="text" name="fname">
        请输入年龄:<input type="text" name="fage">
        <input type="submit" value="提交">
    </form>
</body>
</html>

总结已学习的知识：
在这里插入图片描述

转辰

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
2.web前端开发（三）0301 javaScript基础

一、简介以及学习路线（一）js能干什么1.改变HTML内容、属性2.隐藏HTML的元素并且显示隐藏的HTML元素3.改变CSS样式（二）学习流程1.js语法2.DOM操作（js操作document 即js操作html）3.BOM操作（js操作浏览器）4.框架二、JS语法学习（一）js写在哪里对html发挥作用（二）js的输出语句注意：笔记在代码中：<!DOCTYPE html><html lang="en"><head> &lt
复制链接

扫一扫

专栏目录