Web JavaScript

JiA-Bai

已于 2024-02-26 17:02:42 修改

阅读量926

点赞数 18

分类专栏： Web 文章标签：前端 javascript 开发语言 jquery js

于 2024-02-26 17:01:39 首次发布

本文链接：https://blog.csdn.net/weixin_51312723/article/details/136297110

版权

Web 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

1 前言

JavaScript 是一种脚本，一门编程语言，它可以在网页上实现复杂的功能，网页展现给你的不再是简单的静态信息，而是实时的内容更新，交互式的地图，2D/3D 动画，滚动播放的视频等等。JavaScript 怎能缺席？它是标准 Web 技术蛋糕的第三层，其中 HTML 和 CSS 我们已经在前面的学习内容中进行了详细的讲解。
在这里插入图片描述
HTML： 是一种标记语言，用来结构化我们的网页内容并赋予内容含义，例如定义段落、标题和数据表，或在页面中嵌入图片和视频。
CSS： 是一种样式规则语言，可将样式应用于 HTML 内容，例如设置背景颜色和字体，在多个列中布局内容。
JavaScript： 是一种脚本语言，可以用来创建动态更新的内容，控制多媒体，制作图像动画，还有很多。（好吧，虽然它不是万能的，但可以通过简短的代码来实现神奇的功能。）总而言之，js实现页面的动态效果和实现接口的调用。

2 原生js常见用法

2.1 弹窗操作

下面是一个通过简短代码来实现神奇的弹窗功能：

<html>
  <head>
    <meta charset="utf-8">
    <title>我的页面</title>
   </head>
   <body>
    <input type="button" onclick="alert('我知道了')" value="提交">
   </body>
</html>

代码结果如下图所示：即点击提交按钮，则会出现我知道了这个弹窗。
在这里插入图片描述
但这种写法我们一般用的比较少，另一种写法通常如下所示：

<html>
  <head>
    <meta charset="utf-8">
    <title>我的页面</title>
    <script>
      function myck(){
           alert('我知道了');
       }
    </script>
   </head>
   <body>
    <input type="button" onclick="myck()" value="提交">
   </body>
</html>

< script > < /script >用来标识我们将要写的js的脚本。如果在myck()方法的括号里加参数我们应该怎么写？具体写法可以如下代码所示：

<html>
  <head>
    <meta charset="utf-8">
    <title>我的页面</title>
    <script>
      function myck(type){
           if(type == 1){
              alert('提交成功');
           }else if(type == 2){
              alert('清空成功');
           }
       }
    </script>
   </head>
   <body>
    <input type="button" onclick="myck(1)" value="提交">
    <input type="button" onclick="myck(2)" value="清空">
   </body>
</html>

2.2 for循环操作

还可以用for循环输出我是标签i，具体代码示例如下所示：

<html>
  <head>
    <meta charset="utf-8">
    <title>我的页面</title>
    <script>
      for(var i=0;i<10;i++){
         document.write("<h1>我是标签"+i+"</h1>");
      }
    </script>
   </head>
   <body>
   
   </body>
</html>

2.3 打印日志操作

打印日志，具体代码示例如下所示：

<html>
  <head>
    <meta charset="utf-8">
    <title>我的页面</title>
    <script>
      var i = 10；
      i = 2;
      //...伪代码，中间n次操作导致我不清楚当前i等于？
      //此时可以通过打印日志的方式进行调试
      console.log("我是i:"+i);
    </script>
   </head>
   <body>
   
   </body>
</html>

2.4 获取页面值操作

想要拿到页面的值又该如何操作呢？比如如何拿到用户名输入的信息呢？具体代码示例如下所示：

<html>
  <head>
    <meta charset="utf-8">
    <title>我的页面</title>
    <script>
      function myck(){
          alter(document.getElementById("username").value);
       }
    </script>
   </head>
   <body>
    用户名：<input id="username" type="text">
    <p></p>
    <input type="button" onclick="myck()" value="提交">
    <input type="button" onclick="myck()" value="清空">
   </body>
</html>

2.5 判空操作

接下来可以判空了，如何判空呢？具体代码示例如下所示：

