HTML_04(javaScript(02))

最新推荐文章于 2024-05-01 00:06:10 发布
最新推荐文章于 2024-05-01 00:06:10 发布
阅读量697 收藏 1
点赞数
分类专栏： 2.【—Html/css/javaScript/Dom—】 文章标签： html javascript function date xhtml 文档
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/my_kudy/article/details/7991343
版权

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

代码演示:

<!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>



 

my_kudy
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JavaScript_04.html
01-13
JavaScript_04
ECMAScript的引用类型
python二级题库
08-06 837
引用类型引用类型通常叫做类（class），也就是说，遇到引用值，所处理的就是对象。本教程会讨论大量的 ECMAScript 预定义引用类型。从现在起，将重点讨论与已经讨论过的原始类型紧密相关的引用类型。注意：从传统意义上来说，ECMAScript 并不真正具有类。事实上，除了说明不存在类，在 ECMA-262 中根本没有出现“类”这个词。ECMAScript 定义了“对象定义”
使用 HTML、CSS 和 JavaScript 的简单模拟时钟
热门推荐
努力是为了站在万人之中，成为别人的光
08-16 3万+
如果你想使用 JavaScript 制作一个模拟时钟，那么本文将对你有所帮助。我们都知道时钟有两种，一种是模拟的，一种是数字的。虽然数字时钟被广泛使用，但模拟时钟也被很多人所喜爱。 ????使用 HTML、CSS 和 JavaScript 的简单模拟时钟???? JavaScript 模拟时钟 [现场演示]???? 使用 HTML、CSS 和 JavaScript 的简单模拟时钟???? 第 1 步：创建时钟的基本结构???? 第 2 步：在时钟上标记 1 到 12???? 第 3 步：制作三只指针来指示
Js基础_初识JavaScript
qq_45578388的博客
11-08 6604
文章目录一、JavaScript是什么？二、Js作用三、浏览器执行Js 一、JavaScript是什么？ 是一种运行在客户端的脚本语言（不需要编译，运行过程中由解释器逐行来进行解释执行） Node.js可以进行服务端编程 二、Js作用 1.表单动态校验（密码强度检测） 2.网页特效 3.服务端开发（Node.js） 4.左面程序（Electron） 5.App/小程序（Cordova） 6.控制硬件-物联网（Ruff） 7.游戏开发（cocos2d-js） 三、浏览器执行Js 浏览器分为两个部分 渲染引擎
入门学习JavaScript_初识JavaScript
10-24 8849
JavaScript概述 JavaScript是Web开发领域中的一种功能强大的编程语言，主要用于开发交互式的Web页面。在计算机、手机等设备上浏览的网页上，大多数的交互逻辑几乎都是由JavaScript实现的。 语言 作用 及说明 HTML 结构_决定网页的结构和内容，相当于人的身体 CSS 样式-_决定网页呈现给用户的模样，相当于给人穿衣服，化妆 JavaScript 行为_实现业务逻辑和页面控制，相当于人的各种动作 ...
HTML，JavaScript中文乱码
SE_LIN的博客
02-04 8374
HTML，JavaScript中文乱码的解决
html.rar_html javascript_键盘
09-20
通过浏览器的事件机制来捕获用户的键盘事件
rp.rar_javascript_javascript html
09-24
HTML+JavaScript人品计算器，适合JavaScript初学者。
html.rar_html_javascript_javascript
09-19
JavaScript制作 是男人就撑过30秒 可选择难度 可开启无敌模式
test_blog.rar_javascript_javascript html
09-21
个人简易博客，MVC框架，Html+css+JavaScript
HTML_06(Dom(03))
-为兴趣而生,是值得的
09-25 4862
笔记总结: dom概念: W3C组织制定的规范，所有脚本在操作HTML页面元素时都使用这个规范 一、window对象: 表示浏览器窗口 1.属性：closed(判断窗口是否关闭，false为默认，窗口打开) 2.对象: 1)document: 表示整个html文档，通过此对象可访问页面上所有的元素 2)history对象： 表示已浏览的url，常用的方法 back,返回上一个访问过
HTML_01(语言基础)
-为兴趣而生,是值得的
09-09 2924
目标: 认识什么是html 　　HTML(Hyper Text Mark_up Language 超文本标记语言)的缩写, 标记:就是用来描述网页内容的一些特定的符号.Html不是编程语言,而是一种描述性的标记语言,用于描述网页中内容的显示方式,比如文字以什么颜色,大小来显示,这些都是利用了html标记来实现. 　　Html文档的创建方式:用Html语言创建的文档 　　手工直接编写(记事本
HTML_06(Dom(02))
-为兴趣而生,是值得的
09-24 1430
一,在多个列表下,一次只需要展开一个列表其他列表都关闭. 怎么保证开一个,而其他的关闭呢? 方法一: 无标题文档 dl dd { margin :0px;//把默认的距离设置为零 } dl { height:16px; } .close { overflow:hidden; //不显示超过对象尺寸的内容,而我这
HTML_05(Dom(01))
-为兴趣而生,是值得的
09-20 1250
javaScript复习与回顾: 一. 创建对象 1,在javascript中所有的函数都可以作为构造器,使用new调用函数后总可以返回一个对象. function Person(name,age) { this.name = name; this.age = age; } var p1 = new Person(); p1.name = "k
HTML_02(html+css的学习)
-为兴趣而生,是值得的
09-14 930
Html 内容 1. Html就是超文本标记语言的简写，是最基础的网页语言。 2. Html是通过标签来定义的语言，代码都是由标签所组成。 3. Html代码不用区分大小写。 4. Html代码由开始结束。里面由头部分和体部分两部分组成。 5. 头部分是给Html页面增加一些辅助或者属性信息，它里面的内容会最先加载。 6. 体部分是真正存放页
HTML_03(javaScript(01))
-为兴趣而生,是值得的
09-16 461
一. Js和html结合的方式: 二. 1,将javaScript代码封装到标签中. 2,将javaScript代码封装到js文件中,并且通过中的src属性进行导入.. 需要注意的: a:导入的语句是会自动执行的 b:可以导入多个 c:script标签最好写在body标签里面 三. javaScript的语法: 四. 通常高级程序设计语言所包含的语法内容: 1,关键字
【记录】Python3｜ 将 PDF 转换成 HTML/XML（✅⭐⭐⭐⭐pdf2htmlEX）
最新发布
qq_46106285的博客
05-01 497
总体来说，PDF2HTMLEX 是一款非常优秀的 PDF 转 HTML 工具。尽管在处理文件路径时存在一些小问题，但这并不影响其出色的转换效果。
用html画一个四叶草
liulang68的博客
04-20 1657
以上是部分代码，需要请看主页加联系方式。
html css javascript
09-08
HTML、CSS和JavaScript是构建网页的三个基本技术。 HTML（HyperText Markup Language）用于定义网页的结构，它使用标签来描述文档的各个部分。CSS（Cascading Style Sheets）则用于定义网页的样式，包括布局、颜色...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值