Javascript入门学习笔记

JS入门学习笔记目录

1、JS简介

• JavaScript是目前web开发中不可缺少的脚本语言，js不需要编译即可运行，运行在客户端，需要通过浏览器来解析执行JavaScript代码。

2、组成部分

组成部分作用

ECMA Script

构成了JS核心的语法基础

BOM Browser Object Model

浏览器对象模型，用来操作浏览器上的对象

DOM Document Obiect Model

文档对象模型，用来操作网页中的元素
（1）核心（ECMAScript）：描述了该语言的语法和基本对象。
（2）DOM：Document Object Model（文档对象模型）：描述处理网页内容的方法和接口。

html加载到浏览器的内存中，可以使用js的DOM技术对内存中的html节点进行修改，用户从浏览器看到的是js动态修改后的页面。
（3）BOM：Brower Object Model（浏览器对象模型与浏览器进行交互的方法和接口。

例如：浏览器的前进与后退、浏览器弹出提示框、浏览器地址栏输入网址跳转等操作等。

3、特点

（1）开发工具简单，记事本即可
（2）无需编译，直接由数据 JS引擎负责执行
（3）弱类型语言由数据来决定 数据类型
（4）面向对象

4、作用

（1）嵌入动态文本与HTML页面
（2）对浏览器时间做出相应
（3）读写HTML元素
（4）在数据被提交到服务器之前验证数据
（5）检测访客的浏览器信息
（6）控制cookies，包括创建和修改等。
（7）基于node.js技术进行服务器端编程。

5、JS三种添加方式

（1）行内式

<buttononclick="alert('行内js')">单击试试</button>

（2）内嵌式

<script>alert('内嵌js');</script>

（3）外链式

<scriptsrc="js文件路径地址">这里不能写js语句</script>

6、变量

定义：就是内存中的一段存储空间

1、 声明变量：

var 变量名称 = 存储的数据;(variable 变量)

2、变量命名规范

1.    只能由字母、数字、_（下划线）、$（美元符号）组成。
2.    不能以数字开头。
3.    命名中不能出现-（js会理解成减号进行减法的操作），不能和关键字冲突。

3、js是弱类型语言，不重视类型的定义，js会根据为变量赋值的情况自定判断该变量是何种类型：

数值型：var i =1;var d =3.25;
字符串：var str ="学无止境";
布尔型：var a =true;

7、数据类型

数值型：number（凡是数字都是数值型，不区分整数和小数）
字符串：string（凡是引号包括起来的内容全部都是字符串）
布尔：boolean（true、false）
对象类型：object（声明对象未赋值取值null）
未定义型：undefined

8、检测数据类型

typeof(value); 或 typeof value;   返回这个变量的类型
说明 : 同一个变量, 可以进行不同类型的数据赋值.

• 实例

<scripttype="text/javascript">var a;alert(typeof a);// undefined
 
    a =123;alert(typeof a);// number
 
    a ="学无止境";alert(typeof a);// string
 
    a =true;alert(typeof a);// boolean</script>

9、逗号运算符

• 使用逗号可以在一条语句中执行多次操作

var age1=16,age2=17,age3=18;

• 使用逗号运算符分隔的语句会 从左到右 依次执行

10、算术运算符

+-*/%++--

• 实例

<script>alert(1234/1000*1000);// 1234var s ="12";
     s -=10;alert(s);// 2var s ="aa";
    s -=10;alert(s);// NaN       Not a Number 不是一个数字var s ="12";
    s +=10;alert(s);// 1210 </script>

• 注意

- js中的小数和整数都是number类型，不存在整数除以整数还是整数的结论。
 - 字符串和其他的数据使用+号运算，会连接成一个新的字符串。
 - 字符串使用除了+以外的运算符：如果字符串本身是一个数字，那么会自动转成number进行运算，
否则就会返回一个NaN的结果，表示这不是一个数字。NaN：not a number

11、关系运算符

>>=<<=!=

• 实例

<script>// 请问: 2 > 5, 结果为 ?alert(2>5);// false// 请问: “22” == 22  结果为 ?alert("22"==22);// true  (仅仅判断数值)// 请问: “22” === 22  结果为 ?alert("22"===22);// false  (恒等于, 数值和类型都要相等)</script>

12、逻辑运算符

&&         逻辑与        true&&false====>false||         逻辑或        true||false====>true
！         逻辑非        !true====>false

