B站动力节点JavaScript随课笔记-----ECMAScript部分

最新推荐文章于 2024-07-24 11:09:48 发布

vcetor宝

最新推荐文章于 2024-07-24 11:09:48 发布

阅读量75

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/2301_76154774/article/details/128586393

版权

<!DOCTYPE html>
<html>
   <head>
       <title>HTML中嵌入JS代码的第一种方式</title>
   </head>
   <body>
       <!--
           1、要实现的功能：
               用户点击以下按钮，弹出消息框。
           2、JS是一门事件驱动型的编程语言，依靠事件去驱动，然后执行对应的程序。
           在JS中有很多事件，其中有一个事件叫做：鼠标单击，单词：click。并且任何
           事件都会对应一个事件句柄叫做：onclick。【注意：事件和事件句柄的区别是：
           事件句柄是在事件单词前添加一个on】，而事件句柄是以HTML标签的属性存在的。

           3、οnclick="js代码"，执行原理是什么？
               页面打开的时候，js代码并不会执行，只是把这段JS代码注册到按钮的click事件上了。
               等这个按钮发生click事件之后，注册在onclick后面的js代码会被浏览器自动调用。

           4、怎么使用JS代码弹出消息框？
               在JS中有一个内置的对象叫做window，全部小写，可以直接拿来使用，window代表的是浏览器对象。
               window对象有一个函数叫做：alert，用法是：window.alert("消息");这样就可以弹窗了。

           5、JS中的字符串可以使用双引号，也可以使用单引号。

           6、JS中的一条语句结束之后可以使用分号“;”,也可以不用。
       -->
       <input type="button" value="hello" οnclick="window.alert('hello js')"/>

</body>
</html>

---------------------------------------------------------

<script type="text/javascript">
   window.alert("first...");
</script>
<!DOCTYPE html>
<html>
   <head>
       <title>HTML中嵌入JS代码的第二种方式</title>
       <script type="text/javascript">
           window.alert("head...");
       </script>

   </head>
   <body>

       <input type="button" value="我是一个按钮1" />

<script type="text/javascript">
           /*
               暴露在脚本块当中的程序，在页面打开的时候执行，
               并且遵守自上而下的顺序一次逐行执行。（这个代码的执行不需要事件）
           */
           window.alert("Hello World");//alert函数会阻塞整个HTML页面的加载。

           //JS代码的注释，这是单行注释。
           /*
               JS代码的多行注释。和java一样。
           */
           window.alert("Hello JavaScript");
       </script>

</body>
</html>

-------------------------------------

<!DOCTYPE html>
<html>
   <head>
       <title>HTML中嵌入JS代码的第三种方式：引入外部独立的js文件。</title>
   </head>
   <body>

<script type="text/javascript" src="./1.js"></script>

       
       <script type="text/javascript" src="./1.js">
           //这里写的代码不会执行
           //window.alert("Test");
       </script>

------------------------------

window.alert("hello js！");
window.alert("hello js teset！");

----------------------------------------------

<!DOCTYPE html>
<html>
   <head>
       <title>关于JS中的变量</title>
   </head>
   <body>
       <script type="text/javascript">
           /*
               javascript当中的变量？
                   怎么声明变量？
                       var 变量名;
                   怎么给变量赋值？
                       变量名 = 值;
                   javascript是一种弱类型语言，没有编译阶段，一个变量可以随意赋值，赋什么类型的值都行。
                       var i= 100;
                       i = false;
                       i = "abc";
                       i = new Object();
                   重点：javascript是一种弱类型编程语言。java为强类型编程语言。
           */
           //在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 = "abc";
alert(a);

</script>
</body>
</html>

--------------------------

<!DOCTYPE html>
<html>
   <head>
       <title>JS函数初步</title>
   </head>
   <body>
       <script type="text/javascript">
           /*
               1、JS中的函数：
                   等同于java语言中的方法，函数也是一段可以被重复利用的代码片段。
                   函数一般都是可以完成某个特定功能的。
               2、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" οnclick="sayHello('jack')" />
       <input type="button" value="计算10和20的求和" οnclick="sum(10, 20)" />
   </body>
</html>

------------------------------

<!DOCTYPE html>
<html>
   <head>
       <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("结果=" + retValue);// 结果=3

           function test1(username){
               alert("test1");
           }
           /*
               在JS当中，函数的名字不能重名，当函数重名的时候，侯生明的函数会将之前声明的同名函数覆盖。
           */
           function test1(){
               alert("test1 test1");
           }
           test1("lisi");//test1 test1

</script>
</body>
</html>

-----------------------------

