JavaScript实例自查笔记系列

最新推荐文章于 2022-03-01 10:47:06 发布

E plus

最新推荐文章于 2022-03-01 10:47:06 发布

阅读量195

点赞数

分类专栏：自查类系列文章标签： JAvaScript简单实例

本文链接：https://blog.csdn.net/weixin_44290787/article/details/88073985

版权

自查类系列专栏收录该内容

7 篇文章 0 订阅

订阅专栏

基础JavaScript实例

生产文本

<script type="text/javascript">
	document.write("javascript")；
</script>

生成普通文本和标签

<script type="text/javascript">
		document.write("<h1>标签</h1>")；
</script>

head位置

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title></title>
	<script type="text/javascript">
		window.function() {
			alert('javascript');
			
		}
	</script>
</head>
<body>
	
</body>
</html>

body位置

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title></title>
	
</head>
<body>
	<script type="text/javascript">
		document.write('在body部分');
	</script>
</body>
</html>

引入外部脚本

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title></title>
	<script type="text/javascript" src="/js/jqeury.js"></script>
</head>
<body>
	<script type="text/javascript">
		document.write('在body部分');
	</script>
</body>
</html>

JavaScript 语句、注释和代码块

javascript语句

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title></title>
	<script type="text/javascript" src="/js/jqeury.js"></script>
</head>
<body>
	<script type="text/javascript">
		document.write('<h1>这是标题</h1>');
		document.write('<p>这是段落</p>');
		document.write('<p>这是另一个段落</p>');
	</script>
</body>
</html>

JavaScript代码块

<script type="text/javascript">
		{
			document.write('<h1>这是标题</h1>');
			document.write('<p>这是段落</p>');
			document.write('<p>这是另一个段落</p>');
		}
	</script>

单行注释

<script type="text/javascript">
	// 这行代码输出标题：
	document.write("<h1>这是标题</h1>");
	// 这行代码输出段落：
	document.write("<p>这是段落。</p>");
	document.write("<p>这是另一个段落。</p>");
</script>

多行注释

<script type="text/javascript">
/*
下面的代码将输出
一个标题和两个段落
*/
document.write("<h1>这是标题</h1>");
document.write("<p>这是段落。</p>");
document.write("<p>这是另一个段落。</p>");
</script>

JavaScript 变量

声明一个变量，为它赋值，然后显示出来

<script type="text/javascript">
		var txt;
		txt='JavaScript';
		alert(txt);
	</script>

JavaScript 条件语句 If … Else

<script type="text/javascript">
		var d=new Date();
		var h=d.getHours();
		if(h<10){
			alert('早上好');
		}else if((10<=h)&&(h<18)){
			alert('下午好');
		}
		else{
			alert('你好');	
		}
	</script>

JavaScript 消息框

警告框

<script type="text/javascript">
		window.function(){
			alert('警告框');
		}
	</script>

带有折行的警告框

<script type="text/javascript">
		window.function(){
			alert('警告框'+'\n'+'折行文字警告');
		}
</script>

确认框

	<script type="text/javascript">
		window.function(){
			var r=confirm('Press a button');
			if(r==true){
				alert('you choose true');
			}else{
				alert('you choose no');
			}
		}
	</script>

提示框

<script type="text/javascript">
		window.function(){
			var r=prompt("输入你的名字",'bill');
			if(r!=null&&r!=null){
				alert('hi'+r+'你好');
			}
		}
	</script>

JavaScript 函数

函数

	<script type="text/javascript">
		function myFuntion(){
			alert('hi');
		}
	</script>

带有参数的函数

<script type="text/javascript">
		function myFuntion(name){
			alert('hi'+'  '+name);
		}
	</script>

返回值的函数

	<script type="text/javascript">
		function myFuntion(name){
			return name;
		}
		var name=myFuntion('John');
		alert(name);
	</script>

JavaScript 循环

For 循环

	<script type="text/javascript">
		window.function(){
			for(var i=0;i<5;i++){
				document.write(i+' ');
			}
		}
	</script>

循环产生 HTML 标题

<script type="text/javascript">
		window.function(){
			for(var i=1;i<5;i++){
				document.write('<h'+i+'>标题'+'</h'+i+'>');
			}
		}
</script>

While 循环

	<script type="text/javascript">
		window.function(){
			var i=0;
			while(i<5){
				document.write(i+" ");
				i++;
			}
		}
	</script>

Do while 循环

在这里插入代码片

	<script type="text/javascript">
		window.function(){
			var i=0;
			do{
				document.write(i+" ");
				i++;
			}while(i<5);
		}
	</script>