针对 &&: 有一个假即为假。
针对 ||: 有一个真即为真。

true（理解）： true,  非0,  非null,  非undefined
false（理解）：false,0,null,    undefined 

• 实例

<script>// 请问 1:  8 < 7 && 3 < 4,结果为 ?alert(8<7&&3<4);// false// 请问 2:  -2 && 6 + 6 && null 结果为 ?alert(-2&&6+6&&null);// null// 请问 3:  1 + 1 && 0 && 5  结果为 ?alert(1+1&&0&&5);// 0// 请问1 :  0 || 23 结果为 ?alert(0||23);// 23// 请问2 :  0 || false || true  结果为 ?alert(0||false||true);// true// 请问3 :  null || 10 < 8 || 10 + 10 结果为 ?alert(null||10<8||10+10);// 20// 请问4 :  null || 10 < 8 || false 结果为 ?alert(null||10<8||false);// false </script>

13、三目运算符

• 语法

条件?表达式1:表达式=2 
如果条件为true，返回表达式1的结果
如果条件为false，返回表达式2的结果

• 实例

<script>// 请问1 :  var score=80 >= 60 ? "合格" : "不合格"  结果为 ?alert(var score=80>=60?"合格":"不合格");// 合格// 请问2 :  1 > 5 ? "是的" : "不是" 结果为 ?alert(1>5?"是的":"不是");// 不是</script>

14、赋值运算符

运算符    x=10 y=5      结果
=        x=y                x=5+=       x+=y       x=x+y    x=15-=       x-=y       x=x-y    x=5*=       x*=y       x=x*y    x=50/=       x/=y       x=x/y    x=2%=       x%=y       x=x%y    x=0

15、自定义函数

• 语法

function函数名(形式参数){函数体}调用函数：函数名(实际参数);

• 函数只有被调用后才会执行
• 如果函数需要返回值、直接使用return 返回

<scripttype="text/javascript">// 定义一个函数 : functionfunctiondemo1(){return 你好;}// 调用函数 :alert(demo1());</script>

• 如果函数需要传递参数、不需要指定参数的类型、直接使用变量即可

<scripttype="text/javascript">// 定义一个函数 : functionfunctiondemo2(a, b){return a + b;}// 调用函数 :alert(demo2(20,20));//调用函数后显示40</script>

• JS如果出现二个重名的函数名、后者会把前者的覆盖掉

<scripttype="text/javascript">// 定义一个函数 : functionfunctiondemo3(){alert("调用...");}functiondemo3(){alert("你好");}//这里不会显示"调用..."，而是显示"你好"</script>

16、匿名函数

• 定义：即没有名字的函数
• 语法

function(形式参数){函数体}
定义函数并赋值给变量：varfn=function(形式参数){函数体}

调用方式：将匿名函数赋值给一个变量，通过变量名调用函数
调用函数：fn(实际参数);

• 实例

<scripttype="text/javascript">// 匿名函数 : 即没有名称的函数varfunc=function(i, u){alert(i +" 喜欢 "+ u);}// 调用函数 :func("我","你");//显示 我喜欢你</script>

17、条件语句

（1） if…else语句

1、形式一

if(条件){
   statement
}

var age =17;if(age <18){
    console.log("未成年");}

2、形式二

if(条件)
    statement
else
    statement

var age =17;if(age <18){
    console.log("未成年");}else{
    console.log("已成年");}

3、形式三

if(条件1)
    statement
elseif(条件2)
    statement
else
    statement    

var age =18;if(age <18){
    console.log("小于18岁");}elseif(age ==18){
    console.log("刚好18岁");}else{
    console.log("大于18岁")}

（2）switch…case语句

• switch语句更适用于多条分支使用同一条语句的情况

switch(语句){case 表达式1:
        语句...case 表达式2:
        语句...case 表达式3:
        语句...default:
        语句...}

• 注意：一旦符合case的条件，所以我们一般会在case中添加break作为语句的结束。

var today =7;switch(today){case1:
        console.log("星期一");break;case2:
        console.log("星期二");break;case3:
        console.log("星期三");break;case4:
        console.log("星期四");break;case5:
        console.log("星期五");break;case6:
        console.log("星期六");break;case7:
        console.log("星期日");break;default:
        console.log("输入错误");}

18、循环语句

（1）for语句

