js基础&&dom编程 25

最新推荐文章于 2018-12-12 07:50:00 发布

wyx542813672

最新推荐文章于 2018-12-12 07:50:00 发布

阅读量240

点赞数

本文链接：https://blog.csdn.net/wyx542813672/article/details/73898711

版权

5 Javascript入门
5.1 引入
html：负责网页结构
css：负责网页美观
javascript：负责用户与浏览器交互。
5.2 javacript的来由
1994时，网景公司研发了livescript语言，领航者浏览器（把livescript语言植入到浏览器）
微软公司的IE浏览器，后来自己花钱20亿美金研发jscript

1995年，Sun公司，推出jdk1.1 .谈合作。livescript-》javascript

1998，美国在线收购网景。

2003，直接关闭网景。网景6-7亿美金。2千万美金，组建谋智基金（火狐）

javascript jscript 语法不同。 ECMA（欧洲制造商联盟）

scirpt的语法：
1）基础语法（ECMA规范）
2）BOM编程（没有统一）
3）DOM编程（没有统一）
-----------------------------------------------------------------------------------------------------------------------

1.1 javascript使用
javascript的注释：单行 // 多行 /* */
css的注释：css 多行注释 /* */
html的注释：

常用的函数：
alert("提示框");
document.write("向浏览器输出内容");

javascript的使用方法：
1）内部javacript:
a)在html页面中使用<script>标签，在<script>标签体中写js内容
b)弊端：和html代码混杂在一起，不好维护，不好重用

2）外部javascript（推荐使用）
注意：不能使用<script src="01.js"/> 空标签方式导入

1.2 变量和数据类型

1）定义和赋值变量： var 变量名=值;
var a = 10;
//var a = 20;
var b = 3.14;
var c = 'c';
var d = "hello";
var e = true;
var f = new Object();
注意：
1）使用var关键词定义变量，var可以省略的，但是不建议省略var
2) 在js中可以重复定义变量，后面定义的变量会覆盖前面的变量。
3) js是弱类型语言，使用var来定义任何数据类型
4）js中变量的类型是由变量的值决定的，所以只定义不赋值的变量，就是一个未赋值变量（undefined），
未赋值的变量不能使用

typeof(变量)：查看变量的数据类型

2)js的数据类型分类：
a）number：无论整数还是小数，都是number类型
b) string: 无论字符还是字符串，都是string类型
c) boolean
d) object 对象类型

1.3 类型转换函数
string->number(整数) : parserInt(变量)
string->number(小数): parserFloat(变量)

1.4 运算符
1)算术运算符： + - * / %
2)比较运算符： > < >= <= ==
3)逻辑运算符： && || !
4)三目运算符: 表达式 ? true的结果 : false的结果

1.5 流程控制语句
/*
if语句
if(表达式){
语句
}else{
语句
}

条件可以是：
布尔值：true：成立； false:不成立
number：非0：成立； 0：不成立
string: 非空字符串：成立；空字符串：不成立
object: 非null: 成立； null：不成立
*/
/*
if(null){
alert("条件成立");
}else{
alert("条件不成立");
}
*/

/*
swtich语句
swtich(变量){
case 选项1:
语句;
break; 如果不break，就会继续下面选项的语句
case 选项2:：
语句;
break;
default:
默认;
}

注意：
case的条件：
1）可以是常量. string,number
2）可以是变量。（java是不能是变量）
3)可以是表达式（java不能这样）
*/
/*
var i = "b";
var b = "b";
switch(i){
case "a":
document.write("你选择了a");
break;
case b:
document.write("你选择了b");
break;
case "c":
document.write("你选择了c");
break;
case "d":
document.write("你选择了d");
break;
default:
document.write("你选择了其他");
break;
}
*/
/*
var age = 20;
switch(true){
case age>=18:
document.write("他是成年人");
break;
case age<18:
document.write("他是未成年人");
break;
}
*/

/*
for语句：
for(初始化语句;条件判断语句;流程控制语句){
循环体语句
}

需求：页面上打印十次helloworld
需求：对1-100进行求和
*/
/*
var result = 0;
for(var i=1;i<=100;i++){
result+=i;
}
document.write("结果为:"+result);
*/

/*
while语句
初始化语句
while(条件判断语句){
循环体语句;
条件控制语句;
}

执行流程：

需求：在页面上打印十次helloworld;
*/
/*
var i = 1;
while(i<=5){
document.write("helloworld<br/>");
i++;
}
*/

/*
do-while语句
初始化语句;
do{
循环体语句;
条件控制语句;
}while(判断条件语句)

需求：在页面上打印十次helloworld;

*/