<!DOCTYPE html>
<html>
   <head>
       <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();

           //报错（语法不对）age is not defined
           //alert("age = " + age);

           //以下语法是很奇怪的
           function myFun(){
               //当一个变量声明的时候没有使用var关键字，那么不管这个变量是在哪里声明的，都是全局变量
               myname = "dujubin";
           }

myFun();

           alert("myname = " + myname);//myname = dujubin

       </script>
   </body>
</html>

--------------------------------

<!DOCTYPE html>
<html>
   <head>
       <title>JS中的数据类型</title>
   </head>
   <body>
       <script type="text/javascript">
           /*
               1、虽然JS中的变量在生命的时候不需要指定数据类型，但是在赋值，每一个数据还是有类型的，
               JS包括哪些数据类型？
                   JS中数据类型有：原始类型、引用类型。
                   原始类型：Undefined、Number、String、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);//3

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" null属于Null类型，但是typeof运算符的结果是"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>

------------------------------------

<!DOCTYPE html>
<html>
   <head>
       <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>

--------------------------------

<!DOCTYPE html>
<html>
   <head>
       <title>Number类型</title>
   </head>
   <body>
       <script type="text/javascript">
           /*
               1、Number类型包括哪些值？
                   整数、小数、正数、负数、不是数字（NaN）、无穷大（Infinity）都属于Number类型。
               2、isNaN():结果是true表示不是一个数字，结果是false表示是一个数字。
               3、parseInt()函数
               4、parseFloat()函数
               5、Math.ceil()函数（Math是数学类，数学类当中有一个函数叫做ceil(),作用是向上取整。）
           */
           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);

           alert(10 / 3);//3.333333333

           //关于isNaN函数？
           //用法：isNaN(数据)，结果是true表示不是一个数字，结果是false表示是一个数字
           //isNaN ： is Not a Number
           function sum(a,b){
               if(isNaN(a) || isNaN(b)){
                   alert("参与运算的必须是数字@！");
                   return;
               }
               return alert(a + b);
           }
           sum(100, "abc");
           sum(100, 200);

           //parseInt():可以将字符串自动转换成数字，并且取整数位
           alert(parseInt("3.9999"));//3
           alert(parseInt(3.9999));//3

           //parseFloat():可以将字符串自动转换成数字
           alert(parseFloat("3.14") + 1);//4.14
           alert(parseFloat("3.2") + 1);//4.2

           //Math.ceil()
           alert(Math.ceil("2.1"));//3

</script>
</body>
</html>

-----------------------------------

<!DOCTYPE html>
<html>
   <head>
       <title>Boolean类型</title>
   </head>
   <body>
       <script type="text/javascript">
           /*
               1、JS中的布尔类型永远都只有两个值：true和false（这一点和java相同。）
               2、在Boolean类型中有一个函数叫做：Boolean().
                   语法格式：
                       Boolean(数据)
                   Boolean()函数的作用是将非布尔类型转换成布尔类型。
           */

           /*
           var username = "jack";
           if(Boolean(username)){
               alert("欢迎你" + username);
           }else{
               alert("用户名不能为空！");
           }
           */

var username = "jack";
//var username = "";

           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>

--------------------