for(初始化表达式 ; 条件表达式 ; 更新表达式){
    语句
}

• 实例：输出1-5

for(var i =1; i <=5; i++){
    console.log(i);}

（2） while语句

while(条件表达式){
    语句
}

• 实例：输出1-5

var i =1;while(i <=5){
    console.log(i);
    i++;}

（3）do…while语句

• do…while循环会至少执行一次。

do{
    语句
}while(条件表达式);

• 实例：输出1-5

var i =1;do{
    console.log(i);
    i++;}while(i <=5);

19、数组

• 数组是用于储存多个相同类型数据的集合
• 数组内的各个值被称作元素，每一个元素都可以通过索引来读取，索引是从零开始的整数

（1）数组的创建

形式一  使用字面量创建
同类型数组创建
var arr =[1,2,3,4,5,6,7,8,9];

不同类型数组创建
var arr =[1,"2",3,"4",5,"6",7,"8",9];
形式二  使用对象创建数组
var arr =newArray();
arr[0]=1;
arr[1]="2";
arr[2]=3;
arr[3]="4";
arr[4]=5;
arr[5]="6";
arr[6]=7;
arr[7]="8";
arr[8]=9;

（2）遍历数组

for(var i =0; i < arr.length; i++){
    console.log(arr[i]);}

（3）检测数组属性

var arr =[1,2,3,4];
console.log(arr.constructor);

• constructor：返回创建数组对象的原型函数

20、DOM

（1）什么是DOM?

• DOM (文档对象模型)
• DOM是W3C(万维网联盟)的标准，是中立于平台和语言的接口，它允许程序和脚本动态地访问和更新文档的内容、结构和样式。
• 对网页进行增删改查的操作。

HTML DOM 模型被构造为对象的树：

（2）DOM查找

1、按id属性查找

var elem=documentgetElementById("id")

• 只用于精确查找一个元素
• getElementById只能用在document上
• 实例：

<ul id="myList"><li id="m1">首页</li><liid="m2">企业介绍</i><liid="m3">联系我们</i></ul>var ul = document.getElementById('myList') 
console.log(ul);

2、按标签名查找

var elems=parentgetElementsByTagName("tag");

• 不仅查直接子节点，而且查所有子代节点
• 返回一个动态集合
• 即使只找到一个元素，也返回集合；必须用[0],取出唯一元素
• 实例：

<ul id="myList"><li id="m1">首页</li><liid="m2">企业介绍</li><liid="m3">联系我们</i></ul>var ul =documentgetElementById('menuList');var list = ul.getElementsByTagName('li'); 
console.log(list);

3、通过name属性查找

document.getElementsByName(name属性值’)

• 可以返回DOM树中具有指定name属性值的所有子元素集合

<form id="registerForm"><input type="checkbox" name="boy"/><input type="checkbox" name="boy"/><input type="checkbox" name="boy"/></form>var list = document.getElementsByName('boy');
console.log(typeof list);

4、通过class查找

var elems=parentgetElemnetsByClassName("class")

• 查找父元素下指定class属性的元素
• 实例：

<div id="news"><pclass="mainTitle">新闻标题1</p ><pclass="subTitle">新闻标题2</p ><p class=" mainTitle">新闻标题3</p ></div>var div=documentgetElementById('news');var list =div.getElementsByClassName('mainTitle'); 
console.log(list);

（3）DOM修改

1、读取属性值（了解即可）

第一种 先获得属性节点对象，再获得节点对象的值

var attrNode=elemattributes[下标/属性名];var attrNode=elemgetAttributeNode(属性名)
attrNodevalue   属性值

第二种 直接获得属性值
var value=elemgetAttribute("属性名")

2、修改属性值

elem.setAttribute("属性名"，value);

• 实例：找到id为al的元素，修改name属性对应的属性值。