with语句：方便函数的调用（以上练习题网页拿过来直接讲解）
with(对象){
直接写对象的方法，无需写对象的名称
}

1.6 函数

函数定义：
function 函数名称(形式参数列表){
语句
}

调用函数:
函数名称(实际参数列表);

注意：
1）js的函数使用function定义，但是形式参数列表不能使用var关键词
2）js的函数可以有返回值，直接使用return关键词返回即可，不需要声明返回值类型
3) js没有方法重载的概念，后面定义的函数会覆盖前面的函数。
4）js中的形式参数和实际参数的数量可以不一致，依然可以调用。
5）js的每个函数中都隐藏了一个叫arguments的数组，这个数组用于接收函数调用时传递过来的实际参数值。
6)arguments数组接收完实际参数后，会逐一的依次从左到右赋值给形式参数,如果实际参数数量大于形式参数，则丢失剩下的实际参数

注意：
实际参数<形式参数： NaN
实际参数>形式参数：取前面的实际参数，后面的参数丢失

案例：定义一个函数，输入月份，可以查询到该月份的天数
1,3,5,7,8,10,12 大月 31天
4,，6,9,11 小月 30天
2 小小月 28天

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript">
//当我的按钮的单击事件被触发以后需要执行的操作
function checkMonth(){
//获取单行输入域内的用户输入的月份值
var month = document.getElementById("month").value;
//使用if语句做判断,给出相应的提示
/*
1,3,5,7,8,10,12 大月 31天
4,，6,9,11 小月 30天
2 小小月 28天
*/
if(month==1||month==3||month==5||month==7||month==8||month==10||month==12){
alert("该月有31天");
}else if(month==4||month==6||month==9||month==11){
alert("该月有30天");
}else if(month==2){
alert("该月有28天");
}else{
alert("星球上没有这个月份");
}

}

</script>
</head>

<body>
请输入你需要查询的月份:<input type="text" id="month"/>

<input type="button" value="查询天数" οnclick="checkMonth()" />

</body>
</html>

1.7 基于对象编程
内置对象
1.String对象
方式一：定义String对象
var str1 = new String("hello");
var str2 = new String("hello");
document.write("结果："+(str1==str2)+"<br/>");
valueOf（）:该方法返回对象的内容
document.write("结果："+(str1.valueOf()==str2.valueOf()));

方式二：
var str1 = "hello";
var str2 = "hello";
document.write("结果："+(str1==str2)+"<br/>");

常用方法：
charAt(索引): 返回指定索引的内容
indexOf(字符串): 返回首次出现指定字符的索引位置
lastIndexOf(字符串): 返回最后出现指定字符的索引位置
fontcolor("red"): 直接给字符串添加颜色
split("字符串"): 使用指定字符串切割字符串，返回字符串数组
substring(start,end); 截取字符串，start：开始索引， end:结束索引
substr(strat,[length]) 截取字符串， start：开始索引 length: 截取的字符串长度

Number对象
方式一：定义Number对象
var num1 = new Number(20);
var num2 = new Number(20);
方式二：
var num1 = 20;
var num2 = 20;
对比
document.write((num1==num2)+"<br/>");
document.write(num1.valueOf()==num2.valueOf());

Boolean对象
var b1 = new Boolean(true);
var b2 = new Boolean(true);
document.write((b1==b2)+"<br/>");
document.write(b1.valueOf()==b2.valueOf());

Math对象
常用的方法：
1）ceil()：向上取整。如果有小数部分的话，直接+1
2）floor(): 向下取整。如果有小数部分的话，直接丢失小数部分，保利整数位
3) round(): 四舍五入取整。满5进一
4）random(): 生成一个随机的0-1的小数 .包含0，不包含1
5）max(): 返回最大值
6）min(): 返回最小值
var num = 3.50;
document.write(Math.ceil(num)+"<br/>");
document.write(Math.floor(num)+"<br/>");
document.write(Math.round(num)+"<br/>");
document.write(Math.round(Math.random()*100)+"<br/>");
document.write(Math.max(10,6,54,23,76)+"<br/>");
document.write(Math.min(10,6,54,23,76)+"<br/>");

Date对象
//创建日期
var date = new Date(); //取当前系统日期时间 java: SimpleDateFormat对象 yyyy-MM-dd 格式化
//document.write(date); //默认格式
//格式： 2015年06月01日 15时12分30秒
//年份
document.write(date.getFullYear()+"年");
//月
document.write((date.getMonth()+1)+"月");
//日
document.write(date.getDate()+"日");
//星期
document.write("星期"+date.getDay()+" ");
//时
document.write(date.getHours()+"时");
//分
document.write(date.getMinutes()+"分");
//秒
document.write(date.getSeconds()+"秒");

