JavaScript基本功能笔记

1.点击按钮显示消息框信息

<script type="text/javascript">
		function disp_alert(){
			alert("Attention! This is Dubingjie!")
		}
	</script>
	<input type="button" onclick="disp_alert()" value="Show the message!" />

2.传入带有参数的函数

<script type="text/javascript">
		function myfunc(txt){
			alert(txt)
	}
	</script>
	<form>
		<p> 点击按钮，可以传入参数于js的函数中</p>
		<input type="button" onclick="myfunc('Good morning Sir!')" value="Morning">
		<input type="button" onclick="myfunc('My name is DuBingjie!')" value="name">
	</form>

3.循环显示标签

<script type="text/javascript">
		for (i = 1; i < 4; i++){
			document.write("<h3> title" + i)
			document.write("</h3>")
			document.write("number is "+i)
			document.write("<br />")
		}
	</script>

4.采用 for 和in方法遍历数组

<script type="text/javascript">
	var a
	var fruits = new Array()
	fruits[0]="apple"
	fruits[1]="pear"
	fruits[2]="banana"
	for (a in fruits){
		document.write(fruits[a]+"<br />")
	}
	</script>

5.采用try catch 语句显示抛出异常的对话框

<script type="text/javascript">
	var txt=""
	function message(){
		try{
			alert1("Welcome, Miss Dubingjie!")
		}
		catch(err){
			txt="something wrong! \n\n"
			txt+="Mistake: "+err.desciption+"\n\n"
			txt+="choose '好' to continue \n\n"
			alert(txt)
		}
	}
	</script>
	<body>
		<input type="button" value="Message" onclick="message()"/>
	</body>

6. 查找本页中的错误代码位置

<p>点击按钮开始</p>
	<script type="text/javascript">
		onerror=handleErr
		var txt=""
		function handleErr(msg,url,l){
			txt="本页中存在错误。\n\n"
			txt+=""+msg+"\n"
			txt+="URL: "+url+"\n"
			txt+="行"+l+"\n\n"
			txt+="点击 “好”继续。\n\n"
			alert(txt)
			return true
		}
		function message(){
			alert1("Welcome, Miss Dubingjie!")
		}
	</script>
	<input type="button" value="查看消息" onclick="message()"/>

7.查看浏览器版本

var browser=navigator.appName
	var b_version=navigator.appVersion
	var version =parseFloat(b_version)
		document.write("浏览器版本："+browser)
		document.write("<br />")
		document.write("浏览器版本："+version)
	</script>

8.查看浏览器所有信息

<script type="text/javascript">
	var x = navigator;
	document.write("CodeName=" + x.appCodeName);
	document.write("<br />");
	document.write("MinorVersion=" + x.appMinorVersion);
	document.write("<br />");
	document.write("Name=" + x.appName);
	document.write("<br />");
	document.write("Version=" + x.appVersion);
	document.write("<br />");
	document.write("CookieEnabled=" + x.cookieEnabled);
	document.write("<br />");
	document.write("CPUClass=" + x.cpuClass);
	document.write("<br />");
	document.write("OnLine=" + x.onLine);
	document.write("<br />");
	document.write("Platform=" + x.platform);
	document.write("<br />");
	document.write("UA=" + x.userAgent);
	document.write("<br />");
	document.write("BrowserLanguage=" + x.browserLanguage);
	document.write("<br />");
	document.write("SystemLanguage=" + x.systemLanguage);
	document.write("<br />");
	document.write("UserLanguage=" + x.userLanguage);
	</script>

9. 创建一个欢迎cookie

<script type="text/javascript">
	function getCookie(cookName){
		if (document.cookie.length>0) {
			cookStart=document.cookie.indexOf(cookName+"=")
			if (cookStart!=-1) {
				cookStart=cookStart+cookName.length+1;
				cookEnd=document.cookie.indexOf(";",cookStart)
				if (cookEnd=-1) {
					cookEnd=document.cookie.length
				}
				return 
					unescape(document.cookie.substring(cookStart,cookEnd))
			}
		}
		return ""
	}
	function setCookie(cookName,value,expiredays){
		var exdate=new Date()
		exdate.setDate(exdate.getDate()+expiredays)
		document.cookie=cookName+"="+escape(value)+((expiredays==null)?"":";expiredays="+
		exdate.toGMTString())
	}
	function checkCookie(){
		username=getCookie('username')
		if(username!=null&&username!=""){
			alert('Welcome again'+username+'!')
		}
		else{
			username=prompt('Please enter your name:',"")
			if (username!=null&&username!="") {
				setCookie('username',username,365)
			};
		}
	}
	</script>
	<body onLoad="checkCookie()"></body>

10. 创建无限计时按钮

<script type="text/javascript">
	var c=0
	var t
	function timedCount(){
		document.getElementById('txt').value=c
		c=c+1
		t=setTimeout("timedCount()",1000)
	}
	</script>
	<body>
	<form>
		<input type="button" value ="Start" onclick="timedCount()">
		<input type="text" id="txt">
	</form>	
	</body>

11. 在javascript 中创建JASON对象

        <p>
		Name:<span id="jname"></span><br />
		Age:<span id="jage"></span><br />
		Address:<span id="jstreet"></span><br />
		Phone:<span id="jphone"></span><br />
	</p>
	<script type="text/javascript">
	var JSONObject={
		"myname":"DuBingjie",
		"age":"8",
		"street":"www",
		"myphone":"188688"
	};
	document.getElementById("jname").innerHTML=JSONObject.myname
	document.getElementById("jage").innerHTML=JSONObject.age
	document.getElementById("jstreet").innerHTML=JSONObject.street
	document.getElementById("jphone").innerHTML=JSONObject.myphone

	</script>

12. javascript中获取JASON对象数组的字符串

<p>People name:<span id="cname"></span></p>
	<script type="text/javascript">
	var people =[
	{"ComName":"DuBingjie","age":"23"},
	{"ComName":"cai","age":"23"},
	{"ComName":"li","age":"23"}
	];
	people[1].ComName="dbj";
	document.getElementById("cname").innerHTML=people[1].ComName;
	</script>

JavaScript基本功能笔记

猜你喜欢