var hl=document.getElementById(“al"); 
hl.setAttributeNode(“name”， zhangji);

3、判断是否包含指定属性

var bool=elem.hasAttribute("属性名")

• 返回 true 或 false

4、移除属性

elem.removeAttribute("属性名")

• 实例：删除 id 为 alink 元素的class属性

<a id="alink"class="slink" href="javascript:void(0)"onclick="jump(">百度搜索</ a>var a=documentgetElementById('alink'); 
a.removeAttribute('class');

5、修改样式

内联样式: elem.style.属性名 
强调: 属性名:去横线，变驼峰 
比如: css:  background-color=>backgroundColor 
            list-style-type=>listStyleType

（4）DOM添加

在DOM中，添加元素有三步：

• 创建空元素
• 设置关键属性
• 将元素添加到DOM树中

1、创建空元素

var elem=document.createElement(“元素名”)var tr=document.createElement(“tr”)var td=document.createElement(“td”)

2、设置关键属性

• 在创建好空元素之后要给空元素设置样式

（1）设置关键属性 元素.属性名

注意：element.属性对class属性无效，因为class可能有多个，这个时候用element.setAttribute(“class”,value)；来设置属性，element.getAttribute(“class”)；来访问属性.

a.innerHTML="go to tmooc";
a.herf="http://tmooc.cn";
结果为：
<ahref="http://tmooc.cn">go back tmooc</a>

（2）设置关键样式

a.style.opacity="1";//单独设置样式
a.style.cssText="width: 100px;height:100px";//统一设置样式

3、将元素添加在DOM树中

(1) parentNode .appendChild(childNode)

var div=document.createElement("div");var txt=document.createTextNode("版权声明")；

div.appendChild(txt);
document.body.appendChild(div);

(2) parentNode.insertBefore(newChild,pos)
用于在父元素中的指定子节点之前添一个新的子节点：

<body><ulid="menu"><li>the first page</li><li>connect with us</li></ul><scripttype="text/javascript">var ul=document.getElementById("menu");var newLi=document.createElement("li");
        ul.insertBefore(newLi,ul.lastChild);</script></body>

由于每次修改DOM树都会展开搜索一遍（layout）这样一来会导致时间空间开销，所以我们尽量在插入之前处理好子节点以达到优化的目的 :

(1)若同时创建父元素和子元素时，在内存中先将子元素添加到父元素节点上，再将父节点插入DOM树中。

（2）若只添加多个同级子元素，我们可以先将所有子元素临时添加到一个虚拟文档片段中（即为临时父节点），然后将文档片段整体添加到页面中:
1、先创建文档片段：

var frag=document.createDocumentFragment（）;

2、将子元素加入frag中：

frag.appendChild(child);

3、将frag插入到DOM中

parent.appendChild(frag);

append之后frag会自动释放，不会占用元素。

//var arr=document.querySelectorAll(".page");var arr=document.getElementsByClassName("page");//通过css选择器或类名来查找for(var i=0;i<arr.length;i++){for(var j=0;j<4;j++){for(var k=0;k<4;k++){//创建元素var divs=document.createElement("div");
            divs.style.cssText="width:100px;height:100px;border:1px solid white;position:absolute;background-image:url(images/"+(i+1)+".png);background-size:400px 400px;box-shadow:0px 0px 50px white";
            
            divs.style.top=j*100+"px";
            divs.style.left=k*100+"px";
                
            divs.style.backgroundPositionX=-k*100+"px";
            divs.style.backgroundPositionY=-j*100+"px";

            arr[i].appendChild(divs);}}}

21、BOM

（1）什么是BOM？

• （Browser Object Model） 专门操作浏览器窗口的API——没有标准，有兼容性问题

（2）浏览器对象模型

• window: 代表整个窗口
• history: 封装当前窗口打开后，成功访问过的历史url记录
• navigator: 封装浏览器配置信息
• document: 封装当前正在加载的网页内容
• location: 封装了当前窗口正在打开的url地址
• screen: 封装了屏幕的信息
• event: 定义了网页中的事件机制

（3）获取窗口大小

获取当前窗口大小
完整窗口大小:
window.outerWidth/outerHeight
文档显示区大小:
windowinnerWidth/innerHeight

（4）定时器

• 定义：让程序按指定时间间隔自动执行任务——网页动态效果、计时功能等

如何选择定时器？

• 只要反复执行，就用周期性
• 只要只执行一次，就用一次性

1、周期性定时器

• 让程序按指定的时间间隔反复执行一项任务
• 语法：

setInterval(exp,time):周期性触发代码exp 
exp:执行语句
time:时间周期，单位为毫秒

setInterval(function(){
console.log("Hello World");},1000);

2、一次性定时器

• 让程序延迟一段时间执行
• 语法：

setTimeout(exptime):一次性触发代码exp
exp:执行语句
time:间隔时间，单位为毫秒

setTimeout(function(){alert("恭喜过关");},3000);

3、停止定时器

