HTML_04(javaScript(02))
2012-09-18 13:49
344 查看
一,在脚本中定义的变量称为全局变量,在方法里面定义的变量我们称为局部变量,但我们要注意的是定义在循环里面的变量也是全局变量.
代码演示:
二.Object对象的常用用法:
三.String对象的应用
四.String类的prototype的原型属性.
获取对象原型的引用:
照猫画虎?
虎的由来是猫.
我为猫添加新功能这时候虎也有啦.
String.protoyype
1,获取对象的原型.
2,通过 对象.prototype属性.属性名 = function() 把对象的内容给它..那么就添加了一个新的方法.
3,为一个对象添加新的属性 String.prototype.num = 98;也是一样.
练习一: 字符串新功能，添加一个将字符串转成字符数组。
练习二: 添加一个，将字符串进行反转的方法。
练习与题目:
数组的练习题目:
1,定义toString方法。 相当于java中的复写。
2, 数组获取最大值的方法。
工具类:
六.Date对象的学习
1,With语句的学习
2,日期对象转换成字符串.toLocaleString toLocaleDateString
3,将字符串转换成日期对象,具备指定日期的字符串才可以转换毫秒值-日期对象
七.Math对象的学习
Math 对象不能用 new 运算符创建，如果试图这样做则给出错误。该对象在装载脚本引擎时由该引擎创建。其所有方法和属性在脚本中总是可用。
八,全局方法的学习.
首先我们需要认识一个对象Global对象
是一个固有对象，目的是把所有全局方法集中在一个对象中.该语句没有语法..
直接调用就可以..
九.Js中特有的语句 for in
格式:
For(变量 in 对象)
10.JS的自定义对象:
1,如果想要自定义对象,应该先对对象进行描述
2,js是基于对象,不是面向对象,不具备描述事物的能力
3,我们还想要按照面向对象的思想编写js
4,就要先描述,在js中,可以用函数来模拟面向对象中的描述.
如果定义的一个p对象.属性赋值为一个函数,那么js的意思就是说:
为p对象添加一个方法…
第一种方式:
第二种的方式:
键值对 :直接使用{}定义属性和值的键值对方式,键值对通过:连接,键与键之间通过逗号分隔.
对象调用有两种方式 对象.属性名 对象[“属性名”]?
解答:
因为我们从上的 for增强 语句已经知道… x遍历的是属性. 知道对象..就找属性..
方式一:
综合练习:
获取时间差:
代码演示:
<!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>
<script type="text/javascript">
var i = 10;//全局的
document.write(i+"<br/>");
for(var x = 1; x<5 ; x++)
{
document.write(x+"<br/>");
}
document.write(x); //在脚本里面定义的变量都是全局变量
</script>
</body>
</html>二.Object对象的常用用法:
<script type="text/javascript">
function show() //这里就是打印了一个Fcuntion对象
{
alert("function in show()");
}
alert(show.toString());
var object = new Object();
alert(object.valueOf());
//数组的元素被转换为字符串，这些字符串由逗号分隔，连接在一起。其操作与 Array.toString 和 Array.join 方法相同。
var arr = [12,34,566,77,88];
alert(arr.toString());
var s = "好好学习";
alert(s.valueOf());
</script>三.String对象的应用
<script type="text/javascript" src="Println.js"></script>
<script type="text/javascript">
var data = "新浪网站";
println(data.length);//属性
println(data.bold());
println(data.fontcolor());
println(data.link("http://www.sina.com.cn"));
var str = "我是中国人";
var ss = str.substring(0,2);
println(ss);
var s = str.substr(0,2); //从第零个索引开始,截取到索引-1的位置
println(s);
var a = "我 是 中 国人";
alert(a);
var b = trim(a);
alert("-"+b+"-");
//去除两端空格的字符串
function trim(str)
{
var start,end;
start = 0;
end = str.length-1;
while(start<=end&&str.charAt(start)==" ") //如果小于或者等于并且str里面的start位置上是以空格隔开的
{
start++;
}
while(end>=start&&str.charAt(end)==" ")//如果是大于并且里面的内容是以空格隔开的
{
end--;
}
return str.substring(start,end);
}
</script>四.String类的prototype的原型属性.
获取对象原型的引用:
照猫画虎?
虎的由来是猫.
我为猫添加新功能这时候虎也有啦.
String.protoyype
1,获取对象的原型.
2,通过 对象.prototype属性.属性名 = function() 把对象的内容给它..那么就添加了一个新的方法.
3,为一个对象添加新的属性 String.prototype.num = 98;也是一样.
var data = " hello! ";
alert("-"+data+"-");
//现在String对象多了一个方法
var a = data.trim();
alert("-"+a+"-");
data.prototype.trim = function() //在原有的基础上添加新功能
{
var start,end;
start=0;
end = this.length-1;//this代表当前对象
while(start<=end&&this.charAt(start)==" ")
{
start++;
}
while(end>=start&&this.charAt(end)==" ")
{
end--;
}
return this.substring(start,end);//把位置上的值返回;
}练习一: 字符串新功能，添加一个将字符串转成字符数组。
练习二: 添加一个，将字符串进行反转的方法。
练习与题目:
<!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>
<script type="text/javascript" src="StringTool.js"></script>
<script type="text/javascript" src="Println.js"></script>
<script type="text/javascript">
var data = "起来,我可爱的民族";
println(data);
println(data.toCharArray());
println(data.haha);
var xixi = "的国中是岛鱼钓";
println(xixi.reverseStr());
</script>
</body>
</html>
StringTool.js
//将一个字符串转换成数组
String.prototype.toCharArray = function()
{
var arr = [];
for(var x=0; x<this.length; x++)
{
arr[x] = this.charAt(x);//把索引上的值给它
}
return arr;
}
String.prototype.haha = "哈哈";//为它添加了一个数组
//反转
String.prototype.reverseStr = function()
{
//把this.toCharArray();转换成字符数组
var arr = this.toCharArray();
var start,end;
for(start=0,end=arr.length-1; start<=end; start++,end--)
{
swap(arr,start,end);
}
return arr;
}
function swap( arr,i,j)
{
var temp = arr[i];
arr[i] = arr[j];
arr[j] = temp;
}
五.Array对象的学习.
<script type="text/javascript">
var a = ["我",22,'您',true];
var b = ["我","是","中","国","人"];
var c = b.join("*");
alert(c);
</script>数组的练习题目:
1,定义toString方法。 相当于java中的复写。
2, 数组获取最大值的方法。
<script type="text/javascript" src="Println.js"></script> <!--和java中的导入包一样哦--> <script type="text/javascript" src="Array_Tool.js"></script> <script type="text/javascript"> var arr = [12,34,56,78,99]; var max = arr.getMax(); println(max); println(arr.tostring()); </script>
工具类:
Array.prototype.getMax = function()
{
//获取数组中的最大值
//假设小标1为最大值,第一个数不需要判断
var max = 0;
for(var x=1; x<this.length; x++)
{
if(this[x]>max)
max = this[x];
}
return max;
}
Array.prototype.tostring = function()
{
return this+" - -!!!~~~~";
}六.Date对象的学习
1,With语句的学习
2,日期对象转换成字符串.toLocaleString toLocaleDateString
3,将字符串转换成日期对象,具备指定日期的字符串才可以转换毫秒值-日期对象
<!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>
<script type="text/javascript" src="Println.js"></script>
<script type="text/javascript">
var date = new Date();
println(date.toLocaleString());//日期和时间
println(date.toLocaleDateString());//只有日期
//可以写js特有的语句with把内容封装起来
with(date)
{
var year = getFullYear(); //如果用上js特有的语句.简化了.
var month = getMonth()+1;//美国月份是从0开始计算的
var day = getDate();//获取一个月中的日期
var week = getWeek(getDay()); //获取到一周的日期值,星期几啊?
println(year+"--"+month+"--"+day+"--"+week+"--"+getHours()+"--"+getMinutes()+"--"+getSeconds());
}
//通过查找下标来判断
function getWeek(day)
{
var week = ["星期天","星期一","星期二","星期三","星期四","星期五","星期六"];
return week[day];
}
//日期对象与毫秒值之间的转换
var date2 = new Date();
var time = date2.getTime();
println(time);
//将毫秒值转换成日期对象
var date3 = new Date(1347937221198);
println(date3); //把获取到的毫秒值转换成当年的日期对象
/*
操作的流程:
1,获取到日期
2,把日期转换成毫秒值
3,把毫秒值转换成对象
4,打印他的方法获取到毫秒值当年的时间
*/
var str_date = "9/18/1911";
var time2 = Date.parse(str_date);//计算出毫秒值
var date3 = new Date(time2);
println(date3.toLocaleDateString());
</script>
</body>
</html>七.Math对象的学习
Math 对象不能用 new 运算符创建，如果试图这样做则给出错误。该对象在装载脚本引擎时由该引擎创建。其所有方法和属性在脚本中总是可用。
<script type="text/javascript">
var num1 = Math.ceil(12.34);//返回大于等于指定参数的最小整数
//alert(num1);
var num2 = Math.floor(12.34);//返回小于或者等于指定参数的最大整数
var num3 = Math.round(4.56); //四舍五入
println(num3);
println(num2);
var num4 = Math.pow(100,2);//100 *100
println(num4);
</script>
练习题目: 随机数的练习:
注意固有对象:
//获取10个随机数
for(var x=0; x<10; x++)
{
var r = parseInt((Math.random()*10)+1,10);
println(r);
}八,全局方法的学习.
首先我们需要认识一个对象Global对象
是一个固有对象，目的是把所有全局方法集中在一个对象中.该语句没有语法..
直接调用就可以..
<script type="text/javascript" src="Println.js"></script>
<script type="text/javascript">
var num = parseFloat("34343.4554");
println(num);九.Js中特有的语句 for in
格式:
For(变量 in 对象)
<script type="text/javascript" src="Println.js"></script>
<script type="text/javascript">
var arr = [2,3,4,5,6,7,8];//arr对象
for( i in arr)
{
println(arr[i]);//arr对象变 好像增强for循环哦
}
</script>10.JS的自定义对象:
1,如果想要自定义对象,应该先对对象进行描述
2,js是基于对象,不是面向对象,不具备描述事物的能力
3,我们还想要按照面向对象的思想编写js
4,就要先描述,在js中,可以用函数来模拟面向对象中的描述.
如果定义的一个p对象.属性赋值为一个函数,那么js的意思就是说:
为p对象添加一个方法…
第一种方式:
<script type="text/javascript">
function Person(){} //1.构造器
var p = new Person();//2.为构造器创建对象
p.name = "张三";//3.创建属性并且赋值
p.age = "李四";
//4.如果给定义的p对象的属性赋值的是一个函数,意思就是说给P对象添加一个方法.
p.show = function()
{
alert(p.name+"---"+p.age);
}
//5.调用show方法.
p.show();
</script>第二种的方式:
<script type="text/javascript" src="Println.js"></script>
<script type="text/javascript">
//java:为这个类创建对象
function Person(name,age)
{
this.name = name;
this.age = age;
}
//当前对象的 setName 创建了一个方法
this.setName = function(name)
{
this.name = name;
}
this.getName = function()
{
return this.name;
}
var p = new Person("dog",2);
with(p)
{
setName("pig",2);
println(getName());//打印所需要返回的值
}
//遍历p里面的内容
for( i in p)
{
println(p[i]); //属性打印出来啦
}
</script>键值对 :直接使用{}定义属性和值的键值对方式,键值对通过:连接,键与键之间通过逗号分隔.
对象调用有两种方式 对象.属性名 对象[“属性名”]?
解答:
因为我们从上的 for增强 语句已经知道… x遍历的是属性. 知道对象..就找属性..
方式一:
<script type="text/javascript" src="Println.js"></script>
<script type="text/javascript">
//键值对的方式
//好像java的匿名内部类哦
var pp = {
"name":"kudy","age":19,
"show" : function()
{
return this.name+"@@"+this.age;
}
}
println(pp.name);
//通过key找到value
println(pp["age"]);
println(pp.show());
</script>综合练习:
<!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>
<script type="text/javascript" src="Println.js"></script>
<script type="text/javascript">
/*
1,构造器
2,创建对象
3,为对象赋属性
4,为对象创建方法
*/
function Person()
{
}
var p = new Person();
p.name = "张三";
p.age = 15;
p.getName = function()
{
return this.name;
}
// println(p.getName());
println(p.age);
println(p[age]);//找这个对象的属性
/*
1,有参数的构造器
2,为参数赋值
3,this代表当前对象的
function Person(name,age)
{
this.name = name;
this.age = age;
this.getAge = function()
{
return this.age;
}
}
var p = new Person("kudy",19);
println(p.getAge());
*/
/*
//通过键值对的方式 ,好像java中的内部类
var p =
{
"name":"kudy", "age" :19,
"getshow" : function()
{
return this.name+"@"+this.age;
}
}
//for in 变量属性和方法
println(p["name"]) ;//通过key找到value
println(p.age); //这也是一种方式
*/
/*
//键值对的方式二:
var pp =
{
"1":1,"2":2,"3":3,
}
println(pp["1"]);
//方式三:
var ppp =
{
1:1,2:2,
}
println(ppp[1]);
println(ppp[2]);
//方法四:
var pppp =
{
name : "张三",
age :19,
}
println(pppp.name);
println(pppp["age"]);//注意角标里面必须写上"age";
*/
var map =
{
name : ["张三","李四","王五"],
age : [12,34,66],
}
for( x in map.name)
{
println(map.name[x]);
}
for( x in map.age)
{
println(map.age[x]);
}
</script>
</body>
</html>获取时间差:
<!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> <script type="text/javascript" src="Println.js"></script> <script> /* * 思路： * 要想获取差多少天，就需要相减。 * 可是字符串无法相减，在日期中只有毫秒值可以相减。 * 1，将两个日期转成毫秒值。 * 直接使用Date中的parse方法即可。 * 2，毫秒值相减后，再进行除法运算，转成天数。 */ var date1 = "9/18/2012" var date2 = "1/17/2012"; var time1 = Date.parse(date1); //获取毫秒 var time2 = Date.parse(date2);//获取毫秒 var iTime = Math.abs(time1-time2); //获取到时间差 //获取到时间差, var time = iTime/1000/60/60/24; println(time); </script> </body> </html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- Html之JavaScript学习笔记02
- HTML、javascript简介【02】_简单javascript介绍
- 04.WEB-HTML之JavaScript标签学习总结(二)
- Javascript（一）-02-(Js和html相结合的方式一二)
- 用HTML和Javascript开发iPhone/Android原生软体－Mobile Web App Framework总整理
- html 空链接 href="#"与href="javascript:void(0)"的区别
- HTML+JavaScript实现连续打印
- 动态html标签textarea的readOnly属性(JavaScript)
- JavaScript高级程序设计-(1)html中使用JavaScript
- asp.net中前台javascript与c#函数相互调方法（http://hi.baidu.com/tracyjay/blog/item/fac2063700b0ea45241f14c2.html）
- 渣渣HTML外加javascript做的第一个同乡会网页（好多功能都没写，只弄出来一个框架）
- 前端面试总结之前端性能优化（ http css JavaScript images HTML）
- HTML5+原生javascript移动端滑动banner效果demo
- 一般纯HTML网页的JavaScript的单步执行与调试(以VS2005)
- HTML、CSS、JavaScript、PHP、 MySQL 的学习顺序
- 利用HTML5/JavaScript 计算Image的MD5
- [js点击]JavaScript之Ajax技术之02
- HTML/Javascript: 点击按钮页面刷新问题
- head first JavaScript chapter 04 & 05 & 06
- 可编辑的 HTML JavaScript 表格控件 DataGrid