小菜鸟之HTML第二课
JavaScript
运行在浏览器上的一种基于对象和事件的驱动的脚本语言
基于对象（windows – document location histroy
便于调用对象属性和方法
事件驱动
键盘和鼠标与浏览器互动
js特点
向html页面添加交互行为
脚本语言，语法与java类似
解释性语言，一边执行，一遍编译
js的模型
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>js引入的三种方式</title>
6 <link type="">
7 <script type="text/javascript">
8 function m1() {
9 alert("hello world2");
10 }
11 </script>
12 <script type="text/javascript" src="js/myjs.js"></script>
13 </head>
14 <body>
15 <!--行间事件驱动 给事件属性赋值-->
16 <div>
17 <input type="button" name="btn" value="点击" onclick="alert('hello world')">
18 </div>
19
20 <!--页面嵌入script标签进行交互-->
21 <div>
22 <input type="button" name="btn1" value="点击1" onclick="m1()">
23 </div>
24
25 <!-- 外部引入进行交互-->
26 <div>
27 <input type="button" name="btn2" value="点击2" onclick="m2()">
28 </div>
29 </body>
30 </html>
HTML表现型
CSS表现型
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>JS的介绍</title>
6 <link type="">
7 <script type="text/javascript">
8 function ml() {
9 alert("hello")
10 // 提示框显示“hello
11 }
12 </script>
13 <script type="text/javascript" src="myjs.js"></script>
14 </head>
15 <body>
16 <!--行间事件驱动 给属性赋值-->
17 <div>
18 <input type="button" name="btn" value="点击" onclick="alert('hello')">
19 </div>
20 <!--页面嵌入script标签进行交互-->
21 <div>
22 <input type="button" name="btn2" value="点击1" onclick="ml()">
23 </div>
24 <!--外部引用-->
25 <div>
26 <input type="button" name="btn3" value="点击3" onclick="m2()">
27 </div>
28 </body>
29 </html>
m2外部引用
1 function m2() {
2 alert("123")
3
4 }
js语法与注释
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>js语法与注释</title>
6 <script type="text/javascript">
7 //注释 /**/
8 /**
9 *
10 **/
11 //如何声明变量
12
13 var s;
14 var s1=1; var s2="abc";var s3=null;
15 var s1l=1,s22="abc",s33=null;
16 </script>
17 </head>
18 <body>
19
20 </body>
21 </html>
数据类型的判断
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>数据类型的判断</title>
6 <script type="text/javascript">
7 //声明一些变量
8 var str="abc";//string
9 var num=123;//number
10 var datc=new Date();//object 复合类
11 var flag=true;//boolean
12 var arr=new Array(4);//数组//typeof（）是js内置常用的方法//一般情况下，在执行过程中取不到的情况下，返回nullvar o;
13 //typeof（）是js内置常用的方法
14 document.write("str "+typeof (str)+"<br>");
15 document.write("num "+typeof (num)+"<br>");
16 document.write("str "+typeof (datc)+"<br>");
17 document.write("num "+typeof (flag)+"<br>");
18 document.write("str "+typeof (arr)+"<br>");
19
20 </script>
21 </head>
22 <body>
23
24 </body>
25 </html>
网页结果
1 str string
2 num number
3 str object
4 num boolean
5 str object
变量和函数的预解析
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>变量和函数的预解析</title>
6 <script type="text/javascript">
7 method();
8 //编译执行的顺序是从上往下
9 alert("num为"+num);
10 var num=123;//number
11 //函数的定义
12 function method() {
13 alert("abc")
14
15 }
16 </script>
17 </head>
18 <body>
19
20 </body>
21 </html>
行间事件调用和提取行间事件
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>行间事件调用和提取行间事件</title>
6 <script type="text/javascript">
7 //行间事件调用
8 function method1(){
9 alert("测试行间事件调用");
10 }
11 //提取行间事件，然后调用
12 window.onload=function(){
13 var oBtn=document.getElementById("id1");
14 oBtn.onclick=method2;//执行点击事件:调用method2方法
15 function method2() {
16 alert("测试提取行间事件");
17
18 }
19 }
20 </script>
21 </head>
22 <body>
23 <!--提取行间事件，然后调用-->
24 <input type="button" name="btn1" value="点击1" id="id1">
25 </div>
26 <div>
27 <!--行间事件 就是 onclick事件-->
28 <input type="button" name="btn" value="点击"
29 onclick="method1()">
30 </div>
31 <div>
32
33
34 </body>
35 </html>
匿名函数
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>匿名函数</title>
6 <script type="text/javascript">
7 //匿名函数 ：没有函数名的函数
8 window.onload=function () {
9 var oBtn=document.getElementById("btn1");
10 //匿名函数的好处：是代码更加简洁
11 oBtn.onclick=function(){
12 alert("test");
13 };
14
15 }
16 </script>
17 </head>
18 <body>
19 <div><input type="button" value="点击" id="btn1"></div>
20
21 </body>
22 </html>
有参函数
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>有参函数</title>
6 <script type="text/javascript">
7 function method(count) {
8 for(var i=0;i<count;i++){
9 document.write("学习js"+"<br>");
10 }
11 }
12 </script>
13 </head>
14 <body>
15 <div><input type="button" value="点击"
16 onclick="method(prompt('请输入次数',''))"></div>
17
18 </body>
19 </html>
条件语句
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>条件语句</title>
6 <script type="text/javascript">
7 //条件语句: if /if-else/ if-else-if/ if的嵌套/ switch
8 /* var a=1;
9 if(a==1){
10 alert("test1");
11 }else if(a==2){
12 alert("test2");
13 }else if(a==3){
14 alert("test3");
15 }*/
16 //switch
17 var a=12;
18 switch(a){
19 case 1:
20 alert("test1");
21 break;
22 case 2:
23 alert("test2");
24 break;
25 case 3:
26 alert("test3");
27 break;
28 default:
29 alert("test4");
30 break;//可写可不写
31 }
32 </script>
33 </head>
34 <body>
35
36 </body>
37 </html>
循环语句
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>循环语句</title>
6 <script type="text/javascript">
7 //while do-while for
8 for (var i=0;i<4;i++){
9 document.write("for输出序号："+(i+1)+"<br>");
10 }
11 /*+++++++++++++++++++++++++++++++*/
12 var j=0;
13 while(j<4){
14 document.write("while输出序号："+(j+1)+"<br>");
15 j++;
16 }
17 /*=====================================*/
18 var k=0;// 0 1 2 3 4取不到
19 do {
20 document.write("do-while输出序号："+(k+1)+"<br>")
21 k++;
22 }while (k<4);//false
23
24 </script>
25 </head>
26 <body>
27
28 </body>
29 </html>
break与continue与return的使用
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>break与continue与return的使用</title>
6 <script type="text/javascript">
7 //break : 终止当前循环
8 // 如果有循环嵌套，当前循环是指终止最近的循环
9 for(var j=0;j<4;j++){
10 for(var i=0;i<10;i++){
11 document.write("输出:"+(i+1)+"<br>");
12 if(i==5){
13 break;
14 }
15 }
16 //代码
17 //代码
18 }
19 //代码
20 //代码
21 //continue的使用
22 for(var k=0;k<10;k++){
23 if(k==5){
24 continue;
25 }
26 document.write("输出:"+(k+1)+"<br>");
27 }
28 //return
29 function method() {
30 alert("test1");
31 return;
32 alert("test2");
33 }
34 method();
35 </script>
36 </head>
37 <body>
38
39 </body>
40 </html>
函数return的用法
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>函数return的用法</title>
6 <script type="text/javascript">
7 //定义一个有参函数
8 function add(a,b) {
9 var c=a+b;
10 alert("test1"); //会输出
11 return c; //通过return关键字结束函数
12 alert("test2"); //不会输出
13
14 }
15 //之间调用/执行函数
16 var result=add(1,2);
17 alert(result);
18 </script>
19 </head>
20 <body>
21
22 </body>
23 </html>
数组的用法
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>数组的用法</title>
6 <script type="text/javascript">
7 //数组的声明和赋值
8 //方法一
9 var arr=new Array(4);
10 arr[0]=1;
11 arr[1]=2;
12 arr[2]=3;
13 arr[3]=4;
14 //方法二
15 var arr1=new Array(1,2,3,4);
16 //方法三
17 var arr2=[1,2,3,4];
18 //数组的常用方法
19 alert("数组arr2的长度为："+arr2.length);
20 //数组中的元素分别是什么
21 alert(arr2[0]);
22 /* alert(arr2[1]);
23 alert(arr2[2]);
24 alert(arr2[3]);*/
25 //将数组元素通过分隔符号连成字符串
26 alert(arr2.join("-"));
27 alert(arr2);
28 //push（）在数组最后位置添加数组元素
29 arr2.push(5);
30 alert("添加元素后输出："+arr2);
31 //pop（）删除数组中的最后一个元素
32 arr2.pop();
33 alert(arr2);
34 // unshift()和shift（） 在数组的头部添加和删除元素
35 arr2.unshift(0);
36 alert(arr2);
37 arr2.shift();
38 alert(arr2);
39 //将数组反转
40 arr2.reverse();
41 alert(arr2);
42 //如何知道数组元素对应的下标（索引值）
43 alert(arr2.indexOf(2));
44 //splice() 从索引为2开始（包含2），删除一个元素，添加 7，8，9
45 arr2.splice(2,1,7,8,9);
46 alert(arr2);
47
48
49 </script>
50 </head>
51 <body>
52
53 </body>
54 </html>
window对象
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>window对象</title>
6 <script type="text/javascript">
7 function location1() {
8 //打开一个网页,此网页覆盖最初的网页
9 window.location="01.html";
10 }
11 //打开新的网页
12 function open1() {
13 window.open("01.html");
14 }
15 //关闭当前网页
16 function close1() {
17 window.close();
18 }
19 //window常用的方法 confirm() 确认框
20 function confirm1() {
21 var flag=window.confirm("你确定要删除此消息吗？");//返回 boolean类型
22 if(flag==true){
23 alert("删除成功");
24 }else{
25 alert("删除取消");
26 }
27 }
28 </script>
29 </head>
30 <body>
31 <div><input type="button" onclick="location1()" value="location按钮测试"></div>
32 <div><input type="button" onclick="window.location='01.html'" value="location按钮测试1"></div>
33
34 <div><input type="button" onclick="open1()" value="open按钮测试"></div>
35 <div><input type="button" onclick="window.open('01.html')" value="open按钮测试1"></div>
36
37 <div><input type="button" onclick="close1()" value="close按钮测试"></div>
38 <div><input type="button" onclick="window.close()" value="close按钮测试1"></div>
39
40 <div><input type="button" onclick="confirm1()" value="confirm按钮测试"></div>
41
42
43
44
45 </body>
46 </html>
setTimeout函数
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>setTimeout函数</title>
6 <script type="text/javascript">
7 //setTimeout函数 ，设置一定时间（毫秒为单位）后调用某个函数
8 function timer() {
9 setTimeout("alert1()",3000);
10 }
11
12 function alert1() {
13 alert('3秒后输出警示框');
14 }
15 </script>
16 </head>
17 <body>
18 <!-- 编写一个按钮，点击按钮，调用函数-->
19 <div><input type="button" value="定时器" onclick="timer()"></div>
20 </body>
21 </html>
实现时钟的特效
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>实现时钟的特效</title>
6 <script type="text/javascript">
7 function myClock() {
8 var now=new Date();
9 var str= "现在是："+now.getHours()+"时"+now.getMinutes()+"分"+now.getSeconds()+"秒";
10 document.getElementById("id1").innerHTML=str;
11 }
12 var intervalId;
13 //表示 每一秒钟调用一次此函数
14 function start() {
15 intervalId=setInterval("myClock()",1000);
16 }
17 //让时钟暂停
18 function stop() {
19 clearInterval(intervalId);
20 }
21 </script>
22 </head>
23 <body>
24 <div><input type="button" value="start" onclick="start()"></div>
25 <div><input type="button" value="stop" onclick="stop()"></div>
26
27 <div id="id1"></div>
28 </body>
29 </html>
document对象
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>document对象</title>
6 <script type="text/javascript">
7 //获得html中id="div1" 的对象
8 window.onload=function () {
9 var oDiv=document.getElementById("div1");
10 alert(oDiv.innerHTML);
11 }
12
13 </script>
14 </head>
15 <body>
16 <div id="div1">这是一个div元素</div>
17
18 </body>
19 </html>
document操作属性（读取和写入）</
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <link href="css1.css" rel="stylesheet" type="text/css">
5 <meta charset="UTF-8">
6 <title>document操作属性（读取和写入）</title>
7 <script type="text/javascript">
8 window.onload=function () {
9 var oInput=document.getElementById("input1");
10 //通过属性名，读取到属性值
11 var text1=oInput.type;
12 var name1=oInput.name;
13 var class1=oInput.className;
14 var value1=oInput.value;
15 //如何时document对象实现这样的样式设计：style="color:red;font-size: 50px
16 var oA=document.getElementById("link1");
17 oA.style.color="red";
18 var oInput2=document.getElementById("input2");
19 var value2=oInput2.value;
20 oA.style[value2]=value1;
21 //属性的写入
22 // oA.style.fontSize=value1;
23 }
24 </script>
25 </head>
26 <body>
27 <div>
28 <input type="text" class="className" name="setsize" id="input1" value="50px">
29 <input type="text" class="className" name="setsize" id="input2" value="fontSize">
30 <input type="text" class="className" name="setsize" id="input3" value="color">
31 <a href="http://www.baidu.com" id="link1" >百度</a>
32 <div>html内容</div>
33
34 </div>
35 </body>
36 </html>
innerHTML和innerText的区别
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>innerHTML和innerText的区别</title>
6 <script type="text/javascript">
7 window.onload=function () {
8 var oDiv=document.getElementById("div1");
9 //读取到标签对中间的内容
10 //innerHTML可以识别标签，而innerText不能
11 var str= oDiv.innerHTML;
12 alert(str);
13 /* var str1=oDiv.innerText;
14 alert(str1);*/
15
16 //如何写入
17 var oDiv2=document.getElementById("div2");
18 oDiv2.innerText="<a href='http://www.baidu.com'>点击</a>";
19 }
20 </script>
21 </head>
22 <body>
23 <div id="div1"><h1>这是一个div元素</h1></div>
24 <div id="div2"></div>
25 </body>
26 </html>
dom模型的其他方法
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>dom模型的其他方法</title>
6 <script type="text/javascript">
7 function changeBookName() {
8 //getElementsByName(),返回的是一个对象数组，数组内只有一个对象元素
9 var newBookNames=document.getElementsByName("addBookName");
10 document.getElementById("book").innerHTML=newBookNames[0].value;
11 }
12
13 function outputSeason() {
14 //getElementsByName(),返回的是一个对象数组，数组内有4个对象元素
15 var seasons=document.getElementsByName("season");
16 var str="";
17 //数组遍历，for遍历
18 for(var i=0;i<seasons.length;i++){
19 //累加
20 str+=seasons[i].value+" ";
21
22 }
23 document.getElementById("outputSeason").innerHTML=str;
24
25 }
26 function outputZM() {
27 //getElementsByTagName(),返回的是对象数组
28 var zms=document.getElementsByTagName("p");
29 var str="";
30 for(var i=0;i<zms.length;i++){
31 //累加
32 str+= zms[i].innerHTML+" ";
33 }
34 document.getElementById("div1").innerHTML =str;
35 }
36 function clearAll() {
37 document.write("");
38 }
39 </script>
40 </head>
41 <body>
42 <div id="book">java编程思想</div>
43 <div><input name="addBookName" type="text" value=""></div>
44 <div><input type="button" value="改变书名" onclick="changeBookName()"></div>
45
46 <div>
47 <input type="text" name="season" value="春">
48 <input type="text" name="season" value="夏">
49 <input type="text" name="season" value="秋">
50 <input type="text" name="season" value="冬">
51 </div>
52 <div id="outputSeason"></div>
53 <div><input type="button" value="输出四季" onclick="outputSeason()"></div>
54
55 <div>
56 <p>a</p>
57 <p>b</p>
58 <p>c</p>
59 <p>d</p>
60 </div>
61 <div id="div1"></div>
62 <div><input type="button" value="输出字母" onclick="outputZM()"></div>
63
64 <div><input type="button" value="清空所有内容" onclick="clearAll()"></div>
65 </body>
66 </html>
1 Html（表现的结构）
2 CSS（表现的样式）
3 JavaScript（表现的是一种行为）
4 运行在浏览器上的一种基于对象和事件驱动的脚本语言。
5 基于对象（window --document location history）,便于调用
6 对象的属性和方法。
7 事件驱动
8 键盘和鼠标与浏览器的互动（键盘在输入框输入文字/ 鼠标的点击等）
9 js的特点
10 向html页面添加交互行为
11 脚本语言，语法与java类似
12 解释性语言，一边执行一边解释
13 js的模型
14 BOM模型
15 browser object model 是指浏览器对象模型，提供操作浏览器的一些方法
16 window
17 document
18 location
19 history
20 window的常用方法和属性
21 location
22 open()
23 close()
24 confirm()
25 alert()
26 prompt()
27 setTimeout()
28 setInterval()
29 document的常用方法和属性
30 write()
31 getElementById()
32 getElementsByTagName() 返回是一个对象数组
33 getElementsByName() 返回的是一个对象数组
34 innerHTML 读取的<>这里的内容<>
35 DOM模型
36 document object model 是指文档对象模型，提供操作html和css的一些方法。
37
39
40
小菜鸟之HTML第二课的更多相关文章
- 小菜鸟之HTML第一课
web项目 前端网页web(人体结构) HTML负责前端网页结构 Css负责网页样式 css引入 内联样式引入 内部样式 外部样式 三种基本引入器 id选择器 类选择器 标签选择器 <!DOCT ...
- OpenCV 第二课 认识图像的存储结构
OpenCV 第二课 认识图像的存储结构 Mat Mat 类包含两部分,矩阵头和矩阵体.矩阵头包含矩阵的大小,存储方式和矩阵体存储空间的指针.因此,Mat中矩阵头的大小是固定的,矩阵体大小是不定的. ...
- Kali Linux Web 渗透测试视频教程— 第二课 google hack 实战
Kali Linux Web 渗透测试— 第二课 代理简介 文/玄魂 课程地址: http://edu.51cto.com/course/course_id-1887.html 目录 shellKal ...
- 【Linux探索之旅】第二部分第二课：命令行，世界尽在掌握
内容简介 1.第二部分第二课:命令行,世界尽在掌握 2.第二部分第三课预告:文件和目录,组织不会亏待你 命令行,世界尽在掌握 今天的标题是不是有点霸气侧漏呢? 读者:“小编,你为什么每次都要起这么非主 ...
- 【Web探索之旅】第三部分第二课：IP地址和域名
内容简介 1.第三部分第二课:IP地址和域名 2.第三部分第三课预告:协议 第三部分第二课:IP地址和域名 上一课我们说了在Web之中,全球各地有无数台机器,有些充当客户机,有些作为服务器. 那么这些 ...
- 【Web探索之旅】第二部分第二课：服务器语言
内容简介 1.第二部分第二课:服务器语言 2.第二部分第三课预告:框架和内容管理系统 第二部分第二课:服务器语言 介绍了Web的客户端,我们来谈谈Web的服务器端. 既然客户端有客户端的编程语言(HT ...
- 【C++探索之旅】第一部分第二课：C++编程的必要软件
内容简介 1.第一部分第二课:C++编程的必要软件 2.第一部分第三课预告:第一个C++程序 C++编程的必要软件 经过上一课之后,大家是不是摩拳擦掌,准备大干一场了呢. 这一课我们来做一些C++开发 ...
- 【Linux探索之旅】第一部分第二课：下载Linux，免费的噢
内容简介 1.第一部分第二课:下载Linux,免费的噢 2.第一部分第三课预告:测试并安装Ubuntu 下载Linux,免费的噢 大家好,上一课我们认识了非常“霸气侧漏”的Linux操作系统. 也知道 ...
- 【C语言探索之旅】 第三部分第二课：SDL开发游戏之创建窗口和画布
内容简介 1.第三部分第二课: SDL开发游戏之创建窗口和画布 2.第三部分第三课预告: SDL开发游戏之显示图像 第三部分第二课:SDL开发游戏之创建窗口和画布 在上一课中,我们对SDL这个开源库做 ...
随机推荐
- Cogs 728. [网络流24题] 最小路径覆盖问题
[网络流24题] 最小路径覆盖问题 ★★☆ 输入文件:path3.in 输出文件:path3.out 评测插件 时间限制:1 s 内存限制:128 MB 算法实现题8-3 最小路径覆盖问题(习题8-1 ...
- poj1275
Cashier Employment POJ - 1275 A supermarket in Tehran is open 24 hours a day every day and needs a n ...
- layer提示带文字
直接撸代码: //加载层-风格4 layer.msg('加载中', { icon: 16 ,shade: 0.01 });
- MySQL树
树 树状图是一种数据结构,它是由n(n>=1)个有限结点组成一个具有层次关系的集合.把它叫做“树”是因为它看起来像一棵倒挂的树,也就是说它是根朝上,而叶朝下的. 它具有以下的特点:每个结点有零个 ...
- D. Shortest Cycle（floyd最小环）
D. Shortest Cycle time limit per test 1 second memory limit per test 256 megabytes input standard in ...
- SpringSecurity学习总结
第一.SpringSecurity-简介 1.1简介 SpringSecurity融合Spring技术栈,提供JavaEE应 用的整体安全解决方案: Spring Security为基于Java EE ...
- python小技巧之把list组合成chain
a=[] for i in range(10): a.append(i) for i,j in zip(a[:-1],a[1:]): print('%s=>%s'%(i,j)) 输出结果: 0= ...
- 1.springboot启动流程
SpringBoot版本:2.1.2.RELEASE 1.maven <parent> <groupId>org.springframework.boot</groupI ...
- highcharts 代码都对,但是不显示图片
$('#container').highcharts({ chart: { zoomType: 'xy' }, title: { text: 'Average Monthly Temperature ...
- Go项目的测试代码3（测试替身Test Double）
上一篇文章介绍了项目中测试代码的写法. Go项目的测试代码2(项目运用) 这里简单的共享一下测试替身. 当我们写测试代码的时候,经常遇到一个问题.跟别的模块或服务有依赖性,可是功能还没开发完.或是因为 ...