目录
什么是javascript
是运行在浏览器上的脚本语言简称js
HTML嵌入js的三种方式
HTML嵌入js的第一种方式
格式:
<input type="xxx" value="xxx" 事件句柄名称="window.alert('实现内容')> 例如
问题导入:鼠标单击实现响应功能
用户点击一下按钮,弹出消息框
<body>
<input type="button" value="点击" onclick="window.alert('hello js')
window.alert('hello,zhangsan')
alert('lisi')">
</body>
JS是一门事件驱动型编程语言,依靠事件驱动,然后执行对应的程序。在JS中有很多事件,其中一个事件叫做:鼠标单击,单词click。并且任何事件都会对应一个事件句柄叫做:onclick。【注意:事件和事件句柄的区别是:事件句柄是在事件单词前面加上一个on】,而事件句柄是以HTML为标签的属性存在的。
3.οnclick=“js代码,执行原理是什么?
页面打开的时候,js代码并不会执行,只是把这段js代码注册到按钮的click事件上。
等这个按钮发生click(鼠标单击后)事件后,注册在onclick后边的js代码就会被浏览器自动调用了
4.怎么使用js代码弹出消息框
在js中有一个内置对象叫做window,全部小写,可以直接拿来使用,Window代表的是浏览器对象
window对象有一个函数叫做alter(相当于java里的printf),用法是window.alter('消息');这样就可以弹窗了[window可以省略]
5.js中的字符串可以用双引号,也可以用单引号
6,js中的一条语句结束之后可以使用分号“;”也可以不用
HTML嵌入JS的第二种方式
格式: <!--脚本快方式-->
<script>
alert(内容);
</script>
javascript 脚本方式可出现多次,没有要求出现位置随意
暴露在脚本块当中的程序,在页面打开的时候执行,并且遵循自上而下的顺序依次逐行执行(这个代码的执行不需要事件)
<script>
window.alert("begin...")
</script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML嵌入JS的第二种方式</title>
<script>
window.alert("head...")
</script>
</head>
<body>
<input type="button" value="按钮">
<script>
window.alert("hello");
</script>
<input type="button" value="按钮1">
</body>
</html>
<script>
window.alert("end...")
</script>
HTML嵌入js代码的第三种方式
引入外部独立的JS文件
格式: <script src="JS文件地址"></script>
在需要位置引入JS脚本文件-,引入外部独立的JS文件,JS文件中的代码会自上而下的执行,引入的JS文件下不可以再写脚本块
<body>
<script src="目录/1.js"></script>
<!--同一个JS文件可引入多次,但这种需求很少-->
<script src="目录/1.js">
//这里写的脚本块不会执行,引入的JS文件下不可以再写脚本块
// window.alert("test");
</script>
<!--这种不引入可执行-->
<script>
window.alert("test");
</script>
</body>
js变量,重要
1. javascript当中的变量怎么声明变量
var 变量名
2. 怎么给变量赋值
变量名 = 值
javascript是一种弱类型语言,没有编译阶段,一个变量可随意赋值,附什么类型的值都可以
var i =100;
i=true;
i="abc"
i = new Object();
3.一个变量没赋值时会给变量一个默认值underfined
在javascript中underfined是一个具体值
4.一个变量没有声明直接赋值,属于语法错误
alert(age)//没有声明age报错
<body>
<script>
var i ;
alert("i=" +i);//i=undefined
alert(undefined);//undefined
var k = undefined;
alert("k=" +k);//k=undefined
//一个变量没有声明直接赋值,属于语法错误
//alert(age)
var a,b, c=200
alert("a="+a);//a=undefined
alert("b="+b);//a=undefined
alert("c="+c);//200
</script>
</body>
函数的定义与调用
1. js中的函数
等同于java语言中的方法,函数也是一段可以重复利用的代码片段。函数一般可以完成某个特定的功能
2. js变量是一种弱类型,那么函数应该怎样定义
语法格式:
第一种
function 函数名(形式参数列表){
函数体
}
第二种
函数名 = function(形式参数列表){
函数体
}
3.同名方法后边的会把前边的覆盖掉
4. java方法中有重载,js函数可以重载吗
可以
<body>
<script>
//第一种定义
function sum(a,b){
alert(a+b);
}
//函数调用才可使用
sum(10,20);
//第二种调用
sayHello = function (username){
alert("hello"+username);
}
sayHello("zhangsan");
</script>
<!--函数封装-->
<input type="button" value="单击" onclick="sayHello('jack')">
<input type="button" value="求和" onclick="sum(100,200)">
<script>
/*
js函数可以重载吗
*/
function sum(a,b){
//a b属于形参
return a+b;
}
var r = sum(1,2);
alert(r);//3
var r2 = sum("jack");
alert(r2);//jackundefined
var r3 = sum();
alert(r3);NaN一个具体值
var r4 = sum(1,2,4);
alert(r4);//3 4被自动忽略
function text1(text1){
alert("text1");
}
function text1 (){
alert("test1 test1");
}
text1(li);//test1test1 同名方法后边的会把前边的覆盖掉
</script>
</body>
全局变量和局部变量
全局变量:
在函数体之外声明的变量属于全局变量,全局变量的生命周期是:
浏览器打开时声明,浏览器关闭时销毁,尽量少用。因为全局变量会一直在浏览器的内存中,耗费内存空间
能使用局部变量尽量使用局部变量
局部变量
在函数体当中声明的变量,包括一个函数的形参都属于局部变量
局部变量的生命周期是:函数执行时局部变量的内存空间开辟,函数执行结束后局部变量内存空间释放,局部变量生命周期较短
注意:当一个变量声明时没有使用var关键字,那不管这变量在呢声明都是全局变量
</head>
<body>
<script>
//全局变量
var name = "jack";
function accessName(){
//函数体内部,局部变量
var name = "lisi";
//就近原则:访问局部变量
alert("name= "+ name);//lisi
}
accessName();//lisi
//局部变量函数执行结束销毁,所以此处访问全局变量
alert("name="+name);//jack
function accessAge(){
var age = 20;
alert("age = "+age);
}
accessAge();//20
// alter("age="+age) 报错因为没有声明全局变量
function mfun(){
//当一个变量声明时没有使用var关键字,那不管这变量在呢声明都是全局变量
myname = "li";
}
//
mfun();//不执行,因为没有局部变量
alert("myname=" + myname);//myname=li
</script>
</body>
js数据类型
1.虽然js中的变量再声明的时候不需要指定数据类型,但是在赋值,每一个数据还是有类型的,所以只里也是要学习一下js包括哪些数据类型
js中的数据类型有:原始类型、引用类型(面试题)
原始类型:Undefined、Number、String、boolean、null
引用类型:object和object的子类
2.ES规范:ES6后,基于以上六种类型之外有添加了:Symbol
3。js中有一个运算符叫做typeof,这个运算符可以再程序运行阶段动态获取变量的数据类型
typeof运算符的语法格式:
typeof 变量名
typeof运算符的运算结果是以下六个字符串之一:注意字符串全部小写。
“undefined” “number” “string” “boolean” “ object” “function”
4.在js中比较只能使用==
要求:求和,变量a,b变量将来的数字只能是数字,不能是其他类型
<body>
<script>
function sum(a,b){
if(typeof a=="number"&&typeof b =="number"){//如果a变量是number类型b变量有事number类型
return a+b
}
alert(a+b+"必须全部为数字");
}
var r =sum(false,"a");
alert(r);//false必须全部为数字 undfined
//typeof不同参数结果
var i;
alert(typeof i);//undefined
var k =10;
alert(typeof k);//number
var f = "abc";
alert(typeof f);//string
var d = null;
alert(typeof d);//object
var flag = false;
alert(typeof flag);//boolean
var obj = new Object();
alert(typeof obj);//object
function sayHello(){
}
alert(typeof sayHello);//functio
</script>
</body>
Undefined类型
Undefined类型只有一个值,这个值就是undefined
当一个变量没有手动赋值,系统默认赋值undefined
或者也可以给一个变量手动赋值undefined
<body>
<script>
var i;//undefined
var k =undefined;//undefined i=k
var y ="underfined";//"undefined" 结果一样但字符串类型和上边两个不相等
</script>
</body>
Number 类型
1.Number 类型包含哪些值
整数、小数、正数、负数 、NaN、 Infinity(无穷大)
2.关于Nan(不是一个数字,但是是Number类型)
什么情况下运行结果是一个NaN
运算结果本应是一个数字,最后算完不是一个数字的时候,结果是NaN
3.主要函数
isNaN(数据):结果是TRUE表示不是一个函数,结果是FALSE表示是一个函数
pastInt():可以将字符串变成数字,并取整数位
parseFloat():可以将字符串变成数字
math.ceil():向上取整
<body>
<script>
var a =1;
var b =1.2;
var c =-1;
var ad =NaN;
var e =Infinity;
alert(typeof a);//number
alert(typeof b);//number
alert(typeof c);//number
alert(typeof ad);//number
alert(typeof e);//number
var f = "abc";
var g =10;
alert(f/g);//除号 结果显然应该是一个数字,但是运算过程中导致最后不是一个数字那最后结果就是NaN
var h = "abc";
var i =10;
alert(h+i)//"abc10" 不是NaN因为有优先级 加号判断有字符串会变成字符串拼接
//alert(10/0) 无穷大
alert(10/3);//3.33333333333
function sum(a,b){
if(isNaN(a)||isNaN(b)){
alert("参与运算须是数子")
}
return a+b;
}
var r =sum("a",2);//参与运算须是数子
alert(r)
alert(parseInt("3.9999999"));//3
alert(parseInt(4.11111));//4
alert(parseFloat("3.13")+1)//4.14
alert(parseFloat("3.2")+1)//4.2
alert(Math.ceil(5.1))//6
</script>
</body>
boolean类型
1.js中的布尔类型永远只有两个值:true和false
2.在布尔类型中有一个函数叫做Boolan()
语法格式:
Boolan(数据)
Boolan()函数作用使用将非布尔类型转换为布尔类型
没有具体值转换成FALSE,有具体值转换为TRUE
3.if(只有真和假)和java不同的是他会将不是布尔类型的值转换为布尔类型
并且只要不为null或0就为真
<body>
<script>
var name ="";
if(Boolean(name)){
alert("欢迎你"+name);
}else{
alert("用户名不能为空")//用户名不能为空 应为name是空值
}
//Boolean可省略
var name ="Jack";
if((name)){
alert("欢迎你"+name);//欢迎你Jack
}else{
alert("用户名不能为空")
}
//转换
alert(Boolean(1)) //true
alert(Boolean(0))//false
alert(Boolean(""))//false
alert(Boolean("abc"))//true
alert(Boolean(null))//false
alert(Boolean(NaN))//false
alert(Boolean(undefined))//false
alert(Boolean(Infinity))//true
</script>
</body>
String类型
1.在js当中既可以使用单引号,ye可以使用双引号
var s1 ="abc"
var s2 ='abc'
2.在js当中,怎样创建字符串对象?
两种方式:
第一种:小string
var s = "abc"
第二种:(使用js内置的支持类String) 大string
var s2=new String(“abc”)
需要注意的是:String是一个内置的类,可以直接用,String的父类是object
3.无论是小string还是大string他们的方法是通用的
4.关于string类型的常用属性和函数
常用属性
length:获取字符串长度
常用函数:
indexof 获取指定字符串中第一次出现的位置
lastIndexof 获取指定字符串中最后一次出现的位置
replace 替换
substr 截取子字符串
substring 截取子字符串
toLowerCase 转换小写
toUpperCase 转换大写
split 拆分字符串
<body>
<script>
var x = "abc"
alert(x.length);//3
alert("http://www".indexOf("http"));//0
alert("http://www".indexOf("https"));//-1
//判断一个字符串是否包含在某个字符串中
alert("http://www.baidu.com".indexOf("www")>=0 ?"包含" :"不包含")//包含
//repace
alert("aaaaaaa".replace("a","b"));//baaaaaa 只能替换一个 想全部替换需要用后边的正则表达式
//面试高频:substring和substr有什么区别
alert("abcdefg".substr(2,4));//cdef substr截取从2开始四个字符长度的字符串
alert("abcdefg".substring(2,4));//cd substring是截取从而开始3结束的字符串
</script>
</body>
Object类型
1.Object是所有类型的超类,自定义的任何类默认继承Object
2.Object包括哪些属性
prototype(常用的):作用是给类动态的扩展属性和函数
constructor属性
3.Object包括哪些常用方法
toString()
valueof()
toLocaleString()
4.在JS当中定义的默认继承Object,会继承Object类中所有属性以及函数换句话说自定义的类有prototype属性
5.在JS中怎么定义类?怎么new对象?
定义类的语法
第一种
function 类名(形参){
}
第二种
类名 = function(形参){
}
创建对象的语法
new 构造方法名(实参)
<body>
<script>
function say(){
}
//把say当做一个普通函数来调用
say();
//这种方式就把say当做一个创建对象
var r = new say();//object是一个引用对象,保存内存地址指向堆内地址
alert(r);
//js类型中类的定义同一个构造函数的定义
//在js中类的定义和构造函数的定义是放在一起完成的
function user(a,b,c){
this.sno = a;
this.sname =b;
this.age=c;
}
//创建对象
var u1 = new user(111,"zhangsan",30);
alert(u1.age)
alert(u1.sname)
alert(u1.sname)
var u2 = new user(222,"lisi",55);
alert(u2["sno"])
alert(u2["sname"])
alert(u2["age"])
//定义类的另一种方法
Emp =function (ename,sal){
this.ename = ename;
this.sal = sal;
}
var e1 = new Emp("Smith",800);
alert(e1["ename"]+e1.sal);
Product = function(pno,pname,price){
this.pno = pno;
this.name = name;
this.price = price;
//函数
this.getPrice = function(){
return this.price;
}
}
var pro = new Product(111,"西瓜",4.0);
var pri = pro.getPrice();
alert(pri)//4
//可以通过prototype这个属性来给类动态扩展属性以及函数
Product.prototype.getPname = function(){
return this.pname;
}
//调用后期扩展的函数
var pname = pro.getPname();
alert(pname);
// 给string扩展一个函数
String.prototype.suiyi = function(){
alert("这是给生日那个类扩展的一个对象");
}
"abc".suiyi();//这是给生日那个类扩展的一个对象
//js怎么定义类,怎么创建对象?
User = function (username,password){
this.username = username;
this.password = password;
}
var u =new User();//可无参
var u =new User("zhang");//可一参数
var u =new User("zhang","124");//可全参
</script>
</body>
null NaN undefined区别
<body>
<script>
//数据类型不一样
alert(typeof null);//object
alert(typeof NaN);//number
alert(typeof undefined);//undefined
//null和undefined可以相等
alert(null == NaN);//false
alert(null == undefined);//ture
alert(undefined == NaN);//false
//==:判断值是否相等
//===:即判断值是否相等又判断类型是否相等
alert(null == NaN);//false
alert(null == undefined);//false
alert(undefined == NaN);//false
alert(1==true)//true
alert(1===true)//false
</script>
</body>
js常用事件和回调函数
js中的事件
biur:失去焦点
focus:获得焦点
click:鼠标单击
dbclick:鼠标双击
keydown:键盘按下
keyup:键盘弹起
mousedown:鼠标按下
mouseover:鼠标经过
mousemove:鼠标移动
mouseout:鼠标离开
mouseup:鼠标弹起
reset:表单重置
submit:表单提交
change:下拉列表选中项改变,或文本框内容改变
select:文本选定
load:页面加载完执行
onxxx:这个事件句柄出现在一个标签的属性位置上或紧跟函数
回调函数:自己把这个函数代码写出来了,但是这个函数不是自己负责调用的,有其他程序负责调用该函数(就相当函数不在自己的块内调用,代码于其他部分调用这个函数)
注册事件
注册事件的第一种方式,直接在标签中使用事件句柄
<body>
<script>
//对于这个程序来说sayHello是一个回调函数
function sayHello(){
alert("hello");
}
</script>
<!--以下代码的含义:将sayHello函数注册到按钮上,等待click事件发生后,该函数被浏览器调用。我们称从这个函数为回调函数-->
<input type="button" value="hello" onclick="sayHello()">
</body>
第二种注册方式:是使用纯js代码完成事件注册
<body>
<input type="button" value="hello2" id="mybth">
<input type="button" value="hello3" id="mybth1">
<input type="button" value="hello4" id="mybth2">
<script>
function doSome(){
alert("do some")
}
//第一步:先获取这个按钮对象,document全部小写,内置对象直接使用,document就代表整个HTML页面
var bthObj = document.getElementById("mybth");//通过id值获取对象
// 第二步:给按钮对象的onclick属性赋值
bthObj.onclick = doSome;//千万别加小括号,该函数是回调函数这行函数的意思是将回调函数注册到click事件上
var bthObj1 = document.getElementById("mybth1");
mybth1.onclick = function(){//这个函数没有名字叫做匿名函数这个匿名函数也是一个回调函数
alert("test")//这个函数在页面打开时不会执行,不会调用,在click事件发生后才会被调用
}
document.getElementById("mybth2").onclick = function(){
alert("test2")
}
</script>
</body>
代码执行顺序
load:页面加载完毕执行,页面所有元素加载完,此时id也一加载完,才执行ready函数此时可以获得id值
以下代码执行发生错误,应为代码从上而下执行而id在getElementById(获取id)之后,所以script部分拿不到id值
<script>
document.getElementById("btn").onclick =function(){
alert("hello")
}
</script>
<input type="button" value="h" id ="btn">
解决方法在body加onclick
或看解决方法二常用
<body onload="ready()">
<script >
function ready(){
document.getElementById("btn").onclick =function (){
alert("hello")
}
}
</script>
<input type="button" value="h" id ="btn">
</body>
解决方法二
<body >
<script >
//页面加载过程中,将a函数注册给了onload
//页面加载完毕,执行onload函数执行,此时执行回调函数a
//a执行过程中吧b函数注册给了id="btn"的click事件
//当b的click执行时,b调用并执行
window.onload = function ready(){//这个是回调函数a
document.getElementById("btn").onclick =function (){//这一部分是这个是回调函数b
alert("hello")
}
}
/*
两个回调函数, document.getElementById("btn")在页面全部加载完执行
onclick =function (){alert("hello")}在鼠标点击事务发生之后执行
*/
</script>
<input type="button" value="h" id ="btn">
</body>
捕捉回车键
对于每一个键盘时间来说,都有keyCode属性获取键值
回车键键值是13 ESC键值是27
捕捉回车键:键盘按下回车会登录信息
<body>
<script>
window.onload = function(){
document.getElementById("a").onkeydown=function(c){//c参数用来接收传过来的事件,不带参数下边没办法调用事件
if(c.keyCode === 13){
alert("正在验证...")
}
}
}
</script>
<input type="text" id="a">
</body>
void运算符
当href=“”为空时表示为本地路径还是会重新跳转到当前页面
void运算符的语法。void(表达式)
运算原理,执行表达式,但不返回任何结果
javascript:void(0)
其中javascript:作用是告诉浏览器后边是一段JS代码,以下程序javascript不可省略
要求:既保留超链接样式(有下划线有小手)同时用户点击超链接时执行一次JS代码,但页面不能跳转
以下超链接样式
<a href="">既保留超链接样式(有下划线有小手)但没有执行JS代码,页面能跳转自己当前界面</a>
下面代码实现了 既保留超链接样式同时用户点击超链接时执行一次JS代码但页面不能跳转
<a href="" οnclick="window.alert('hello')">既保留超链接样式(有下划线有小手)同时用户点击超链接时执行一次JS代码,但页面能跳转当前界面</a>-->
<body>
页面顶部<br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br>
<a href="javascript:void(0)" onclick="window.alert('hello')">既保留超链接样式(有下划线有小手)同时用户点击超链接时执行一次JS代码,但页面不能跳转</a>
</body>
js里的控制语句
跟Java用法一样
1.if 2.switch 3.while 4.for循环 5.do...while 6.break
7.continue 8.for.. in(了解 9.with语句(了解
获取文本框内容
1.javascript包括三大块
ECMAScript:js的核心语法(E/S规范)
DOM:文档对象的模型,对网页当中的节点进行增删改的过程。HTML文档被当做一颗DOM树来看待
var domObj = document.getElemenntById("id");
BOM:浏览器对象模型
关闭浏览器串口,打开新浏览器窗口、后退、前进、浏览器地址栏上的地址等都是BOM编程
2.DOM和BOM区别和联系
BOM的顶级对象是window
DOM的顶级对象是:documnet
实际上BOM是包括DOM
<body>
<input type="text" id = "username">
<input type="button" value="获取文本框内容" id="btn">
<script>
function fun1(){
document.getElementById("btn").onclick=function(){
alert( document.getElementById("username").value);
}
}
fun1() ;
</script>
<br><br>
<input type="tsxt" id = "u1">
<br>
<input type="tsxt" id = "u2">
<input type="button" value="将第一个文本框上的value值赋值给第二个文本框" id="setBtn">
<script>
function fun2(){
document.getElementById("setBtn").onclick=function(){
document.getElementById("u2").value = document.getElementById("u1").value
}
}
fun2();
</script>
<!--blur时间失去焦点-->
<!--以下代码中的this代表的是当前结点对象,this.value就是这个节点的属性-->
<input type="text" onblur="alert(this.value)">
</body>
innerHTML和innerText
innerHTML:后面的代码会被解析执行
innerText:后面的代码不会解析执行,就是字符串
<body>
<script>
window.onload = function(){
document.getElementById("btn").onclick = function(){
var d=document.getElementById("div1")
d.innerHTML = "<font color='red'>用户名不能为空</font>"
d.innerText = "<font color='red'>用户名不能为空</font>"
}
}
</script>
<input type="button" value="设置div中的内容" id ="btn"><br><br>
<div id = "div1"></div>
</body>
正则表达式
1.正则表达式是什么
主要用在字符串格式匹配方面
2.正则表达式对我们编程javascript掌握哪些内容
1.常见的正则表达式符号要认识
2.简单的正则表达式是要会写
3.他人编写的正则表达式能看懂
4.在javascript当中怎么创建表达式对象
5.在javascript当中,正则表达式对象有哪些方法
6.要能够快速的从网络上找到自己需要的正则表达式,并且测试其有限性
3.很常见的正则表达式
.匹配换行符以外的任意字符
\w匹配字母或数字或下划线或汉字
\s匹配任意的空白符
\d配数字
\b匹配单词的开始或结束
^匹配字符串的开始
$匹配字符串的结束
*重复零次或更多次
+重复一次或更多次
?重复零次或一次
{n}重复n次
{n,}重复n次或更多次
{n,m}重复n到m次
\W匹配任意不是字母、数字、下划线、汉字的字符
\S匹配任意的不是空白符的字符
\D匹配任意非数字的字符
\B匹配不是单词开始或结束的位置
[^x]匹配除x以外的任意字符
[^aeiou]匹配除了aeiou这几个字母以外的任意字符
\后面跟特殊字符就变成普通字符了
正则表达式当中的小括号优先级较高
[1-9]表示1-9任意一个数字(次数是一次)
[A-Za-z0-9]表示A-Za-z0-9中任意一个字符
[A-Za-z0-9-]表示A-Za-z0-9、-中任意一个字符
怎样创建正则表达式对象,怎样调用正则表达式的方法?
第一种
var regExp = new RegExp("正则表达式",flags);
第二种
var regExp = /正则表达式/flags;
关于flags
g:全局匹配
i:忽略大小写
m:多行搜索(ES规范制定后才支持m)当前面是正则表达式时m不能使用
正则表达式对象的test()方法
true/false=正则表达式.test(用户填写字符串)
true:字符串个数匹配成功
FALSE:失败
邮箱地址的正则表达式
<body>
<script>
window.onload = function(){
document.getElementById("btn").onclick = function(){
var email = document.getElementById("email").value;
var emailRegExp = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;
var ok = emailRegExp.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">
<span id = "emailError" style="color :red; font-size:12px; " ></span>
<br>
<input type="button" value="验证邮箱" id="btn">
</body>
扩展字符串的trim
trim()去除字符串的前后空白
<body>
<script>
window.onload = function(){
//trim()去除字符串的前后空白
document.getElementById("btn").onclick = function(){
var username = document.getElementById("username").value
alert ( username.trim());
}
}
</script>
<input type="text" id="username">
<input type="button" value="获取用户名" id="btn">
</body>
案例:表单验证 (java开发会用到类似)
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>表单验证</title>
<style>
span{
color: red;
font-size: 12px;
}
</style>
</head>
<script>
window.onload = function(){
var usernameEroorSpan = document.getElementById("usernameError")
var usernameElt = document.getElementById("username");
usernameElt.onblur = function(){
//获取用户名
var username = usernameElt.value;
// 去除前后空白
username =username.trim();
// 判断用户名是否为空
if(username){
// 用户名不为空
// 据需判断长度[6-14]
if(username.length<6 ||username.length>14){
//用户名长度不合法
usernameEroorSpan.innerText="用户名长度必须在6-14之间"
}else{
// 用户名长度合法
// 判断是否符合正则
var regExp = /^[A-Za-z0-9]+$/;
var ok = regExp.test(username);
if(ok){
// 合法
}else{
// 用户名出现特殊符号
usernameEroorSpan.innerText="用户名只能有数字和字母组成"
}
}
}else{
//用户名为空
usernameEroorSpan. innerText="用户名不能为空"
}
usernameElt.onfocus=function(){
// 清空不合法的value
if(usernameEroorSpan.innerText !=""){
usernameElt.value=""
}
//清空后面的span
usernameEroorSpan.innerText="";
}
}
// 获取密码错误提示的span标签
var pwdErrorSpan= document.getElementById("pswError")
// 获取确认密码对象
var userpwd2Elt = document.getElementById("psw2");
//绑定失去焦点事件
userpwd2Elt.onblur = function(){
//获取密码和确认密码
var userpwdElt = document.getElementById("psw");
var userpwd =userpwdElt.value
var userpwd2 =userpwd2Elt.value
if(userpwd != userpwd2){
//密码不一致
pwdErrorSpan.innerText = "密码不一致"
}else{
//密码一致
}
userpwd2Elt.onfocus=function(){
//清空不合法的value
if(pwdErrorSpan.innerText !=""){
userpwd2Elt.value=""
}
// 清空不合法的span
pwdErrorSpan.innerText=""
}
}
//给email绑定blur事件
var emailElt = document.getElementById("email")
//获取email的span
var emailSpan = document.getElementById("emailError")
emailElt.onblur = function(){
// 获取email
var email = emailElt.value;
// 编写email的正则
var emailRegExp = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;
var ok1 = emailRegExp.test(email);
if(ok1){
}else{
emailSpan.innerText="输入不合法"
}
}
emailElt.onfocus = function(){
// 清空错误提示和内容
if(emailSpan.innerText !=""){
emailElt.value = ""
}
emailSpan.innerText =""
}
// 给提交按钮绑定鼠标单击事件
var submitbtnElt = document.getElementById("submitBth")
submitbtnElt.onclick = function(){
//触发username userpwd2 email的blue
//不需要人工操作,使用纯就是代码触发事件
usernameElt.focus();
usernameElt.blur();
userpwd2Elt.focus();
userpwd2Elt.blur()
;
emailElt.focus();
emailElt.blur();
//当表单所有项都是合法提交表单
if(usernameEroorSpan.innerText == ""&& pwdErrorSpan.innerText == "" && emailSpan.innerText==""){
var userformElt = document.getElementById("userform")
userformElt.action = "http://127.0.0.1:3306/text/student"
//提交表单
userformElt.submit()
}
}
}
</script>
<body>
<!--表单提交应用post,这里为了检测用了get-->
<!--form本省有submit属性-->
<form id="userform" method="get">
用户名<input type="text" name="username" id="username"><span id="usernameError"></span><br>
密码<input type="password" name="psw" id="psw"><br>
确认密码<input type="password" id="psw2"><span id="pswError"></span><br>
邮箱<input type="text" name="email" id="email"><span id="emailError"></span><br>
<!--如果这样写不合法submit也会提交-->
<!--<input type="submit" value="注册" id="sub">-->
<input type="button" value="注册" id="submitBth">
<input type="reset" value="重置" id="rs">
</form>
</body>
案例:复选框的全选和取消全选
<body>
<script>
/* window.onload = function(){
var firstChk = document.getElementById("firstChk");
firstChk.onclick=function(){
//获取第一个复选框的状态
// checked选中返回true 未选中返回false
var aihao = document.getElementsByName("aihao")
if(firstChk.checked){
for(var i=0;i<aihao.length;i++){
aihao[i].checked = true
}
}else{
for(var i=0;i<aihao.length;i++){
aihao[i].checked = false
}
}
}
}*/
//上述代码优化(最上边的选中则所有都选中,最上边的取消则所有都取消)
window.onload = function(){
var aihaos = document.getElementsByName("aihao")
var firstChk = document.getElementById("firstChk")
firstChk.onclick = function(){
for(var i =0;i<aihaos.length;i++){
aihaos[i].checked = firstChk.checked
}
}
var all = aihaos.length
for(var i =0;i<all;i++){
aihaos[i].onclick = function(){
var checkCount = 0;
for(var i =0;i<all;i++){
if(aihaos[i].checked){
checkCount++
}
}
/* if(all == checkCount){
firstChk.checked = true;
}else{
firstChk.checked = false;
}*/
firstChk.checked =(all == checkCount)
}
}
}
</script>
<input type="checkbox" id="firstChk">
<input type="checkbox" name="aihao" value="smoking">抽烟
<input type="checkbox" name="aihao" value="drinking">喝酒
<input type="checkbox" name="aihao" value="firehair">烫头
</body>
案例:获取下拉列表的选中项
<body>
<!--<select onchange="alert(this.value)" >
<option value="01" >河北省</option>
<option value="02" >河南省</option>
<option value="04" >山东省</option>
<option value="05" >山西省</option>
</select>-->
<script>
window.onload = function(){
var provinceList = document.getElementById("p")
provinceList.onchange = function(){
alert(p.value)
}
}
</script>
<select id="p" >
<option value="01" >河北省</option>
<option value="02" >河南省</option>
<option value="04" >山东省</option>
<option value="05" >山西省</option>
</select>
</body>
周期函数
<body>
<script>
//Date可以用来获取时间/日期
// 获取系统当前时间
var nowTime = new Date();
//输出
document.write(nowTime);
document.write("<br>")
// 转换成具有本地语言格式的日期环境
nowTime = nowTime.toLocaleString();
document.write(nowTime);
document.write("<br>")
document.write("<br>")
// 自定义日期格式
var t = new Date();
var year = t.getFullYear()
var month = t.getMonth()
var dayOfWeek = t.getDay()//获得一周的第几天0-6
var day = t.getDate();
document.write(year+"年"+(month+1)+"月"+day+"日")
document.write("<br>")
document.write("<br>")
//重点:怎么获取毫秒数从1970年1.1.00:00:00到了当前系统时间的总毫秒数
document.write(new Date().getTime( ));//时间戳
document.write("<br>")
document.write("<br>")
</script>
<script>
function displayTime(){
var time1 = new Date();
var strTime = time1.toLocaleString();
document.getElementById("time").innerHTML = strTime;
}
function start(){
//setInterval 隔一定的周期执行函数
v = window.setInterval("displayTime()",1000);
}
function end(){
//setInterval的返回值是clearInterval,clearInterval接收到返回值停止setInterval执行
window.clearInterval(v)
}
</script>
<br><br>
<input type="button" value="显示系统时间" onclick="start();" >
<input type="button" value="结束" onclick="end();" >
<div id = "time"></div>
</body>
内置支持类Array
Array创建数组
<body>
<script>
/* var arr = [];
alert(arr.length)
var arr2 = [1,2,3,4,5,6]
alert(arr2.length)
arr2[7]="test"//不会越界自动扩容
arr2[8]="ek"
for(var i =0;i<arr2.length;i++){
document.write(arr2[i])//123456undefinedtestek
}
//另一种创建数组的方法
var a= new Array();
var a1= new Array(3)
var a2= new Array(3,2)
alert(a.length)//0
alert(a1.length)//3
alert(a2.length)//2*/
var a3 = [1,2,3,9]
var str = a.join("-")
alert(str)
//1-2-3-9
// zai末尾加一个元素1-2-3-9-10
a3.push(10)
alert(a.join("_"))
//弹出末尾一个元素
var end =a3. pop();
alert(end);//10
alert(a3.jion("-"))//1-2-3-9
// JS数据结构可以自动模拟栈的结构:后进先出,先进后出
</script>
</body>
open和close
close:关闭当前打开的窗口
open:打开相应窗口
<body>
<input type="button" value="开启百度(新窗口)" onclick="window.open('http://www.baidu.com');">
<input type="button" value="开启百度(当前窗口)" onclick="window.open('http://www.baidu.com','_self');">
<input type="button" value="开启百度(新窗口)" onclick="window.open('http://www.baidu.com','_blank');">
<input type="button" value="开启百度(父窗口)" onclick="window.open('http://www.baidu.com'),'_parent';">
<input type="button" value="开启百度(顶级窗口)" onclick="window.open('http://www.baidu.com','_top');">
<input type="button" value="dakaibiaodan" onclick="window.open('表单.html')">
<input type="button" value="guanbi" onclick="window.close();">
</body>
弹出消息框和确认框(开发会用到)
<body>
<script>
function del(){
if(window.confirm("确认删除")){
alert("delete data。。。")
}
}
</script>
<input type="button" value="弹出消息框" onclick="window.alert('消息框');">
<input type="button" value="弹出确认框(删除)" onclick="del();">
</body>
历史记录(界面后退)
window.history.back():界面返回上一个运行界面
页面一:
<body>
<a href="007.html">007</a>
</body>
页面二
<body>
<input type="button" value="后退" onclick="window.history.back()">
<input type="button" value="后退" onclick="window.history.go(-1)">
</body>
将当前窗口设置为顶级窗口(开发要用)
固定代码格式:window.top.location=window.self.location;
代码界面一:
<body>
<div>
<iframe src="005dingji.html" width="500px" height="500px"></iframe>
</div>
代码界面二:005
<body>
<div>
005
<script type="text/javascript">
function setTop(){
if(window.top != window.self){
//将当前窗口设置为顶级窗口
window.top.location=window.self.location;
}
}
</script>
<input type="button" onclick="setTop()" value="如果当前窗口不是顶级窗口的话,将它设置为顶级窗口"></div>
</body>