HTML_04(javaScript(02))

来源：互联网发布：uv在淘宝什么意思编辑：程序博客网时间：2024/06/16 03:47

一,在脚本中定义的变量称为全局变量,在方法里面定义的变量我们称为局部变量,但我们要注意的是定义在循环里面的变量也是全局变量.

代码演示:

<!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 *100println(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找到valueprintln(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找到valueprintln(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>