目录
- 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存在的问题：
- 操作比较繁琐，元素获取和属性设置比较麻烦。
- 不同厂商的浏览器对于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">
密 码：<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=" 百度一下 ">
<input type="button" onclick="mycli(2)" value=" 搜狗 ">
<input type="button" onclick="mycli(3)" value=" 360搜索 ">
</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 总结
前端三剑客：
- html:构建静态页面。
- css:美化页面。
- js:实现动态效果和交互。
