WEB前端学习笔记-JavaScript-ECMAScript
001-HTML中嵌入JavaScript代码的第一种方式.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML中嵌入JavaScript代码的第一种方式</title>
</head>
<body>
<!--
1、要实现的功能：
用户点击一下按钮，弹出消息框。
2、js是一门事件驱动型的编程语言，依靠事件3去驱动，然后执行对应的程序
在js中有很多事件，其中有一个事件叫做：鼠标单机 click 。并且任何事件都会对应一个事件句柄叫做：
onclick。（注意 事件和事件句柄的区别是事件句柄是在事件单词前添加一个on。 而事件是以html的标签属性
存在的。
3、onclick="js代码"，执行原理是什么？
页面打开的时候，js代码并不会执行，只是把这段js代码注册到按钮的click事件上了
等这个按钮发生click事件之后，注册在onclick后面的js代码会被浏览器自动调用
4、怎么使用js代码弹出消息框？
在js中有一个内置的对象叫做window ，全部小写，可以直接拿来使用
window代表的是浏览器对象
window对象有一个函数叫做：alert，用法是：window.alert("消息")这样就可以弹窗了
5、JS中的字符串可以使用双引号也可以使用单引号
6、JS中的一条语句结束之后可以使用分号"；"m也可以不用
-->
<input type="button" value="hello" onclick="window.alert('hello js')" />
<input type="button" value="hello" onclick="window.alert('hello jscode')"/>
<input type="button" value="hello" onclick="window.alert('hello zhangsan')
window.alert('hello lisi')
window.alert('hello wangwu')"/>
<!--window.可以省略-->
<input type="button" value="hello" onclick="alert('hello zhangsan')
alert('hello lisi')
alert('hello wangwu')"/>
</body>
</html>
002-HTML中嵌入JavaScript代码的第二种方式.html
<!--
javascript的脚本块在一个页面当中可以出现多次，没有要求
JavaScript的脚本块出现位置也没有要求，随意。
-->
<script type="text/javascript">//alter有阻塞当前页面加载的作用 直到用户点击对话框
window.alert("first........")
</script>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML中嵌入JS代码的第二种方式</title>
<!--样式块-->
<style type="text/css">
/*
* css代码
*/
</style>
<script type="text/javascript">
window.alert("head.....")
</script>
</head>
<body>
<!--第二种方式：脚本块的方式-->
<script type="text/javascript">
/*
* 暴露在脚本块当中的程序在页面打开的时候执行
* 并且遵守自上而下的顺序依次执行
* 这个代码的执行不需要事件
*/
window.alert("HelloWorld!");
window.alert("hello javascript")
</script>
<input type="button"value="我是一个按钮对象" />
</body>
</html>
<script type="text/javascript">
window.alert("last........")
</script>
003-HTML中嵌入JavaScript代码的第三种方式.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML中嵌入JS代码的第三种方式：引入外部独立的JS文件</title>
</head>
<body>
<!--在需要的位置引入js脚本文件-->
<!--引入外部独立的js文件的时候，js文件当中的代码会遵循自上而下到的顺序依次逐行执行-->
<script type="text/javascript" src="1.js"></script>
<!--同一个js文件可以被引入多次但实际开发中这种需求很少-->
<!--
<script type="text/javascript" src="1.js"/>
这种方式不行，结束的script标签必须有
-->
<script type="text/javascript" src="1.js">
//这里写的代码不会执行
//window.alert("Test");
</script>
<script type="text/javascript">
alert("Hello,Jack!");
</script>
</body>
</html>
004-关于JS中的变量.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>关于JS中的变量</title>
</head>
<body>
<script type="text/javascript">
/*
* 回顾java中的变量
* 1、java中怎么定义声明变量？
* 数据类型 变量名
* 例如
* ini i;
* double b;
* boolean flag;
* 2.java中的变量怎么赋值？
* 使用"="运算符进行赋值运算("="运算符右边先执行，将右边的执行结果赋值给左边的变量)
* 变量名=值
* 例如：
* i= 10;
* d= 3.14;
* flag= false;
* 3、java语言是一种强类型语言，强类型怎么理解？
* java语言存在编译阶段，假设有代码 int i；
* 那么在java中有一个特点是：java程序编译阶段就已经确定了
* i变量的数据类型，该i变量的数据类型在编译阶段是int类型，
* 那么这个变量到最终内存释放，一直都是int类型，不可能变成其他类型
* int i = 10；
* double b = i;
* 这行代码是说声明一个新的变量b，double类型，把i变量中保存的值传给b。
* i还是int类型
*
* i="abc"；这行代码变异的时候会报错。因为i变量的数据类型是int类型，不能将
* 字符串赋给i
*
* java中要求变量声明的时候是什么类型，以后永远都是这种类型，不可变，编译期强行固定变量的数据类型
* 称为强类型语言
*
* public void sum(int a,int b){}
* sum(?,?);
*
* javascript当中的变量？
* 怎么声明变量？
* var 变量名;
* 怎么给变量赋值？
* 变量名=值;
* JavaScript是一种弱类型语言，没有编译阶段，一个变量可以随意赋值，赋什么类型的值都行。
* var i = 100;
* i = false;
* i = "acv";
* i = new object();
* i = 3.14;
* 重点：JavaScript是一种弱类型编程语言
*
*/
//在JS当中，当一个变量没有手动赋值的时候，系统默认赋值undefined
var i;
//undefined在JS中是一个具体的存在值
alert("i="+i);//i = undefined
alert(undefined);
var k = undefined;
alert("k="+k);
//一个变量没有声明定义，直接访问？
//alert(age)//语法错误：age is not defined（变量age不存在，不能这样写）
var a,b,c = 200;
alert("a="+a);
alert("b="+b);
alert("c="+c);
a = false;
alert(a);
a = "avg";
alert(a);
a = 1.2
alert(a);
</script>
</body>
</html>
005-JS函数初步.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JS函数初步</title>
</head>
<body>
<script type="text/javascript">
/*
* 1、JS中的函数：
* 等同于java语言中的方法，函数也是一段可以被重复利用的代码片段。
* 函数一般都是可以完成某个特定功能的
* 2、回顾java中的方法？
* [修饰符列表] 返回值类型 方法名(形式参数列表){
* 方法体;
* }
* 例如：
* public static boolean login(String username,String password){
* ...
* return true;
* }
* boolean loginSuccess = login("admin","123");
*
* 3、JS中的变量是一种弱类型的，那么函数应该怎么定义呢？
* 语法格式：
* 第一种方式：
* function 函数名(形式参数列表){
* 函数体;
* }
* 第二种方式:
* 函数名 = function(形式参数列表){
* 函数体;
* }
*
* JS中的函数不需要指定返回值类型，返回什么类型都行。
*/
function sum(a,b){
//a和b都是局部变量，他们都是形参(a和b都是变量名，变量名随意。)
alert(a+b);
}
//函数必须调用才能执行的
sum(10,20);
//定义函数sayhello
sayHello = function(username){
alert("hello"+username);
}
//调用函数
sayHello("zhangsan");
</script>
<input type="button"value="hello" onclick="sayHello('jack');" />
<input type="button"value="求10和20的和" onclick="sum(10,20);" />
</body>
</html>
006-JS函数初步.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JS函数初步</title>
</head>
<body>
<script type="text/javascript">
/*
* java中的方法有重载机制，JS中的函数能重载吗？
* JS当中的函数在调用的时候，参数的类型没有限制，并且参数的个数也没有限制
* JS就是这么随意 弱类型。
*
* 重载到的含义：
* 方法名或者函数名一样，形参不同(个数、类型、顺序)
*/
function sum(a,b){
return a+b;
}
//调用函数sum
var retValue = sum(1,2);
alert(retValue);
var retValue2 = sum("jack");//jack赋值给a变量，b变量没有赋值，系统默认赋值undefined
alert(retValue2);//jackundefined
var retValue3 = sum();
alert(retValue3);//NAN (NAN是一个具体存在的值，该值表示不是数字.NOT a Number)
var retValue4 = sum(1,2,3);
alert(retValue4);//结果为3
function test1(username){
alert("test1");
}
/*
* 在JS当中，函数的名字不能重名，当函数重名的时候，后声明的函数会讲之前声明
* 的同名函数覆盖
*/
function test1(){
alert("test1test1");
}
test1("lisi")//这里调用的是第二个test1()函数
</script>
</body>
</html>
007-JS的局部变量和全局变量.html
<!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 = "jack";
function accessUsername() {
//局部变量
var username = "lisi";
//就近原则：访问局部变量
alert("username=" + username);
}
//调用函数
accessUsername();
//访问全局变量
alert("username=" + username);
function accessAge() {
var age = 20;
alert("年龄=" + age);
}
accessAge();
//报错 语法不对
//alert("age = "+age);
//以下语法是很奇怪的
function myfun() {
//当一个变量声明的时候没有使用var关键字，那么不管这个变量是哪里声明的，都是全局变量
myname = "zhaotiezhu";
}
//访问函数
myfun();
alert("myname = " + myname);
</script>
</body>
</html>
008-JS中的数据类型.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JS中的数据类型</title>
</head>
<body>
<script type="text/javascript">
/*
* 1、虽然JS中的变量在声明的时候不需要指定数据类型，但是在赋值，每一个数据还是有类型的，所以
* 这里也需要学习一下JS包括哪些数据类型？
* JS中数据类型有:原始类型、引用类型。
* 原始类型:Undefined、Number、Boolean、Null
* 引用类型：Object以及Object的子类
*
* 2、ES规范(ECMAScript规范)在ES6之后，又基于以上的6中类型之外添加了一种新的类型:Symbol
*
* 3、JS中有一个运算符叫做typeof，这个运算符可以在程序的运行阶段动态的获取变量的数据类型
* typeof运算符的语法格式
* typeof 变量名
* typeof运算符的运算结果是以下6个字符串之一：注意字符串全都是小写
* "underfined"
* "number"
* "string"
* "boolean"
* "object"
* "function"
* 4、在JS当中比较字符串是否相等使用"=="完成，没有equals。
*/
//求和,要求a变量和b变量将来的数据类型必须是数字，不能是其他类型
//因为以下定义的这个sum函数是为了完成两个数字的求和
/*
function sum(a,b){
if(typeof a == "number" &&typeof b =="number"){
return a +b;
}
alert(a+","+b+"必须都为数字！");
}
//别人去调用以上你写的sum函数
var retValue = sum(false,"abc");
alert(retValue);//undefined
var retValue2 = sum(1,2);
alert(retValue2);
*/
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"
//sayHello是一个函数
function sayHello(){
}
alert(typeof sayHello);//"function"
</script>
</body>
</html>
009-Undefined类型.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Undefined类型</title>
</head>
<body>
<script type="text/javascript">
/*
* Undefined类型只有一个值，这个值就是 undefined
* 当一个变量没有手动赋值，系统默认赋值undefined
* 或者也可以给一个变量手动赋值undefined。
*/
var i;//undefined
var k = undefined;//undefined
alert(i==k);//true
var y = "undefined";//"undefined"
alert(y==k);//false
</script>
</body>
</html>
010-Number类型.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Number类型</title>
</head>
<body>
<script type="text/javascript">
/*
* 1、Number类型包括哪些值
* -1 0 1 2 33 3.14 100...NaN Infinity
* 整数、小数、正数、负数、不是数字、无穷大都属于Number类型。
* 2、isNaN() ：结果是true表示不是一个数字，结果是false表示是一个数字
* 3、Math.ceil()函数(Math是数学类，数学类当中有一个函数叫做ceil() 作用是向上取整)
* 4、parseInt()函数
* 5、parseFloat()函数
*/
var v1 = 1;
var v2 = 3.14;
var v3 = -100;
var v4 = NaN;
var v5 = Infinity;
//"number"
alert(typeof v1);
alert(typeof v2);
alert(typeof v3);
alert(typeof v4);
alert(typeof v5);
//关于NaN(表示 Not a Number，不是一个数字 但是属于Number类型)
//什么情况下结果是一个NaN呢？
//运算结果本来应该是一个数字，最后算完不是一个数字的时候，结果是NaN。
var a =100;
var b = "中国人";
alert(a/b);//除号显然最后结果应该是一个数字，但是运算的过程中导致最后不是一个数字那么最后的结果就是NaN
var e = "abc";
var f = 10;
alert(e+f);//"abc10"
//Infinity(当除数为0的时候，结果为无穷大)
alert(10/0);
//思考：在JS中10/3 = ?
alert(10/3); //3.3333335
//关于isNaN函数？
//用法：isNaN（数据），结果是true表示不是一个数字，结果是false，表示false是一个数字
//isNaN：is Not a Number
function sum(a,b){
if(isNaN(a)|| isNaN(b)){
alert("参与运算的必须是数字！")
return;
}
return a+b;
}
sum(100,"aaa");
alert(sum(200,300));
//Math.ceil()
alert(Math.ceil("2.1"));//3
//parseInt():可以将字符串自动转换成数字，并且取整数位
alert(parseInt("3.99999"));//3
alert(parseInt(3.99999));//3
//parseFloat():可以将字符串自动转换成数字
alert(parseFloat("3.14")+1);//4.14
alert(parseFloat("3.2")+1);//4.2
</script>
</body>
</html>
011-Boolean类型.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Boolean类型</title>
</head>
<body>
<script type=" text/javascript">
/*
* 1、js中的布尔类型永远都只有两个值 true和false 这一点和hava相同
* 2、在Boolean类型中有一个函数叫做 Boolean()
* 语法格式：
* Boolean(数据)
* Boolean()函数的作用是将非布尔类型转换成布尔类型
*/
var username = "lucy";
/*
if(Boolean(username)){
alert("欢迎你"+username);
}else{
alert("用户名不能为空");
}
*/
/*
if(username){
alert("欢迎你"+username);
}else{
alert("用户名不能为空");
}
*/
//规律：有就转换成true 没有就转换成false
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
/*
while(10/3){
alert("hehe");
}
*/
for(var i = 0;i< 10;i++){
alert("i="+i);
}
//Null类型只有一个值，null
alert(typeof null);//"object"
</script>
</body>
</html>
012-String类型.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>String类型</title>
</head>
<body>
<script type="text/javascript">
/*
* String类型
* 1、在JS中字符串可以使用单引号也可以使用双引号
* var s1 = 'desadnkm';
* var s2 = "dasw";
* 2、在JS当中，怎么创建字符串对象呢？
* 两种方式：
* 1、var s = "abc";
* 2、(使用JS内置的支持类String)：var s2 = new String("abc");
* 需要注意的是：String是一个内置的类，可以直接用，String的父类是Object
* 3、无论小string还是大String，他们的属性和函数都是通用的
* 4、关于String类型的常用属性和函数
* 常用属性：
* length 获取字符串长度
* 常用函数：
* indexOf 获取指定字符串在当前字符串中第一次出现处的索引
* lastIndexOf 获取指定字符串在当前字符串中最后一次出现处的索引
* replace 替换
* substr 截取子字符串
* substring 截取子字符串
* toLowerCase 转换小写
* tpUpperCase 转换大写
* split 拆分字符串
*/
//小string(属于原始类型String)
var x = "king";
alert(typeof x);//"string"
//大String(属于Object类型)
var y = new String("abc");
alert(typeof y);//"object"
//获取字符串的长度
alert(x.length);//4
alert(y.length);//3
alert("http://www.baidu.com".indexOf("http"));//0
alert("http://www.baidu.com".indexOf("https"));//-1
//判断一个字符串中是否包含某个字符串？
alert("http://www.baidu.com".indexOf("https") >=0 ? "包含":"不包含");
//replace(注意:只替换了第一个)
alert("name=value%name=value%name=value".replace("%","&"));
//继续调用replace方法，就会替换第“二”个
//想要全部替换需要使用正则表达式
alert("name=value%name=value%name=value".replace("%","&").replace("%","&"));
//考点：经常问 substr 和substring的区别？
//sub(startIndex,length)
alert("abcdefg".substr(2,4));//cdef
//sybstring(startIndex,endIndex)注意：不含endIndex
alert("abcdefg".substring(2,4))//cd
</script>
</body>
</html>
013-Object类型.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Object类型</title>
</head>
<body>
<script type="text/javascript">
/*
* Object类型：
* 1、Object类型是所有类型的超类，自定义的任何类型，默认继承Object
* 2、Object类包括哪些属性？
* prototype属性（常用的，主要是这个）作用是给类动态的扩展属性和函数
* constructor属性
* 3、Object类包括哪些函数？
* toString();
* valueOf()
* toLocaleString()
* 4、在JS当中定义的类默认继承Object，会继承Object类中所有的属性和函数
* 换句话说，自己定义的类中也有prototype属性
* 5、在JS当中怎么定义类？怎么new对象？
* 定义类的语法:
* 第一种方式:
* function 类名(形参){
*
* }
* 第二种方式：
* 类名 = function(形参){
*
* }
* 创建对象的语法:
* new 构造方法名(实参);//构造方法名和类名一致
*
*/
function sayHello(){
}
//把sayHello当做一个普通的函数来调用
sayHello();
//这种方式就表示把sayHello当做一个类来创建对象
var obj = new sayHello();//obj是一个引用，保存内存地址指向堆中的对象
//定义一个学生类
function Student(){
alert("student...");
}
//当做普通函数调用
Student();
//当做类来创建对象
var stu = new Student();
alert(stu);//[Object][Object]
//JS中的类的定义，同时又是一个构造函数的定义
//在JS中类的定义和构造函数的定义是放在一起来完成的
function User(a,b,c){//a b c 是形参，属于局部变量
//声明属性
//User类中有三个属性：sno/sname/sage
this.sno = a;
this.sname = b;
this.sage = c;
}
//创建对象
var u1 = new User(111,"zhangsan",30)
//访问对象的属性
alert(u1.sage);
alert(u1.sname);
alert(u1.sno);
var u2 = new User(222,"lisi",25)
alert(u2.sage);
alert(u2.sname);
alert(u2.sno);
//访问一个对象的属性，还可以使用这种语法
alert(u2["sno"]);
alert(u2["sname"]);
alert(u2["sage"]);
//定义类的另一种语法
/*
* Emp = function(a,b){
* //属性
* this.ename = a;
* this.sal = b;
* }
*/
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.pname = pname;
this.price = price;
//函数
this.getprice = function(){
return this.price;
}
}
var xigua = new Product(111,"西瓜",4.0);
var pri = xigua.getprice();
alert(pri);//4.0
//可以通过prototype这个属性来给类动态扩展属性及函数
Product.prototype.getPname = function(){
return this.pname;
}
//调用后期扩展的getPname()函数
var pname = xigua.getPname();
alert(pname);
//给String扩展一个函数
String.getPrototype.suiyi = function(){
alert("这是给String类型扩展的一个函数叫做suiyi");
}
"abc".suiyi();
</script>
</body>
</html>
<!--
java语言怎么定义类，怎么创建对象？
public class User{
private String username;
private String password;
public User(){}
public User(String username,String password){
this.username = username;
this.password = password;
}
}
User user = new User();
User user = new User("lisi","123");
JS语言怎么定义类，怎么创建对象?
User = function(username,password){
this.username = username;
this.password = password;
}
var u = new User();
var u = new User("zhangsan");
var u = new User("zhangsan","123");
-->
014-null NaN undefined有什么区别.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>null NaN undefined这三个值有什么区别</title>
</head>
<body>
<script type="text/javascript">
// == 是等同运算符
alert(1 == true); //true
alert(1 === true); //false
//null NaN undefined 数据类型不一致
alert(typeof null);//"object"
alert(typeof NaN);//"number"
alert(typeof undefined);//"undefined"
//null和undefined可以等同
alert(null == NaN);//false
alert(null == undefined);//true
alert(undefined == NaN);//false
//在JS当中有两个比较特殊的运算符
//==(等同运算符，只判断值是否相等)
//===(全等运算符:既判断值是否相等，又判断数据类型是否相等)
alert(null === NaN);//false
alert(null === undefined);//false
alert(undefined === NaN);//false
</script>
</body>
</html>
015-JS中的常用事件-注册事件的两种方式.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JS中的常用事件-注册事件的两种方式</title>
</head>
<body>
<script type="text/javascript">
/*
JS中的事件:
blur 失去焦点
focus获得焦点
click 鼠标单击
dblclick 鼠标双击
keydown键盘按下
keyup键盘弹起
mousedown鼠标按下
mouseover鼠标经过
mousemove鼠标移动
mouseout鼠标离开
mouseup鼠标弹起
reset表单重置
submit表单提交
select文本被选定
change 下拉列表选中项改变，或文本框内容改变
load页面加载完毕(整个HTML页面中所有元素全部加载完毕之后发生)
任何一个事件都会对应一个事件句柄，事件句柄是在事件前添加on
onXXX这个事件句柄出现在一个标签的属性位置上。(事件句柄以属性的形式存在)
*/
//对于当前程序来说，sayHello函数被称为回调函数（callback函数）
//回调函数的特点：自己把这个函数代码写出来了，但是这个函数不是自己负责调用，由其他程序负责调用该函数
function sayHello(){
alert("Hello JS!")
}
</script>
<!--注册事件的第一种方式，直接在标签中使用事件句柄-->
<!--以下代码的含义是：将sayHello函数注册到按钮上，等待click事件发生之后，该函数被浏览器调用，我们称这个函数为回调函数-->
<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,,,");
}
/*
* 第二种注册事件的方式，是使用纯JS代码完成事件的注册。
*/
//第一步：先获取这个按钮对象(document是全部小写，内置对象，可以直接用，document就代表整个HTML页面)
var btnObj = document.getElementById("mybtn");
//第二步：给按钮对象的onclick属性赋值
btnObj.onclick = doSome;//注意：千万别加小括号，btnObj.onClick = doSome();是错误的写法
//这行代码的含义是，将回调函数doSome注册到click事件上
var mybtn1 = document.getElementById("mybtn1");
mybtn1.onclick = function(){//这个函数没有名字，叫做匿名函数，这个匿名函数也会一个回调函数
alert("test....")//这个函数在页面打开的时候只是注册上，不会被调用，在click事件发生之后才会调用
}
document.getElementById("mybtn2").onclick = function(){
alert("test222222222222");
}
</script>
</body>
</html>
<!--
java中也有回调函数机制：
public class Myclass{
public static void main(String[] args){
//主动调用run()方法，站在这个角度看run()方法叫正向调用
run();
}
//站在run方法的编写者角度来看这个方法，把run方法叫做回调函数
public static void run(){
System.out.println("run...")
}
}
-->
016-关于JS代码的执行顺序.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>关于JS代码的执行顺序</title>
</head>
<!--load事件什么时候发生？页面全部元素加载完毕之后才会发生-->
<body onload="ready()">
<script type="text/javascript">
/*
* 第一步 根据id获取节点对象、
* var btn = document.getElementById("btn");//返回null
* 因为代码执行到此处的时候id="btn"的元素还没加载到内存
* 第二步 给节点对象绑定事件
* btn.onclick = function(){
* alert("hello js");
* }
*/
function ready(){
var btn = document.getElementById("btn");
btn.onclick = function(){
alert("hello js");
}
}
</script>
<input type="button"value="Hello" id="btn" />
</body>
</html>
017-关于JS代码的执行顺序.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>关于JS代码的执行顺序</title>
</head>
<body>
<script type="text/javascript">
/*
window.onload = ready;
function ready(){
var btn = document.getElementById("btn");
btn.onclick = function(){
alert("hello js");
}
}
*/
//页面加载的过程中，将a函数注册给了load事件
//页面加载完毕之后，load事件发生了，此时执行回调函数a
//回调函数a执行的过程中，把b函数注册给了id="btn"的click事件
//当id="btn"的节点发生click事件之后，函数b被调用并执行
window.onload = function(){//这个回调函数叫做a
document.getElementById("btn").onclick = function(){这个回调函数叫做b
alert("hello js");
}
}
</script>
<input type="button"value="Hello" id="btn" />
</body>
</html>
018-JS代码设置节点的属性.html
<!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" value="将文本框修改为复选框" id = "btn" />
</body>
</html>
019-JS代码捕捉回车键.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JS代码捕捉回车键</title>
</head>
<body>
<script type="text/javascript">
window.onload = function(){
var usernameElet = document.getElementById("username");
//回车键的健值是13
//ESC键的健值是27
/*
* usernameElt.onkeydown = function(a,b,c){
* //获取健值
* //alert(a);
* //alert(b);
* //alert(c);
* }
*/
/*
* usernameElt.onkeydown = function(event){
* //获取健值
* //对于"键盘事件对象"来说，都有keycode属性用来获取健值
* alert(event.keyCode);
* }
*/
usernameElet.onkeydown = function(event){
if(event.keyCode ===13){
alert("正在进行验证....");
}
}
}
//张三程序员写了这样一个函数
/*
* function sum(){
* alert("sum execute..");
* }
*/
/*
* function sum(a){
* //alert("sum execute.....!");
* alert(a);
* }
//李四程序员调用sum函数
//sum();
sum("hello World");
*/
</script>
<input type="text" id="username" />
</body>
</html>
020-JS的void运算符.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JS中的void运算符</title>
</head>
<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><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><br><br><br><br>
<!--
void运算符的语法：void（表达式
运算原理：执行表达式，但不返回任何结果。
javascript:void(0);
其中JavaScript:作用是告诉浏览器后面是一段js代码
以下程序的javascript：是不能省略的
-->
<a href="javascript:void(0)"onclick="window.alert('testcode')">
既保留住超链接的样式，同时用户点击该超链接的时候执行一段js代码，但页面不能跳转
</a>
<br>
<a href="javascript:void(100)"onclick="window.alert('testcode')">
既保留住超链接的样式，同时用户点击该超链接的时候执行一段js代码，但页面不能跳转
</a>
<br><br>
</body>
</html>
021-JS的控制语句.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JS的控制语句</title>
</head>
<body>
<script type="text/javascript">
/*
* 1、if
* 2、switch
*
* 3、while
* 4、do while
* 5、for循环
*
* 6、break
* 7、continue
*
* 8、for...in 语句(了解)
* 9、with语句(了解)
*/
//创建JS数组
var arr = [false,true,1,2,"asd",3.14];//JS中的数组元素的类型随意，元素的个数随意
//遍历数组
for(var i = 0;i < arr.length ; i++){
alert(arr[i]);
}
//for ..in
for(var i in arr){
//alert(i);
alert(arr[i]);
}
//for...in语句可以遍历对象的属性
User = function(username,password){
this.username = username;
this.password = password;
}
var u = new User("张三","44");
alert(u.username+","+u.password);
alert(u["username"]+","+u["password"]);
for(var shuXingMing in u){
//alert(shuXingMing);
//alert(typeof shuXingMing);//shuXingMing是一个字符串
alert(u[shuXingMing]);
}
alert(u.username);
alert(u.password);
with(u){
alert(username+","+password);
alert(u.test);
}
</script>
</body>
</html>
<!--
public class Test{
public static void main(String[] args){
int[] arr = {1,2,3,4,5,6};
int[] arr2 = new int[5];等同于 int[] arr2 = {0,0,0,0,0,};
String[] arr3 = {"a","b","c"};
String[] arr4 = new String[3];//等同于String[] arr4 = {null,null,null};
}
}
-->