break 语句

	<script type="text/javascript">
		window.function(){
			for(var i=0;i<5;i++){
			if(i==3){
					document.write('break 结束');
					break;
				}
				document.write(i+' ');
			}
		}
	</script>

continue 语句

	<script type="text/javascript">
		window.function(){
			for(var i=0;i<5;i++){
				if(i==3){
					continue;
				}
				document.write(i+' ');

			}
		}
	</script>

使用 For…In 声明来遍历数组内的元素

	<script type="text/javascript">
		var name=['tom','jaxa','class'];
		for(x in name){
			document.write(name[x]);
		}
	</script>

JavaScript 错误处理

try…catch 语句

	<script type="text/javascript">
		try{
			allert('aaa');
		}catch(err){
			alert('错误信息:'+err.description);
		}
	</script>

带有确认框的 try…catch 语句

	<script type="text/javascript">
		try{
			allert('aaa');
		}catch(err){
			var select=confirm('错误信息:'+err.description);
			if(!select){
				alert('no');
			}
		}
	</script>

throw 声明

	<script type="text/javascript">
		try
		{ 
			var x=prompt("请输入 0 至 10 之间的数：","");
			if(x>10)
			  throw "Err1" 
			else if(x<0)
			  throw "Err2"
			else if(isNaN(x))
			  throw "Err3"
		} 
		catch(er)
		{
			if(er=="Err1") 
			  alert("错误！该值太大！")
			if(er == "Err2") 
			  alert("错误！该值太小！") 
			if(er == "Err3") 
			  alert("错误！该值不是数字！") 
		}
	</script>

高级 JavaScript 实例
检测浏览器及版本

<script type="text/javascript">
		var browser=navigator.appName;
		var b_version=navigator.appVersion;
		//把浏览器返回的版本（字符串）转换成（数字）
		var version=parseFloat(b_version);
		alert('浏览器名称：'+browser+'\n'+'浏览器版本:'+version);
</script>

检测浏览器的更多信息

<script type="text/javascript">
		document.write("<p>浏览器：")
		document.write(navigator.appName + "</p>")

		document.write("<p>浏览器版本：")
		document.write(navigator.appVersion + "</p>")

		document.write("<p>代码：")
		document.write(navigator.appCodeName + "</p>")

		document.write("<p>平台：")
		document.write(navigator.platform + "</p>")

		document.write("<p>Cookies 启用：")
		document.write(navigator.cookieEnabled + "</p>")

		document.write("<p>浏览器的用户代理报头：")
		document.write(navigator.userAgent + "</p>")
	</script>

检测浏览器的全部信息

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

创建一个欢迎cookie

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title></title>
	<script>
	window.function(){
		checkCookie();
	}

	//创建和存储Cookie,cookie名称、值、过期天数
	function setCookie(c_name,value,expiredays){
		//cookie过期日期
		var exdate=new Date();
		exdate.setDate(exdate.getDate()+expiredays);

		//存入document.cookie对象
		document.cookie=c_name+"="+escape(value)+((expiredays==null)?"":";expires="+exdate.toGMTString());
	}

	//检查是否存在cookie
	function getCookie(c_name){
		if(document.cookie.length>0){
			//检索该cookie存在的开始位置
			c_start=document.cookie.indexOf(c_name+"=");
			//判断是否存在该cookie
			if(c_start!=-1){
				//获取cookie值开始的位置
				c_start=c_start+c_name.length+1;
				//获取cookie值结束的位置
				c_end=document.cookie.indexOf(";",c_start);
				//判断document.cookie是否是存在一个cookie
				if(c_end==-1){
					c_end=document.cookie.length;
				}
				//返回cookie的值
				return unesacpe(document.cookie.substring(c_start,c_end));
			}
		}
		return "";
	}

	function checkCookie(){
		username=getCookie('username');
		if(username!=null && username!=""){
			alert('Welcome again'+username+'!');
		}else{
			username=prompt('Please enter your name',"");
			if(username!=""&&username!=null){
				setCookie('username',username,365);
			}
		}
	}

	</script>
</head>
<body>
	
</body>
</html>

JavaScript创建对象模板

<script type="text/javascript">

function person(firstname,lastname,age,eyecolor)
{
	this.firstname=firstname
	this.lastname=lastname
	this.age=age
	this.eyecolor=eyecolor
}

myFather=new person("John","Adams",35,"black")

document.write(myFather.firstname + " 的年龄是 " + myFather.age + " 岁。")

</script>

对象实例

E plus

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
JavaScript实例自查笔记系列

基础JavaScript实例生产文本&lt;script type="text/javascript"&gt; document.write("javascript")；&lt;/script&gt;生成普通文本和标签&lt;script type="text/javascript"&gt; document.write("&lt;h1&gt;标签&
复制链接

扫一扫

专栏目录