• 暂停定时器执行

1、给定时器取名 
var timer =setInterval(function(){ 
console.log("Hello World");},1000);2、停止定时器 clearInterval(timer);

22、魔方案例

• 效果图（动态）

• 创建img文件夹，放六张jpg图片重命名为0到6，即可实现魔方

<!DOCTYPE html><htmllang="en"><head><metacharset="UTF-8"><title>魔方案例</title><styletype="text/css">*{margin: 0;padding: 0;}#container{width:300px;height:300px;/*order:1px solid #000;*/margin: 150px auto;perspective: 2000px;}.box{width: 300px;height: 300px;/*子元素保持3d转换*//*transform-style:preserve-3d;*/transform-style:preserve-3d;/*测试代码*//*transform:rotateX(45deg) rotateY(45deg) ;*/animation: ro 4s linear infinite;}@keyframes ro{0%{-webkit-transform:rotateX(0deg)rotateY(0deg);-ms-transform:rotateX(0deg)rotateY(0deg);-o-transform:rotateX(0deg)rotateY(0deg);transform:rotateX(0deg)rotateY(0deg);}100%{-webkit-transform:rotateX(360deg)rotateY(360deg);-ms-transform:rotateX(360deg)rotateY(360deg);-o-transform:rotateX(360deg)rotateY(360deg);transform:rotateX(360deg)rotateY(360deg);}}.box-page{width: 300px;height: 300px;/*位置初始化*/position: absolute;}.top{transform-style:preserve-3d;/*background-color: red;*/-webkit-transform:translateZ(150px);-ms-transform:translateZ(150px);-o-transform:translateZ(150px);transform:translateZ(150px);}.bottom{transform-style:preserve-3d;/*background-color: green;*/-webkit-transform:translateZ(-150px)rotatex(180deg);-ms-transform:translateZ(-150px)rotatex(180deg);-o-transform:translateZ(-150px)rotatex(180deg);transform:translateZ(-150px)rotatex(180deg);}.right{transform-style:preserve-3d;/*background-color: orange;*/-webkit-transform:translateX(150px)rotateY(90deg);-ms-transform:translateX(150px)rotateY(90deg);-o-transform:translateX(150px)rotateY(90deg);transform:translateX(150px)rotateY(90deg);}.left{transform-style:preserve-3d;/*background-color:pink;*/-webkit-transform:translateX(-150px)rotateY(-90deg);-ms-transform:translateX(-150px)rotateY(-90deg);-o-transform:translateX(-150px)rotateY(-90deg);transform:translateX(-150px)rotateY(-90deg);}.before{transform-style:preserve-3d;/*background-color: blue;*/-webkit-transform:translateY(150px)rotateX(-90deg);-ms-transform:translateY(150px)rotateX(-90deg);-o-transform:translateY(150px)rotateX(-90deg);transform:translateY(150px)rotateX(-90deg);/*transform: translateY(150px) rotateX(-90deg);*/}.after{transform-style:preserve-3d;/*background-color: yellow;*/-webkit-transform:translateY(-150px)rotateX(90deg);-ms-transform:translateY(-150px)rotateX(90deg);-o-transform:translateY(-150px)rotateX(90deg);transform:translateY(-150px)rotateX(90deg);/*transform: translateY(150px) rotateX(-90deg);*/}.box-page div:nth-child(1){animation: a1 4.5s ease-in;}.box-page div:nth-child(2){animation: a1 4.5s ease-in 0.5s;}.box-page div:nth-child(3){animation: a1 4.5s ease-in 1s;}.box-page div:nth-child(4){animation: a1 4.5s ease-in 2s;}.box-page div:nth-child(5){animation: a1 4.5s ease-in 3s;}.box-page div:nth-child(6){animation: a1 4.5s ease-in 4s;}.box-page div:nth-child(7){animation: a1 4.5s ease-in 5s;}.box-page div:nth-child(8){animation: a1 4.5s ease-in 6s;}.box-page div:nth-child(9){animation: a1 4.5s ease-in 7s;}@keyframes a1{0%{-webkit-transform:translateZ(0px)scale(1)rotateZ(0deg);-ms-transform:translateZ(0px)scale(1)rotateZ(0deg);-o-transform:translateZ(0px)scale(1)rotateZ(0deg);transform:translateZ(0px)scale(1)rotateZ(0deg);}20%{-webkit-transform:translateZ(300px)scale(0)rotateZ(720deg);-ms-transform:translateZ(300px)scale(0)rotateZ(720deg);-o-transform:translateZ(300px)scale(0)rotateZ(720deg);transform:translateZ(300px)scale(0)rotateZ(720deg);}90%{-webkit-transform:translateZ(300px)scale(0)rotateZ(720deg);-ms-transform:translateZ(300px)scale(0)rotateZ(720deg);-o-transform:translateZ(300px)scale(0)rotateZ(720deg);transform:translateZ(300px)scale(0)rotateZ(720deg);}100%{-webkit-transform:translateZ(0px)scale(1)rotateZ(0deg);-ms-transform:translateZ(0px)scale(1)rotateZ(0deg);-o-transform:translateZ(0px)scale(1)rotateZ(0deg);transform:translateZ(0px)scale(1)rotateZ(0deg);}}</style></head><body><divid="container"><divclass="box"><divclass="top box-page"></div><divclass="bottom box-page"></div><divclass="left box-page"></div><divclass="right box-page"></div><divclass="before box-page"></div><divclass="after box-page"></div></div></div><scripttype="text/javascript">var arr=document.querySelectorAll(".box-page");//便利6个面中的每一个面for(var i =0; i <arr.length; i++){//外层循环行for(var r=0;r<3;r++){//内存循环遍历列for(var c=0;c<3;c++){//创建元素var divs=document.createElement("div");//千万不要出现中文分号错误
                    divs.style.cssText ="width:100px;height:100px;border: 1px solid #fff;position:absolute;box-sizing:border-box;background-image:url(img/"+i+".jpg);background-size:300px 300px;";
                    arr[i].appendChild(divs);
                    divs.style.left=c*100+"px";
                    divs.style.top=r*100+"px";
                    divs.style.backgroundPositionX=-c*100+"px";
                    divs.style.backgroundPositionY=-r*100+"px";}}}</script></body></html>