<html>
  <head>
    <meta charset="utf-8">
    <title>我的页面</title>
    <script>
      function myck(type){
          var username = document.getElementById("username").value;
          if(username==""){
             alert("请输入用户名");
             //终止执行
             return false;
          }else{
             alert("提交成功");
          }
       }
    </script>
   </head>
   <body>
    用户名：<input id="username" type="text">
    <p></p>
    <input type="button" onclick="myck(1)" value="提交">
    <input type="button" onclick="myck(2)" value="清空">
   </body>
</html>

2.6 修改页面内容操作

如何修改页面内容？如下所示将用户注册修改为新用户注册，具体实现代码如下所示：

<html>
  <head>
    <meta charset="utf-8">
    <title>我的页面</title>
    <script>
      function myck(type){
          if(type==1){
          var username = document.getElementById("username").value;
          if(username==""){
             alert("请输入用户名");
             //终止执行
             return false;
          }else{
             alert("提交成功");
          }
       }else if(type==3){
            document.getElementById("div1").innerHTML ="<strong>新</strong>用户注册";
            //或者是下面这种写法：
            //document.getElementById("div1").innerText ="<strong>新</strong>用户注册";
            //但区别是下面这种写法会将<strong></strong>当成文本直接打印下来，而不会实现加粗的功能
       }else if(type==4){
            document.getElementById("username").value="大马猴";
       }
     }
    </script>
   </head>
   <body>
    <div id="div1">
         用户注册
    </div>
    用户名：<input id="username" type="text">
    <p></p>
    <input type="button" onclick="myck(1)" value="提交">
    <input type="button" onclick="myck(2)" value="清空">
    <input type="button" onclick="myck(3)" value="改变内容">
    <input type="button" onclick="myck(4)" value="设置文本框">
   </body>
</html>

2.7 网页版计算器制作

在这里插入图片描述
具体实现代码如下所示：

<html>
    <head>
        <meta charset="utf-8">
        <title>计算器</title>
        <script>
            function myck(type){
                var num1 = document.getElementById("num1");
                var num2 = document.getElementById("num2");
                if(type==1){
                    // 计算操作
                    var result = parseInt(num1.value) + parseInt(num2.value);
                    alert(result);
                    document.getElementById("resultDiv").innerText ="最终计算结果："+
                        result;
                }else if(type==2){
                    if(confirm("是否正确清空？")){
                        // 清空
                        num1.value = "";
                        num2.value = "";
                     document.getElementById("resultDiv").innerText="";
                    }
                }
            }
        </script>
    </head>
    <body>
        <div style="margin-top: 100px;margin-left: 500px;">
           <span style="font-size: 60px;">加法计算器</span>     
        </div>
        <div>
            <div class="innerDiv">
                数字1：<input id="num1" type="number" placeholder="请输入数字1"> 
            </div>
        </div>
        <div>
           <div class="innerDiv">
            数字2：<input id="num2" type="number" placeholder="请输入数字2">
          </div>  
        </div>
        <div>
           <div style="margin-left: 482px;" class="innerDiv">
                <input type="button" onclick="myck(1)" value="计 算">
                <input type="button" onclick="myck(2)" value="清 空">
           </div> 
        </div>
        <div id="resultDiv">

        </div>
    </body>
    <style>
        .innerDiv{
            margin-left: 420px;
            margin-top: 20px;
        }
    </style>
</html>

3 外部js常见用法

使用原生js存在的问题：

操作比较繁琐，元素获取和属性设置比较麻烦。
不同厂商的浏览器对于js的执行是不同的。

因此，我们使用js的框架jQuery来解决这个问题。
如何引用外部js —>jQuery呢？具体实现代码如下所示：

