当前位置：首页 > news >正文

Web JavaScript

news 来源：原创 2024/5/16 7:17:33

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{// 内嵌 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>