第二阶段（day03）javascript

sunshine195

已于 2022-09-03 15:25:15 修改

阅读量270

点赞数

分类专栏：第二阶段文章标签： java

于 2022-03-28 19:44:25 首次发布

本文链接：https://blog.csdn.net/sunshine195/article/details/123803781

版权

第二阶段专栏收录该内容

27 篇文章 2 订阅

订阅专栏

前端技术三大块：html（决定页面元素），css（决定元素大小，位置，样式，定位等），js（与用户交互的效果）。

3.1简介

一种描述性语言，基于对象和事件驱动的脚本语言（轻量级编程语言，轻量级是指解释执行的，不需要编译，并且由浏览器从上到小，从左到右逐行解析。若有一行错误，后面不再解析）。

1.特点：

脚本语言（一种轻量级的编程语言）
一种解释性语言（无需预编译）

3.被设计为向HTML页面添加交互行为

4.运行于客户端（浏览器）------每个人运行的js只会对自己的浏览器产生效果，故写js代码时不需要考虑执行效率问题，因为运行时只有一个用户。

2.发展历史：

1.95年Netscape公司（以前实力很强，所有浏览器都是用的该公司，微软为打击，在windos里自带ie浏览器）推出一种脚本语言，叫LiveScript。

2.Netscape将其更名为JavaScript

3.微软IE3.0并附带JScript、CEnvi的ScriptEase以及JavaScript三足鼎立

4.97年JavaScript1.1版本被ECMA（欧洲计算机制造商）标准化为ECMAScript（核心语法部分被更名）的脚本语言

3.面试：

JavaScript与ECMAScript的关系

ECMAScript是JavaScript的标准和基础（ECMAScript是JavaScript的核心语法部分）

JavaScript与JAVA的关系

雷锋和雷峰塔的关系（没关系），起该名字是为了借势java。

硬说有关系，就是 JavaScript和Java都与sun公司有合作。

4.Javascript组成

1.什么是ECMAScript

ECMAScript定义了脚本语言的所有属性、方法和对象

包括语法、类型、关键字、保留字、运算符、对象等

除了JavaScript外，同时也是Nombas的ScriptEase和Flash脚本ActionScript的基础

2.什么是DOM

Js中将整个文档对象（html文件）描述成树状模型结构，有元素节点、属性节点、文档节点等等。节点之间有父子关系 js可以通过描述出的节点及关系，动态的操作节点和节点属性。

（树状模型结构：html由双标签互相嵌套：根标签看成html标签，子节点就是head标签和body标签，head和body里也有各自的子元素，分别为它们各自的子元素。通过父子关系查找元素）

综上：dom就是描述这样一个树状结构，查找要操作的元素。

3.什么是BOM

Js可对浏览器窗口进行访问和操作

例如：弹出新的浏览器窗口，移动、关闭浏览器窗口及调节浏览器窗口大小，WEB浏览器详细的定位对象

浏览器的一些按钮，刷新按钮，地址栏，前进后退按钮等，都是浏览器本身的功能，bom可控制浏览器本身的功能。

3.2 Javascript语法

1.Javascript引入方式

如何在页面里编写Javascript代码？

在浏览器开发者工具中看控制台console，可找到js代码。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <!--js引入方式:
        1.页面中使用script标签，编写js代码---调试代码用
        2.创建js文件，再用script标签引入，但要加上src属性(完整的写法还要求type和charset属性，当然不写这两个属性也没影响。)注：用
          该方法，则在script标签内写的js代码无效。即引入就是单纯的引入。----上线前用
        3.在元素上直接编写js。----不建议使用  
        -->
        
        <!-- <script>                        页面中使用script标签，编写js代码
             console.log("hello world!!!!") 
        </script> -->
        
        <!-- <script src="js/myjs.js" type="text/javascript" charset="UTF-8">   创建js文件，再用script标签引入
        console.log("hello world!!!!")   无效 
        </script> -->
        
    </head>
    <body>
        
        <!-- 在元素上直接编写js，不建议使用 
        如下，点击效果可直接写js代码，格式为javascript:js代码
        注意：引号有嵌套效果，引号里的引号用另一种引号表示-->
        <input tabindex="button" value="测试按钮" οnclick="javascript:console.log('hello')" />
    </body>
</html>

2.Javascript基本语法

1.注释