<html>
    <head>
        <meta charset="utf-8">
        <title>登录页面</title>
        <!--  1.引入外部js —>jQuery-->
        <script src="jquery-1.9.1.min.js"></script>
        <!--  2.使用script 调用 jQuery-->
        <script>
            function myck(type) {
               var input_username = jQuery("#username");
               var input_pwd = jQuery("#pwd");
               //var input_username2 = document.getElementById("username");
               if(type==1){
                      //提交，非空校验
                      if(input_username.val().trim()==""){
                          alert("请先输入用户名！")；
                          //设置光标到当前输入框
                          input_username.focus();
                          //终止代码执行
                          return false;
                      }
                      if(input_pwd.val().trim()==""){
                          alert("请先输入密码！")；
                          //设置光标到当前输入框
                          input_pwd.focus();
                          //终止代码执行
                          return false;
                      }
                      //伪代码
                      alert("登录成功");
                   }else if(type==2){
                      if(confirm("是否正确清空？")){
                         //清空
                         input_username.val("");
                        //input_username2.value="";     
                         input_pwd.val("");              
                   }}
            }
        </script>
    </head>
    <body>
        <div style="margin-top: 100px;margin-left: 500px;">
           <span style="font-size: 60px;">登录</span>     
        </div>
        <div>
            <div class="innerDiv">
                用户名：<input id="username" type="text" placeholder="请输入用户名"> 
            </div>
        </div>
        <div>
           <div class="innerDiv">
            &nbsp;密&nbsp;&nbsp;码：<input id="pwd" type="password" placeholder="请输入密码">
          </div>  
        </div>
        <div>
           <div style="margin-left: 482px;" class="innerDiv">
                <input type="button" onclick="myck(1)" value="提 交">
                <input type="button" onclick="myck(2)" value="清 空">
           </div> 
        </div>
    </body>
</html>

内嵌： iframe

<html>
<head>
    <title>自定义搜索</title>
   <script src="jquery-1.9.1.min.js"></script>
   <script>
       function mycli(type){
           var baidu_url = "https://www.baidu.com";
           var sogou_url = "https://www.sogou.com";
           var san_url = "https://www.so.com/";
           var ifm = jQuery("#ifm");
           if(type==1){
               // 内嵌百度
               ifm.attr("src",baidu_url);
           }else if(type==2){
               // 内嵌搜狗
               ifm.attr("src",sogou_url);
           }else{
               // 内嵌 360
               ifm.attr("src",san_url);
           }
       }
   </script>
</head>

<body>
    <div style="margin-bottom: 20px;">
        <input type="button" onclick="mycli(1)" value=" 百度一下 "> &nbsp;&nbsp;&nbsp;
        <input type="button" onclick="mycli(2)" value=" 搜狗 "> &nbsp;&nbsp;&nbsp;
        <input type="button" onclick="mycli(3)" value=" 360搜索 "> &nbsp;&nbsp;&nbsp;
    </div>
    <iframe id="ifm" style="width: 100%;height: 600px;" src="https://www.baidu.com"></iframe>
</body>
</html>

网页版计算器制作：
在这里插入图片描述
具体实现代码如下所示：

<html>
    <head>
        <meta charset="utf-8">
        <title>我的计算器</title>
        <!--  1.引入jquery-->
        <script src="jquery-1.9.1.min.js"></script>
        <script>
            function myck(type) {
                var num1 = jQuery("#num1");
                var num2 = jQuery("#num2");
                if(type==4){
                    // 清空操作
                    if(confirm("确认清空吗？")){
                        num1.val("");
                        num2.val("");
                        jQuery("#resultDiv").html("");
                    }
                    return false;
                }
                // 非空效验
                if(num1.val()==""){
                    alert("请先输入数字1");
                    return false;
                }
                if(num2.val()==""){
                    alert("请先输入数字2");
                    return false;
                }
                var total=0;
                if(type==1){
                    // 相加操作
                   total = parseInt(num1.val())+parseInt(num2.val());
                   // document.getElementById("resultDiv").innerText="";
                   // document.getElementById("resultDiv").innerHtml="";
                }else if(type==2){
                    // 相减操作
                    total = parseInt(num1.val()) - parseInt(num2.val());

                }else if(type==3){
                    // 相乘操作
                    total = parseInt(num1.val()) * parseInt(num2.val());

                }
                jQuery("#resultDiv").html("最终执行结果："+total);
            }
        </script>
    </head>
    <body>
        <div style="text-align:center;">
            <h1 style="margin-top: 60px;">计算器</h1>
            数字1：<input id="num1" type="number"><p></p>
            数字2：<input id="num2" type="number"><p></p>
            <input type="button" value=" 相加 " onclick="myck(1)">
            <input type="button" value=" 相减 " onclick="myck(2)">
            <input type="button" value=" 相乘 " onclick="myck(3)">
            <input type="button" value=" 清空 " onclick="myck(4)">
            <p></p>
            <div style="font-size: 40px;" id="resultDiv">

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