案例练习：网页时钟

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>

<body>
<span id="sapnTime"></span>
</body>
<script type="text/javascript">

//创建一个获取当前时间的方法
function getTime(){
//获取span标签对象
var spanTime = document.getElementById("sapnTime");
//创建日期对象
var date = new Date();
//获取年月日,时分秒进行字符串拼接
var time = date.getFullYear()+"-"+(date.getMonth()+1)+"-"+date.getDate()+"  "+date.getHours()+"-"+date.getMinutes()+"-"+date.getSeconds();

//给标签体设置内容,innerHTML这个属性
spanTime.innerHTML=time;

}

//调用设置时间的方法
//getTime();//这样的方式对上面设置时间的方法只调用了一次,所以我们的时间无法实现动态的设置变化

//如果需要让时间动起来的话,我们需要每隔一秒调用getTime()这个方法一次
window.setInterval("getTime()",1000);
//参数1:调用的函数名称参数2:每隔多久调用一次,调用的次数没有限制

</script>
</html>

<body>
当前的日期为：<span id="dateTip"></span>
</body>
<script type="text/javascript">
function genNewDate(){
//生成一个系统的当前时间，格式：2015-06-01 15:22:30
var date = new Date();
//当前日期时间的字符串
var dateStr = date.getFullYear()+"-"+(date.getMonth()+1)+"-"+date.getDate()+" "+date.getHours()+":"+date.getMinutes()+":"+date.getSeconds();
//把日期字符串放到span中
//得到span对象
var dateTip = document.getElementById("dateTip"); //读到了没有加载的标签，无法读取的
//设置span的innerHTMl属性给span赋值
dateTip.innerHTML=dateStr;
}

//设置定时器，每个多少毫秒调用1次任务（函数）
window.setInterval("genNewDate()",1000);
</script>

Array数组对象
方式一：创建数组
1.1 指定数组长度
var arr = new Array(3);

1.2 不指定数组长度、默认0个元素
var arr = new Array();

1.3 指定具体内容
var arr = new Array(10,"hello",true);

方式二：不需要new，直接指定内容
var arr = [10,"java",false];

注意：
1）数组的长度会随着元素的添加而变化，不用担心出现索引位置越界的异常。
2) js的数组可以存放任意类型的元素。

常用的方法：
join(字符串): 使用指定的字符串，把数组的所有元素连接在一起，最终组成一个新的字符串
reverse(): 反转数组中的元素

常用的属性：length 数组的长度

for-in语句（数组讲完之后再讲，和普通for循环遍历对比）：
for(var 遍历 in 数组){

}
var arr = [10,20,30,40];
作用：遍历数组
需求：定义数组进行遍历

（作业）设计一个猜数字小游戏

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript">
//生成随机数
var num = Math.floor(Math.random()*100+1);
alert(num);
function checkNumber(){
//1.获取输入狂内部输入的数字
var inputNumber = document.getElementById("inputNumber").value;

//将数字的类型进行转换
inputNumber = parseInt(inputNumber);

//做if判断并给出提示
if(inputNumber>num){
alert("大了");
}else if(inputNumber<num){
alert("小了");
}else if(inputNumber==num){
alert("对了");
}

}

</script>
</head>

<body>
请输入你猜测得数字:<input type="text" id="inputNumber" />
<input type="button" οnclick="checkNumber()" value="猜数字" />

</body>
</html>

1.BOM编程
BOM是（Broswer Object Model）浏览器对象模型编程

1.window对象
open(): 在一个窗口中打开页面
参数一：打开的页面
参数二：打开的方式。 _self: 本窗口 _blank: 新窗口（默认）
参数三：设置窗口参数。比如窗口大小

setInterval(): 设置定时器（执行n次）
setTimeout(): 设置定时器(只执行1次)
定时器：每隔n毫秒调用指定的任务（函数）
参数一：指定的任务（函数）
参数二：毫秒数

clearInterval(): 清除定时器
clearTimeout(): 清除定时器
清除任务
参数一：需要清除的任务ID

alert(): 提示框
仅仅有确定按钮

confirm(): 确认提示框
返回值就是用户操作
true: 点击了确定
false：点击了取消

propmt(): 输入提示框
返回值就是用户操作
true: 点击了确定
false：点击了取消

注意：
因为window对象使用非常频繁，所以当调用js中的window对象的方法时，可以省略对象名不写。

2.location对象
href属性：代表的是地址栏的URL，可以获取和设置URL。URL表示统一资源定位符
reload方法：刷新当前页面