与java相同 //单行注释 /**/多行注释

2.变量

变量声明规则与java基本一致：

1.JavaScript 对大小写敏感，变量名也对大小写敏感（区分大小写）

2.变量必须以字母或下划线或美元符$开始，不能使用关键字作为变量名（不能用数字，关键字作为变量名）

（java中常用关键字记下，不用就行。js里，除了记下常见关键字，还不能与页面里的元素冲突，不能与函数名（相当于java里的方法名）冲突。所以，为了防止各种冲突，不管是变量名还是函数名，最好用多单词+驼峰）

3.JS的变量声明，是通过 var 语句来声明

4.弱类型，声明时无需指定数据类型，赋值时根据值决定类型（声明时不指定变量类型，赋值时由值确定类型）

3.Js中变量类型

1.Number 数字类型（不管小数整数，就这一种）

（java中数字类型：整型：byte，short，int，long；浮点型：float，double；）

2.String 字符串类型（不分字符和字符串）

3.Boolean 布尔类型

4.Undefined 未定义或未初始化类型（弱类型，只声明，不赋值，没有类型。没有类型就是Undefined）

5.Null 表示空对象一般作为对象类型的初始值（创建对象，对象为空，就是Null）

6.Object 复合类型包含js中的各种对象（js里也有各种预制好的对象，这些对象统一叫Object）

4.Typeof关键字可以返回当前变量的类型

用于检测变量当前的类型，typeof运算符返回值如下：

1.undefined：变量被声明后，但未被赋值

2.string：用单引号或双引号来声明的字符串

3.boolean：true或false

4.number：整数或浮点数

5.function：函数方法（js实际就是函数编写的，故函数地位很重要。尽管类型里没有，但检测会检测出来）

6.object：对象或数组或 Null 类型

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script> 
        
            var myNum1 = 10;       /* 变量类型会根据值的类型确定 */
            console.log(myNum1);     /*输出变量，结果为10。控制台会将不同类型的变量用不同颜色表示。数字用蓝色；字符串用黑色表示；*/
            console.log(typeof myNum1);    /* 检测变量的类型，结果为number */
            
            var myStr1 = "abc";   /* 双引号引出是字符串，单引号引出也是字符串，点（键盘左上角，esc下面的点）引出也是字符串。 */
            //var myStr2 = 'abc';
            //var myStr3 = `abc`;
            //var myStr4 = '"abc"';       /* 引号嵌套，单引号里套双引号，或者双引号里套单引号 */
            //var myStr5 = "'abc'";
            console.log(myStr1); 
            console.log(typeof myStr1);
            
            var mybol1 = true;
            //var mybol1 = false;      布尔值也是蓝色标记
            console.log(mybol1);  
            console.log(typeof mybol1);
            
            var myVar;
            console.log(myVar);             // 结果为undefined,未初始化类型。颜色为灰色
            console.log(typeof myVar);      //类型为undefined
            
            /* console.log(myVar2);             //未定义类型，控制台会报错。下面的语句不走了 (js从上到下，从左到右，
            逐行解析，解析出错，后面不再运行)
            console.log(typeof myVar2);    */
            
            /* console.log(typeof myVar2);    //undefined,可检测出该类型
            console.log(myVar2);           //报错 */
            
            var myDate = new Date();
            console.log(myDate);
            console.log(typeof myDate);    //object
            
            var myFun = function(){
                console.log("abc");
            }
            console.log(typeof myFun)      //function
            
        </script>
    </head>
    <body>
    </body>
</html>

5.类型转换函数

1.parseInt():字符串转换为整数

2.parseFloat():字符串转换为浮点数

3.toString()：返回字符串

