个人java学习路线-JavaScript
JavaScript- Web页面的脚本语言
JavaScript包括三大块：
ECMAScript:JS的核心语法(ES规范/ECMA-262标准)
DOM:Document Object Model(文档对象模型，对网页中的节点进行增删改的过程)HTML文档被当作一颗DOM树来看待
BOM:Borwser Object Model(浏览器对象模型)
DOM和BOM的区别和联系:
BOM的顶级对象是：window
DOM的顶级对象是：document
实际BOM应该包括DOM
引入JavaScript
引入JavaScript的第一种方式
<!doctype html>
<html>
<head>
<title>html中嵌入js代码的第一种方式</title>
</head>
<body>
<!--
1.要实现的功能：
用户点击以下按钮，弹出消息框。
2.js是一门事件驱动型的编程语言，依靠事件去驱动，然后执行对应的程序
-->
<input type="button" value="hello" />
<input type="button" value="helllo" onclick="window.alert('hello js')" />
</body>
</html>
引入JavaScript的第二种方式
<!doctype html>
<html>
<head>
<title>html中嵌入js代码的第二种方式</title>
</head>
<body>
<!--第二种方式：脚本块的方式，脚本块可以放任意位置，始终自上而下执行-->
<script type="text/javascript">
window.alert("hello world!");
</script>
<input type="button" value="按钮对象">
</body>
</html>
<!--
/**
* javadoc注释，这里的注释信息会被javadoc.exe工具解析提取生成帮助文档
*
*/
-->
引入JavaScript的第三种方式
JavaScript代码：
window.alert("hello js!");
window.alert("学");
<!doctype html>
<html>
<head>
<title>html中嵌入js的第三种方式:引入外部独立的js文件</title>
</head>
<body>
<script type="text/javascript" src="./1.js"></script> <!-- script必须要用，引入代码块中间写代码没用-->
</body>
</html>
ECMAScript
ECMAScript可以理解为是JavaScript的一个标准
变量
1.介绍
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>js中的变量</title>
</head>
<body>
<!--
javascript中变量可以任意赋值,是一种弱类型编程语言
js中,变量没有赋值,默认赋值underfined
-->
<script type="text/javascript">
var i;
alert("i=" +i);
alert(undefined);
</script>
</body>
</html>
2.局部变量和全局变量
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>js的局部变量和全局变量</title>
</head>
<body>
<script type="text/javascript">
var i=100;
function accessI(){
alert("i= "+i)
}
accessI();
var username="zhangsan";
function accessUsername(){
var username="lisi"
alert("username=" +username);
}
accessUsername();
alert("username="+username);
function myfun(){
myname="lll";//没有用var声明变量的时候，那么这个变量必然是全局变量
}
myfun();
alert("myname= "+myname);
</script>
</body>
</html>
函数
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS函数初步</title>
</head>
<body>
<script type="text/javascript">
/*
js语法格式：
1：
function 函数名(形式参数列表){
函数体：
}
2：
函数名=function(形式参数列表){
函数体;
}
js中的函数不需要指定返回值类型，返回什么类型都行
*/
function sum(a,b){
alert(a+b);
}
//sum(10,20)
sayHello =function(username){
alert("hello "+username);
}
//sayHello("张三");
</script>
<input type="button" value="hello" onclick="sayHello('jack');" />
<input type="button" value="sum(10,20)" onclick="sum(10,20);" />
</body>
</html>
<html>
<head>
<meta charset="utf-8">
<title>js函数初步2</title>
</head>
<body>
<script type="text/javascript">
function sum(a,b){
return a+b;
}
var retValue=sum(1,2);
alert(retValue);
var retValue2=sum("jack");
alert(retValue2);
var retValue3=sum();
alert(retValue3);
var retValue4=sum(1,2,3);
alert(retValue4);
function test1(username){
alert("test1");
}
function test1(){
alert("test1 test1");
}
test1("lisi");//js中同名函数后面会覆盖前面的
</script>
</body>
</html>
数据类型
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>js中的数据类型</title>
</head>
<body>
<script type="text/javascript">
/*
js中数据类型分为两种
原始类型：Undefined,Number,String,Boolean,null
引用类型：Object以及子类
ES规范(ECMAScript规范)，ES6之后又加了一个新的类型：symbol
js中有一个运算符叫typeof，可以程序运行阶段动态获取变量的变量类型
typeof 变量名; -----运算符运算结果是以下六个字符串之一：
underfined,number,string,boolean,object,function
*/
function sum(a,b){
if(typeof a=="number" && typeof b=="number"){
return alert(a+b);
}
alert(a+","+b+"必须是数字");
}
sum(false,"abc");
sum(1,2);
sum(2,"sl");
var d=null;
alert(typeof d); //返回object
</script>
</body>
</html>
--------------------数据类型介绍--------------------------
1.Undefined
系统默认变量赋值Undefined
2.Number
<script type="text/javascript">
/*
1.所有的数值都是number，另外还包括NaN,Infinity
3.parseInt()函数--------取整
4.parseFloat()函数------
5.Math.ceil()函数(向上取整)
*/
alert(10/'a'); //NaN
alert(10/0); //Infinety
// 2.isNaN(数据),结果为true表示不是一个数字，false表示是一个数字
function sum(a,b){
if(isNaN(a) ||isNaN(b)){
alert("参与运算的必须是数字");
return;
}
return alert(a+b);
}
sum(100,"asd");
sum(100,200);
</script>
3.Boolean
<script type="text/javascript">
/*
Boolean()函数，if会自动调用布尔函数，将数据转化为布尔类型
*/
var username="";
if(username){
alert("欢迎你"+username);
}else{
alert("用户名不能为空");
}
alert(Boolean(1));//true
alert(Boolean(0));//false
alert(Boolean(""));//false
alert(Boolean("ac"));//true
alert(Boolean(null));//false
alert(Boolean(NaN));//false
alert(Boolean(undefined));//false
alert(Boolean(Infinity));//true
</script>
4.String
<script type="text/javascript">
/*
创建字符串对象：
第一种：var s="abc";
第二种：(使用JS内置的支持类String)，var s2=new String("abc");
String 的父类是Object
字符串函数：
indexOf:指定字符串第一次出现的索引
lastIndexOf:指定字符串最后出现的索引
replace:替换
substr:截取子字符串 截取n后m个字符串
subString:截取子字符串 截取第n到第m个(不包括m)
toLowerCase:转换小写
toUpperCase:转换大写
split:拆分字符
*/
alert("name=value%name=value%name=value%name=value".replace(/%/g,"&"));
var x="ac";
var y=new String("acx");
alert(typeof(x));
alert(typeof(y));
</script>
5.Object
<script type="text/javascript">
/*
Object是所有类型的超类
Object的属性：
prototype:
constructor:
Object包含的函数：
toString:
toLocaleString:
valueOf:
定义类的语法：
第一种：
function 类名(形参){
}
第二种：
类名=function(形参){
}
创造对象的语法：
new 构造方法名(实参);
*/
function sayHello(){
alert("执行一次");
}
sayHello();//普通函数
var sh=new sayHello();//类
//alert(sh);
function User(a,b,c){
this.sno=a;
this.sname=b;
this.sage=c;
}
var u1=new User(111,"zhangsan",30);
/*
alert(u1.sno);
alert(u1.sname);
alert(u1.sage);
//以下一样
alert(u1["sno"]);
alert(u1["sname"]);
alert(u1["sage"]);
*/
Product = function(pno,pname,price){
this.pno=pno;
this.pname=pname;
this.price=price;
this.getPrice=function(){
return this.price;
}
}
var pro=new Product(111,"西瓜",4.0);
var pri=pro.getPrice();
alert(pri);
//用prototype 给函数/类动态扩展函数
Product.prototype.getPname=function(){
return this.pname;
}
var pname=pro.getPname();
alert(pname);
alert(pro.pname);
</script>
6.null NaA Undefined三者对比
<script type="text/javascript">
alert(typeof null)
alert(typeof NaN)
alert(typeof undefined)
/*
*/
alert(null==NaN);//false
alert(null==undefined);//true
alert(undefined==NaN);//false
//== 和=== 等同运算符，和全等运算符
//===即判断值是否相等，又判断数据类型是否相等
alert(null===undefined)//false
alert(1==true)//true
</script>
事件
js中的事件：
1.blur失去焦点
2.focus获得焦点
3.click鼠标单击
4.dblclick鼠标双击
5.change下拉列表选中项改变，或者文本框内容改变
6.keydown键盘按下
7.keyup键盘弹起
8.submit 表单提交
9.reset 表单重置
10.mouseover 鼠标经过
11.mousemove 鼠标移动
12.mouseout 鼠标离开
13.mouseup 鼠标弹起
14.mousedown鼠标按下
15.select 文本被选定
16.load 页面加载完毕
任何一个事件都会对应一个事件句柄，事件句柄是在事件前加on
onXXX这个事件句柄出现在一个标签的属性位置上（事件句柄以属性的形式存在）
<script type="text/javascript">
//********第一种注册事件的方法
//对于当前程序，sayHello函数被称为回调函数（callback函数）
//被调用
function sayHello(){
alert("hello");
}
</script>
<input type="button" value="hello" onclick="sayHello()" />
<input type="button" value="hello2" id="mybtn" />
<input type="button" value="hello3" id="mybtn1" />
<input type="button" value="hello4" id="mybtn2" />
<script type="text/javascript">
//*******第二种注册事件的方法
function doSome(){
alert("do some!");
}
var btnObj=document.getElementById("mybtn");
btnObj.onclick=doSome;
var mybtn1=document.getElementById("mybtn1");
mybtn1.onclick=function(){
alert("mybtn1 test");
}
document.getElementById("mybtn2").onclick=function(){
alert("mybtn2 test");
}
</script>
js代码执行顺序
这里要提的是onload即：
window.onload=function(){
document.getElementById("btn").onclick=function(){
alert("hello js");
}
}
页面加载后再执行
执行顺序：页面加载>load>function()
js代码设置节点属性
通过js控制标签节点属性：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS代码设置节点的属性</title>
</head>
<body>
<script type="text/javascript">
window.onload=function(){
document.getElementById("btn").onclick=function(){
var mytext=document.getElementById("mytext");
mytext.type="checkbox";
}
}
</script>
<input type="text" id="mytext" />
<input type="button" id="btn" value="将文本框改为复选框" />
</body>
</html>
键盘事件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>js的键盘事件</title>
</head>
<body>
<script type="text/javascript">
window.onload=function(){
var usernameElt=document.getElementById("username");
//回车键的键值是13，ESC键的键值是27
usernameElt.onkeydown=function(evevnt){
if(event.keyCode===13){
alert("success")
}
}
}
</script>
<input type="text" id="username" />
</body>
</html>
其中evevnt中几乎包含所有相关操作属性，可以再网页检查查看
void运算符
为了解决点击超链接页面跳转问题，我们可以用void运算符
<a href="javascript:void(0)" onclick="window.alert('test code')">
既保留超链接样式，同时点击时执行一段代码，但页面不能跳转
</a>
js控制语句
<script type="text/javascript">
/*
if
switch
while
do while
for
break
continue
for...in(了解)
with(了解)
*/
//创建js数组
var arr=[false,true,1,0,"abc",3.14];//什么都能放
for(var i=0;i<arr.length;i++){
// alert(arr[i]);
}
for (var i in arr) {//let i in arr
//alert(arr[i])
}
User=function(username,password){
this.username=username;
this.password=password;
}
var u= new User("张三","444");
for (var i in u) {
alert(u[i]);
}//了解
with(u){
alert(username+password);
}//了解
</script>
DOM
DOM即文档对象模型(document object model)
获取文本框value
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>DOM编程-获取文本框的value</title>
</head>
<body>
<script type="text/javascript">
/*
window.οnlοad=function(){
//var btnElt=window.document.getElementById("btn");==下面
var btnElt=document.getElementById("btn");
alert(btnElt);//[object HTMLInputElement]
}
*/
window.onload=function(){
var btnElt=document.getElementById("btn");
btnElt.onclick=function(){
/*
var usernameElt=document.getElementById("username");
var username=usernameElt.value;
alert(username);
*/
alert(document.getElementById("username").value);
}
}
</script>
<!--<input type="button" id="btn" value="hello" />-->
<input type="text" id="username" value="" />
<input type="button" id="btn" value="获取文本框的的value" />
<hr />
<script type="text/javascript">
window.onload=function(){
document.getElementById("setBtn").onclick=function(){
document.getElementById("username2").value=document.getElementById("username1").value;
}
}
</script>
<input type="text" id="username1" value="" />
<br />
<input type="text" id="username2" value="" />
<br />
<input type="button" id="setBtn" value="将前一个文本框中的value赋值到后一个文本框中" />
<br />
<input type="text" onblur="alert(this.value)" id="" />
</body>
</html>
innerHtml和innerText操作div和span
innerHTML会把后面的代码当作html看待，
innerText则是把后面的代码当做普通的Text
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>innerHTML和innerText操作div和span</title>
<style type="text/css">
#div1{
background-color: aquamarine;
width: 300px;
height: 300px;
border: 1px black solid;
position: absolute;
top:100px;
left:100px;
}
</style>
</head>
<body>
<script type="text/javascript">
window.onload=function(){
var divElt=document.getElementById("div1");
btn.onclick=function(){
//divElt.innerHTML="123asd";
//divElt.innerHTML="<font color='red'>用户名不能为空</font>";
divElt.innerText="<font color='red'>用户名不能为空</font>";
//innerHTML会把后面的代码当作html看待，
//innerText则是把后面的代码当做普通的Text
}
}
</script>
<input type="button" id="btn" value="设置div中的内容" />
<div id="div1">
</div>
</body>
</html>
正则简介
正则表达式:Regular Expression
正则表达式主要用在字符串格式匹配方面
简单的正则表达式：
[1-9] 表示1到9的任意一个数字，1次
[A-Za-z0-9]表示A-Za-z0-9中的任意一个字符，1次
[A-Za-z0-9-]表示A-Za-z0-9,-中的任意一个字符，1次
| 或者
QQ: ^[1-9][0-9]{4,}$
怎么创建：
1. var regExp= /正则表达式/flags;
2.var regExp=new RegExp("正则表达式","flags");
关于flags:
g:全局匹配
i:忽略大小写
m:多行搜索(ES规范制定之后才支持m）,当前面是正则表达式的时候，m不能用。只有前面是普通字符串时,m才能用
正则表达式对象.test(用户填写的字符串);true false
ps：很有用，但了解了解，一般复制就好
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>关于正则表达式</title>
</head>
<body>
<script type="text/javascript">
window.onload=function(){
document.getElementById("btn").onclick=function(){
var email=document.getElementById("email").value;
var emailReExp=/^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;
var ok=emailReExp.test(email);
if(!ok){
document.getElementById("emailError").innerText="邮箱地址不合法";
}else{
document.getElementById("emailError").innerText="邮箱地址合法";
}
}
document.getElementById("email").onfocus=function(){
document.getElementById("emailError").innerText="";
}
}
</script>
<input type="text" id="email" value="" />
<span id="emailError" style="color: red; font-size: 12px;"></span>
<br>
<input type="button" id="btn" value="验证邮箱" />
</body>
</html>
去除字符串前后的空白
还是trim
<script type="text/javascript">
String.prototype.trim=function(){
//alert("sa d");
//return this.replace(/^\s+/,"").replace(/\s+$/,"");
return this.replace(/^\s+|\s+/g,"");
}
window.onload=function(){
document.getElementById("btn").onclick=function(){
var username=document.getElementById("username").value;
//去除前后空白
username=username.trim();
alert("---->"+username+"<------");
}
}
</script>
复选框的全选和取消全选
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>复选框的全选和取消全选</title>
</head>
<body>
<script type="text/javascript">
window.onload=function(){
var firstChk=document.getElementById("firstChk");
var hobby=document.getElementsByName("hobby");
firstChk.onclick=function(){
for (var i = 0; i < hobby.length; i++) {
hobby[i].checked=firstChk.checked;
}
}
var all=hobby.length;
for (var i = 0; i < hobby.length; i++) {
hobby[i].onclick=function(){
var checkedCount=0;
for (var i = 0; i < hobby.length; i++) {
if(hobby[i].checked){
checkedCount++;
}
}
firstChk.checked=(all==checkedCount);
}
}
}
</script>
<input type="checkbox" id="firstChk" />全选<br>
<!-- 于老师三大爱好是什么？ -->
<input type="checkbox" name="hobby" id="" value="smoke" />抽烟<br>
<input type="checkbox" name="hobby" id="" value="drink" />喝酒<br>
<input type="checkbox" name="hobby" id="" value="tt" />烫头<br>
</body>
</html>
获取下拉列表选中项的value
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>获取下拉列表选中项的value</title>
</head>
<body>
<script type="text/javascript">
window.onload=function(){
var provinceListElt=document.getElementById("provinceList");
provinceListElt.onchange=function(){
alert(provinceListElt.value);
}
}
</script>
<select id="provinceList" <!--onchange="alert(this.value)-->">
<option value="">--请选择省份--</option>
<option value="hb">河北省</option>
<option value="hn">河南省</option>
<option value="sd">山东省</option>
<option value="sx">山西省</option>
</select>
</body>
</html>
时间和网页时钟
1.时间操作
<script type="text/javascript">
var nowTime=new Date();
nowTime=nowTime.toLocaleString();//把默认国际标准格式转化为当地格式
document.write(nowTime);
document.write("<br>");
document.write("<br>");
var t=new Date();//自己设置格式
var year=t.getFullYear();
var month=t.getMonth()+1;//（0-11）
//var dayOfWeek=t.getDay();获取的是周几（0-6）
var day=t.getDate()//获取日信息
document.write(year+"年"+month+"月"+day+"日");
document.write("<br>");
document.write("<br>");
var times=t.getTime();//获取毫秒数
document.write(times);//一般当时间戳用
document.write("<br>");
document.write("<br>");
document.write(new Date().getTime());
</script>
2.网页时钟：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>显示网页时钟</title>
</head>
<body>
<script type="text/javascript">
function displayTime(){
var time=new Date();
document.getElementById("timeDiv").innerText=time.toLocaleString();
}
function start(){
v=window.setInterval("displayTime()",1000);
}
function stop(){
window.clearInterval(v);
}
</script>
<br>
<br>
<input type="button" id="" value="显示系统时间" onclick="start()" />
<input type="button" id="" value="停止系统时间" onclick="stop()" />
<div id="timeDiv">
</div>
</body>
</html>
内置支持类array(数组)
<script type="text/javascript">
var arr=[];
var arr2=[1,3,4,false,"asd",3.14];
arr2[7]="test";
document.write("<br>");
for (var i = 0; i < arr2.length; i++) {
document.writeln(arr2[i]+"<br>");
}
document.write("<br />")
var a=new Array();
//alert(a.length);0
var a2=new Array(3);
//alert(a2.length);3
var a3=new Array(3,2);//表示数组中存入3和2两个元素
//alert(a3.length);2
var b=[1,2,3,4,5,6];
var str=b.join("-");
//alert(str); 1-2-3-4-5-6
b.push(10);//末尾加10
b.pop();//弹出末尾数据
b.reverse();//反转
alert(b.join("="));
</script>
BOM
BOM即浏览器对象模型(brower object model)
open和close
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>open和close</title>
</head>
<body>
<script type="text/javascript">
</script>
<input type="button" id="" value="开启百度(新窗口)" onclick="window.open('http://www.baidu.com')" />
<input type="button" id="" value="开启百度(当前窗口)" onclick="window.open('http://www.baidu.com','_self')" />
<input type="button" id="" value="开启百度(新窗口)" onclick="window.open('http://www.baidu.com','_blank')" />
<input type="button" id="" value="开启百度(父窗口)" onclick="window.open('http://www.baidu.com','_parent')" />
<input type="button" id="" value="开启百度(顶级窗口)" onclick="window.open('http://www.baidu.com','_top')" />
<br>
<br>
<input type="button" value="关闭当前窗口" onclick="window.close()" />
</body>
</html>
弹出消息框和确认框
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>弹出消息框和确认框</title>
</head>
<body>
<script type="text/javascript">
function del(){
/* var ok=window.confirm("确认删除吗");//返回值为boolean
//alert(ok);
if(ok){
alert("delete ....");
} */
if(window.confirm("确认删除吗")){
alert("delete ....");
}
}
</script>
<input type="button" value="弹出消息框" onclick="window.alert()" />
<input type="button" value="弹出确认框(删除)" onclick="del()" />
</body>
</html>
当前窗口设置为顶级窗口
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>将当前窗口设为顶级窗口</title>
</head>
<body>
5.html
<br>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
</head>
<body>
</body>
</html>
<script type="text/javascript">
//如果当前窗口不是顶级窗口，把当前窗口设为顶级窗口
</script>
<iframe src="5.html" width="500px" height="500px"></iframe>
</body>
</html>
5.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<script type="text/javascript">
function setTop(){
if(window.top!= window.self){
window.top.location=window.self.location;
}
}
</script>
<input type="button" onclick="setTop()" value="如果当前窗口不是顶级窗口，把当前窗口设为顶级窗口" />
</body>
</html>
前进和后退
第一个页面：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>history对象</title>
</head>
<body>
<a href="7.html">007页面</a>
</body>
</html>
第二个页面：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>7</title>
</head>
<body>
7 page！
<input type="button" id="" value="后退" onclick="window.history.back()" />
<input type="button" id="" value="后退" onclick="window.history.go(-1)" />
</body>
</html>
设置地址栏上的URL
<script type="text/javascript">
function goBaidu(){
document.location="http://www.baidu.com";
}
</script>
<input type="button" id="" value="百度" onclick="goBaidu()" />
1602
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