<!DOCTYPE html>
<html>
   <head>
       <title>String类型</title>
   </head>
   <body>
       <script type="text/javascript">
           /*
               String类型：
                   1、在JS当中字符串可以使用单引号，也可以使用双引号。
                       var s1 = 'abcdef';
                       var s2 = "test";
                   2、在JS当中，怎么创建字符串对象呢？
                       两种方式：
                           第一种：var s = "abc";
                           第二种（使用JS内置的支持类String）： var s2 = new String("abc");
                       需要注意的是：String是一个内置的类，可以直接用，String的父类是Object。
                   3、无论小string还是大String,他们的属性和函数都是通用的。
                   4、关于String类型的常用属性和函数？
                       常用函数：
                           length获取字符串长度
                       常用函数：
                           indexOf       获取指定字符串在当前字符串中第一次出现处的索引
                           lastIndexOf 获取指定字符串在当前字符串中最后一次出现处的索引
                           replace           替换
                           substr           截取子字符串
                           substring       截取子字符串
                           toLowerCase       转换小写
                           toUpperCase       转换大写
                           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("%","&"));//name=value&name=value%name=value

           //继续调用replace方法，替换
           //想全部替换需要使用正则表达式。
           alert("name=value%name=value%name=value".replace("%","&").replace("%","&"));//name=value&name=value&name=value

           //substr和substirng的区别？
           //substr(startIndex, length)
           alert("abcdefxyz".substr(2,4));// cdef
           //substring(startIndex, endIndex)注意：不包含endIndex
           alert("abcdefxyz".substring(2,4));// cd

</script>
</body>
</html>

-----------------------------

<!DOCTYPE html>
<html>
   <head>
       <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是形参，属于局部变量
               //声明属性(this表示当前对象)
               //User类中有三个属性：sno/sname/sage
               this.sno = a;
               this.sname = b;
               this.age = c;
           }

           //创建对象
           var u1 = new User(111, "zhangsan", 30);
           //访问对象的属性
           alert(u1.sno);
           alert(u1.sname);
           alert(u1.sage);

           var u2 = new User(222, "jackson", 55);
           //访问对象的属性
           alert(u2.sno);
           alert(u2.sname);
           alert(u2.sage);

           //访问一个对象的属性，还可以使用这种语法
           alert(u2["sno"]);
           alert(u2["sname"]);
           alert(u2["sage"]);

           //定义类的另一种语法
           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(panme);

           //给String扩展一个函数
           String.prototype.suiyi = function(){
               alert("这是给String类型扩展的一个函数，叫做suiyi");
           }

"abc".suiyi();

</script>
</body>
</html>

------------------------------

<!DOCTYPE html>
<html>
   <head>
       <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"

           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>

--------------------------

<!DOCTYPE html>
<html>
   <head>
       <title>JS的常用事件-注册事件的两种方式</title>
   </head>
   <body>
       <script type="text/javascript">
           /*
               JS中的事件：
                   (1) blur失去焦点
                   (2)   change下拉列表选中项改变，或文本框内容改变
                   (3)   click鼠标单击
                   (4) dblclick鼠标双击
                   (5) focus获得焦点
                   (6) keydown键盘按下
                   (7) keyup键盘弹起
                   (8) load页面加载完毕（整个HTML页面中所有的元素全部加载完毕之后发生。）
                   (9) mousedown鼠标按下
                   (10) mouseover鼠标经过
                   (11) mousemove鼠标移动
                   (12) mouseout鼠标离开
                   (13) mouseup鼠标弹起
                   (14) reset表单重置
                   (15) select文本被选定
                   (16) submit表单提交

               任何一个事件都会对应一个事件句柄，事件句柄是在事件前添加on。
               onXXX这个事件句柄出现在一个标签的属性位置上。（事件句柄以属性的形式存在。）

*/
           //对于当前程序来说，sayHello函数被称为回调函数(callback函数)
           //回调函数的特点：自己把这个函数代码写出来，但是这个函数不是自己负责调用，由其它程序负责调用该函数
           function sayHello(){
               alert("hello js!");
           }
       </script>
       
       
       <input type="button" value="hello" οnclick="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("test222222.......");
           }
       </script>

</body>
</html>

----------------------

<!DOCTYPE html>
<html>
   <head>
       <title>关于JS代码的执行顺序</title>
   </head>
   
   <body οnlοad="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>

</body>
</html>

---------------------

<!DOCTYPE html>
<html>
   <head>
       <title>关于JS代码的执行顺序</title>
   </head>
   <body>

</script>

</body>
</html>

----------------

<!DOCTYPE html>
<html>
   <head>
       <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>

</body>
</html>

-------------------------------------

<!DOCTYPE html>
<html>
   <head>
       <title>JS代码捕捉回车键</title>
   </head>
   <body>
       <script type="text/javascript">
           window.onload = function(){
               var usernameElt = document.getElementById("username");
               //回车键的键值是13
               //ESC键的键值是27
               /*
               usernameElt.onkeydown = function(a, b, c){
                   //获取键值
                   //alert(a);//[object KeyboardEvent]
                   //alert(b);
                   //alert(c);
               }
               */
               /*
               usernameElt.onkeydown = function(event){
                   //获取键值
                   //对于“键盘事件对象”来说，都有keyCode属性用来获取键值
                   alert(event.keyCode);
               }
               */
               usernameElt.onkeydown = function(event){
                   if(event.keyCode === 13){
                       alert("正在进行验证");
                   }
               }
           }
       </script>
       <input type="text" id="username"/>
   </body>
</html>

------------------

<!DOCTYPE html>
<html>
   <head>
       <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><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><b r><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>

<a href="javascript:void(0)" οnclick="window.alert('test code')">
           既保留住超链接的样式，同时用户点击该超链接的时候执行一段JS代码，但页面不能跳转。
       </a>
       <br><br><br>

   </body>
</html>

---------------------

<!DOCTYPE html>
<html>
   <head>
       <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,"abc",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("张三", "444");
           alert(u.username + "," +u.password);
           alert(u["username"] + "," +u["password"]);

           for(var shuXingMing in u){
               //alert(shuXingMing)
               //alert(typeof shuXingMing) // shuXingMing是一个字符串
               alert(u[shuXingMing]);
           }
       </script>
   </body>
</html>