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{// 内嵌 360ifm.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.mzph.cn/news/704914.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

事件循环解析

事件循环解析

浏览器的进程模型 何为进程&#xff1f; 程序运行需要有它自己专属的内存空间&#xff0c;可以把这块内存空间简单的理解为进程 每个应用至少有一个进程&#xff0c;进程之间相互独立&#xff0c;即使要通信&#xff0c;也需要双方同意。 何为线程&#xff1f; 有了进程后&…
阅读更多...
8.网络游戏逆向分析与漏洞攻防-游戏网络架构逆向分析-游戏底层功能对接类GameProc的实现

8.网络游戏逆向分析与漏洞攻防-游戏网络架构逆向分析-游戏底层功能对接类GameProc的实现

内容参考于&#xff1a;易道云信息技术研究院VIP课 上一个内容&#xff1a;通过逆向分析确定游戏明文接收数据过程 码云地址&#xff08;master 分支&#xff09;&#xff1a;https://gitee.com/dye_your_fingers/titan 码云版本号&#xff1a;bcf7559184863febdcad819e48aa…
阅读更多...
python number类型中的各种数学函数

python number类型中的各种数学函数

python中的数学函数 函数返回值 ( 描述 )abs(x)返回数字的绝对值&#xff0c;如abs(-10) 返回 10ceil(x)返回数字的上入整数&#xff0c;如math.ceil(4.1) 返回 5cmp(x, y)如果 x < y 返回 -1, 如果 x y 返回 0, 如果 x > y 返回 1。Python 3 已废弃&#xff0c;使用 (…
阅读更多...
QT信号槽实现分析

QT信号槽实现分析

1.宏定义 qt中引入了MOC来反射&#xff0c;编译阶段变成 MOC–>预处理–>编译–>汇编–>链接 1-1、Q_OBJECT 这个宏定义了一系列代码&#xff0c;包括元对象和处理的函数 #define Q_OBJECT \public: \QT_WARNING_PUSH \Q_OBJECT_NO_OVERRIDE_WARNING \static c…
阅读更多...
如何学习Arduino单片机

如何学习Arduino单片机

&#xff08;本文为简单介绍&#xff0c;内容源于网络&#xff09; 学习Arduino相关的网址和开源社区&#xff1a; Arduino官方文档: Arduino - HomeArduino Forum: Arduino ForumArduino Playground: Arduino Playground - HomePageGitHub: GitHub: Let’s build from here …
阅读更多...
AE电源Apex Generator 系列5708009-C 使用说明 文件内容可以看目录，包含使用，调试，安装等内容都有160页

AE电源Apex Generator 系列5708009-C 使用说明 文件内容可以看目录，包含使用，调试，安装等内容都有160页

AE电源Apex Generator 系列5708009-C 使用说明 文件内容可以看目录&#xff0c;包含使用&#xff0c;调试&#xff0c;安装等内容都有160页
阅读更多...
2.26 Qt day4+5 纯净窗口移动+绘画事件+Qt实现TCP连接服务+Qt实现连接数据库

2.26 Qt day4+5 纯净窗口移动+绘画事件+Qt实现TCP连接服务+Qt实现连接数据库

思维导图 Qt实现TCP连接 服务器端&#xff1a; widget.h #ifndef WIDGET_H #define WIDGET_H#include <QWidget> #include<QTcpServer>//服务器端类 #include<QTcpSocket>//客户端类 #include<QMessageBox>//消息对话框类 #include<QList>//链…
阅读更多...
Jenkins安装，第一次访问报错解决方法

Jenkins安装，第一次访问报错解决方法

解决方法: yum -y install fontconfig
阅读更多...
亿道丨三防平板丨手持平板丨加固平板丨助力地震救援

亿道丨三防平板丨手持平板丨加固平板丨助力地震救援

自土耳其发生7.8级大地震以来&#xff0c;一直都牵动着世人的心。2023年2月10日&#xff0c;据法新社最新消息&#xff0c;强震已造成土耳其和叙利亚两国超2万人遇难。报道称&#xff0c;相关官员和医护人员表示&#xff0c;地震造成土耳其17674人死亡&#xff0c;叙利亚则有33…
阅读更多...
Nginx+Tomcat实现动静分离

Nginx+Tomcat实现动静分离

文章目录 一.动静分离的原理及架构1.1 动静分离是什么&#xff1f;1.2 动静分离的原理1.3 动静分离的架构组成 二.NginxTomcat实现动静分离2.1实验环境2.2所需软件环境2.3nginx服务的实现2.4配置动静分离 一.动静分离的原理及架构 1.1 动静分离是什么&#xff1f; 动静分离(S…
阅读更多...
Nginx的核心配置指令及调优

Nginx的核心配置指令及调优

目录 Nginx 核心配置指令 一、Nginx配置文件详解 1、配置文件目录 2、配置文件结构 二、调优 1、在全局域进行的调优 1.1线程池指令 1.2 工作进程数指令 1.3工作进程优先级指令 1.4 工作进程 CPU 绑定指令 1.5 调试可打开的文件个数 1.6 调试文件大小指令 1.7 只运…
阅读更多...
FL Studio Fruity Edition2024中文入门版Win/Mac

FL Studio Fruity Edition2024中文入门版Win/Mac

FL Studio Fruity Edition2024是一款功能强大的音乐制作软件&#xff0c;适合初学者和音乐爱好者使用。它提供了丰富的音乐制作工具&#xff0c;包括音频录制、编辑、混音以及MIDI制作等功能&#xff0c;帮助用户轻松创作出动人的音乐作品。 FL Studio 21.2.3 Win-安装包下载如…
阅读更多...
《数据治理简易速速上手小册》第1章 数据治理概述（2024 最新版）

《数据治理简易速速上手小册》第1章 数据治理概述（2024 最新版）

文章目录 1.1 数据治理的定义与重要性1.1.1 基础知识1.1.2 重点案例&#xff1a;客户数据分析1.1.3 拓展案例 1&#xff1a;库存管理系统1.1.4 拓展案例 2&#xff1a;合规性数据报告 1.2 数据治理的发展历程1.2.1 基础知识1.2.2 重点案例&#xff1a;电商平台的用户数据管理1.…
阅读更多...
苍穹外卖 -- day10- Spring Task- 订单状态定时处理- WebSocket- 来单提醒- 客户催单

苍穹外卖 -- day10- Spring Task- 订单状态定时处理- WebSocket- 来单提醒- 客户催单

苍穹外卖-day10 功能实现&#xff1a;订单状态定时处理、来单提醒和客户催单 订单状态定时处理&#xff1a; 来单提醒&#xff1a; 客户催单&#xff1a; 1. Spring Task 1.1 介绍 Spring Task 是Spring框架提供的任务调度工具&#xff0c;可以按照约定的时间自动执行某个代…
阅读更多...
稀疏表示分类（Sparse Representation for Classification，SRC）

稀疏表示分类（Sparse Representation for Classification，SRC）

稀疏表示分类&#xff08;Sparse Representation for Classification&#xff0c;简称SRC&#xff09;是一项在模式识别和信号处理中应用广泛的技术。它基于这样一个概念&#xff1a;一个信号&#xff08;比如图像、语音等&#xff09;可以用一个较大的字典中的一些基向量稀疏地…
阅读更多...
SpringCache缓存专题

SpringCache缓存专题

SpringCache缓存专题 学习目标 1、理解缓存存在的意义 2、掌握redis与SpringCache的集成方式 3、掌握SpringCache注解的使用 4、掌握项目集成SpringCache流程 第一章 基于SpringCache缓存方案 1.为什么需要缓存 ​ 前台请求&#xff0c;后台先从缓存中取数据&#xff0…
阅读更多...
浅析ARMv8体系结构：原子操作

浅析ARMv8体系结构：原子操作

文章目录 概述LL/SC机制独占内存访问指令多字节独占内存访问指令 独占监视器经典自旋锁实现 LSE机制原子内存操作指令CAS指令交换指令 相关参考 概述 在编程中&#xff0c;当多个处理器或线程访问共享数据&#xff0c;并且至少有一个正在写入时&#xff0c;操作必须是原子的&a…
阅读更多...
uniapp的微信小程序授权头像昵称（最新版）

uniapp的微信小程序授权头像昵称（最新版）

前面我出过两期博客关于小程序授权登录,利用php实现一个简单的小程序授权登录并存储授权用户信息到数据库的完整流程。无奈&#xff0c;小程序官方又整幺蛾子了。wx.getUserInfo接口收回&#xff0c;wx.getUserProfile接口也不让用。导致我的个人小程序&#xff1a;梦缘 的授权…
阅读更多...
Linux设备模型(五) - uevent kernel实现

Linux设备模型(五) - uevent kernel实现

1. Uevent的功能 Uevent是Kobject的一部分&#xff0c;用于在Kobject状态发生改变时&#xff0c;例如增加、移除等&#xff0c;通知用户空间程序。用户空间程序收到这样的事件后&#xff0c;会做相应的处理。 该机制通常是用来支持热拔插设备的&#xff0c;例如U盘插入后&…
阅读更多...
APIFox-自动获取登录状态操作

APIFox-自动获取登录状态操作

APIFox-自动获取登录状态操作 概述 作为纯后端开发码农&#xff0c;每次接口开发完的调试很重要&#xff0c;因此每次重复的手动获取登陆状态Token或者直接放行就太麻烦了。 APIFox提供了前置操作&#xff0c;可以很方便的自动获取登录状态&#xff0c;节省大量重复劳动时间。…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023