Javascript
概述
- 概念： 一门客户端脚本语言 * 运行在客户端浏览器中的。每一个浏览器都有JavaScript的解析引擎 * 脚本语言：不需要编译，直接就可以被浏览器解析执行了
- 功能： * 可以来增强用户和html页面的交互过程，可以来控制html元素，让页面有一些动态的效果，增强用户的体验。
-
JavaScript发展史：
1992年，Nombase公司，开发出第一门客户端脚本语言，专门用于表单的校验。命名为 ： C-- ，后来更名为：ScriptEase
1995年，Netscape(网景)公司，开发了一门客户端脚本语言：LiveScript。后来，请来SUN公司的专家，修改LiveScript，命名为 JavaScript
1996年，微软抄袭JavaScript开发出JScript语言
1997年，ECMA(欧洲计算机制造商协会)，制定出客户端脚本语言的标准：ECMAScript，就是统一了所有客户端脚本语言的编码方式。
JavaScript = ECMAScript + JavaScript自己特有的东西(BOM+DOM) ECMAScript：客户端脚本语言的标准
DOM（Document Object Model）：文档对象模型，操作元素。
BOM（Browser Object Model）：浏览器对象模型，操作浏览器。
基本语法：
与html结合方式
内部式： 定义<script>，标签体内容就是js代码。
行内式： 定义标签内。
外部式：将JS代码写到一个扩展名为.js的文件中，再将该文件导入到指定的HTML文件中。
内嵌式：将JS代码写在<script>标签中。<script>可以写在页面任意位置。
<script>可以定义在html页面的任何地方。但是定义的位置会影响执行顺序。
<script>可以定义多个。
- 注释
- 单行注释：//
- 多行注释：// 内容 //
- 数据类型：
- 基本数据类型：
- Undefined：值只有undefined，定义的变量未给初始值时，就是undefined。
- Null：值只有null，Undefined是Null派生出来的。ECMAScript将之列为等值。
- Number：任意数值
- Boolean：布尔值
- String：字符串
- 查看变量名：valueof()
- 基本数据类型：
- 变量
- 变量：一小块存储数据的内存空间
- Java是强类型语言，而JavaScript是弱类型语言
- 强类型：在变量开辟内存空间时，定义了空间，将来存储数据的数据类型。只能存储固定类型的数据。
- 弱类型：在变量开辟存储空间时，不定义空间为将来的存储数据类型，可以存放任意类型的数据。
- 运算符
- 算术运算符：+ - * / % ++ --
- 赋值运算符：= += -= *= /= %=
- 比较运算符：> >= <= < == !=
- 逻辑运算符：&& || ！
- 条件运算符：？
- var c = a > b ? 1 : 0（同Java）
-
分支结构
- 单分支：if
- 双分支：if{ }else{ }
- 多分支：if{ }else if{ }else{ }
- 等值多分支：switch( ){ case: break}
-
循环语句
- while
- do while
- for
- foreach（增强for循环）
-
JavaScript特殊语法
- 语句以 “ ; ” 结尾，如果一行只有一条语句则 “ ; ” 可以省略。
- 定义变量使用var 关键字，也可以不用
- var a：定义的局部变量
- a：定义的全局变量
-
数组
- 创建数组
- 创建有长度的数组
- 创建有初始值的数组
/* 数组的初始化 */ var arr = new Array(); /*有长度的数组*/ var arr1 = new Array(6); /*有初始值的数组*/ var arr2 = ["one", "two", "three"]; -
Date对象
- var date = new Date();
- 方法：
- toLocaleString()：返回当前date对象对应的时间本地字符串格式
- getTime():获取毫秒值。返回当前如期对象描述的时间到1970年1月1日零点的毫秒值差
- Math
- Math.方法名()
- 方法：
- random():返回 0 ~ 1 之间的随机数。 含0不含1
- ceil(x)：对数进行上舍入。
- floor(x)：对数进行下舍入。
- round(x)：把数四舍五入为最接近的整数。
JavaScript函数
-
有参函数语法：
function 函数名(){
函数体
}
-
无参函数语法：
function 函数名(形参1,形参2...){
函数体
}
-
有返回值的函数语法：
function 函数名(){
函数体;
return ...;
}
JavaScript事件及绑定
-
常用：
- onblur：元素失去焦点
- onchange：域的内容被改变
- onclick：当用户点击某个对象时调用的事件句柄
- onfocus：元素获得焦点
- onkeydown：某个键盘被按下
- onkeyup：某个键盘的按键被松开
- onmouseout：鼠标从某元素移开
- onmouseover：鼠标移到某元素之上
- onsubmit：确认按钮被点击
-
事件绑定
-
直接在标签上使用对应的属性
<input type="button" value="btn" onclick="show()" />
-
-
先找到要绑定事件的标签，再给它绑定事件
var btn = document.getElementById("btn"); btn.obclick = function(){ alert("你点我！！！") }
-
焦点事件（通常对输入框使用）
<input type="text" onfocus="getFocus()" onblur="getBlur()" />
-
鼠标事件
var text = document.getElementById("text"); text.onmouseout = function(){ alert("鼠标移开了"); } text.onmouseover = function(){ alert("鼠标移上了"); }
-
键盘事件
<input type="text" onkeydown="down()" onkeyup="up()" />
-
内容改变事件（通常对下拉列表使用）
<select name="city" id="city" onchange="Linkage()"> <option value="河南">河南</option> <option value="上海">上海</option> <option value="北京">北京</option> <option value="四川">四川</option> </select> 省
DOM查找元素
- 常用方法
- document.getElementById(“id”)，通过id属性的值查找指定的元素
- document.getElementsByName(“name”)，通过name属性的值查找指定的元素，因为name属性值可以重复，所以返回的是元素数组
- document.getElementsByClassName(“class”)，通过class属性的值查找指定的元素，因为class属性值可以重复，所以返回的是元素数组
- document.getElementsByTagName(“标签名”)，通过标签名查找指定的元素，因为标签名可以重复，所以返回的是元素数组
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JavaScript 表单选择器</title>
</head>
<body>
<div class="content" style="margin: auto;padding-left: 45%;padding-top: 15%;">
<form action="demo7.html" method="post" onsubmit="return validate()">
<p>username：<input type="text" id="username" /></p>
<p>password：<input type="text" id="password" /></p>
<p><input type="submit" id="submit" value="login" /></p>
</form>
<br>
<br>
<p><input type="checkbox" name="hobby" value="全选" id="selectAll" />全选</p>
<p><input type="checkbox" name="hobby" value="唱歌" />唱歌</p>
<p><input type="checkbox" name="hobby" value="跳舞" />跳舞</p>
<p><input type="checkbox" name="hobby" value="游泳" />游泳</p>
<p><input type="checkbox" name="hobby" value="阅读" />阅读</p>
<br>
<br>
<p id="text">冲冲</p>
<p><input type="text" id="have" value="" /></p>
<p><input type="button" id="change" value="修改" /></p>
</div>
</body>
<script type="text/javascript">
var submit = document.getElementById("submit");
var selectAll = document.getElementById("selectAll");
var change = document.getElementById("change");
selectAll.onclick = function(){
var hobbys = document.getElementsByName("hobby");
for(var i = 0; i < hobbys.length; i++){
hobbys[i].checked = this.checked;
}
}
function validate(){
var username = document.getElementById("username").value;
var password = document.getElementById("password").value;
if(username == null || username == ""){
alert("username is null")
return false;
}
if(password == null || password == ""){
alert("password is null");
return false;
}
return true;
}
change.onclick = function(){
var text = document.getElementById("text");
console.log(text.innerText);
text.innerText = "修改后：" + document.getElementById("have").value;
}
</script>
</html>
DOM修改元素
- 常用方法
- innerHTML
- innerText
- 区别：
- 取内容时：innerText只能获取纯文本;innerHTML既可以获取文本，也可以获取标签
- 设置内容时：innerText只能设置纯文本，哪怕设置内容中有标签，也会以纯文本的形式放进去。innerHTML既能设置文本，也能放标签，放进去的标签会被浏览器解析。
BOM
2020-08-23_102700.jpg
- frames：框架对象
- location：地址对象
- document：文档对象
- history：历史对象
- navigator：浏览器信息对象
- screen：屏幕对象
Window定时器
-
周期定时器
var timeid = window.setInterval(function,time)。每隔多少时间执行某函数
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>轮播图</title> <style type="text/css"> #image{ display: none; } </style> </head> <body> <img src="../static/images/A%20(2).jpg" width="400px" height="400px" id="images" > <img src="../static/images/A%20(3).jpg" width="400px" height="400px" id="image" > </body> <script type="text/javascript"> var i = 1; function changeImg(){ var img = document.getElementById("images"); img.src = "../static/images/A%20(" + i + ").jpg"; if(i < 5){ i++; }else{ i = 1; } } window.setInterval(changeImg, 1000); function show(){ var img1 = document.getElementById("image"); img1.style.display = "inline-block"; } // 延迟加载 window.setTimeout(show, 1000); </script> </html>
-
超时定时器
var timeid = window.setTimeout(function,time);多少时间后执行某函数。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>显示系统时间</title> </head> <style type="text/css"> #time{ width: 5rem; height: 2rem; background-color: #000000; color: #ffffff; font-size: larger; } </style> <body> <div id="time"></div> <p><input type="button" id="btn" value="停止刷新" /> <input type="button" id="btn0" value="continue" /></p> </body> <script type="text/javascript"> window.onload = showTime(); var timed = window.setInterval(showTime, 1000); function showTime(){ var today = new Date(); var hour = today.getHours(); var minute = today.getMinutes(); var sencond = today.getSeconds(); var time = document.getElementById("time"); time.innerText = hour + ":" + minute + ":" + sencond; } // 清除周期定时器 var btn = document.getElementById("btn"); btn.onclick = function(){ window.clearInterval(timed); } // 设置周期定时器 document.getElementById("btn0").onclick = function(){ timed = window.setInterval(showTime, 1000); } </script> </html>
window弹窗
警告窗
确认窗
-
提示窗
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>window弹窗</title> </head> <body> <p><input type="button" id="btn1" value="alert()" /></p> <p><input type="button" id="btn2" value="confirm()" /></p> <p><input type="button" id="btn3" value="prompt()" /></p> </body> <script type="text/javascript"> var btn1 = document.getElementById("btn1"); var btn2 = document.getElementById("btn2"); var btn3 = document.getElementById("btn3"); btn1.onclick = function(){ window.alert("警告 warning"); } btn2.onclick = function(){ var flag = window.confirm("你确定要删除吗？"); if(flag){ alert("已删除"); }else{ alert("您取消了删除。") } } btn3.onclick = function(){ var username = window.prompt("请输入你的姓名：", ""); if(username != null){ alert(username + "，欢迎你！") } } </script> </html>
window其他对象
-
location对象
location.href：返回当前页面的URL
location.hostname：返回web主机域名
location.pathname：返回当前页面的路径或文件名
location.protocol：返回使用的web协议
location.port：返回web主机的端口
-
history对象
history.back()
history.forward()
-
screen对象
screen.availWidth()：可用屏幕宽度
screen.availHeight()：可用屏幕高度
-
Document对象
document.body.offsetWidth：网页可见区域宽度（包括连线的宽）
document.body.offsetHeight：网页可见区域高度（包括连线的高）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>动的小球</title>
<style type="text/css">
body {
padding: 0;
margin: 0;
background-image: linear-gradient(to right, #ff8177 0%, #ff867a 0%, #ff8c7f 21%, #f99185 52%, #cf556c 78%, #b12a5b 100%);
overflow: hidden;
height: 100%;
}
html{
height: 100%;
}
#ball {
width: 100px;
height: 100px;
/* 玛瑙灰 */
background-color: #cfccc9;
border-radius: 50%;
}
</style>
</head>
<body>
<div id="ball"></div>
</body>
<script type="text/javascript">
window.onload = function() {
// 获取网页可见区域的宽度
var width = document.body.offsetWidth;
var height = document.body.offsetHeight;
alert(height);
var ball = document.getElementById("ball");
var pinball1 = 0;
var pinball2 = 0;
turn_right();
turn_bottom();
function turn_left() {
ball.style.marginLeft = pinball1 + "px";
pinball1--;
if (pinball1 <= 0) {
window.setTimeout(turn_right, 5);
} else {
window.setTimeout(turn_left, 5);
}
}
function turn_right() {
ball.style.marginLeft = pinball1 + "px";
pinball1++;
if (pinball1 >= width - 100) {
window.setTimeout(turn_left, 5);
} else {
window.setTimeout(turn_right, 5);
}
}
function turn_top() {
ball.style.marginTop = pinball2 + "px";
pinball2--;
if (pinball2 <= 0) {
window.setTimeout(turn_bottom, 5);
} else {
window.setTimeout(turn_top, 5);
}
}
function turn_bottom() {
ball.style.marginTop = pinball2 + "px";
pinball2++;
if (pinball2 >= height - 100) {
window.setTimeout(turn_top, 5);
} else {
window.setTimeout(turn_bottom, 5);
}
}
}
</script>
</html>