/*
2.location对象
href属性：代表的是地址栏的URL，可以获取和设置URL。URL表示统一资源定位符
reload方法：刷新当前页面

需求：实现每隔一秒刷新一次页面

//reload方法：刷新当前页面,需求：实现每隔一秒刷新一次页面
function refresh2(){
window.location.reload();
}

window.setTimeout("refresh2()",1000);

</script>
</head>

<body>
<input type="button" value="getHref" οnclick="getHref()" />
<input type="button" value="setHref" οnclick="setHref()" />
<input type="button" value="refresh" οnclick="refresh2()" />
</body>
</html>

3.history对象
forward(): 前进到下一页
back(): 后退上一页
go(): 跳转到某页（正整数：前进负整数：后退） 1 -2

4.screen对象（学习四个属性）
availHeight和availWidth
是排除了任务栏之后的高度和宽度
width和height
是整个屏幕的像素值

2 事件编程
javascript事件编程的三个要素：
（以单击事件为例讲解事件编程三要素）
1）事件源：html标签
2）事件：click dblclick mouseover。。。。
3）监听器：函数

javascript事件分类：
点击相关的：
单击： onclick
双击： ondblclick

焦点相关的：（获得焦点输入框内提示内容消失，失去焦点验证用户名信息并且在输入框内提示）
聚焦： onfocus
失去焦点： onblur

选项相关的：（select选项改变，做一个籍贯选项）
改变选项： onchange

鼠标相关的：（画一个div区块进行演示）
鼠标经过： onmouseover
鼠标移除： onmouseout

页面加载相关的：（一般用在body标签中，用于网页加载完毕后还需执行什么操作进行触发）
页面加载： onload

3. DOM编程
3.1 概念（写一个网页demo,画图讲解javascrip对网页上每一个标签的封装，对象的层次结构体系）
DOM（document Object Model）文档对象模型编程。

3.2 查询标签对象
通过document对象获取，document代表一个html页面

#通过document对象的集合
作用：获取多个或者同类的标签对象
all: 获取所有标签对象
forms：获取form标签对象
images: 获取img标签对象
links: 获取a标签对象
var nodeList = document.all; //返回标签对象数组
var nodeList = document.forms; //返回标签对象数组
var nodeList = document.images; //返回对象数组
var nodeList = document.links;//返回对象数组

#通过关系查找标签对象
父节点： parentNode属性
子节点： childNodes属性
第一个子节点： firstChild属性
最后一个子节点： lastChild属性
下一个兄弟节点： nextSibling属性
上一个兄弟节点： previousSibling属性

#通过document方法查询标签对象
document.getElementById("id属性值"); 最常用
注意：
1）使用该方法获取的标签一定要有id属性
2）在同一个html页面中不要出现两个同名的id

documetn.getElementsByName("name属性值"); 获取同name属性名的标签列表
注意：
1）使用该方法获取的标签一定要有name属性

document.getElementsByTagName("标签名") 获取相同标签名的标签列表

3.3 修改标签对象属性
常用的需要修改的属性：
innerHTML属性：修改标签体内容 <span>xxxxxx</span> <div></div> <select></select>
innerHTML : 设置的标签内的html

value属性：修改value属性值。 input type="text"
src属性：修改图片的src属性。 <img src=""/> 点击按钮更换图片
案例：两张图片不断自动切换

checked属性：修改单选或多项的默认值。 <input type="radio/checked" checked=""/> 爱好全选
（课堂练习）案例：制作一个多选反选列表，价格统计（主要练习两个属性，innerHTML,checked）

4 正则表达式

4.1 正则表达式的书写规则
创建正则表达式： var 变量 = /正则规则/;

[a-z]: 表示匹配字母
* : 0或多个元素
+: 1个或多个元素
? : 0或1个元素
{n,m} 大于n,小于m的个数

正则方法：
test（）：用于匹配指定的字符串. true：表示匹配成功； false; 表示匹配失败

注意：
在js的正则表达式中，如果遇到了符合规则的内容，就代表匹配成功！
如果需要和java一样完全匹配，需要添加边界符号

开始标记： ^
结束标记： $

wyx542813672

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
js基础&&dom编程 25

5 Javascript入门 5.1 引入html：负责网页结构css：负责网页美观javascript：负责用户与浏览器交互。5.2 javacript的来由1994时，网景公司研发了livescript语言，领航者浏览器（把livescript语言植入到浏览器）微软公司的IE浏览器，后来自己花钱20亿美金研发jscript1995年，Sun公司
复制链接

扫一扫