JavaScript和网页部分 HTML CSS 结合使用的
会HTML 和 CSS 日后课程需要CSS,配合的话,深入在讲解CSS
JavaScript是网页脚本语言,作用在网页中,动态网页是什么语言开发的不重要,无论是java编写,还是php,还是.net
先期,将就JavaScript写在我们的网页中
需要将JavaScript代码,封装在<script></script>标签中
理论中,JavaScript代码,可以出现在网页的任意位置上
一般情况下,是写在网页的头部 <head></head>标签之间
JavaScript 严格区分大小写
<script>
//变量,作用是什么,存储常量值,方便与我们计算和存储数据
/*在java中,是有数据类型之分的?java的数据类型有几种
java有基本数据类型,和引用数据类型两大类:
基本数据类型(四类八种):整型(byte,short,int,long),字符型(char);浮点型(float,double);
布尔型(boolean);
引用数据类型:接口,类,数组。
基本数据类型 : 整数123,45,67,-5,小数1.2 0.3,真假值
引用数据类型
JavaScript弱类型语言:没有数据类型的概念
Java强类型语言:将所有的数据,进行了分门别类的管理
JavaScript定义变量
在java中,数据类型 变量名 = 数值;
JavaScript中: var 变量名 = 数值;
*/
var x = 10;//定义了一个变量,赋的数值是10
//alert(x+false);//alert()在网页中,弹出一个对话框,对话框中现实的内容,
就写在alert的小括号中
//在JavaScript中,true表示1 false表示0
//NaN 非法值
若定义变量如:var x;但没有给其赋值,就直接alert的话,会弹出undefind,若加上一个值的话会弹出NaN。
若没有定义,就直接alert的话,什么也不会弹出的,
var y = '5' ;
//alert(y+10);//弹出的是510;
//int[] arr = new int[2];
var arr = new Array(3);//定义数组,存储3个数据
arr[0] = "abc";
arr[1] = 123;
arr[2] = false;
arr[5] = true;
alert(arr);
创建数组的四种方式:
var arr1 = new Array();
var arr2 = new Array(3);
var arr3 = new Array("dd","dd","ff","dd");
var arr4 =["dd","dd","ff","dd"];
//小结一点:JavaScript弱类型语言,先期可以这样理解,没有类型,随便存储数据
********************************************************************************************
js中的运行需要注意的地方:取模;
alert(3%5);//3
alert(-3%5);//-3
alert(3%-5);//3总结,无论是在java还是在javascript中,对于取模运算中的负数,要看前面的数字,
和后面的数字是没有关系的,前面的数字是负数,模的结果就是负数,前面的数字是正数,模的结果就是正数。
对于除运算:/
在java中(3125/1000×1000)=3000
在javascript中(3125/1000×1000)=3125
*********************************************************************************************
比较运算符: 运算后的结果,是true或者是false
== 比较等号两端是否相等 两端都相等的时候结果是true
!= 不等于符号 两端的数据不相等的时候,运算结果是true
< 小于 符号左边小于右边时,运算结果是true
> 大于 符号左边大于右边时,运算结果是true
<= >=
赋值运算符
= 将等号右边的值,赋值给左边的变量
+= x += 2 ---> x = x + 2
-=
*=
/=
%=
++ x++ ---> x = x + 1
位运算符,先将数据转成二进制,进行运算
&:与符号:两边都是1,结果是1,有一边是0 ,结果就是0
3的二进制 11
&
2的二进制 10
10
|:或,一边是1结果就是1,两边结果都是0,结果就是0
3的二进制是 11
|
2的二进制是 10
11
3的二进制 00】11
3的二进制 1100】 12
左移 数据越来越大,右移 数据越来越小
*/
//alert(3<<2);
/*
逻辑运算符 连接两个真假表达式的
不要使用 &单个的符号 2个&&计算出来真假值
|单行个符号,2个||进行计算真假值
这点和java是有点不一样的,在Java中,使用位运算符的话,假如两边是数字的话,就进行位运算,若两边
是boolean值的话就进行真假值的运算,一边bolean,一边数字的话,编译器会报错的。
在JavaScript | & 不具备短路效果
*/
//alert(true && false);// 1 & 0
***********************************************************************
/*
javascript中的语句
判断语句
选择语句
循环语句
*/
//判断语句 if语句,如果
//对条件进行判断需要使用if语句
/*
if语句的格式
if(条件){
被执行的代码
}
条件,是一个布尔类型表达式,运算结果是true(真)或者是假
当布尔类型表达式,运算结果是true,if条件成立,执行if语句下面大括号中的代码
*/
/*
在javascript脚本语言中,弱类型语言,非0 ,即为true
java语言行不行呢,java强类型语言,数字就是数字,布尔就是布尔
*/
注意:if判定的时候,如果不写大括号的话,if语句只能控制距离它最近的一行有效代码,(空行是不算
有效代码的):
判断语句的第二种格式:
if(条件){
条件的运算结果是true的话,执行这里的代码
}else{
条件不成立,条件的运算结果是false的话,执行这里的代码。
}
注意:if中的代码,和else中的代码,只能运行一个,另外:if 或者else肯定会执行一个。
判定语句的第三种格式:
if(条件){
//执行代码
}else if(条件){
//执行的代码
}else if(条件){
//执行的代码
}else{
//执行的代码
}
注意:当有一个if中的条件成立,其他的if else都不会再运行了,代码的执行效率会提高。
循环语句 while循环
当程序需要多次重复执行的时候,使用循环语句
格式:
while(条件){
//执行的代码
}
do ……while的格式:
do{
//执行的代码
}while(条件);
while和do……whlie的区别是:do...while至少执行一次循环体。
break 配合循环使用,强制跳出循环。
注意:当出现多层嵌套循环的时候,要跳出指定的循环的话,可以使用标记为来实现:
比如:
var p=0;
a:while(p<5){
b:while(true){
alert("ddd");
break a;
}
alert(p);
}
循环语句 :for循环
for(表达式1;表达式2;表达式3){
循环体;
}
表达式1:初始化表达式
表达式2:条件表达式
表达式3:增量表达式
特殊:
for(;;){//执行的代码}和while(true){//执行的代码}表示死循环。
注意:
任何循环问题其实都是可以通过这三个循环实现。
do...while至少执行一次循环体。
而while和for循环可能不执行循环体。
while循环和for循环是可以等价转换的。
while和for的使用场景:
如果次数明确,范围明确,请用佛如循环。比如:1-100之间。
如果次数不够明确,一般使用while循环。比如:我现在冰箱有一堆西瓜,我要吃掉它,但是呢,我并
不知道它有多少个。判定有没有西瓜,有,就吃,没有,就结束。
选择语句 switch case
格式:
switch(变量){
case 常量:
执行的代码;break;
case 常量:
执行的代码;break;
default :
执行的代码:break;
}
注意:switch一定要写break,否则会出现case穿透的问题;在上面的case都没有匹配的时候,执行default
后面的代码,default后面的break写或者不写,视情况而定,若default写在switch块的最后面的话,break
是可以省略的,若default不是写在最后面,写在上面或者是中间,那么如果不写break的话,就会出现case
穿透的问题,就是会一直往下执行,知道遇到break为止。
if和switch的使用场景:
A:如果判断的是几中类型或者几个数据。用switch。
switch(表达式)
{
case 值1:
语句1;
break;
case 值2;
语句2;
break;
...
default:
语句n;
//break;
}
B:如果判断的是一个范围一般用if。
if(表达式){}
if(表达式){}
else{}
if(表达式){}
else if(表达式){}
else if(表达式){}
...
else{}
********************************************************************************************
JavaScript消息框
A:警告框
警告框经常用于确保用户可以得到某些信息。
当警告框出现后,用户需要点击确定按钮才能继续进行操作。
语法:
alert("文本")
B:确认框
确认框用于使用户可以验证或者接受某些信息。
当确认框出现后,用户需要点击确定或者取消按钮才能继续进行操作。
如果用户点击确认,那么返回值为 true。如果用户点击取消,那么返回值为 false。
语法:
confirm("文本")
C:提示框
提示框经常用于提示用户在进入页面前输入某个值。
当提示框出现后,用户需要输入某个值,然后点击确认或取消按钮才能继续操纵。
如果用户点击确认,那么返回值为输入的值。如果用户点击取消,那么返回值为 null。
语法:
prompt("文本","默认值")
*********************************************************************************************
注意:
+
如果是字符串,它表示字符串连接符。
-,*,/他会自动进行转换并运算。
alert(typeof 100);//number
alert(typeof 100.456);//number
alert(typeof true);//boolean
alert(typeof "hello"); //string
typeof 表达式或者变量常量;
判断后面数据的类型。
******************************************************************************************
JS可以做什么?
JS主要用来做网页的前台效果
JS可以用来做校验
减少对服务器的交互
JS做游戏
开发人员:做校验和交互。
********************************************************************************************
对象:
document 对象
我先讲一个对象的方法:document.write("内容")
writeln不能实现换行。
要想换行,用br
注意:
write方法既可以把文本写到页面上,也可以把html标签写出来。
document.writeln("java");
//ln,\r\n换行。
document.write("<br/>我换行了,你信不信<br/>");
document.write("<input type='button' value='我是按钮' />");
js函数:
我们在写代码的过程中,会发现很多操作是类似的。
只是参与操作的数据是不同的。
针对这种情况,js就提出了函数的概念。
函数:
函数就是完成一个特点功能的代码块。
格式:
function 函数名(参数...)
{
方法体;
return 返回值;
}
注意:
函数只有被调用才执行。
函数的调用:
A:通过函数名调用。
B:调用方式:
a:在<script>代码块使用
b:通过其他的元素的事件进行触发。
js是基于事件驱动的脚本语言
函数的调用问题:函数如果有明确的return带一个返回值的
A:我们可以直接调用,但是没有意义。
B:alert调用。可以把结束直接显示。但是不推荐。
因为我们可能根据返回的结果还要继续参与操作。
C:赋值使用。
js中没有函数的重载。
如果有函数的名称一样,以最后一个为主。
//判断数是否相等
function compare(a,b)
{
/*
if(a==b)
{
return true;
}
else
{
return false;
}
*/
//if语句的第二种格式和三元运算符是在某些情况下可以等价转换。在有赋值或者返回值的时候。
//表达式?值1:值2
//var c = (a==b)?true:false;
//return c;
//再次改进
//return (a==b)?true:false;
//==返回的本身就是true或者false。
return a==b;
}
1. 日期对象
|-- 创建方法 var date = new Date();
|-- toLocaleString()返回一个看的懂的时间和日期
|-- getFullYear()获取日期对象中的年份
|-- getMonth()获取日期对象中的月份,0-11 运算结果+1
|-- getDate()获取日期对象中的,月中的日期
|-- getDay()获取星期中的,返回的是星期几
|-- getHours()获取当前小时
|-- getMinutes()获取当前的分钟数
|-- getSeconds()获取当前的秒数
|-- getMilliseconds()获取当前毫秒值,1000毫秒=1秒
|-- getTime()获取1970年1月1日午夜零时,到运行Date对象这个时刻的
经过的毫秒值
/*
JS基于对象
*/
//创建的日期对象
//var date = new Date();
//日期对象,调用toLocaleString()
//alert(date.toLocaleString());
/*
单独的获取某个日期的值
获取功能上,函数名都是以get开头
*/
//alert(date.getFullYear());
//alert(date.getMonth()+1);
//alert(date.getDay());
//alert(date.getHours());
//alert(data.getDate() );
//alert(date.getMinutes());
//alert(date.getSeconds());
//alert(date.getMilliseconds());
//alert(date.getTime());
定时器:
window.setInterval("getDateDemo()",1);//没隔一毫秒调用一次前面的函数。
将字符串转换为日期的格式:
1. 将字符串转成日期对象
Date对象的parse方法,月日年
2. 毫秒值的减法运
parse 方法
解析一个包含日期的字符串,并返回该日期与 1970 年 1 月 1 日午夜之间所间隔的毫秒
短日期可以使用“/”或“-”作为日期分隔符,但是必须用月/日/年的格式来表示,例如"7/20/96"。
**********************************************************************************************
数组的排序:
var arr = [3,2,1,5];
//选择排序
/*
for(var i=0; i<arr.length-1;i++){
for(var x=i+1;x<arr.length ;x++){
if(arr[i]>arr[x]){
var temp =arr[i];
arr[i]=arr[x];
arr[x]=temp;
}
}
}
*/
//冒泡排序
for(var x = 0 ; x < arr.length -1; x++){
for( var y = 0 ; y < arr.length - x -1; y++){
if(arr[y] > arr[y+1]){
var temp = arr[y];
arr[y] = arr[y+1];
arr[y+1] = temp;
}
}
}
Array对象中的方法 sort()对数组进行排序 升序
Array对象中concat()方法更多数组组合而成的新
如果是定义一个数据,用变量存储即可。如果是多个数据的操作,就必须用数组存储了。
数组:存储多个元素的容器。JS数组比较特殊,跟java有可能有些不一样。
特点:
数组都有索引,从0开始编号。方便取出元素。
//定义数组对象。
var arr = [1,2,3,4,5];
//数组长度 length
document.write("arr.length:"+arr.length+"<br/>");
//数组要掌握的方法
//join 方法
//返回字符串值,其中包含了连接到一起的数组的所有元素,元素由指定的分隔符分隔开来。
//arrayObj.join(separator)
//document.write("join:"+arr.join("-")+"<br/>");
//pop 方法
//移除数组中的最后一个元素并返回该元素。
//arrayObj.pop( )
//document.write("pop:"+arr.pop()+"<br/>");
//疑问:数组本身是否发生了改变?
//document.write("arr:"+arr.toString()+"<br/>");
//push 方法
//将新元素添加到一个数组中,并返回数组的新长度值。
//arrayObj.push([item1 [item2 [. . . [itemN ]]]]) //java中有一个可变参数。
//document.write("push:"+arr.push(6,7)+"<br/>");
//document.write("arr:"+arr.toString()+"<br/>");
//reverse 方法
//返回一个元素顺序被反转的 Array 对象。
//arrayObj.reverse( )
//arr.reverse(); //反转
//document.write("reverse:"+arr.toString()+"<br/>");
//slice 方法 (Array)
//返回一个数组的一段。
//arrayObj.slice(start, [end]) 索引包含左边,不包含右边。
//document.write("slice:"+arr.slice(1)+"<br/>"); //从编号1开始截取到数组的末尾
//document.write("slice:"+arr.slice(1,3)+"<br/>"); //从编号1开始截取到编号2
//splice 方法
//从一个数组中移除一个或多个元素,如果必要,在所移除元素的位置上插入新元素,返回所移除的元素。
//arrayObj.splice(start, deleteCount, [item1[, item2[, . . . [,itemN]]]])
//js的数组是可变的。
//document.write("splice:"+arr.splice(1,2,8,9,11)+"<br/>");
//document.write("arr:"+arr.toString()+"<br/>");
//unshift 方法
//将指定的元素插入数组开始位置并返回该数组。
//这个方法解释有问题。不同的浏览器效果不一样。建议不要使用该方法。
//document.write("unshift:"+arr.unshift(12)+"<br/>"); //unshift 方法
//document.write("arr:"+arr.toString()+"<br/>");
********************************************************************************************
全局对象:是一个固有对象,目的是把所有全局方法集中在一个对象中。
Global 对象没有语法。直接调用其方法。
在脚本引擎被初始化时创建,可以直接使用。
parseInt 方法
parseFloat 方法 和parseInt类似。
isNaN 方法
escape 方法(对 String 对象编码以便它们能在所有计算机上可读, )
| eval 方法(这个字符串将由 JScript 分析器进行分析和执行。)
| isFinite 方法(返回一个 Boolean 值,指明所提供的数字是否是有限的。)
| isNaN 方法(返回一个 Boolean 值,指明提供的值是否是保留值 NaN (不是数字)。)
| parseFloat 方法 (返回由字符串转换得到的浮点数。 )
| parseInt 方法(返回由字符串转换得到的整数。)
| unescape 方法(解码用 escape 方法进行了编码的 String 对象。 );
//注意:请看
document.write("parseInt:"+parseInt("100")+"<br/>");//100
//从头开始解析,直到不能被解析的数据为止。
document.write("parseInt:"+parseInt("100abc")+"<br/>");//100
document.write("parseInt:"+parseInt("abc100")+"<br/>");//NaN
document.write("parseInt:"+parseInt("10abc0")+"<br/>");//10
//注意:进制问题
//parseInt(numString, [radix]) 返回的是第一个对应的第二个进制的十进制表示。
document.write("parseInt:"+parseInt("100",2)+"<br/>");//4
//1010101010101 自己测试。
document.write("parseInt:"+parseInt("123",2)+"<br/>");//1
document.write("parseInt:"+parseInt("2123",2)+"<br/>");//NaN
******************************************************************************
字符串对象:
<!--
字符串对象:表示文本数据。
格式:
newString = new String(["stringLiteral"])
-->
//创建字符串对象
//var str = new String(); //空字符串对象。
//var str = new String("hello"); //在创建对象的时候就给出元素
//var str = "hello"; //String 对象可用字符串文字显式创建。全局字符串对象
//document.write("str:"+str+"<br/>");
var str = "hello";
//anchor 方法
//在对象中的指定文本两端放置一个有 NAME 属性的 HTML 锚点。
//strVariable.anchor(anchorString)
//html中讲a标签:
//配套使用:
//<a name="haha">hello</a> 定义锚点
//<a href="#haha">返回</a> 使用锚点
*****************************************************************************
参数的问题:
<script type="text/javascript">
function params()
{
var paras="";
for(var x=0;x<arguments.length;x++)
paras=paras+" "+arguments[x];
alert(paras);
}
//params("xyz",567);
params(567,789,"xyz")
</script>
*******************************************************************************************
js的面向对象的理解:
在传统的web开发中,js一直起到的是一种点缀的作用,只完成了有限的功能:表单校验。
后面,如果我们想对ajax技术有深入的了解,必须好好学习js的面向对象思想。
js本身并不是一门面向对象的语言。基于对象的。
当然,我们今天会给大家讲讲,在js中,我们怎么模拟面向对象。
js的面向对象是非正统的面向对象语言,在学习js面向的时候,
需要大家对面向对象思想有一点点了解
typeof运算符:
js是一门弱类型语言,不代表js是没有类型的。
那么,我们怎么能够知道js的类型呢?
这个时候js就提供了typeof运算符供我们使用。
格式:
typeof 表达式
var date = new Date();
//alert(typeof date); //object
alert(typeof Date); //function
var str = new String("hello");
//alert(typeof str); //object
alert(typeof String); //function
//三次结果都是function。
//说明了我们其实是可以通过function模拟类的定
//面向对象中,最核心的概念就是类。
//类表示具有相似性质的一类事物的抽象。
//通过实例化一个类,就能够得到一个类的对象。
//我们如何自己定义对象呢?通过刚才的讲解,我们想到了使用function模拟。
/*
在java中,定义类格式如下:
class 类名
{
}
*/
//定义一个类:定义了一个Person类。
function Person()
{
}
//问题来了,类定义好了,怎么用啊。
//回想:new Date(),new String()
//new操作符不仅仅对js的内置对象有效,对用户自定义的类也是同样有效的。
//也就是说,你完全可以使用new关键字来创建自定义类的对象。
var p = new Person();
//alert(typeof p); //object
//alert(typeof Person); //function
//这个对象没有任何属性的和功能。
如何使用对象的属性和方法呢?
var arr = new Array();
方式1:
对象名.属性(方法)名
方式2:
对象名["属性或方法名"]
//使用方法
//arr.push(44);
//使用属性
//alert(arr.length);
//[]方式使用方法
arr["push"](44);
//[]方式使用属性
alert(arr["length"]);
<!--
自定义类添加,修改,删除属性和方法。
-->
<script type="text/javascript">
//自定义类Person
function Person()
{
}
//创建对象
var p = new Person();
//alert(typeof p); //object
//1:添加属性
//alert(p.name+"***"+p.age+"***"+p.sex);
p.name = "林青霞";
p.age = 26;
p.sex = "女";
//alert(p.name+"***"+p.age+"***"+p.sex);
//这里创建对象后,添加的属性只是给每个对象自己特有的值
//var p2 = new Person();
//p2.name = "石松";
//p2.age = 28;
//p2.sex = "男";
//alert(p2.name+"***"+p2.age+"***"+p2.sex);
//2:添加方法
/*
function show()
{
alert(p.name+"***"+p.age+"***"+p.sex);
}
//函数赋值
p.start = show;
//调用
p.start();
*/
//匿名函数
p.start = function()
{
alert(p.name+"***"+p.age+"***"+p.sex);
}
//调用
//p.start();
//3:修改属性和方法
//alert(p.name+"***"+p.age+"***"+p.sex);
//p.name = "刘德华";
//alert(p.name+"***"+p.age+"***"+p.sex);
/*
p.start = function()
{
alert("面向对象的js,其实也不过如此");
}
p.start();
*/
//4:删除属性和方法
p.name = undefined;
p.start = undefined;
//alert(p.name+"***"+p.age+"***"+p.sex);
//p.start();
</script>
//自定义类
//在js中,如果直接定义了变量,它不会把这个变量认为是当前类的属性或者方法。
//怎么办才行呢?用this。
//this就可以代表当前类的引
function Person(){
this.name = "zhangsan";
}
//创建对象
var p = new Person();
alert(p.name+"ddd");
function Person(name,age)
{
//这就表示把name和age作为Person类的属性了
this.name = name;
this.age = age;
//get/set方法
this.setName = function(n)
{
this.name = n;
}
this.getName = function()
{
return this.name;
}
this.setAge = function(a)
{
this.age = a;
}
this.getAge = function()
{
return this.age;
}
}
var p = new Person();
p.setName("林青霞");
p.setAge(26);
alert(p.name+"***"+p.age);
//使用带参数的创建方式
var p2 = new Person("杨幂",25);
//alert(p2.name+"***"+p2.age);
alert(p2.getName()+"***"+p2.getAge());
/*
在传统的面向对象中,每个对象都会对应到类上。
js中对象其实是属性或者方法的一个集合,并没有严格意义上类的概念。
所以呢,他提供了一种简单的方式创建对象,就是用{}方式。
格式:
{
property1:value1,
property2:value2,
property3:value3,
...
method:function(){
...
}
}
通过大括号扩住了多个属性或者方法的定义,属性或者方法或,隔开。实现了类的定义。
*/
//创建了一个没有任何属性和方法的对象
//var obj = {}; //空的大
//创建了一个包含了三个属性和一个方法的对象
var user = {
name:"liuyi",
age:"30",
work:"老师",
show:function(){
alert(this.name+"***"+this.age+"***"+this.work);
}
}
user.show();
在java中,有成员的访问修饰符的概念:private,默认,protected,public
在js中没有,那么,我们怎么才能够在js中模拟出私有成员呢?
在js中,通过this把变量和方法与类关联上的。如果你自己用var定义了一个变量,
或者直接定义了一个方法,他会认为这个方法或者变量与当前的类无关。
可以被看做是局部的变量和方法
例如:
function Person(name,age)
{
this.name = name;
this.age = age;
//定义了一个变量
var sex = "女";
setSex = function()
{
sex = "男";
}
//通过this修饰的方法
//通过成员方法调用局部方法修改局部变量
this.changeSex = function()
{
setSex();
}
//相当于通过成员方法返回局部变量的值
this.getSex = function()
{
return sex;
}
}
//在js中,大家应该记得 Math对象
//alert(Math.abs(-12)); //绝对值
//alert(Math.max(23,45)); //获取较大的值
//js中也是有静态的概念存在的
//添加静态属性
Person.sex = "男";
//添加静态方法
Person.run = function()
{
alert("run");
}
//注意了:在js中,静态的内容只能被类名访问
//var p = new Person("林青霞",26);
//alert(Person.sex);
//Person.run();
//静态就是这么简单,通过类名直接添加属性或者方法,将来使用的时候也不能创建对象使用
***********************************************************************************************
js原型:
js原型:prototype
在我们每个创建的函数中都有一个属性:prototype属性。原型属性。
它其实是一个对象,它的用途是把所有实例共享的属性和方法给包含起来。
我们也可以通过这个属性给对象添加新的属性和功能。
举例:通过画图工具画圆形。
照猫画虎:
虎.prototype = 猫。
如果是这样的话,我们修改猫,那么,虎的动作也就被修改了。
通过这个原型属性,等会我们就可以模拟继承。
例如:
function Person(name,age)
{
this.name = name;
this.age = age;
this.setName = function(n)
{
this.name = n;
}
this.getName = function()
{
return this.name;
}
this.setAge = function(a)
{
this.age = a;
}
this.getAge = function()
{
return this.age;
}
}
var p = new Person("武松",30);
alert(p.name+"***"+p.age);
//需求:我现在有一个学生类,他和这个Person类的结构一模一样,
//怎么办呢?
//重构:重构(Refactoring)就是在不改变软件现有功能的基础上,
//通过调整程序代码改善软件的质量、性能,使其程序的设计模式和架构更趋合理,提高软件的扩展性和维护性。
//通过了解重构和java中的继承,我们就想到了,这里的代码其实也是可以优化的。
//把学生类给注释调用,重写一个。
function Student(){} //什么都没有定义
//在这里产生一个继承关系
Student.prototype = p;
var s = new Student();
s.setName("石松");
s.setAge(29);
alert(s.getName()+"***"+s.getAge());
原型的应用-:
<!--
比如说:在使用js数组或者字符串对象的操作中,如果功能不够了,怎么办呢?
自己写呗,但是,自己写的话,我们每次都要把数组作为参数传递,这样感觉很别扭。
大家想一想,如果我们在使用js对象的时候,还传递该类型的对象。
对象.属性 或者 对象.方法()
我想的是对象本身调用方法就可以直接返回最大值,而不用把对象本身作为参数传递。
通过原型就可以实现。
-->
<script type="text/javascript">
//获取数组中的最大值
/*
function getMax(arr)
{
//定义参照物
var max = arr[0];
for(var x=1; x<arr.length; x++)
{
if(arr[x]>max)
{
max = arr[x];
}
}
return max;
}
//创建一个数组
var arr = [134,276,35,49,215];
alert(getMax(arr));
*/
//arr.方法()就能够获取到数组中的最大值
Array.prototype.getMax = function()
{
//实现功能
var max = this[0];
for(var x=1; x<this.length; x++)
{
if(this[x]>max)
{
max = this[x];
}
}
return max;
}
//定义一个数组
var arr = [134,276,35,49,215];
//我要调用一个方法就能获取数组中的最大值
//而数组并没有提供这个方法,所以,需要我们自己实现。
//那么我们自己怎么实现呢?通过原型
//this对象:谁调用,this代表谁。
alert(arr.getMax());
原型的应用二:
<!--
需求:去除字符串两端的空格,把字符串变成字符数组,反转功能。
-->
<script type="text/javascript">
//在js中是没有我要求的这几个方法的,所以,都是要求自己实现的。
//并且,我们又不想把字符串作为参数传递,所以我们使用字符串的原型
//给字符串的原型添加功能,就相当于给字符串添加功能
String.prototype.trim = function()
{
/*
分析:
A:this就代表那个带有空格的字符串对象
B:先从头开始找空格,一直往后找,如果没有空格了,就记录该索引
C:从后面开始找空格,一直往前找,如果没有空格了,就记录该索引
D:使用字符串的截取功能截取字符串
*/
//定义开头索引
var start = 0;
//定义末尾索引
var end = this.length - 1;
//从头找空格
while(start<=end && this.charAt(start)==" ")
{
start++;
}
//从后面找空格
while(start<=end && this.charAt(end)==" ")
{
end--;
}
return this.substring(start,end+1);
}
//把字符串变成字符数组
String.prototype.toCharArray = function()
{
/*
A:this还是代表那个调用方法的字符串
B:定义一个字符数组
C:遍历字符串获取到每一个字符
D:把遍历到的每一个字符添加到字符数组中。
E:返回字符数组
*/
//定义字符数组
var chs = new Array(this.length);
//遍历字符串
for(var x=0; x<this.length; x++)
{
chs[x] = this.charAt(x);
}
//返回字符数组
return chs;
}
//字符串反转功能
String.prototype.myReverse = function()
{
/*
A:可以把字符串变成字符数组,因为我刚才写过这个方法
B:在数组中有反转功能
*/
//把字符串转成数组
var arr = this.toCharArray();
//调用数组中的反转功能
return arr.reverse();
}
//定义一个字符串对象
//var str = " hello world ";
//alert("***"+str.trim()+"***");
var str = "hello,js";
//var arr = str.toCharArray();
//alert(arr.toString());
alert(str.myReverse());
<script type="text/javascript" src="demo1.js"></script>
<link href="cc.css" rel="stylesheet" type="text/css" />
**************************************************************************
DOM的介绍:
DOM : Document Object Model
将HTML标记型文档,封装成对象,提供更多的属性和行为
DOM的三级模型
第一级:将标记型文档,封装成对象,提供更多的属性和行为
第二级:对原有的模型,进行了升级
第三级:XML文档封装成对象
DHTML:动态HTML dynamic 四个技术的组合体
HTML:将网页中的内容,封装到标签中
CSS:层叠样式表,提供更加丰富的页面显示效果
JavaScript:负责程序设计,JS对象,函数,循环,判断,变量
DOM:把标记封装成对象,提供更多的方法和属性
DOM树:学好DOM技术,必须要掌握节点对象,他们之间的关系
*******************************************************************************
window对象:
/*
代表浏览器中一个打开的窗口。
window对象,随着浏览器的打开后,这个对象就建立起来了
window对象中的alert(消息)方法
调试程序,给用户进行信息的提示
var x = 10 ;
window.alert(x+20);
window对象中的confirm方法,这个方法返回一个布尔类型值,点击的是确定按钮,将反回true
Web开发中,提示用户对数据删除时候的确认
if(window.confirm("你真的要删除吗")){
document.write("用户选择是真的要删除");
window对象中的close()方法,关闭当前的页面
window对象中的open方法,打开一个网页
window.open("Sample.htm",null,
"height=200,width=400,status=yes,toolbar=no,menubar=no,location=no");
window对象中的打印方法print
window对象中的setInterval 每经过指定毫秒值后计算一个表达式。 定时器,定时的去执行每一个功能
window对象中的clearInterval 使用 setInterval 方法取消先前开始的间隔事件。取消定时器效果
使用取消定时器方法的时候,需要传递一个ID值,这个值可以确定,取消的是哪一个定时器的效果
setInterval会返回一个整数的ID值,如果要取消这个定时器效果,可以将setInterval方法返回的ID值,传递给
clearInterval方法
document 对象:
document对象,代表给定浏览器窗口中的HTML文档。
使用document对象,获取HTML页面中的标签节点对象。对标签节点对象进行操作
document对象获取HTML页面中的标签节点对象的三个方法
getElementById("标签节点的id属性值")
getElementByName("标签节点的name属性");
getElementByTagName("标签名");
1:document对象获取节点的方式
A:getElementById 获取对 ID 标签属性为指定值的第一个对象的引用。
B:getElementsByName 根据 NAME 标签属性的值获取对象的集合。
C:getElementsByTagName 获取基于指定元素名称的对象集合。
var tableNode = document.getElementById("tab_id");
//表格table对象的属性 nodeName 是标签名
// alert(tableNode.nodeName);
//对表格节点对象的style属性进行设置
tableNode.style.border = "5px solid #00FF00";
<script type="text/javascript">
/*
通过节点对象之间的父子,兄弟关系,进行获取
指定一个参考节点 table表格
*/
function documentDemo(){
//获取一个参考性的节点 table节点对象
var tableNode = document.getElementById("tab_id");
alert(tableNode.nodeName);
// alert(tableNode.nodeName);
//通过table节点来获取父节点
// parentNode 获取文档层次中的父对象。
var parentNode = tableNode.parentNode.parentNode.parentNode;
alert(parentNode.nodeName);
}
function documentDemo2(){
//通过table节点,获取子节点
var tableNode = document.getElementById("tab_id");
var childNode = tableNode.childNodes[0].childNodes;
alert(childNode.length);
}
function documentDemo3(){
//通过table节点,获取兄弟节点
var tableNode = document.getElementById("tab_id");
// var node = tableNode.previousSibling.previousSibling.previousSibling.previousSibling;
// alert(node.nodeName);
var node = tableNode.nextSibling.nextSibling.nextSibling;
alert(node.nodeName);
}
</script>
**********************************************************************************************
<script type="text/javascript">
function create()
{
/*
需求:给div添加一个文本节点
分析:
A:创建一个文本节点
B:将文件节点的值添加到指定的div区域中
*/
//如何创建文本节点呢?
//createTextNode
var textNode = document.createTextNode("div区域1");
//获取指定的div
var divNode = document.getElementById("div_1");
//div对象中有这样的一个方法:appendChild 给对象追加一个子元素。
divNode.appendChild(textNode);
//我想给它添加一个超链接标签行不行呢?
//createElement 为指定标签创建一个元素的实例。
var aNode = document.createElement("a");
//给a标签添加文本节点
// href 设置或获取目标 URL 或锚点
aNode.href = "http://www.baidu.com";
aNode.innerText = "百度";
//把a标签节点添加到div上
divNode.appendChild(aNode);
}
function deleteNode()
{
/*
需求:删除div_2的内容。
分析:
A:找到div_2节点
B:删除内容即可
*/
//找到div_2节点
//var divNode = byId("div_2");
//childNodes 返回div的所有儿子节点
//var nodes = divNode.childNodes;
//alert(nodes[0].nodeValue);
//获取文本节点
//var textNode = divNode.childNodes[0];
//删除文本节点
//removeChild 从元素上删除子结点。
//divNode.removeChild(textNode);
/*
需求:我要删除div_2这个节点。
分析:
A:先找到div_2的父节点
B:通过父节点删除div_2这个节点
*/
//var divNode = byId("div_2");
//获取该节点的父节点
// parentNode 获取文档层次中的父对象
//alert(divNode.parentNode.nodeName);
//获取到了body节点
//var bodyNode = divNode.parentNode;
//采用删除方法即可
//bodyNode.removeChild(divNode);
//节点自己删除自己
var divNode = byId("div_2");
//删除节点
//removeNode 从文档层次中删除对象
//true childNodes collection of the object is removed.
divNode.removeNode(true); //连同儿子都干掉
}
function update()
{
/*
需求:用div_1把div_3给替换调用
分析:
A:获取div_1节点对象
B:获取div_3节点对象
C:用div_1节点替换div_3节点
*/
//获取div_1节点对象
var div1Node = byId("div_1");
//获取div_3节点对象
var div3Node = byId("div_3");
//替换节点
//object.replaceNode(oNewNode)
div3Node.replaceNode(div1Node);
}
function clone()
{
/*
需求:用div_3替换div_4。但是还是要去div_3存在
分析:
A:获取div_3节点对象
B:获取div_4节点对象
C:把div_3的节点对象复制一份
D:用复制后的div_3节点替换div_4节点
*/
var div3Node = byId("div_3");
var div4Node = byId("div_4");
//复制节点呢
//cloneNode 从文档层次中复制对对象的引用
var div3Node2 = div3Node.cloneNode(true);//表示连同子节点对象一起克隆
//替换
div4Node.replaceNode(div3Node2);
}
function byId(id)
{
return document.getElementById(id);
}
**********************************************************************************
更改页面的背景色:
function change1()
{
/*
分析:
由于body标签中的一个属性可以实现背景色的更改。
所以,首先我们就想到了获取body这个对象。
通过body对象来改变背景色
html标签属性 纯html标签属性
html节点属性 把html标签封装成对象后的属性
*/
var bodyNode = document.getElementsByTagName("body")[0];
//alert(bodyNode.nodeName);
//颜色组成的三元素:红绿蓝
//bodyNode.bgcolor = "#ff0000"; //这个时候的bgcolor是标签属性
//bodyNode.bgColor = "#ff0000"; //我们需要找到的是该标签属性对应的对象属性
//通过样式写
bodyNode.style.backgroundColor = "#ff0000";
}
function change2()
{
var bodyNode = document.getElementsByTagName("body")[0];
bodyNode.style.backgroundColor = "#00ff00";
}
function change3()
{
var bodyNode = document.getElementsByTagName("body")[0];
bodyNode.style.backgroundColor = "#0000ff";
}
function change(c)
{
var bodyNode = document.getElementsByTagName("body")[0];
bodyNode.style.backgroundColor = c;
}
</script>
****************************************************************************************
正则表达式:
正则表达式:就是符合某些规则的一个模式字符串。
实现判断效果,替换效果
规则:
次数:
+:一次或多次
*:零次或连续多次。
?:零次或一次。
{n}:恰好n次
{n,}:n次以上
{n,m}:至少n次,最多m次
字符是怎么表示的:
\d和[0-9]:0-9的数字
\w和[a-zA-Z_0-9]:用于匹配字母,数字或下划线字符;
[a-z]:小a到小z
[A-Z]:大a到大z
^:表示开头
$:表示结尾
正则表达式对象的创建:
rgexp = /pattern/
正则表达式的使用;
返回一个 Boolean 值,它指出在被查找的字符串中是否匹配给出的正则表达式。
rgexp.test(str)
会HTML 和 CSS 日后课程需要CSS,配合的话,深入在讲解CSS
JavaScript是网页脚本语言,作用在网页中,动态网页是什么语言开发的不重要,无论是java编写,还是php,还是.net
先期,将就JavaScript写在我们的网页中
需要将JavaScript代码,封装在<script></script>标签中
理论中,JavaScript代码,可以出现在网页的任意位置上
一般情况下,是写在网页的头部 <head></head>标签之间
JavaScript 严格区分大小写
<script>
//变量,作用是什么,存储常量值,方便与我们计算和存储数据
/*在java中,是有数据类型之分的?java的数据类型有几种
java有基本数据类型,和引用数据类型两大类:
基本数据类型(四类八种):整型(byte,short,int,long),字符型(char);浮点型(float,double);
布尔型(boolean);
引用数据类型:接口,类,数组。
基本数据类型 : 整数123,45,67,-5,小数1.2 0.3,真假值
引用数据类型
JavaScript弱类型语言:没有数据类型的概念
Java强类型语言:将所有的数据,进行了分门别类的管理
JavaScript定义变量
在java中,数据类型 变量名 = 数值;
JavaScript中: var 变量名 = 数值;
*/
var x = 10;//定义了一个变量,赋的数值是10
//alert(x+false);//alert()在网页中,弹出一个对话框,对话框中现实的内容,
就写在alert的小括号中
//在JavaScript中,true表示1 false表示0
//NaN 非法值
若定义变量如:var x;但没有给其赋值,就直接alert的话,会弹出undefind,若加上一个值的话会弹出NaN。
若没有定义,就直接alert的话,什么也不会弹出的,
var y = '5' ;
//alert(y+10);//弹出的是510;
//int[] arr = new int[2];
var arr = new Array(3);//定义数组,存储3个数据
arr[0] = "abc";
arr[1] = 123;
arr[2] = false;
arr[5] = true;
alert(arr);
创建数组的四种方式:
var arr1 = new Array();
var arr2 = new Array(3);
var arr3 = new Array("dd","dd","ff","dd");
var arr4 =["dd","dd","ff","dd"];
//小结一点:JavaScript弱类型语言,先期可以这样理解,没有类型,随便存储数据
********************************************************************************************
js中的运行需要注意的地方:取模;
alert(3%5);//3
alert(-3%5);//-3
alert(3%-5);//3总结,无论是在java还是在javascript中,对于取模运算中的负数,要看前面的数字,
和后面的数字是没有关系的,前面的数字是负数,模的结果就是负数,前面的数字是正数,模的结果就是正数。
对于除运算:/
在java中(3125/1000×1000)=3000
在javascript中(3125/1000×1000)=3125
*********************************************************************************************
比较运算符: 运算后的结果,是true或者是false
== 比较等号两端是否相等 两端都相等的时候结果是true
!= 不等于符号 两端的数据不相等的时候,运算结果是true
< 小于 符号左边小于右边时,运算结果是true
> 大于 符号左边大于右边时,运算结果是true
<= >=
赋值运算符
= 将等号右边的值,赋值给左边的变量
+= x += 2 ---> x = x + 2
-=
*=
/=
%=
++ x++ ---> x = x + 1
位运算符,先将数据转成二进制,进行运算
&:与符号:两边都是1,结果是1,有一边是0 ,结果就是0
3的二进制 11
&
2的二进制 10
10
|:或,一边是1结果就是1,两边结果都是0,结果就是0
3的二进制是 11
|
2的二进制是 10
11
3的二进制 00】11
3的二进制 1100】 12
左移 数据越来越大,右移 数据越来越小
*/
//alert(3<<2);
/*
逻辑运算符 连接两个真假表达式的
不要使用 &单个的符号 2个&&计算出来真假值
|单行个符号,2个||进行计算真假值
这点和java是有点不一样的,在Java中,使用位运算符的话,假如两边是数字的话,就进行位运算,若两边
是boolean值的话就进行真假值的运算,一边bolean,一边数字的话,编译器会报错的。
在JavaScript | & 不具备短路效果
*/
//alert(true && false);// 1 & 0
***********************************************************************
/*
javascript中的语句
判断语句
选择语句
循环语句
*/
//判断语句 if语句,如果
//对条件进行判断需要使用if语句
/*
if语句的格式
if(条件){
被执行的代码
}
条件,是一个布尔类型表达式,运算结果是true(真)或者是假
当布尔类型表达式,运算结果是true,if条件成立,执行if语句下面大括号中的代码
*/
/*
在javascript脚本语言中,弱类型语言,非0 ,即为true
java语言行不行呢,java强类型语言,数字就是数字,布尔就是布尔
*/
注意:if判定的时候,如果不写大括号的话,if语句只能控制距离它最近的一行有效代码,(空行是不算
有效代码的):
判断语句的第二种格式:
if(条件){
条件的运算结果是true的话,执行这里的代码
}else{
条件不成立,条件的运算结果是false的话,执行这里的代码。
}
注意:if中的代码,和else中的代码,只能运行一个,另外:if 或者else肯定会执行一个。
判定语句的第三种格式:
if(条件){
//执行代码
}else if(条件){
//执行的代码
}else if(条件){
//执行的代码
}else{
//执行的代码
}
注意:当有一个if中的条件成立,其他的if else都不会再运行了,代码的执行效率会提高。
循环语句 while循环
当程序需要多次重复执行的时候,使用循环语句
格式:
while(条件){
//执行的代码
}
do ……while的格式:
do{
//执行的代码
}while(条件);
while和do……whlie的区别是:do...while至少执行一次循环体。
break 配合循环使用,强制跳出循环。
注意:当出现多层嵌套循环的时候,要跳出指定的循环的话,可以使用标记为来实现:
比如:
var p=0;
a:while(p<5){
b:while(true){
alert("ddd");
break a;
}
alert(p);
}
循环语句 :for循环
for(表达式1;表达式2;表达式3){
循环体;
}
表达式1:初始化表达式
表达式2:条件表达式
表达式3:增量表达式
特殊:
for(;;){//执行的代码}和while(true){//执行的代码}表示死循环。
注意:
任何循环问题其实都是可以通过这三个循环实现。
do...while至少执行一次循环体。
而while和for循环可能不执行循环体。
while循环和for循环是可以等价转换的。
while和for的使用场景:
如果次数明确,范围明确,请用佛如循环。比如:1-100之间。
如果次数不够明确,一般使用while循环。比如:我现在冰箱有一堆西瓜,我要吃掉它,但是呢,我并
不知道它有多少个。判定有没有西瓜,有,就吃,没有,就结束。
选择语句 switch case
格式:
switch(变量){
case 常量:
执行的代码;break;
case 常量:
执行的代码;break;
default :
执行的代码:break;
}
注意:switch一定要写break,否则会出现case穿透的问题;在上面的case都没有匹配的时候,执行default
后面的代码,default后面的break写或者不写,视情况而定,若default写在switch块的最后面的话,break
是可以省略的,若default不是写在最后面,写在上面或者是中间,那么如果不写break的话,就会出现case
穿透的问题,就是会一直往下执行,知道遇到break为止。
if和switch的使用场景:
A:如果判断的是几中类型或者几个数据。用switch。
switch(表达式)
{
case 值1:
语句1;
break;
case 值2;
语句2;
break;
...
default:
语句n;
//break;
}
B:如果判断的是一个范围一般用if。
if(表达式){}
if(表达式){}
else{}
if(表达式){}
else if(表达式){}
else if(表达式){}
...
else{}
********************************************************************************************
JavaScript消息框
A:警告框
警告框经常用于确保用户可以得到某些信息。
当警告框出现后,用户需要点击确定按钮才能继续进行操作。
语法:
alert("文本")
B:确认框
确认框用于使用户可以验证或者接受某些信息。
当确认框出现后,用户需要点击确定或者取消按钮才能继续进行操作。
如果用户点击确认,那么返回值为 true。如果用户点击取消,那么返回值为 false。
语法:
confirm("文本")
C:提示框
提示框经常用于提示用户在进入页面前输入某个值。
当提示框出现后,用户需要输入某个值,然后点击确认或取消按钮才能继续操纵。
如果用户点击确认,那么返回值为输入的值。如果用户点击取消,那么返回值为 null。
语法:
prompt("文本","默认值")
*********************************************************************************************
注意:
+
如果是字符串,它表示字符串连接符。
-,*,/他会自动进行转换并运算。
alert(typeof 100);//number
alert(typeof 100.456);//number
alert(typeof true);//boolean
alert(typeof "hello"); //string
typeof 表达式或者变量常量;
判断后面数据的类型。
******************************************************************************************
JS可以做什么?
JS主要用来做网页的前台效果
JS可以用来做校验
减少对服务器的交互
JS做游戏
开发人员:做校验和交互。
********************************************************************************************
对象:
document 对象
我先讲一个对象的方法:document.write("内容")
writeln不能实现换行。
要想换行,用br
注意:
write方法既可以把文本写到页面上,也可以把html标签写出来。
document.writeln("java");
//ln,\r\n换行。
document.write("<br/>我换行了,你信不信<br/>");
document.write("<input type='button' value='我是按钮' />");
js函数:
我们在写代码的过程中,会发现很多操作是类似的。
只是参与操作的数据是不同的。
针对这种情况,js就提出了函数的概念。
函数:
函数就是完成一个特点功能的代码块。
格式:
function 函数名(参数...)
{
方法体;
return 返回值;
}
注意:
函数只有被调用才执行。
函数的调用:
A:通过函数名调用。
B:调用方式:
a:在<script>代码块使用
b:通过其他的元素的事件进行触发。
js是基于事件驱动的脚本语言
函数的调用问题:函数如果有明确的return带一个返回值的
A:我们可以直接调用,但是没有意义。
B:alert调用。可以把结束直接显示。但是不推荐。
因为我们可能根据返回的结果还要继续参与操作。
C:赋值使用。
js中没有函数的重载。
如果有函数的名称一样,以最后一个为主。
//判断数是否相等
function compare(a,b)
{
/*
if(a==b)
{
return true;
}
else
{
return false;
}
*/
//if语句的第二种格式和三元运算符是在某些情况下可以等价转换。在有赋值或者返回值的时候。
//表达式?值1:值2
//var c = (a==b)?true:false;
//return c;
//再次改进
//return (a==b)?true:false;
//==返回的本身就是true或者false。
return a==b;
}
1. 日期对象
|-- 创建方法 var date = new Date();
|-- toLocaleString()返回一个看的懂的时间和日期
|-- getFullYear()获取日期对象中的年份
|-- getMonth()获取日期对象中的月份,0-11 运算结果+1
|-- getDate()获取日期对象中的,月中的日期
|-- getDay()获取星期中的,返回的是星期几
|-- getHours()获取当前小时
|-- getMinutes()获取当前的分钟数
|-- getSeconds()获取当前的秒数
|-- getMilliseconds()获取当前毫秒值,1000毫秒=1秒
|-- getTime()获取1970年1月1日午夜零时,到运行Date对象这个时刻的
经过的毫秒值
/*
JS基于对象
*/
//创建的日期对象
//var date = new Date();
//日期对象,调用toLocaleString()
//alert(date.toLocaleString());
/*
单独的获取某个日期的值
获取功能上,函数名都是以get开头
*/
//alert(date.getFullYear());
//alert(date.getMonth()+1);
//alert(date.getDay());
//alert(date.getHours());
//alert(data.getDate() );
//alert(date.getMinutes());
//alert(date.getSeconds());
//alert(date.getMilliseconds());
//alert(date.getTime());
定时器:
window.setInterval("getDateDemo()",1);//没隔一毫秒调用一次前面的函数。
将字符串转换为日期的格式:
1. 将字符串转成日期对象
Date对象的parse方法,月日年
2. 毫秒值的减法运
parse 方法
解析一个包含日期的字符串,并返回该日期与 1970 年 1 月 1 日午夜之间所间隔的毫秒
短日期可以使用“/”或“-”作为日期分隔符,但是必须用月/日/年的格式来表示,例如"7/20/96"。
**********************************************************************************************
数组的排序:
var arr = [3,2,1,5];
//选择排序
/*
for(var i=0; i<arr.length-1;i++){
for(var x=i+1;x<arr.length ;x++){
if(arr[i]>arr[x]){
var temp =arr[i];
arr[i]=arr[x];
arr[x]=temp;
}
}
}
*/
//冒泡排序
for(var x = 0 ; x < arr.length -1; x++){
for( var y = 0 ; y < arr.length - x -1; y++){
if(arr[y] > arr[y+1]){
var temp = arr[y];
arr[y] = arr[y+1];
arr[y+1] = temp;
}
}
}
Array对象中的方法 sort()对数组进行排序 升序
Array对象中concat()方法更多数组组合而成的新
如果是定义一个数据,用变量存储即可。如果是多个数据的操作,就必须用数组存储了。
数组:存储多个元素的容器。JS数组比较特殊,跟java有可能有些不一样。
特点:
数组都有索引,从0开始编号。方便取出元素。
//定义数组对象。
var arr = [1,2,3,4,5];
//数组长度 length
document.write("arr.length:"+arr.length+"<br/>");
//数组要掌握的方法
//join 方法
//返回字符串值,其中包含了连接到一起的数组的所有元素,元素由指定的分隔符分隔开来。
//arrayObj.join(separator)
//document.write("join:"+arr.join("-")+"<br/>");
//pop 方法
//移除数组中的最后一个元素并返回该元素。
//arrayObj.pop( )
//document.write("pop:"+arr.pop()+"<br/>");
//疑问:数组本身是否发生了改变?
//document.write("arr:"+arr.toString()+"<br/>");
//push 方法
//将新元素添加到一个数组中,并返回数组的新长度值。
//arrayObj.push([item1 [item2 [. . . [itemN ]]]]) //java中有一个可变参数。
//document.write("push:"+arr.push(6,7)+"<br/>");
//document.write("arr:"+arr.toString()+"<br/>");
//reverse 方法
//返回一个元素顺序被反转的 Array 对象。
//arrayObj.reverse( )
//arr.reverse(); //反转
//document.write("reverse:"+arr.toString()+"<br/>");
//slice 方法 (Array)
//返回一个数组的一段。
//arrayObj.slice(start, [end]) 索引包含左边,不包含右边。
//document.write("slice:"+arr.slice(1)+"<br/>"); //从编号1开始截取到数组的末尾
//document.write("slice:"+arr.slice(1,3)+"<br/>"); //从编号1开始截取到编号2
//splice 方法
//从一个数组中移除一个或多个元素,如果必要,在所移除元素的位置上插入新元素,返回所移除的元素。
//arrayObj.splice(start, deleteCount, [item1[, item2[, . . . [,itemN]]]])
//js的数组是可变的。
//document.write("splice:"+arr.splice(1,2,8,9,11)+"<br/>");
//document.write("arr:"+arr.toString()+"<br/>");
//unshift 方法
//将指定的元素插入数组开始位置并返回该数组。
//这个方法解释有问题。不同的浏览器效果不一样。建议不要使用该方法。
//document.write("unshift:"+arr.unshift(12)+"<br/>"); //unshift 方法
//document.write("arr:"+arr.toString()+"<br/>");
********************************************************************************************
全局对象:是一个固有对象,目的是把所有全局方法集中在一个对象中。
Global 对象没有语法。直接调用其方法。
在脚本引擎被初始化时创建,可以直接使用。
parseInt 方法
parseFloat 方法 和parseInt类似。
isNaN 方法
escape 方法(对 String 对象编码以便它们能在所有计算机上可读, )
| eval 方法(这个字符串将由 JScript 分析器进行分析和执行。)
| isFinite 方法(返回一个 Boolean 值,指明所提供的数字是否是有限的。)
| isNaN 方法(返回一个 Boolean 值,指明提供的值是否是保留值 NaN (不是数字)。)
| parseFloat 方法 (返回由字符串转换得到的浮点数。 )
| parseInt 方法(返回由字符串转换得到的整数。)
| unescape 方法(解码用 escape 方法进行了编码的 String 对象。 );
//注意:请看
document.write("parseInt:"+parseInt("100")+"<br/>");//100
//从头开始解析,直到不能被解析的数据为止。
document.write("parseInt:"+parseInt("100abc")+"<br/>");//100
document.write("parseInt:"+parseInt("abc100")+"<br/>");//NaN
document.write("parseInt:"+parseInt("10abc0")+"<br/>");//10
//注意:进制问题
//parseInt(numString, [radix]) 返回的是第一个对应的第二个进制的十进制表示。
document.write("parseInt:"+parseInt("100",2)+"<br/>");//4
//1010101010101 自己测试。
document.write("parseInt:"+parseInt("123",2)+"<br/>");//1
document.write("parseInt:"+parseInt("2123",2)+"<br/>");//NaN
******************************************************************************
字符串对象:
<!--
字符串对象:表示文本数据。
格式:
newString = new String(["stringLiteral"])
-->
//创建字符串对象
//var str = new String(); //空字符串对象。
//var str = new String("hello"); //在创建对象的时候就给出元素
//var str = "hello"; //String 对象可用字符串文字显式创建。全局字符串对象
//document.write("str:"+str+"<br/>");
var str = "hello";
//anchor 方法
//在对象中的指定文本两端放置一个有 NAME 属性的 HTML 锚点。
//strVariable.anchor(anchorString)
//html中讲a标签:
//配套使用:
//<a name="haha">hello</a> 定义锚点
//<a href="#haha">返回</a> 使用锚点
*****************************************************************************
参数的问题:
<script type="text/javascript">
function params()
{
var paras="";
for(var x=0;x<arguments.length;x++)
paras=paras+" "+arguments[x];
alert(paras);
}
//params("xyz",567);
params(567,789,"xyz")
</script>
*******************************************************************************************
js的面向对象的理解:
在传统的web开发中,js一直起到的是一种点缀的作用,只完成了有限的功能:表单校验。
后面,如果我们想对ajax技术有深入的了解,必须好好学习js的面向对象思想。
js本身并不是一门面向对象的语言。基于对象的。
当然,我们今天会给大家讲讲,在js中,我们怎么模拟面向对象。
js的面向对象是非正统的面向对象语言,在学习js面向的时候,
需要大家对面向对象思想有一点点了解
typeof运算符:
js是一门弱类型语言,不代表js是没有类型的。
那么,我们怎么能够知道js的类型呢?
这个时候js就提供了typeof运算符供我们使用。
格式:
typeof 表达式
var date = new Date();
//alert(typeof date); //object
alert(typeof Date); //function
var str = new String("hello");
//alert(typeof str); //object
alert(typeof String); //function
//三次结果都是function。
//说明了我们其实是可以通过function模拟类的定
//面向对象中,最核心的概念就是类。
//类表示具有相似性质的一类事物的抽象。
//通过实例化一个类,就能够得到一个类的对象。
//我们如何自己定义对象呢?通过刚才的讲解,我们想到了使用function模拟。
/*
在java中,定义类格式如下:
class 类名
{
}
*/
//定义一个类:定义了一个Person类。
function Person()
{
}
//问题来了,类定义好了,怎么用啊。
//回想:new Date(),new String()
//new操作符不仅仅对js的内置对象有效,对用户自定义的类也是同样有效的。
//也就是说,你完全可以使用new关键字来创建自定义类的对象。
var p = new Person();
//alert(typeof p); //object
//alert(typeof Person); //function
//这个对象没有任何属性的和功能。
如何使用对象的属性和方法呢?
var arr = new Array();
方式1:
对象名.属性(方法)名
方式2:
对象名["属性或方法名"]
//使用方法
//arr.push(44);
//使用属性
//alert(arr.length);
//[]方式使用方法
arr["push"](44);
//[]方式使用属性
alert(arr["length"]);
<!--
自定义类添加,修改,删除属性和方法。
-->
<script type="text/javascript">
//自定义类Person
function Person()
{
}
//创建对象
var p = new Person();
//alert(typeof p); //object
//1:添加属性
//alert(p.name+"***"+p.age+"***"+p.sex);
p.name = "林青霞";
p.age = 26;
p.sex = "女";
//alert(p.name+"***"+p.age+"***"+p.sex);
//这里创建对象后,添加的属性只是给每个对象自己特有的值
//var p2 = new Person();
//p2.name = "石松";
//p2.age = 28;
//p2.sex = "男";
//alert(p2.name+"***"+p2.age+"***"+p2.sex);
//2:添加方法
/*
function show()
{
alert(p.name+"***"+p.age+"***"+p.sex);
}
//函数赋值
p.start = show;
//调用
p.start();
*/
//匿名函数
p.start = function()
{
alert(p.name+"***"+p.age+"***"+p.sex);
}
//调用
//p.start();
//3:修改属性和方法
//alert(p.name+"***"+p.age+"***"+p.sex);
//p.name = "刘德华";
//alert(p.name+"***"+p.age+"***"+p.sex);
/*
p.start = function()
{
alert("面向对象的js,其实也不过如此");
}
p.start();
*/
//4:删除属性和方法
p.name = undefined;
p.start = undefined;
//alert(p.name+"***"+p.age+"***"+p.sex);
//p.start();
</script>
//自定义类
//在js中,如果直接定义了变量,它不会把这个变量认为是当前类的属性或者方法。
//怎么办才行呢?用this。
//this就可以代表当前类的引
function Person(){
this.name = "zhangsan";
}
//创建对象
var p = new Person();
alert(p.name+"ddd");
function Person(name,age)
{
//这就表示把name和age作为Person类的属性了
this.name = name;
this.age = age;
//get/set方法
this.setName = function(n)
{
this.name = n;
}
this.getName = function()
{
return this.name;
}
this.setAge = function(a)
{
this.age = a;
}
this.getAge = function()
{
return this.age;
}
}
var p = new Person();
p.setName("林青霞");
p.setAge(26);
alert(p.name+"***"+p.age);
//使用带参数的创建方式
var p2 = new Person("杨幂",25);
//alert(p2.name+"***"+p2.age);
alert(p2.getName()+"***"+p2.getAge());
/*
在传统的面向对象中,每个对象都会对应到类上。
js中对象其实是属性或者方法的一个集合,并没有严格意义上类的概念。
所以呢,他提供了一种简单的方式创建对象,就是用{}方式。
格式:
{
property1:value1,
property2:value2,
property3:value3,
...
method:function(){
...
}
}
通过大括号扩住了多个属性或者方法的定义,属性或者方法或,隔开。实现了类的定义。
*/
//创建了一个没有任何属性和方法的对象
//var obj = {}; //空的大
//创建了一个包含了三个属性和一个方法的对象
var user = {
name:"liuyi",
age:"30",
work:"老师",
show:function(){
alert(this.name+"***"+this.age+"***"+this.work);
}
}
user.show();
在java中,有成员的访问修饰符的概念:private,默认,protected,public
在js中没有,那么,我们怎么才能够在js中模拟出私有成员呢?
在js中,通过this把变量和方法与类关联上的。如果你自己用var定义了一个变量,
或者直接定义了一个方法,他会认为这个方法或者变量与当前的类无关。
可以被看做是局部的变量和方法
例如:
function Person(name,age)
{
this.name = name;
this.age = age;
//定义了一个变量
var sex = "女";
setSex = function()
{
sex = "男";
}
//通过this修饰的方法
//通过成员方法调用局部方法修改局部变量
this.changeSex = function()
{
setSex();
}
//相当于通过成员方法返回局部变量的值
this.getSex = function()
{
return sex;
}
}
//在js中,大家应该记得 Math对象
//alert(Math.abs(-12)); //绝对值
//alert(Math.max(23,45)); //获取较大的值
//js中也是有静态的概念存在的
//添加静态属性
Person.sex = "男";
//添加静态方法
Person.run = function()
{
alert("run");
}
//注意了:在js中,静态的内容只能被类名访问
//var p = new Person("林青霞",26);
//alert(Person.sex);
//Person.run();
//静态就是这么简单,通过类名直接添加属性或者方法,将来使用的时候也不能创建对象使用
***********************************************************************************************
js原型:
js原型:prototype
在我们每个创建的函数中都有一个属性:prototype属性。原型属性。
它其实是一个对象,它的用途是把所有实例共享的属性和方法给包含起来。
我们也可以通过这个属性给对象添加新的属性和功能。
举例:通过画图工具画圆形。
照猫画虎:
虎.prototype = 猫。
如果是这样的话,我们修改猫,那么,虎的动作也就被修改了。
通过这个原型属性,等会我们就可以模拟继承。
例如:
function Person(name,age)
{
this.name = name;
this.age = age;
this.setName = function(n)
{
this.name = n;
}
this.getName = function()
{
return this.name;
}
this.setAge = function(a)
{
this.age = a;
}
this.getAge = function()
{
return this.age;
}
}
var p = new Person("武松",30);
alert(p.name+"***"+p.age);
//需求:我现在有一个学生类,他和这个Person类的结构一模一样,
//怎么办呢?
//重构:重构(Refactoring)就是在不改变软件现有功能的基础上,
//通过调整程序代码改善软件的质量、性能,使其程序的设计模式和架构更趋合理,提高软件的扩展性和维护性。
//通过了解重构和java中的继承,我们就想到了,这里的代码其实也是可以优化的。
//把学生类给注释调用,重写一个。
function Student(){} //什么都没有定义
//在这里产生一个继承关系
Student.prototype = p;
var s = new Student();
s.setName("石松");
s.setAge(29);
alert(s.getName()+"***"+s.getAge());
原型的应用-:
<!--
比如说:在使用js数组或者字符串对象的操作中,如果功能不够了,怎么办呢?
自己写呗,但是,自己写的话,我们每次都要把数组作为参数传递,这样感觉很别扭。
大家想一想,如果我们在使用js对象的时候,还传递该类型的对象。
对象.属性 或者 对象.方法()
我想的是对象本身调用方法就可以直接返回最大值,而不用把对象本身作为参数传递。
通过原型就可以实现。
-->
<script type="text/javascript">
//获取数组中的最大值
/*
function getMax(arr)
{
//定义参照物
var max = arr[0];
for(var x=1; x<arr.length; x++)
{
if(arr[x]>max)
{
max = arr[x];
}
}
return max;
}
//创建一个数组
var arr = [134,276,35,49,215];
alert(getMax(arr));
*/
//arr.方法()就能够获取到数组中的最大值
Array.prototype.getMax = function()
{
//实现功能
var max = this[0];
for(var x=1; x<this.length; x++)
{
if(this[x]>max)
{
max = this[x];
}
}
return max;
}
//定义一个数组
var arr = [134,276,35,49,215];
//我要调用一个方法就能获取数组中的最大值
//而数组并没有提供这个方法,所以,需要我们自己实现。
//那么我们自己怎么实现呢?通过原型
//this对象:谁调用,this代表谁。
alert(arr.getMax());
原型的应用二:
<!--
需求:去除字符串两端的空格,把字符串变成字符数组,反转功能。
-->
<script type="text/javascript">
//在js中是没有我要求的这几个方法的,所以,都是要求自己实现的。
//并且,我们又不想把字符串作为参数传递,所以我们使用字符串的原型
//给字符串的原型添加功能,就相当于给字符串添加功能
String.prototype.trim = function()
{
/*
分析:
A:this就代表那个带有空格的字符串对象
B:先从头开始找空格,一直往后找,如果没有空格了,就记录该索引
C:从后面开始找空格,一直往前找,如果没有空格了,就记录该索引
D:使用字符串的截取功能截取字符串
*/
//定义开头索引
var start = 0;
//定义末尾索引
var end = this.length - 1;
//从头找空格
while(start<=end && this.charAt(start)==" ")
{
start++;
}
//从后面找空格
while(start<=end && this.charAt(end)==" ")
{
end--;
}
return this.substring(start,end+1);
}
//把字符串变成字符数组
String.prototype.toCharArray = function()
{
/*
A:this还是代表那个调用方法的字符串
B:定义一个字符数组
C:遍历字符串获取到每一个字符
D:把遍历到的每一个字符添加到字符数组中。
E:返回字符数组
*/
//定义字符数组
var chs = new Array(this.length);
//遍历字符串
for(var x=0; x<this.length; x++)
{
chs[x] = this.charAt(x);
}
//返回字符数组
return chs;
}
//字符串反转功能
String.prototype.myReverse = function()
{
/*
A:可以把字符串变成字符数组,因为我刚才写过这个方法
B:在数组中有反转功能
*/
//把字符串转成数组
var arr = this.toCharArray();
//调用数组中的反转功能
return arr.reverse();
}
//定义一个字符串对象
//var str = " hello world ";
//alert("***"+str.trim()+"***");
var str = "hello,js";
//var arr = str.toCharArray();
//alert(arr.toString());
alert(str.myReverse());
<script type="text/javascript" src="demo1.js"></script>
<link href="cc.css" rel="stylesheet" type="text/css" />
**************************************************************************
DOM的介绍:
DOM : Document Object Model
将HTML标记型文档,封装成对象,提供更多的属性和行为
DOM的三级模型
第一级:将标记型文档,封装成对象,提供更多的属性和行为
第二级:对原有的模型,进行了升级
第三级:XML文档封装成对象
DHTML:动态HTML dynamic 四个技术的组合体
HTML:将网页中的内容,封装到标签中
CSS:层叠样式表,提供更加丰富的页面显示效果
JavaScript:负责程序设计,JS对象,函数,循环,判断,变量
DOM:把标记封装成对象,提供更多的方法和属性
DOM树:学好DOM技术,必须要掌握节点对象,他们之间的关系
*******************************************************************************
window对象:
/*
代表浏览器中一个打开的窗口。
window对象,随着浏览器的打开后,这个对象就建立起来了
window对象中的alert(消息)方法
调试程序,给用户进行信息的提示
var x = 10 ;
window.alert(x+20);
window对象中的confirm方法,这个方法返回一个布尔类型值,点击的是确定按钮,将反回true
Web开发中,提示用户对数据删除时候的确认
if(window.confirm("你真的要删除吗")){
document.write("用户选择是真的要删除");
window对象中的close()方法,关闭当前的页面
window对象中的open方法,打开一个网页
window.open("Sample.htm",null,
"height=200,width=400,status=yes,toolbar=no,menubar=no,location=no");
window对象中的打印方法print
window对象中的setInterval 每经过指定毫秒值后计算一个表达式。 定时器,定时的去执行每一个功能
window对象中的clearInterval 使用 setInterval 方法取消先前开始的间隔事件。取消定时器效果
使用取消定时器方法的时候,需要传递一个ID值,这个值可以确定,取消的是哪一个定时器的效果
setInterval会返回一个整数的ID值,如果要取消这个定时器效果,可以将setInterval方法返回的ID值,传递给
clearInterval方法
document 对象:
document对象,代表给定浏览器窗口中的HTML文档。
使用document对象,获取HTML页面中的标签节点对象。对标签节点对象进行操作
document对象获取HTML页面中的标签节点对象的三个方法
getElementById("标签节点的id属性值")
getElementByName("标签节点的name属性");
getElementByTagName("标签名");
1:document对象获取节点的方式
A:getElementById 获取对 ID 标签属性为指定值的第一个对象的引用。
B:getElementsByName 根据 NAME 标签属性的值获取对象的集合。
C:getElementsByTagName 获取基于指定元素名称的对象集合。
var tableNode = document.getElementById("tab_id");
//表格table对象的属性 nodeName 是标签名
// alert(tableNode.nodeName);
//对表格节点对象的style属性进行设置
tableNode.style.border = "5px solid #00FF00";
<script type="text/javascript">
/*
通过节点对象之间的父子,兄弟关系,进行获取
指定一个参考节点 table表格
*/
function documentDemo(){
//获取一个参考性的节点 table节点对象
var tableNode = document.getElementById("tab_id");
alert(tableNode.nodeName);
// alert(tableNode.nodeName);
//通过table节点来获取父节点
// parentNode 获取文档层次中的父对象。
var parentNode = tableNode.parentNode.parentNode.parentNode;
alert(parentNode.nodeName);
}
function documentDemo2(){
//通过table节点,获取子节点
var tableNode = document.getElementById("tab_id");
var childNode = tableNode.childNodes[0].childNodes;
alert(childNode.length);
}
function documentDemo3(){
//通过table节点,获取兄弟节点
var tableNode = document.getElementById("tab_id");
// var node = tableNode.previousSibling.previousSibling.previousSibling.previousSibling;
// alert(node.nodeName);
var node = tableNode.nextSibling.nextSibling.nextSibling;
alert(node.nodeName);
}
</script>
**********************************************************************************************
<script type="text/javascript">
function create()
{
/*
需求:给div添加一个文本节点
分析:
A:创建一个文本节点
B:将文件节点的值添加到指定的div区域中
*/
//如何创建文本节点呢?
//createTextNode
var textNode = document.createTextNode("div区域1");
//获取指定的div
var divNode = document.getElementById("div_1");
//div对象中有这样的一个方法:appendChild 给对象追加一个子元素。
divNode.appendChild(textNode);
//我想给它添加一个超链接标签行不行呢?
//createElement 为指定标签创建一个元素的实例。
var aNode = document.createElement("a");
//给a标签添加文本节点
// href 设置或获取目标 URL 或锚点
aNode.href = "http://www.baidu.com";
aNode.innerText = "百度";
//把a标签节点添加到div上
divNode.appendChild(aNode);
}
function deleteNode()
{
/*
需求:删除div_2的内容。
分析:
A:找到div_2节点
B:删除内容即可
*/
//找到div_2节点
//var divNode = byId("div_2");
//childNodes 返回div的所有儿子节点
//var nodes = divNode.childNodes;
//alert(nodes[0].nodeValue);
//获取文本节点
//var textNode = divNode.childNodes[0];
//删除文本节点
//removeChild 从元素上删除子结点。
//divNode.removeChild(textNode);
/*
需求:我要删除div_2这个节点。
分析:
A:先找到div_2的父节点
B:通过父节点删除div_2这个节点
*/
//var divNode = byId("div_2");
//获取该节点的父节点
// parentNode 获取文档层次中的父对象
//alert(divNode.parentNode.nodeName);
//获取到了body节点
//var bodyNode = divNode.parentNode;
//采用删除方法即可
//bodyNode.removeChild(divNode);
//节点自己删除自己
var divNode = byId("div_2");
//删除节点
//removeNode 从文档层次中删除对象
//true childNodes collection of the object is removed.
divNode.removeNode(true); //连同儿子都干掉
}
function update()
{
/*
需求:用div_1把div_3给替换调用
分析:
A:获取div_1节点对象
B:获取div_3节点对象
C:用div_1节点替换div_3节点
*/
//获取div_1节点对象
var div1Node = byId("div_1");
//获取div_3节点对象
var div3Node = byId("div_3");
//替换节点
//object.replaceNode(oNewNode)
div3Node.replaceNode(div1Node);
}
function clone()
{
/*
需求:用div_3替换div_4。但是还是要去div_3存在
分析:
A:获取div_3节点对象
B:获取div_4节点对象
C:把div_3的节点对象复制一份
D:用复制后的div_3节点替换div_4节点
*/
var div3Node = byId("div_3");
var div4Node = byId("div_4");
//复制节点呢
//cloneNode 从文档层次中复制对对象的引用
var div3Node2 = div3Node.cloneNode(true);//表示连同子节点对象一起克隆
//替换
div4Node.replaceNode(div3Node2);
}
function byId(id)
{
return document.getElementById(id);
}
**********************************************************************************
更改页面的背景色:
function change1()
{
/*
分析:
由于body标签中的一个属性可以实现背景色的更改。
所以,首先我们就想到了获取body这个对象。
通过body对象来改变背景色
html标签属性 纯html标签属性
html节点属性 把html标签封装成对象后的属性
*/
var bodyNode = document.getElementsByTagName("body")[0];
//alert(bodyNode.nodeName);
//颜色组成的三元素:红绿蓝
//bodyNode.bgcolor = "#ff0000"; //这个时候的bgcolor是标签属性
//bodyNode.bgColor = "#ff0000"; //我们需要找到的是该标签属性对应的对象属性
//通过样式写
bodyNode.style.backgroundColor = "#ff0000";
}
function change2()
{
var bodyNode = document.getElementsByTagName("body")[0];
bodyNode.style.backgroundColor = "#00ff00";
}
function change3()
{
var bodyNode = document.getElementsByTagName("body")[0];
bodyNode.style.backgroundColor = "#0000ff";
}
function change(c)
{
var bodyNode = document.getElementsByTagName("body")[0];
bodyNode.style.backgroundColor = c;
}
</script>
****************************************************************************************
正则表达式:
正则表达式:就是符合某些规则的一个模式字符串。
实现判断效果,替换效果
规则:
次数:
+:一次或多次
*:零次或连续多次。
?:零次或一次。
{n}:恰好n次
{n,}:n次以上
{n,m}:至少n次,最多m次
字符是怎么表示的:
\d和[0-9]:0-9的数字
\w和[a-zA-Z_0-9]:用于匹配字母,数字或下划线字符;
[a-z]:小a到小z
[A-Z]:大a到大z
^:表示开头
$:表示结尾
正则表达式对象的创建:
rgexp = /pattern/
正则表达式的使用;
返回一个 Boolean 值,它指出在被查找的字符串中是否匹配给出的正则表达式。
rgexp.test(str)