JavaScript概述
什么是javascript: JavaScript一种直译式脚本语言，
什么是脚本语言?
java源代码 ----> 编译成.class文件 -----> java虚拟机中才能执行
脚本语言: 源码 -------- > 解释执行
js由我们的浏览器来解释执行
HTML: 决定了页面的框架
CSS: 用来美化我们的页面
JS: 提供用户的交互的
JS的组成:
ECMAScript : 核心部分 ,定义js的语法规范
DOM: document Object Model 文档对象模型 , 主要是用来管理页面的
BOM : Browser Object Model 浏览器对象模型, 前进,后退,页面刷新, 地址栏, 历史记录, 屏幕宽高
JS的语法:
变量弱类型: var i = true
区分大小写
语句结束之后的分号 ,可以有,也可以没有
写在script标签
JS的数据类型:
-
基本类型
-
string
-
number
-
boolean
-
undefine
-
null
-
-
引用类型
-
对象, 内置对象
-
-
类型转换
-
js内部自动转换
-
JS的运算符和语句:
-
运算符和java 一样
-
"===" 全等号: 值和类型都必须相等
-
== 值相等就可以了
-
-
语句和java 一样
JS的输出
-
alert() 直接弹框
-
document.write() 向页面输出
-
console.log() 向控制台输出
-
innerHTML: 向页面输出
-
获取页面元素: document.getElementById("id的名称");
JS声明变量:
var 变量的名称 = 变量的值
JS声明函数:
var 函数的名称 = function(){
}
function 函数的名称(){
}
<!--
1. 确定事件 点击事件
2. 通常事件都会出发一个函数
3. 函数里面通常都会去操作页面元素,做一些交互动作
-->
1 <script> 2 function dianwo(){ 3 //alert("我被点击了"); 4 //1.首先要获得这个div 5 var div = document.getElementById("div1") 6 div.innerHTML = "<font color='red'>内容被替换掉了</font>"; 7 // div.innerText = "<font color='red'>内容被替换掉了</font>"; 8 } 9 </script>
1 <body> 2 <input type="button" value="点我,修改DIV中的内容" onclick="dianwo()" /> 3 4 <div id="div1"> 5 这里的内容一会要被替换掉 6 </div> 7 </body>
简单的页面校验：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 <!-- 7 1.校验用户名, 长度不能小于6位 8 1.确定事件: 提交事件 onsubmit 9 2.事件要触发函数 checkForm() 10 3. 函数中要去做一些校验 11 --> 12 <script> 13 function checkForm(){ 14 15 //获取用户输入的内容 16 var input1 = document.getElementById("username"); 17 // alert(input1.value); 18 var uValue = input1.value; 19 if(input1.value.length >= 6){ 20 21 }else{ 22 alert("对不起,用户名太短啦!") 23 return false; 24 } 25 26 //邮箱的校验 27 //获取用户输入的邮箱的值 28 var email = document.getElementById("email") 29 var uEmail = email.value; 30 if(/^[a-z0-9]+([._\-]*[a-z0-9])*@([a-z0-9]+[-a-z0-9]*[a-z0-9]+.){1,63}[a-z0-9]+$/.test(uEmail)){ 31 alert("校验成功"); 32 }else{ 33 alert("校验失败") 34 return false; 35 } 36 37 return true;; 38 } 39 </script> 40 41 </head> 42 <body> 43 <form action="../01-网站首页的优化/网站首页.html" onsubmit="return checkForm()" > 44 用户名:<input type="text" id="username" /><br /> 45 密码:<input type="password" id="password" /><br /> 46 邮箱:<input type="text" id="email" /><br /> 47 48 <input type="submit" value="提交" /> 49 </form> 50 </body> 51 </html>
图片轮播：
1 <!-- 2 1. 确定事件: 文档加载完成的事件 onload 3 2. 事件要触发 : init() 4 3. 函数里面要做一些事情:(通常会去操作元素,提供交互) 5 1. 开启定时器: 执行切换图片的函数 changeImg() 6 4. changeImg() 7 1. 获得要切换图片的那个元素 8 --> 9 <script> 10 var index = 0; 11 12 function changeImg(){ 13 14 //1. 获得要切换图片的那个元素 15 var img = document.getElementById("img1"); 16 17 //计算出当前要切换到第几张图片 18 var curIndex = index%3 + 1; //0,1,2 19 img.src="../img/"+curIndex+".jpg"; //1,2,3 20 //每切换完,索引加1 21 index = index + 1; 22 } 23 24 function init(){ 25 26 setInterval("changeImg()",1000); 27 } 28 29 </script>
1 <body onload="init()"> 2 <img src="../img/1.jpg" width="100%" id="img1"/> 3 </body>
定时弹出广告：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 <!-- 7 1. 确定事件: 页面加载完成的事件 onload 8 2. 事件要触发函数: init() 9 3. init函数里面做一件事: 10 1. 启动一个定时器 : setTimeout() 11 2. 显示一个广告 12 1. 再去开启一个定时5秒钟之后,关闭广告 13 --> 14 15 <script> 16 17 function init(){ 18 setTimeout("showAD()",3000); 19 } 20 21 function showAD(){ 22 //首先要获取要操作的img 23 var img = document.getElementById("img1"); 24 //显示广告 25 img.style.display = "block"; 26 27 //再开启定时器,关闭广告 28 setTimeout("hideAD()",3000); 29 } 30 31 function hideAD(){ 32 //首先要获取要操作的img 33 var img = document.getElementById("img1"); 34 //隐藏广告 35 img.style.display = "none"; 36 } 37 </script> 38 </head> 39 <body onload="init()"> 40 <img id="img1" src="../img/f001a62f-a49d-4a4d-b56f-2b6908a0002c_g.jpg" width="100%" style="display: none;"/> 41 </body> 42 </html>
表单的页面校验：
regutils.js在day03-js中
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 <!-- 7 引入外部的js文件 8 --> 9 <script type="text/javascript" src="../js/regutils.js" ></script> 10 <script> 11 /* 12 1. 确定事件 : onfocus 13 2. 事件要驱动函数 14 3. 函数要干一些事情: 修改span的内容 15 */ 16 function showTips(spanID,msg){ 17 //首先要获得要操作元素 span 18 var span = document.getElementById(spanID); 19 span.innerHTML = msg; 20 } 21 /* 22 校验用户名: 23 1.事件: onblur 失去焦点 24 2.函数: checkUsername() 25 3.函数去显示校验结果 26 */ 27 function checkUsername(){ 28 //获取用户输入的内容 29 var uValue = document.getElementById("username").value; 30 //对输入的内容进行校验 31 //获得要显示结果的span 32 var span = document.getElementById("span_username"); 33 if(uValue.length < 6){ 34 //显示校验结果 35 span.innerHTML = "<font color='red' size='2'>对不起,太短</font>"; 36 return false; 37 }else{ 38 span.innerHTML = "<font color='red' size='2'>恭喜您,可用</font>"; 39 return true; 40 } 41 } 42 43 /* 44 密码校验 45 */ 46 function checkPassword(){ 47 //获取密码输入 48 var uPass = document.getElementById("password").value; 49 50 var span = document.getElementById("span_password"); 51 52 //对密码输入进行校验 53 if(uPass.length < 6){ 54 span.innerHTML = "<font color='red' size='2'>对不起,太短</font>"; 55 return false; 56 }else{ 57 span.innerHTML = "<font color='red' size='2'>恭喜您,够用</font>"; 58 return true; 59 } 60 } 61 62 /* 63 确认密码校验 64 * */ 65 function checkRePassword(){ 66 //获取密码输入 67 var uPass = document.getElementById("password").value; 68 69 //获取确认密码输入 70 var uRePass = document.getElementById("repassword").value; 71 72 73 var span = document.getElementById("span_repassword"); 74 75 //对密码输入进行校验 76 if(uPass != uRePass){ 77 span.innerHTML = "<font color='red' size='2'>对不起,两次密码不一致</font>"; 78 return false; 79 }else{ 80 span.innerHTML = ""; 81 return true; 82 } 83 } 84 85 /* 86 校验邮箱 87 * */ 88 function checkMail(){ 89 var umail = document.getElementById("email").value; 90 91 var flag = checkEmail(umail); 92 93 var span = document.getElementById("span_email"); 94 //对邮箱输入进行校验 95 if(flag){ 96 span.innerHTML = "<font color='red' size='2'>恭喜您,可用</font>"; 97 return true; 98 }else{ 99 span.innerHTML = "<font color='red' size='2'>对不起,邮箱格式貌似有问题</font>"; 100 return false; 101 } 102 } 103 104 function checkForm(){ 105 var flag = checkUsername() && checkPassword() && checkRePassword() && checkMail(); 106 return flag; 107 } 108 109 </script> 110 </head> 111 <body> 112 <form action="../01-自动轮播图片/图片自动轮播.html" onsubmit="return checkForm()" > 113 用户名:<input type="text" id="username" onfocus="showTips('span_username','用户名长度不能小于6')" onblur="checkUsername()" onkeyup="checkUsername()" /><span id="span_username"></span><br /> 114 密码:<input type="password" id="password" onfocus="showTips('span_password','密码长度不能小于6')" onblur="checkPassword()" onkeyup="checkPassword()"/><span id="span_password"></span><br /> 115 确认密码:<input type="password" id="repassword" onfocus="showTips('span_repassword','两次密码必须一致')" onblur="checkRePassword()" onkeyup="checkRePassword()" /><span id="span_repassword"></span><br /> 116 邮箱:<input type="text" id="email" onfocus="showTips('span_email','邮箱格式必须正确')" onblur="checkMail()" /><span id="span_email"></span><br /> 117 手机号:<input type="text" id="text" /><br /> 118 119 <input type="submit" value="提交" /> 120 </form> 121 </body> 122 </html>
表格的隔行换色：
1 <script > 2 function init(){ 3 //得到表格 4 var tab = document.getElementById("tab"); 5 //得到表格中每一行 6 var rows = tab.rows; 7 //便利所有的行,然后根据奇数 偶数 8 for(var i=1; i < rows.length; i++){ 9 var row = rows[i]; //得到其中的某一行 10 if(i%2==0){ 11 row.bgColor = "yellow"; 12 }else{ 13 row.bgColor = "red" 14 } 15 } 16 } 17 </script>
全选和全不选：
1 /* 2 全选和全不选步骤分析: 3 1.确定事件: onclick 单机事件 4 2.事件触发函数: checkAll() 5 3.函数要去做一些事情: 6 获得当前第一个checkbox的状态 7 获得所有分类项的checkbox 8 修改每一个checkbox的状态 9 */ 10 11 function checkAll(){ 12 // 获得当前第一个checkbox的状态 13 var check1 = document.getElementById("check1"); 14 //得到当前checked状态 15 var checked = check1.checked; 16 // 获得所有分类项的checkbox 17 // var checks = document.getElementsByTagName("input"); 18 var checks = document.getElementsByName("checkone"); 19 // alert(checks.length); 20 for(var i = 0; i < checks.length; i++){ 21 // 修改每一个checkbox的状态 22 var checkone = checks[i]; 23 checkone.checked = checked; 24 } 25 }
DOM操作：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 <script> 7 8 /*动态添加 : <p>文本</p> */ 9 function dianwo(){ 10 var div = document.getElementById("div1"); 11 //创建元素节点 12 var p = document.createElement("p"); // <p></p> 13 //创建文本节点 14 var textNode = document.createTextNode("文本内容");// 文本内容 15 16 //将p 和文本内容关联起来 17 p.appendChild(textNode); // <p>文本</p> 18 19 //将P添加到目标div中 20 div.appendChild(p); 21 } 22 23 </script> 24 </head> 25 <body> 26 <input type="button" value="点我,添加P" onclick="dianwo()" /> 27 <!--一会动态的往这个Div中添加节点--> 28 <div id="div1"> 29 30 </div> 31 </body> 32 </html>
省市联动：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 <script> 7 /* 8 准备工作 : 准备数据 9 */ 10 var provinces = [ 11 ["深圳市","东莞市","惠州市","广州市"], 12 ["长沙市","岳阳市","株洲市","湘潭市"], 13 ["厦门市","福州市","漳州市","泉州市"] 14 ]; 15 /* 16 1. 确定事件: onchange 17 2. 函数: selectProvince() 18 3. 函数里面要搞事情了 19 得到当前操作元素 20 得到当前选中的是那一个省份 21 从数组中取出对应的城市信息 22 23 动态创建城市元素节点 24 添加到城市select中 25 26 */ 27 function selectProvince(){ 28 var province = document.getElementById("province"); 29 //得到当前选中的是哪个省份 30 //alert(province.value); 31 var value = province.value; 32 //从数组中取出对应的城市信息 33 var cities = provinces[value]; 34 var citySelect = document.getElementById("city"); 35 //清空select中的option 36 citySelect.options.length = 0; 37 38 for (var i=0; i < cities.length; i++) { 39 // alert(cities[i]); 40 var cityText = cities[i]; 41 //动态创建城市元素节点 <option>东莞市</option> 42 43 //创建option节点 44 var option1 = document.createElement("option"); // <option></option> 45 //创建城市文本节点 46 var textNode = document.createTextNode(cityText) ;// 东莞市 47 48 //将option节点和文本内容关联起来 49 option1.appendChild(textNode); //<option>东莞市</option> 50 51 // 添加到城市select中 52 citySelect.appendChild(option1); 53 } 54 55 } 56 57 </script> 58 </head> 59 <body> 60 <!--选择省份--> 61 <select onchange="selectProvince()" id="province"> 62 <option value="-1">--请选择--</option> 63 <option value="0">广东省</option> 64 <option value="1">湖南省</option> 65 <option value="2">福建省</option> 66 </select> 67 <!--选择城市--> 68 <select id="city"></select> 69 </body> 70 </html>