注意：parseInt parseFloat对字符串的转换

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script> 
        
             var myNumStr1 = "10";
             console.log(parseInt(myNumStr1));    //字符串转整数
             
             var myNumStr2 = "10a";
             console.log(parseInt(myNumStr2));   //也能转成10
             
              var myNumStr3 = "1a0";
              console.log(parseInt(myNumStr3));  //1   规则，从左到右解析，能读出来的给出，碰到解析不了的，停止解析。
             
              var myNumStr4 = "a10";
              console.log(parseInt(myNumStr4));  //NaN   not a number
              console.log(parseInt(typeof myNumStr4));   //number     (设计者应付了事)
              
             var myNumStr5 = "10.01";
             console.log(parseInt(myNumStr5));   //10    (将小数点当成一个特殊字符，停止解析)  故parseInt也可用来截取整数部分
             
             var myNumStr6 = "10.01";
             console.log(parseFloat(myNumStr6));   //10.01    (将小数点给加进来)
             
            var myNumStr7 = "1a0.01";
            console.log(parseFloat(myNumStr7));   //1
            
            var myNumStr8 = "10.0a1";
            console.log(parseFloat(myNumStr8));   //10
            
            var myNumStr9 = "a10.01";
            console.log(parseFloat(myNumStr9));  //NaN
            
            var myNum1 = 10;
            console.log(myNum1.toString());    //10
            
        </script>
    </head>
    <body>
        
    </body>
</html>

3.运算符

Js中运算符与java中基本一致

+可以做数字加也可以做字符串拼接 ,故数字转字符串也可这样：

var myNum2 = 20;
            console.log(myNum2+"");     //20

1.算术运算符：+ - * / % ++ --

2.赋值运算符：= += -= *= /= %=

var myNumStr1 = "10";
myNumStr1+="a";  
console.log(myNumStr1);    //10a

3.比较运算符：> < >= <= == != ===

 var myNum1 = 10;
             var myStr1 = "10";
             console.log(myNum1==myStr1);     //true    js里有一些内置转换，会先将字符型数字和数字做一次转换，若转换成功，
             //就直接当做数字用
             
              console.log(myNum1===myStr1);   //false    希望直接比较，不用内置转换，就用===
              
              //其它内置转换的情况
              var mybol1 = true;
              var myNum2 = 1;
              console.log(mybol1==myNum2);   //true
              console.log(mybol1===myNum2);  //false

4.逻辑运算符：&& || !

console.log(!0);    //true   ！的一个特殊用法：将数值类型转成布尔类型
/* ！0和true的区别，代码压缩，能省两个字符。
              代码压缩：变量名使用缩写，代码变成一行,等等。
              */

注意：小数相加时会丢失精度如0.1+0.2 需要取位数使用toFixed（位数）

             var myNumber1 = 0.1;
             var myNumber2 = 0.2;
             //console.log(myNumber1 + myNumber2 );   //0.30000000000000004    精度丢失  
             //用toFixed保留指定位数的小数，转成的是字符串类型。想要数字再转一下，用parseFloat()
              console.log(（myNumber1 + myNumber2）.toFixed(1) );    //0.3

4.条件语句

条件语句语法与java基本一致

1.If...else

2.Switch...case

<script>
        
        //if-else
            var mySource = 100;
            if(mySource>80){
                console.log("良好");
            }else if(mySource>60){
                console.log("及格");
            }else{
                console.log("差劲");
            }
            
        //switch-case
            var myGrade = 'g';
            switch(myGrade){
                case 'g':console.log("奖励一袋零食");break;
                case 'a':console.log("奖励一颗糖");break;
                case 'x':console.log("奖励一巴掌");break;
                default:console.log("啥都没有");break;
            }
          
        </script>

5.循环语句

循环语句语法与java基本一致

1.For （常用再指定次数的循环）

2.for...in 可循环数组成员

3.While （次数不定，遇到特殊条件时，循环结束的情况）

4.Do...while

//for
            var myarr = [1,4,5,2,4,5];   //js里定义数组，直接[]
            //遍历数组
            for(var i=0;i<myarr.length;i++){
                console.log(myarr[i]);
            }
            
        //for-in循环
            var myarr1 = [1,4,5,2,4,5]; 
            for(var x in myarr1){
                console.log(myarr1[x]);   //x是索引
            }
            
        //while
            var myflag = true;
            while(myflag){
                if(xxx){
                    myflag = false;
                }
            }
            
        //do-while  
            do{
                //循环体
            }while(myflag)

6.课堂练习

1.将1549各个位都摘出来，再相加，并输出相加后的结果。

var myNum = 1549;
            var myGe = myNum%10;
            var myShi = parseInt(myNum/10)%10;
            var myBai = parseInt(myNum/100)%10;
            var myQian = parseInt(myNum/1000);
            var mySum = myGe + myShi + myBai + myQian;
            console.log(mySum);

2.0-6分别表示周日，周一到周六。在控制台输出工作日（一到五）和周末（六和日）

