Web JavaScript

目录

  • 1 前言
  • 2 原生js常见用法
    • 2.1 弹窗操作
    • 2.2 for循环操作
    • 2.3 打印日志操作
    • 2.4 获取页面值操作
    • 2.5 判空操作
    • 2.6 修改页面内容操作
    • 2.7 网页版计算器制作
  • 3 外部js常见用法
  • 4 总结

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存在的问题：

  1. 操作比较繁琐，元素获取和属性设置比较麻烦。
  2. 不同厂商的浏览器对于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>

4 总结

前端三剑客：

  1. html:构建静态页面。
  2. css:美化页面。
  3. js:实现动态效果和交互。

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mfbz.cn/a/412222.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

vue2、vue3各自的响应式原理

vue2、vue3各自的响应式原理

查看本专栏目录 关于作者 还是大剑师兰特&#xff1a;曾是美国某知名大学计算机专业研究生&#xff0c;现为航空航海领域高级前端工程师&#xff1b;CSDN知名博主&#xff0c;GIS领域优质创作者&#xff0c;深耕openlayers、leaflet、mapbox、cesium&#xff0c;canvas&#x…
阅读更多...
46.仿简道云公式函数实战-文本函数-CHAR

46.仿简道云公式函数实战-文本函数-CHAR

1. CHAR函数 函数可将计算机其他类型的数字代码转换为字符。 2. 函数用法 CHAR(number) CHAR 函数可将计算机其他类型的数字代码转换为字符。 Number&#xff1a;用于指定字符的数字。 3. 函数示例 CHAR(10)&#xff0c;即返回值为换行字符"\n"。 目前仿简道…
阅读更多...
易查分系统可靠吗？答：非常安全可靠

易查分系统可靠吗？答：非常安全可靠

易查分系统非常安全可靠 易查分系统之所以备受信赖&#xff0c;其关键在于其强大的安全保障措施。该系统采用了高强度的加密防火墙&#xff0c;确保用户数据在传输和存储过程中得到充分的保护。同时&#xff0c;易查分严格遵守数据安全协议&#xff0c;对所有上传的数据进行加…
阅读更多...
vue中循环多个li(表格)并获取对应的ref

vue中循环多个li(表格)并获取对应的ref

有种场景是这样的 <ul><li v-for"(item,index) in data" :key"index" ref"???">{{item}}</li> </ul> //key值在项目中别直接用index&#xff0c;最好用id或其它关键值const data [1,2,3,4,5,6]我想要获取每一个循环并…
阅读更多...
oracle官网下载早期jdk版本

oracle官网下载早期jdk版本

Java Downloads | Oracle JDK Builds from Oracle 以上压缩版&#xff0c;以下安装版 Java Downloads | Oracle 该链接往下拉能看到jdk8和jdk11的安装版 -- end
阅读更多...
【初始RabbitMQ】高级发布确认的实现

【初始RabbitMQ】高级发布确认的实现

在生产环境中由于一些不明原因&#xff0c;导致 rabbitmq 重启&#xff0c;在 RabbitMQ 重启期间生产者消息投递失败&#xff0c; 导致消息丢失&#xff0c;需要手动处理和恢复。于是&#xff0c;我们开始思考&#xff0c;如何才能进行 RabbitMQ 的消息可靠投递呢&#xff1f; …
阅读更多...
Untiy webgl iis服务器加载ab包报404.3，需要为AB包添加MIMI映射

Untiy webgl iis服务器加载ab包报404.3，需要为AB包添加MIMI映射

首选确定一下文件在不在 这里是缺少对于AB文件类型的映射&#xff0c;因为AB包没有后缀名&#xff0c;我们为服务器添加通用的映射 开始菜单搜索iis管理器&#xff0c;进入mimie类型 右侧点击添加按钮 文件扩展名为. 类型为application/octet-stream &#xff08;字节流&…
阅读更多...
Android 输入法框架简介

Android 输入法框架简介

每种平台都有自己的输入法框架. GNU/Linux 桌面环境有多种输入法框架, 比如 ibus, fcitx 等. 但是 Android 操作系统只有一种, 是统一提供的输入法框架. 相关链接: 《ibus 源代码阅读 (1)》 https://blog.csdn.net/secext2022/article/details/136099328https://developer.and…
阅读更多...
深入理解 JavaScript 对象原型，解密原型链之谜（上）

深入理解 JavaScript 对象原型，解密原型链之谜（上）

&#x1f90d; 前端开发工程师、技术日更博主、已过CET6 &#x1f368; 阿珊和她的猫_CSDN博客专家、23年度博客之星前端领域TOP1 &#x1f560; 牛客高级专题作者、打造专栏《前端面试必备》 、《2024面试高频手撕题》 &#x1f35a; 蓝桥云课签约作者、上架课程《Vue.js 和 E…
阅读更多...
前端Vue项目无法启动服务，提示无 ‘dev‘ npm的脚本问题解决

前端Vue项目无法启动服务，提示无 ‘dev‘ npm的脚本问题解决