23、JS事件实例

（0）JS事件

• HTML 事件是发生在 HTML 元素上的事情。
• 当在 HTML 页面中使用 JavaScript 时， JavaScript 可以触发这些事件。
• 常见的JS事件：

（1）JS直接写入html输出流

<!DOCTYPE html><html><head><metacharset="utf-8"><title></title></head><body><p>
JavaScript 能够直接写入 HTML 输出流中：
</p><script>
document.write("<h1>这是一个标题</h1>");
document.write("<p>这是一个段落。</p>");</script><p>
您只能在 HTML 输出流中使用 <strong>document.write</strong>。
如果您在文档已加载后使用它（比如在函数中），会覆盖整个文档。
</p></body>

（2）JS对事件的反应

<!DOCTYPE html><html><head><metacharset="utf-8"><title></title></head><body><h1>我的第一个 JavaScript</h1><p>
JavaScript 能够对事件作出反应。比如对按钮的点击：
</p><buttontype="button"onclick="alert('欢迎!')">点我!</button></body></html>

（3）JS改变html中的内容

<!DOCTYPE html><html><head><metacharset="utf-8"><title></title></head><body><h1>我的第一段 JavaScript</h1><pid="demo">
JavaScript 能改变 HTML 元素的内容。
</p><script>functionmyFunction(){
    x=document.getElementById("demo");// 找到元素
    x.innerHTML="Hello JavaScript!";// 改变内容}</script><buttontype="button"onclick="myFunction()">点击这里</button></body></html>

（4）JS改变html的样式

<!DOCTYPE html><html><head><metacharset="utf-8"><title></title></head><body><h1>我的第一段 JavaScript</h1><pid="demo">
JavaScript 能改变 HTML 元素的样式。
</p><script>functionmyFunction(){
    x=document.getElementById("demo")// 找到元素
    x.style.color="#ff0000";// 改变样式}</script><buttontype="button"onclick="myFunction()">点击这里</button></body></html>

（5）JS验证输入

<!DOCTYPE html><html><head><metacharset="utf-8"><title></title></head><body><h1>我的第一段 JavaScript</h1><p>请输入数字。如果输入值不是数字，浏览器会弹出提示框。</p><inputid="demo"type="text"><script>functionmyFunction(){var x=document.getElementById("demo").value;if(x==""||isNaN(x)){alert("不是数字");}}</script><buttontype="button"onclick="myFunction()">点击这里</button></body></html>