var myDay=0;
            switch(myDay){
                case 0:
                case 6:console.log("周末");break;
                case 1:
                case 2:
                case 3:
                case 4:
                case 5:console.log("工作日");break;
                default:console.log("输入不合法");break;
            }

3.输出乘法口诀表，但不输出到控制台，输出到页面。用document.write("<h1>abc<h1>"); //可带标签

for(var i=1;i<=9;i++){
                for(var j=1;j<=i;j++){
                    document.write(j+"x"+i+"="+j*i );
                    document.write("&ensp;");
                    if(j*i<10){                             //如果不是两位，补一个空格
                        document.write("&ensp;");
                    }
                }
                document.write("<br />");
            }

7.函数

和java里的方法一个意思。分类：

1.系统函数(parseInt(); （系统已准备好的函数，直接调用即可）

2.自定义函数(mytest(); （相当于java里自定义方法）

1.常见的系统函数

parseInt parseFloat 字符串转数字，一个是整型，一个是浮点型

IsNaN 是不是不是一个数字，也就是不是一个数字吗？一般取反用，即是一个数字吗？

console.log(isNaN("abc"));    //true    
             console.log(!isNaN("10"));    //true

eval

var mystr = "1+5*3";
             console.log(mystr);           //1+5*3
             //如果字符串是一个算式，eval可将结果运算出来（把字符串当脚本运行，返回结果）
             console.log(eval(mystr));     //16

2.自定义函数

语法：

function 函数名(参数1,参数2,参数3){

//代码

}

等同于

var 函数名 = function(参数1,参数2,参数3){

//代码

}

Js中的函数不需要定义返回值类型如果需要返回值在函数中加上return关键字即可

function 函数名(参数1,参数2,参数3){

//代码

return xxx;

}

function myfun(){                //不带形参的函数
                console.log("运行了自定义函数");
            }
            
            myfun();    //函数的调用
            
            function myfun1(a,b){         //带参数的函数，参数在js里是弱类型，不需要指明类型.多个参数用逗号隔开
                var mySum = a+b;
                console.log(mySum);     //可打印出运算结果
            }
            
            myfun1(1,3);   //调用要给实参
            
            function myfun2(a,b){        
                var mySum = a+b;
                return mySum;       //可返回数据，比java少了返回值类型的定义  没返回值则不用加return
            }
            
            var myNum = myFun2(1,3);    //接收返回值，可自己定义一个变量
            console.log(myNum);

//匿名函数的写法，不用加函数名
            var myFun2 = function(a,b){
                return a-b;
            }
            console.log(myFun2(3,1));   //2

8.事件

js就是用来编写页面里和用户交互的小动作/效果。故，函数通常是用户点击了页面里的一些元素，或触发了鼠标或键盘的一些动作，来触发函数的运行。

故，事件通常与函数配合使用，当事件发生时去调用函数。

事件举例：

1.鼠标点击 onclick

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script>
            function myTest(){
                console.log("按钮被点击了");
            }
        
        </script>
        <style>
             .mydiv{
                 width:100px;
                 height:100px;
                 border:1px solid black;
            }
        </style>
           
    </head>
    <body>
        <input type="button" value="点我" οnclick="myTest()" />   <!-- 点击事件，鼠标点击时触发该函数，每点击一次，触发一次 -->
        <div class="mydiv" οnclick="myTest()"></div>   <!-- 页面的元素都可加点击事件 -->
    </body>
</html>

2.鼠标悬浮于页面的某个热点之上 onmouseover （鼠标放在元素上面）

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script>
            function changeColor(){
                console.log("鼠标经过");
                console.log(document.getElementById("mydiv"));   //通过id找元素
                //找元素对象，再确定对象属性，再从样式属性诸多属性里找到要修改的属性，再把值改变。
                document.getElementById("mydiv").style.backgroundColor = "lightcoral";   //修改元素背景颜色
            }
            
            function changeColor2(){
                document.getElementById("mydiv").style.backgroundColor = "white";
            }
        </script>
        
        <style>
             .mydiv{
                 width:100px;
                 height:100px;
                 border:1px solid black;
            }
        </style>
           
    </head>
    <body>
        <!-- onmousemove鼠标悬浮于元素事件      onmouseout鼠标离开元素事件 -->
        <div id="mydiv" class="mydiv" οnmοusemοve="changeColor()" οnmοuseοut="changeColor2()"></div>  
    </body>
</html>

有时多个函数的内容都一样，可简化：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script>
        //这两个函数只有参数不同，怎么简化
            /* function changeColor(){
                document.getElementById("mydiv").style.backgroundColor = "lightcoral";  
            }
            
            function changeColor2(){
                document.getElementById("mydiv").style.backgroundColor = "white";
            } */
            
             function changeColor(mycolor){
                document.getElementById("mydiv").style.backgroundColor = mycolor;  
            }
            
            function changeColor2(mycolor){
                document.getElementById("mydiv").style.backgroundColor = mycolor;
            }
            
            
        </script>
        
        <style>
             .mydiv{
                 width:100px;
                 height:100px;
                 border:1px solid black;
            }
        </style>
           
    </head>
    <body>
        <!-- 谁调函数，谁传实参，传的字符串，在下面要加单引号（外面是双引号）。但传数字或者布尔，不需要加引号 -->
        <div id="mydiv" class="mydiv" οnmοusemοve="changeColor('red')" οnmοuseοut="changeColor2('white')"></div>  
    </body>
</html>

当效果变化的元素和触发事件的元素是同一个元素，可简化代码：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script>
             function myTest(){
                 console.log("被点了");
             }
    
             function changeColor(mycolor,myobj){
                myobj.style.backgroundColor = mycolor; 
            }
            
            function changeColor2(mycolor,myobj){
                myobj.style.backgroundColor = mycolor;
            }
            
            
        </script>
        
        <style>
             .mydiv{
                 width:100px;
                 height:100px;
                 border:1px solid black;
            }
        </style>
           
    </head>
    <body>
        <!-- this表示当前的元素 -->
        <div id="mydiv" class="mydiv" οnclick="myTest()" οnmοusemοve="changeColor('red',this)" οnmοuseοut="changeColor2('white',this)"></div>  
    </body>
</html>

点击一个元素，使另一个元素触发效果，还是用id去写：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script>
             function myTest(){
                 console.log("被点了");     
                 document.getElementById("mydiv").style.backgroundColor="green";   //点击按钮使块元素变绿
             }
    
             function changeColor(mycolor,myobj){
                myobj.style.backgroundColor = mycolor; 
            }
            
            function changeColor2(mycolor,myobj){
                myobj.style.backgroundColor = mycolor;
            }
            
            
        </script>
        
        <style>
             .mydiv{
                 width:100px;
                 height:100px;
                 border:1px solid black;
            }
        </style>
           
    </head>
    <body>
        <!-- 没有关系的元素还是用id去写 -->
        <input type="button" value="点我" οnclick="myTest()" />
        <div id="mydiv" class="mydiv" οnclick="myTest()" οnmοusemοve="changeColor('red',this)" οnmοuseοut="changeColor2('white',this)"></div>  
    </body>
</html>

3.在表单中选取输入框 onfocus （获取焦点）

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script>
             function changeTextColor(){
                 //document.getElementById 快捷键dg
                 document.getElementById("mytext").style.color = "blue";   //获取焦点时，文本框内字体颜色变蓝
             }
             
             function changeTextColor2(){
                 document.getElementById("mytext").style.color = "black";   //失去焦点时，文本框内字体颜色变黑
             }
             
             function changeTextValue(){  
                 //document.getElementById("mytext2").value = "abc123";   获取焦点时，文本框内默认值改变
                 var nowVal = document.getElementById("mytext2").value;   //读取默认值
                 console.log(nowVal);
             }
             
             //对元素的通用操作，读和写
             //写操作：元素.属性="xxx"
             //读操作：var xxx = 元素.属性
            
        </script>
        
        <style>
            
        </style>
           
    </head>
    <body>
        <!-- 一个时间只能有一个元素获取焦点   onfocus获取焦点事件   onblur失去焦点事件 -->
       <input id="mytext" type="text" value="默认值" οnfοcus="changeTextColor()" οnblur="changeTextColor2()" />
       <input id="mytext2" type="text" value="默认值" οnfοcus="changeTextValue()" />
    </body>
</html>

4.内容改变 onchange

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script>
             
             function getNowValue(myobj){   //文本框里的内容改变，会将改变后的内容打印输出到控制台
                console.log(myobj.value);  
                 
             }
             
             function getSelectVal(){
                 //select标签虽然没有value，但内部已经做到转换，找到的是被选中的option的value
                 console.log(document.getElementById("mysel").value);  //当选项改变时，会将对应的value值输出到控制台
             }
        </script>
    </head>
    <body>
        <!-- onchange,内容改变,触发事件。 -->
        <input id="mytext2" type="text" value="默认值" οnchange="getNowValue(this)" />  
        
        
        <select id="mysel" οnchange="getSelectVal()" >
            <option value="010">北京</option>
            <option value="020">上海</option>
            <option value="030">深圳</option>
        </select>
    </body>
</html>

也可以改变下拉列表的选项使div块发生改变：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script>
              
              function changeDivBGC(){
                 var selColor = document.getElementById("clsel").value;  
                 document.getElementById("mydiv").style.backgroundColor = selColor;
             }
        </script>
        
        <style>
            .mydiv{
             width:100px;
             height:100px;
            border:1px solid black;
            }
        </style>
        
    </head>
    <body>
        <div id="mydiv" class="mydiv" ></div> 
        
        <!-- 当下拉列表选项改变，div块对应改变颜色。 -->
        <select id="clsel" οnchange="changeDivBGC()" >
            <option value="blue">蓝色</option>
            <option value="red">红色</option>
            <option value="green">绿色</option>
        </select>
    </body>
</html>

5.页面或图像载入 onload

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script>
           // document.getElementById("mytext").value = "abc123";  会报错，不是函数，函数调用才执行。这里从上到下加载，
           //加载到此处，元素还没生成，也就找不到元素，也就不能给默认值。
           //解决方案一：生成元素后再执行这句话
           //解决方案二：使用onload事件，页面加载结束，直接写在body里，此时script写在哪都行，但要配函数。
           
          /* 解决方案二：对应函数
          function myInit(){
               document.getElementById("mytext").value = "abc123";
           } */

        </script>
    </head>
    <body>
        <input id="mytext" type="text" />
    </body>
    
    <!--  解决方案二：
    <body οnlοad="myInit()">    整个body加载结束后会触发onload事件 
        <input id="mytext" type="text" />
    </body> -->
    
    
    <!-- 解决方案一：（推荐用此方案，更简单）
    <script>
      document.getElementById("mytext").value = "abc123"; 
    </script> -->
</html>

onload也可用元素绑定事件去写：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script>
          
          //onload的另一种写法，叫元素绑定事件。这种写法也可以先找到元素，用document.getElementById("mytext").onload,后面一样
          //元素绑定事件只能用匿名函数
          window.onload = function(){
               document.getElementById("mytext").value = "abc123"; 
          }
         
        
        </script>
    </head>
    <body>
        <input id="mytext" type="text" />
    </body>
    
</html>

结论：要想给页面加某些效果，就将script标签放在body标签下面，保证页面加载结束后执行。

补充：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <h1 id="mytitle">我的标题</h1>
    </body>
    <script>
         //操作元素的通用方法：找到元素，再点元素的属性。比如改文本框，按钮的值
         //对双标签里的内容,用什么属性合适？   用innerHTML，代表双标签里的内容
         document.getElementById("mytitle").innerHTML = "new title";
         
         //总结：前面操作的属性：
         //style.xxx   一系列样式
         //value   表单元素的值
         //innerHTML  双标签里的内容
    </script>
</html>

6.键盘按键 onkeyup

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <!-- onkeydown键盘按下事件    onkeyup键盘弹起事件      onkeypress键盘按下弹起复合事件
         一般以键盘弹起作为按一次键盘结束的标准。按下不弹会多次触发键盘按下事件，但按完弹起来只会弹一次-->
        <input id="mytext" type="text" οnkeyup="getTextVal()"  />
        
        <!-- 键盘相关事件里的一个特殊参数event -->
        <input id="mytext" type="text" οnkeyup="getTextVal(event)"  />
    </body>
    <script>
        //看一下按键盘结束后文本框的值
        function getTextVal(){
            console.log(document.getElementById("mytext").value);  
        }
        
        //keyCode键盘（识别）码，操作系统给键盘上每一个按键起了一个唯一的键盘码。
        //该函数效果：每次按键会在控制台输出该按键对应的键盘码
        function getTextVal(event){
            console.log(event.keyCode);  
        }
    </script>
</html>

案例---手机号输入效验：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <input id="mytext" type="text" οnkeyup="checkText()" /><span id="checkspan"></span>
    </body>
    <script>
        //正确的值需要用到正则表达式，它是独立于开发语言的，是一种单独的语法，各种开发语言都可引入正则表达式。
        //js里，正则必须写在两个斜杠中间
        var myreg = /^1(3|4|5|7|8)\d{9}$/;
        
        function checkText(){
            var num1 =  document.getElementById("mytext").value;     //每次按键盘都会获得当前值
            console.log(myreg.test(num1));   //用正则表达式效验输入是否正确，true则正确，false则错误
            
            //想要给用户看，而不是在控制台看.显示的位置应该在文本框后面.正确提示信息为绿色，错误为红色。
            if(myreg.test(num1)){
                document.getElementById("checkspan").innerHTML = "格式正确";
                document.getElementById("checkspan").style.color = "green";
            }else{
                document.getElementById("checkspan").innerHTML = "格式错误";
                document.getElementById("checkspan").style.color = "red";
            }
        }
        
    </script>
</html>

网上的效果，正确给个对勾图片，错误给个叉叉图片：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
        /* 调一个图片对齐方式 */
            img{
                vertical-align:middle;   /* 和文本框居中对齐 */
                display:none;     /* 不操作不显示图片 */
            }
        </style>
    </head>
    <body>
        <!-- 正确显示图片一，错误显示图片二 -->
        <input id="mytext" type="text" οnkeyup="checkText()" /><img id="myimg" src="./false.png" /> 
    </body>
    <script>
        var myreg = /^1(3|4|5|7|8)\d{9}$/;
        
        function checkText(){
        
            if(myreg.test(document.getElementById("mytext").value)){
                document.getElementById("myimg").style.display = "inline";   /* 操作显示图片 */
                document.getElementById("myimg").src = "./对勾.png";
            }else{
                document.getElementById("myimg").style.display = "inline";
                document.getElementById("myimg").src = "./false.png";
            }
        }
        
    </script>
</html>

7.表单提交 onsubmit

元素校验通常和表单提交配合起来使用。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
            img{
                vertical-align:middle;  
                display:none;   
            }
        </style>
    </head>
    <body>
        <!-- onsubmit限制表单提交    οnsubmit="return false"无法提交 οnsubmit="return true"可以正常提交-->
        <form action="/server" method="get" οnsubmit="return checkText()" >
            <input id="mytext" type="text" οnkeyup="checkText()" /><img id="myimg" src="./false.png" /> 
            <input type="text" οnkeyup="checkMail()" /><img id="myimg" src="./false.png" /> 
            
            <br />
            <input type="submit"  />
        </form>
    </body>
    <script>
        var myreg = /^1(3|4|5|7|8)\d{9}$/;  
        function checkText(){
            var flag = false;
            if(myreg.test(document.getElementById("mytext").value)){
                document.getElementById("myimg").style.display = "inline";  
                document.getElementById("myimg").src = "./对勾.png";
                flag = true;
            }else{
                document.getElementById("myimg").style.display = "inline";
                document.getElementById("myimg").src = "./false.png";
                flag = false;
            }
            return flag;
        }
        
        function checkMail(){
            return true;
        }
        
        function mySubmit(){   //效验其它所有结果，所有结果都为true才返回true
            return checkText()&&checkMail();
        }
        
    </script>
</html>

9.回顾总结

/*
        几个事件：
        onclick   鼠标单击
        onmouseover  鼠标经过
        onmouseout   鼠标移出
        onfocus      获取焦点
        onblur       失去焦点
        onchange     内容改变，常用在文本框和下拉列表
        onload       页面加载结束后执行，可直接将script标签放在body标签之后
        onkeyup      键盘弹起，有个内置的事件对象，event    event.keyCode可获取键盘码
        onsubmit     表单提交，限制表单是否可提交   return 布尔值（一般通过函数获得布尔值）
        
        
        编写页面效果用到的几个属性：
        document.getElementById("") 通过id获取元素
        .属性   有两个操作，写操作和读操作
        写操作   元素.属性 = "xxx";
        读操作   var xxx = 元素.属性;
        
        
        操作过的属性：
        .style.xxx   样式属性（文字颜色，背景颜色，宽高，大小....）
        .value   表单元素的值 
        .innerHTML   双标签里的内容
        .src   图片路径
        
        */