目录 一、问题详情 二、问题解决 一、问题详情 上周还能运行的项目&#xff0c;今天突然无法执行了&#xff0c;连最基本的启动按钮也没有了&#xff0c;所有的项目本地都突然跑不起来了&#xff0c;附上截图。 二、问题解决 后来排查的根本原因有点奇葩&#xff0c;是因为…
阅读更多...
C语言--- 指针（3）

C语言--- 指针（3）

一.字符指针变量 在指针的类型中&#xff0c;我们知道有一种指针类型为字符指针char * 一般使用&#xff1a; #include<stdio.h> int main() {char ch a;char* p &ch;*p b;printf("%c\n",ch);return 0; } 其实还有一种使用方式 &#xff1a; #inc…
阅读更多...
JSP实现数据传递与保存（一）

JSP实现数据传递与保存（一）

一、Web开发步骤 1.1两类模式 后端——————前端 先有前端&#xff0c;前端用的时候直接调用 后端已实现注册接口&#xff0c;接口名为doRegister.jsp 前端此时&#xff1a; 前端的form表单中的action提交地址就只能填doRegister.jsp&#xff0c;即&#xff1a; <f…
阅读更多...
ESD管理应用中的浪涌电阻？

ESD管理应用中的浪涌电阻？

静电放电 &#xff08;ESD&#xff09; 会对敏感的电子元件和电路造成严重破坏。为了保护电子设备免受ESD的影响&#xff0c;系统设计人员采用了许多保护措施&#xff0c;包括浪涌电阻器。本文探讨了浪涌电阻器在ESD管理应用中的作用。 首先是一个定义&#xff0c;术语脉冲通常…
阅读更多...
Rider 2023：打造高效.NET项目的智能IDE，让开发更简单mac/win版

Rider 2023：打造高效.NET项目的智能IDE，让开发更简单mac/win版

JetBrains Rider 2023激活版下载是一款专为.NET开发者打造的强大集成开发环境&#xff08;IDE&#xff09;。这款IDE提供了丰富的功能&#xff0c;旨在帮助开发者更快速、更高效地编写、调试和测试.NET应用程序。 Rider 2023 软件获取 Rider 2023在保持了其一贯的智能代码补全…
阅读更多...
jmeter 数据库断言

jmeter 数据库断言

当前版本&#xff1a; jmeter 5.6.3mysql 5.7.39 简介 本篇文章主要通过获取结果集断言&#xff0c;流程&#xff1a;先通过查看结果树获取正确结果&#xff0c;再将正确的结果放入文本断言中&#xff0c;直接启动即可。测试数据库的详细方法见另一篇文章&#xff1a; https:/…
阅读更多...
设计模式（八）外观模式

设计模式（八）外观模式

相关文章设计模式系列 1.外观模式简介 外观模式介绍 当我们开发Android的时候&#xff0c;无论是做SDK还是封装API&#xff0c;我们大多都会用到外观模式&#xff0c;它通过一个外观类使得整个系统的结构只有一个统一的高层接口&#xff0c;这样能降低用户的使用成本。 外观…
阅读更多...
【c++leetcode】1382. Balance a Binary Search Tree

【c++leetcode】1382. Balance a Binary Search Tree

问题入口 DSW (DAY, STOUT & WARREN) ALGORITHM 时间复杂度O(n) class Solution { public:int makeVine(TreeNode* grand, int cnt 0){auto n grand->right;while (n ! nullptr){if(n->left ! nullptr){auto old_n n;n n->left;old_n->left n->righ…
阅读更多...
基于Java SSM框架实现高考填报信息系统项目【项目源码】计算机毕业设计

基于Java SSM框架实现高考填报信息系统项目【项目源码】计算机毕业设计

基于java的SSM框架实现高考填报信息系统演示 JAVA简介 Java主要采用CORBA技术和安全模型&#xff0c;可以在互联网应用的数据保护。它还提供了对EJB&#xff08;Enterprise JavaBeans&#xff09;的全面支持&#xff0c;java servlet API&#xff0c;JSP&#xff08;java serv…
阅读更多...
消息中间件篇之Kafka-数据清理机制

消息中间件篇之Kafka-数据清理机制

一、Kafka文件存储机制 Kafka文件存储结构&#xff1a;一个Topic有多个分区。每一个分区都有多个段&#xff0c;每个段都有三个文件。 为什么要分段&#xff1f;1. 删除无用文件方便&#xff0c;提高磁盘利用率。 2. 查找数据便捷。 二、数据清理机制 1.日志的清理策略方案1 根…
阅读更多...
关于python的数据可视化与可视化：数据读取

关于python的数据可视化与可视化：数据读取

带着问题寻找答案可以使自己不再迷茫或者不知所措&#xff01; 了解什么python的数据可视化&#xff1f; 数据的读取&#xff08;一般伴随着课程文件中会进行提供和利用&#xff09; 数据可视化是将Python应用于大气海洋科学中数据处理及分析过程的重要环节&#xff0c;它可以…
阅读更多...
最新文章

Copyright @ 2022~2023

友情链接： 我的编程经验分享 一条长河网 尧图网站开发 尧图建网站