javascript
3. JavaScript
基本语法
与html结合方式
1. 内部JS：
* 定义<script>，标签体内容就是js代码
2. 外部JS：
* 定义<script>，通过src属性引入外部的js文件
* 注意：
如果我们把 JavaScript 代码放入函数中，就可以在事件发生时调用该函数。
1. <script>可以定义在html页面的任何地方。但是定义的位置会影响执行顺序。
2. <script>可以定义多个。
2. 注释
1. 单行注释：//注释内容
2. 多行注释：/*注释内容*/
3. 数据类型：
在 JavaScript 中有 6 种不同的数据类型：
string 字符串。 字符串 "abc" "a" 'abc'
number 数字。 整数/小数/NaN(not a number 一个不是数字的数字类型)
boolean true和false
object
function
symbol
3 种对象类型：
Object
Date
Array
2 个不包含任何值的数据类型：
null 一个对象为空的占位符
undefined 未定义。如果一个变量没有给初始化值，则会被默认赋值为undefined
# null 和 undefined 的值相等，但类型不等：
constructor 属性返回所有 JavaScript 变量的构造函数。
你可以使用 constructor 属性来查看对象是否为数组 (包含字符串 "Array"):
function isArray(myArray) {
return myArray.constructor.toString().indexOf("Array") > -1;
}
4. 变量
* 语法：
* var 变量名 = 初始化值;
* typeof运算符：获取变量的类型。
* 注：null运算后得到的是object
5. 运算符
1. 一元运算符：只有一个运算数的运算符
++，-- ， +(正号)
* ++ --: 自增(自减)
* ++(--) 在前，先自增(自减)，再运算
* ++(--) 在后，先运算，再自增(自减)
* +(-)：正负号
### 注意：在JS中，如果运算数不是运算符所要求的类型，那么js引擎会自动的将运算数进行类型转换
* 其他类型转number：
* string转number：按照字面值转换。如果字面值不是数字，则转为NaN（不是数字的数字）
* boolean转number：true转为1，false转为0
2. 算数运算符
+ - * / % ...
3. 赋值运算符
= += -+....
4. 比较运算符
> < >= <= == ===(全等于)
* 比较方式
1. 类型相同：直接比较
* 字符串：按照字典顺序比较。按位逐一比较，直到得出大小为止。
2. 类型不同：先进行类型转换，再比较
* ===：全等于。在比较之前，先判断类型，如果类型不一样，则直接返回false
5. 逻辑运算符
&& || !
* 其他类型转boolean：
1. number：0或NaN为假，其他为真
2. string：除了空字符串("")，其他都是true
3. null&undefined:都是false
4. 对象：所有对象都为true
6. 三元运算符
? : 表达式
7. 位运算符
& |
~ 取反
^ 异或
6. 流程控制语句：
1. if...else...
2. switch:
* 在java中，switch语句可以接受的数据类型： byte int shor char,枚举(1.5) ,String(1.7)
* switch(变量):
case 值:
* 在JS中,switch语句可以接受任意的原始数据类型
3. while
4. do...while
5. for
6. for in
7. JS特殊语法：
1. 语句以;结尾，如果一行只有一条语句则 ;可以省略 (不建议)
2. 变量的定义使用var关键字，也可以不使用
* 用： 定义的变量是局部变量
* 不用：定义的变量是全局变量(不建议)
3. with语句为代码块创建默认对象：
with(默认对象){
代码块;
}
json
定义：
var json_obj = {
"属性":值,
"属性":值,
"属性":值
}
值可以是任何类型，数组，包括json对象
访问:
1. json_obj.属性
2. json_obj["属性"]
数据交换：
string to json_obj:
window.eval("var jo ="+json_str);
var obj = JSON.parse(text);
json_obj to string:
var json_str = JSON.stringify(json_obj);
JavaScript 表单验证
HTML 表单验证可以通过 JavaScript 来完成。
<form name="myForm" action="demo_form.php" onsubmit="return validateForm()" method="post">
名字: <input type="text" name="fname">
<input type="submit" value="提交">
</form>
/* onsubmit="return fun()"
提交时调用fun();返回false阻止数据提交
*/
常用对象、函数
String
https://www.runoob.com/jsref/jsref-obj-string.html
字符串属性和方法
属性:
length
prototype
constructor
方法:
charAt()
charCodeAt()
concat()
fromCharCode()
# indexOf()
lastIndexOf()
match()
replace()
search()
slice()
split()
substr()
# substring()
# toLowerCase()
toUpperCase()
valueOf()
Date
https://www.runoob.com/jsref/jsref-obj-date.html
# getDate() 从 Date 对象返回一个月中的某一天 (1 ~ 31)。
# getDay() 从 Date 对象返回一周中的某一天 (0 ~ 6)。
# getFullYear() 从 Date 对象以四位数字返回年份。
# getHours() 返回 Date 对象的小时 (0 ~ 23)。
getMilliseconds() 返回 Date 对象的毫秒(0 ~ 999)。
# getMinutes() 返回 Date 对象的分钟 (0 ~ 59)。
# getMonth() 从 Date 对象返回月份 (0 ~ 11)。
getSeconds() 返回 Date 对象的秒数 (0 ~ 59)。
# getTime() 返回 1970 年 1 月 1 日至今的毫秒数。
setDate() 设置 Date 对象中月的某一天 (1 ~ 31)。
setFullYear() 设置 Date 对象中的年份（四位数字）。
setHours() 设置 Date 对象中的小时 (0 ~ 23)。
setMilliseconds() 设置 Date 对象中的毫秒 (0 ~ 999)。
setMinutes() 设置 Date 对象中的分钟 (0 ~ 59)。
setMonth() 设置 Date 对象中月份 (0 ~ 11)。
setSeconds() 设置 Date 对象中的秒钟 (0 ~ 59)。
setTime() setTime() 方法以毫秒设置 Date 对象。
toDateString() 把 Date 对象的日期部分转换为字符串。
toISOString() 使用 ISO 标准返回字符串的日期格式。
toJSON() 以 JSON 数据格式返回日期字符串。
toLocaleDateString() 根据本地时间格式，把 Date 对象的日期部分转换为字符串。
toLocaleTimeString() 根据本地时间格式，把 Date 对象的时间部分转换为字符串。
# toLocaleString() 根据本地时间格式，把 Date 对象转换为字符串。
toString() 把 Date 对象转换为字符串。
toTimeString() 把 Date 对象的时间部分转换为字符串。
toUTCString() 根据世界时，把 Date 对象转换为字符串。实例：
Math
https://www.runoob.com/jsref/jsref-obj-math.html
Math 对象属性
E 返回算术常量 e，即自然对数的底数（约等于2.718）。
LN2 返回 2 的自然对数（约等于0.693）。
LN10 返回 10 的自然对数（约等于2.302）。
LOG2E 返回以 2 为底的 e 的对数（约等于 1.4426950408889634）。
LOG10E 返回以 10 为底的 e 的对数（约等于0.434）。
PI 返回圆周率（约等于3.14159）。
SQRT1_2 返回 2 的平方根的倒数（约等于 0.707）。
SQRT2 返回 2 的平方根（约等于 1.414）。
Math 对象方法
abs(x) 返回 x 的绝对值。
acos(x) 返回 x 的反余弦值。
asin(x) 返回 x 的反正弦值。
atan(x) 以介于 -PI/2 与 PI/2 弧度之间的数值来返回 x 的反正切值。
atan2(y,x) 返回从 x 轴到点 (x,y) 的角度（介于 -PI/2 与 PI/2 弧度之间）。
ceil(x) 对数进行上舍入。
cos(x) 返回数的余弦。
exp(x) 返回 Ex 的指数。
floor(x) 对 x 进行下舍入。
log(x) 返回数的自然对数（底为e）。
max(x,y,z,...,n) 返回 x,y,z,...,n 中的最高值。
min(x,y,z,...,n) 返回 x,y,z,...,n中的最低值。
pow(x,y) 返回 x 的 y 次幂。
random() 返回 0 ~ 1 之间的随机数。
round(x) 四舍五入。
sin(x) 返回数的正弦。
sqrt(x) 返回数的平方根。
tan(x) 返回角的正切。
Array
https://www.runoob.com/jsref/jsref-obj-array.html
创建Array:
var arr= [];
var arr2=new Array();
var arr2=new Array(10);//长度为10
var arr2=new Array(1,2,3,4,5,6);//数组中有1，2，3，4，5，6元素
属性 描述
constructor 返回创建数组对象的原型函数。
length 设置或返回数组元素的个数。
prototype 允许你向数组对象添加属性或方法。
Array 对象方法
方法 描述
concat() 连接两个或更多的数组，并返回结果。
copyWithin() 从数组的指定位置拷贝元素到数组的另一个指定位置中。
fill() 使用一个固定值来填充数组。
includes() 判断一个数组是否包含一个指定的值。
indexOf() 搜索数组中的元素，并返回它所在的位置。
isArray() 判断对象是否为数组。
join(str) 把数组的所有元素放入一个字符串。以str连接
lastIndexOf() 搜索数组中的元素，并返回它最后出现的位置。
splice(n,n) 删除数组m位置n个元素
pop() 删除数组的最后一个元素并返回删除的元素。
push() 向数组的末尾添加一个或更多元素，并返回新的长度。
reverse() 反转数组的元素顺序。
sort() 对数组的元素进行排序。
toString() 把数组转换为字符串，并返回结果。
window
https://www.runoob.com/jsref/obj-window.html
属性 描述
closed 返回窗口是否已被关闭。
history 对 History 对象的只读引用。请参数 History 对象。
innerHeight 返回窗口的文档显示区的高度。
innerWidth 返回窗口的文档显示区的宽度。
localStorage 在浏览器中存储 key/value 对。没有过期时间。
length 设置或返回窗口中的框架数量。
location 用于窗口或框架的 Location 对象。请参阅 Location 对象。
name 设置或返回窗口的名称。
navigator 对 Navigator 对象的只读引用。请参数 Navigator 对象。
opener 返回对创建此窗口的窗口的引用。
outerHeight 返回窗口的外部高度，包含工具条与滚动条。
outerWidth 返回窗口的外部宽度，包含工具条与滚动条。
pageXOffset 设置或返回当前页面相对于窗口显示区左上角的 X 位置。
pageYOffset 设置或返回当前页面相对于窗口显示区左上角的 Y 位置。
parent 返回父窗口。
screen 对 Screen 对象的只读引用。请参数 Screen 对象。
screenLeft 返回相对于屏幕窗口的x坐标
screenTop 返回相对于屏幕窗口的y坐标
screenX 返回相对于屏幕窗口的x坐标
sessionStorage 在浏览器中存储 key/value 对。 在关闭窗口或标签页之后将会删除这些数据。
screenY 返回相对于屏幕窗口的y坐标
self 返回对当前窗口的引用。等价于 Window 属性。
status 设置窗口状态栏的文本。
top 返回最顶层的父窗口。
Window 对象方法
方法 描述
alert() 显示带有一段消息和一个确认按钮的警告框。
atob() 解码一个 base-64 编码的字符串。
btoa() 创建一个 base-64 编码的字符串。
blur() 把键盘焦点从顶层窗口移开。
# clearInterval() 取消由 setInterval() 设置的 timeout。
clearTimeout() 取消由 setTimeout() 方法设置的 timeout。
close() 关闭浏览器窗口。
# open(url , target) 打开一个新窗口。target值：_blank：新窗口(默认)，_self：当前窗口
confirm() 显示带有一段消息以及确认按钮和取消按钮的对话框。
createPopup() 创建一个 pop-up 窗口。
# eval() 执行字符串形式的JavaScript代码；
focus() 把键盘焦点给予一个窗口。
getSelection() 返回一个 Selection 对象，表示用户选择的文本范围或光标的当前位置。
getComputedStyle() 获取指定元素的 CSS 样式。
matchMedia() 该方法用来检查 media query 语句，它返回一个 MediaQueryList对象。
moveBy() 可相对窗口的当前坐标把它移动指定的像素。
moveTo() 把窗口的左上角移动到一个指定的坐标。
open() 打开一个新的浏览器窗口或查找一个已命名的窗口。
print() 打印当前窗口的内容。
prompt() 显示可提示用户输入的对话框。
resizeBy() 按照指定的像素调整窗口的大小。
resizeTo() 把窗口的大小调整到指定的宽度和高度。
scroll() 已废弃。 该方法已经使用了 scrollTo() 方法来替代。
scrollBy() 按照指定的像素值来滚动内容。
scrollTo() 把内容滚动到指定的坐标。
# setInterval() 按照指定的周期（以毫秒计）来调用函数或计算表达式。
setTimeout() 在指定的毫秒数后调用函数或计算表达式。
stop() 停止页面载入。
postMessage() 安全地实现跨源通信。
JavaScript 可以通过不同的方式来输出数据：
使用 window.alert() 弹出警告框。
使用 document.write() 方法将内容写到 HTML 文档中。
使用 innerHTML 写入到 HTML 元素。
使用 console.log() 写入到浏览器的控制台。
document.getElementById("demo") 是使用 id 属性来查找 HTML 元素的 JavaScript 代码 。
innerHTML = "段落已修改。" 是用于修改元素的 HTML 内容(innerHTML)的 JavaScript 代码。
var obj = JSON.parse(json_str) 用于将一个 JSON 字符串转换为 JavaScript 对象。
var json_str JSON.stringify(obj) 用于将 JavaScript 值转换为 JSON 字符串。
对话框
//警告框 一个确定按钮
alert(msg);
//确认框 确定:true,取消:false，
confirm(msg);
//输入框 确认;返回输入信息,取消:null;
prompt('提示信息',默认值);
HTML DOM
查找html
通过 id 查找 HTML 元素
var x=document.getElementById("intro");
通过标签名查找 HTML 元素
var y=x.getElementsByTagName("p");
通过类名找到 HTML 元素
var x=document.getElementsByClassName("intro");
通过 html name属性 查找html元素 可以获得一组name相同的html元素；
var x = document.getElementsByName(nameStr);
改变html
改变 HTML 输出流: document.write(html_str);
document.write(Date());
改变 HTML 内容: document.getElementById(id).innerHTML=新的HTML内容
document.getElementById("p1").innerHTML="新文本!";
改变 HTML 属性: document.getElementById(id).属性=新属性值
<img id="image" src="smiley.gif">
document.getElementById("image").src="landscape.jpg";
改变html样式: document.getElementById(id).style.属性=新样式
document.getElementById("p2").style.color="blue";
常见的HTML事件
下面是一些常见的HTML事件的列表:
| 事件 | 描述 |
|---|---|
| onchange | HTML 元素改变 |
| blur focus | 失去焦点 获得焦点 |
| onmouseover onmouseout | 鼠标指针移动到、移开指定的元素上时发生 |
| onmousedown、onmouseup 以及 onclick | 点击鼠标按钮 释放鼠标按钮 完成鼠标点击时 |
| onkeydown | 用户按下键盘按键 |
| onload 和 onunload | 在用户进入或离开页面时被触发。 |
| onsubmit onreset | 表单提交 重置时触发 |
<!-- 事件注册1 -->
<!--onmouseover onmouseout测试-->
<div onmouseover="mOver(this)" onmouseout="mOut(this)" style="background-color:#D94A38;width:120px;height:20px;">Mouse Over Me</div>
<script>
function mOver(obj){
obj.innerHTML="mose over on me";
}
function mOut(obj){
obj.innerHTML="Mouse Over Me";
}
</script>
<!-- 事件注册2 -->
<input type="button" id="btn">btn</input>
<scrip>
function fun(){
}
document.getElementById("btn").onclick = fun;
//可以使用匿名函数
document.getElementById("btn").onclick = function (){};
</scrip>
<!-- 事件注册3 -->
addEventListener() 方法用于向指定元素添加事件句柄。添加的事件句柄不会覆盖已存在的事件句柄。
element.addEventListener(event, function, useCapture*);
element.removeEventListener("mousemove", myFunction);
第一个参数是事件的类型 (如 "click" 或 "mousedown").
第二个参数是事件触发后调用的函数。
第三个参数是个布尔值用于描述事件是冒泡还是捕获。该参数是可选的。默认值为 false, 即冒泡传递，
在冒泡中，内部元素的事件会先被触发；当值为 true 时, 事件使用捕获传递。
使用示例：
document.getElementById("myDiv").addEventListener("mouseover", myFunction);
注册事件一般使用
<scrip>
window.onload=function(){
document.getElementById("btn").onclick = function (){
//鼠标点滴事件
};
}
</scrip>
<input type="button" id="btn">btn</input>
手动触发事件
元素.事件();
document.getElementById("text").blur();//手动让文本框失去焦点
创建新的 HTML 元素 (节点) - appendChild()
要创建新的 HTML 元素 (节点)需要先创建一个元素，然后在已存在的元素中添加它。
<div id="div1">
<p id="p1">这是一个段落。</p>
<p id="p2">这是另外一个段落。</p>
</div>
<script>
//创建 <p> 元素:
var new_child = document.createElement("p");
//为 <p> 元素创建一个新的文本节点：
var node = document.createTextNode("这是一个新的段落。");
//将文本节点添加到 <p> 元素中：
new_child.appendChild(node);
//查找已存在的元素
var parent = document.getElementById("div1");
//最后，将<p>元素添加到一个已存在的元素中
parent.appendChild(new_child);
</script>
以上的实例我们使用了 appendChild() 方法，它用于添加新元素到尾部。
如果我们需要将新元素添加到特殊，可以使用 insertBefore() 方法:
<div id="div1">
<p id="p1">这是一个段落。</p>
<p id="p2">这是另外一个段落。</p>
</div>
<script>
var new_child = document.createElement("p");
var node = document.createTextNode("这是一个新的段落。");
para.appendChild(node);
var parent = document.getElementById("div1");
var child_p2 = document.getElementById("p2");
parent.insertBefore(new_child, child_p2);//将new_child添加到child_p2之前
</script>
移除已存在的元素
parent.removeChild(child);
替换 HTML 元素
parent.replaceChild(new_child, child);//在parent容器中用new_child取代child
案例
键盘按下——捕获回车键
<input type="text" id="tx"/>
<script>
window.onload=function(){
document.getElementById("tx").onkeydown=function(e){
//console.log(e.keyCode) 可以测试
if(e.keyCode == 13){//回车键
//...
}
}
}
</script>
复选框的全选和取消全选
<input type="checkbox" name="hobby" value="music"/>音乐<br>
<input type="checkbox" name="hobby" value="film"/>电影<br>
<input type="checkbox" name="hobby" value="sport"/>运动<br>
<script>
window.onload=function(){
var quan = document.getElementById("quan");
var hobbys = document.getElementsByName("hobby");
//点击全选框时将每个复选框checked设置同全选框一样
quan.onclick=function(){
for(var i in hobbys){
hobbys[i].checked = quan.checked;
}
}
//设置每个复选框的点击事件，
for(var i in hobbys){
hobbys[i].onclick=function(){
var checkdCount =0;
for(var j =0;j<hobbys.length;j++){//不知为何这里用for in 会出错
if(hobbys[j].checked){
checkdCount++;
}
quan.checked = (checkdCount==hobbys.length);
}
}
}
</script>
表单提交验证
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.er{
color: red;
}
</style>
</head>
<body>
<form id="userForm">
邮箱<input type="text" name="email" id="email" /><span class="er" id="email_er"></span><br>
密码<input type="password" name="pswd" id="pswd"/><br>
确认密码<input type="password" id="confirm" /><span class="er" id="pswd_er"></span><br>
<input type="button" id="submit" value="注册" />
<input type="reset" value="重置" />
</form>
<script>
var emailElt = document.getElementById("email");
var email_er = document.getElementById("email_er");
var pswdElt = document.getElementById("pswd");
var confirm = document.getElementById("confirm");
var pswd_er = document.getElementById("pswd_er");
var submitBtn = document.getElementById("submit");
emailElt.onblur=function(){
var email = emailElt.value.trim();// 获取email
// 编写email的正则
var emailRegExp = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;
var ok = emailRegExp.test(email);
if(!ok){// 不合法
email_er.innerText = "邮箱地址不合法";
}
}
emailElt.onfocus=function(){
if(email_er.innerText !=''){//"邮箱地址不合法"
emailElt.value='';
}
email_er.innerText='';
}
confirm.onblur=function(){
var pswd = pswdElt.value;
if(pswd != confirm.value){
pswd_er.innerText='密码不一致';
}
if(pswd == ''){
pswd_er.innerText="密码为空";
}
}
confirm.onfocus=function(){
if(pswd_er.innerText!=''){
confirm.value='';
}
pswd_er.innerText='';
}
//此处不可以使用submit按钮，该按钮会刷新页面；
submitBtn.onclick=function(){
//让email和confirm获得焦点再失去焦点，检查后面提示是否为空；
emailElt.focus();
emailElt.blur();
confirm.focus();
confirm.blur();
if(email_er.innerText=='' && pswd_er.innerText==''){
// 获取表单对象
var userFormElt = document.getElementById("userForm");
// 可以在这里设置action,也可以不在这里.
userFormElt.action = "http://localhost:8080/jd/save";
// 提交表单
userFormElt.submit();
}
}
</script>
</body>
</html>
其他用法
跳转页面
1. 浏览器地址栏直接写url
2. 超链接
3. 提交表单
4. window.open(url,target)
5. window.location.href=url window.location=url
document.location.href=url document.location=url
