JavaScript学习总结

最新推荐文章于 2022-04-18 16:51:41 发布
最新推荐文章于 2022-04-18 16:51:41 发布
阅读量142 收藏 1
点赞数
文章标签： javascript java python ViewUI
原文链接：http://www.cnblogs.com/xiazdong/archive/2011/11/20/3058115.html
版权

JavaScript是由NetScape发明的；语法和Java非常类似；但是注意的一点是：Java和JavaScript没有任何关系。

JavaScript中有许多内置对象，不需要用户创建；


HTML使用小技巧：

(1)如果想要输出一个空的表格，则需要<td>&nbsp</td>

(2)在Editplus中支持快速浏览制作的网页，快捷键是CTRL+B;



一、使用JavaScript



如果要在HTML中引入JavaScript，则有两种方式：


（1）内部引入：JS代码直接在HTML中编写；


导入的结构如下：

<script language="JavaScript">
    ....
</script>

一般JS代码都放在head标签中；


（2）外部引入：JS代码在外部编写后导入到HTML中；

<script language="JavaScript" src="1.js">
....
</script>


二、JavaScript语法


1.跳出提示框 alert


在JavaScript中，使用的最多的就是alert，此语句会使得浏览器弹出一个提示框；

alert("Hello world!!!" );就能弹出一个Hello world!!!的提示框；

<html>
	<head>
		<title></title>
		<script language="JavaScript">
			alert("欢迎光临！");
			alert("谢谢！");
		</script>
	</head>
</html>


2.页面输出内容  document.write()


此语句也是非常常用的，可以直接向页面输出内容；比如：

document.write("<h3>Hello world!!!</h3>");   就可以在页面中显示Hello world!!!

此语句和JSP中的out.println()非常类似；


<html>
	<head>
		<title></title>
		<script language="JavaScript">
			document.write("<h3>Hello world!!!</h3>");
		</script>
	</head>
</html>


3.定义变量 var


这个特性和python是很类似的，Java中，有许多特定的数据类型，但是在JS中，只需要将任何类型的值赋予var即可；

例如：

(1)var num1 = 5;   num1的类型就是整数；

(2)var str1 = "Hello world!!!";  str1的类型就是字符串；

<html>
	<head>
		<title></title>
		<script language="JavaScript">
			var num1 = 5;
			var str1 = "Hello world!!!";
			alert(num1);
			alert(str1);
		</script>
	</head>
</html>


4.字符串比较


在JavaScript中，比较字符串是否相等只需要通过==即可；而不需要equals();


5.函数声明


在JavaScript中，函数声明非常简单，形式如下：

function(参数...){

[返回值;]

}

注意：

(1)参数也不能声明类型，只需要写明参数的名称即可；

(2)函数声明并看不出是否有返回值，在实现中，如果有返回值，则return；

<html>
	<head>
		<title></title>
		<script language="JavaScript">
			function fun(i){
				alert("欢迎"+i);
			}
			fun("xiazdong");
		</script>
	</head>
</html>

6.数组 Array


这里的数组也是没有类型的；只需要var arr = new Array(...);即可；数组的初始化有两种方式：

（1）静态初始化：var arr = new Array("1","2","3");     直接赋值；

（2）动态初始化：var arr = new Array(length);       只声明长度；后来在赋值；

如果是动态初始化，一开始数组的元素内容是“undefined”；

输出数组内容：注意：arr.length返回数组长度；

for(i=0;i<arr.length;i++){

arr[i]  ....

}

<html>
	<head>
		<title></title>
		<script language="JavaScript">
			var arr = new Array(3);
			var str = "";
			for(i=0;i<arr.length;i++){
				arr[i]=i;
			}
			for(i=0;i<arr.length;i++){
				str=str+arr[i]+"、";
			}
			alert(str);
		</script>

	</head>
</html>


三、JavaScript事件


JavaScript的事件增加了动态效果，并且一般来说，触发事件后，都会调用某个函数，以完成功能；

"#"表示当前页；

1.body包含的事件


(1)onLoad：打开网页时调用；
(2)onUnLoad：关闭网页时调用；


2.表单提交事件 onSubmit


当点击表单的submit按钮时，就会除触发onSubmit事件，并调用某函数，通常此事件用于验证操作；

补充：

在JavaScript中获得表单控件的值:可以通过层层递进的方式获得；

document是文档的根节点；

比如：

<form action="" method="post" onSubmit="fun(this)" name="f">
			<input type="text" name="name"/><br />
			<input type="radio" name="radiobutton"/>男<br />
			<input type="radio" name="radiobutton"/>女<br />
			<input type="button" value="显示" onClick="show()"/>
		</form>

（1）获得文本控件的值： document.f.name. value即可获得；

（2）获得单选按钮中的“男”按钮的值：document.f.radiobutton[0].value;

（3）获得单选按钮中的“女”按钮的值：document.f.radiobutton[1].value;

（4）判断单选按钮中的“男”按钮是否选中：document.f.radiobutton[0].checked;


3.单击事件  onClick


当单击某个控件，则触发该事件；

(1)在<a href>中触发onClick;

(2)在button中触发onClick;


4.下拉列表事件  onChange


此事件在下拉列表的值改变时触发； 

<html>
	<head>
		<title></title>
		<script language="JavaScript">
			function fun(v){
				alert(v);
			}
			
		</script>
		<form action="" method="post"  name="f">
			EMAIL:<input type="text" name="name"/><br />
			<select name="favor" onChange="fun(this.value)">
				<option value="a">a</option>
				<option value="b">b</option>
				<option value="c">c</option>

			</select>
			<input type="submit" value="提交"/>
		</form>
	</head>
	<body >
		
	</body>
</html>

5.失去焦点事件   onblur


此事件用于失去焦点时调用；比如<input type="text" οnblur="  fun()"/>的意思是当这个文本框失去焦点时即调用。


四、JavaScript中的正则表达式


在JavaScript中也支持正则，但是使用语法与Java稍微不同；

/正则/.test(字符串);

比如email的验证：

/^\w+@\w+.\w+$/.test(value);

<html>
	<head>
		<title></title>
		<script language="JavaScript">
			function validate(f){
				var email = f.name.value;
				if(/^\w+@\w+.\w+$/.test(email)){
					return true;
				}
				else{
					return false;
				}
			}
			
		</script>
		<form action="" method="post" onSubmit="return validate(this)" name="f">
			EMAIL:<input type="text" name="name"/><br />
			
			<input type="submit" value="提交"/>
		</form>
	</head>
	<body >
		
	</body>
</html>

以上完成了一个简单的验证操作；注意：

观察onSubmit事件，如果需要让返回值有用，需要return；

f.name.focus();可以使文本框获得焦点；

f.name.select();可以选中文本框中的文本；


五、window对象


1.打开新窗口：window.open函数


比如：

window.open("http://www.google.com","width=500,height=500,resizable=no");  打开谷歌网页，并且控制网页大小、尺寸；

window.open("http://www.google.com");普通方法打开网页；

<html>
	<head>
		<title></title>
		<script language="JavaScript">
			function fun(url){
				window.open(url,"页面标题","width=500,height=500,resizable=no");
			}

		</script>
		
	</head>
	<body >
		<form action="" method="post">
			<select name="favor" onChange="fun(this.value)">
				<option value="#">====请选择====</option>
				<option value="http://www.baidu.com">百度</option>
				<option value="http://www.google.com">谷歌</option>
			</select>
		</form>
	</body>
</html>


2.确认窗口:window.confirm()


比如：

var flag = window.confirm("确认？"); 如果选是，则返回true；否则返回false；

<html>
	<head>
		<title></title>
		<script language="JavaScript">
			function fun(){
				if(window.confirm("确认")){
					alert("是");
				}
				else{
					alert("否");
				}
			}
			fun();
		</script>	
	</head>
	<body >	
	</body>
</html>

3.页面重定向


通过window.location属性能够完成页面的转换；

只需要window.location="http://www.google.com"就能够将当前网页跳转到谷歌;

<html>
	<head>
		<title></title>
		<script language="JavaScript">
			function fun(url){
				window.location=url;   //将当前的网页的地址变换
			}
		</script>
		
	</head>
	<body >
		<form action="" method="post">
			<select name="favor" onChange="fun(this.value)">
				<option value="#">====请选择====</option>
				<option value="http://www.baidu.com">百度</option>
				<option value="http://www.google.com">谷歌</option>
			</select>
		</form>
	</body>
</html>


4.在子窗口中操作父窗口 opener


通过window.opener.document可以获得父窗口的文档对象；

window.opener.location可以获得父窗口地址；

window.opener.location.reload();重新加载父窗口；

父窗口：

<html>
	<head>
		<title></title>
		<script language="JavaScript">
			function fun(){
				window.open("demo03.html","页面标题","width=500,height=500,resizable=no");
			}
		</script>
		
	</head>
	<body >
		<form action="" method="post">
			<input type="button" value="打开子窗口" onClick="fun()"/>
		</form>
	</body>
</html>

子窗口: 

<html>
	<head>
		<title></title>
		<script language="JavaScript">
		function fun(){
			window.opener.location="http://www.baidu.com";
		}
		</script>
	</head>
	<body >
		<input type="button" value="跳转到百度" onClick="fun()"/>
	</body>
</html>




转载于:https://www.cnblogs.com/xiazdong/archive/2011/11/20/3058115.html

weixin_30784501
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Javascript学习总结
10-20
Javascript学习总结, Javascript学习总结, Javascript学习总结, Javascript学习总结 Javascript学习总结
读懂简单的正则表达式
lu的博客
11-16 2970
读懂简单的正则表达式 最近学习过程中，遇到了一段用正则表达式验证email输入的代码 if(!/^\w+@\w+.\w+$/.test(value)){}//ps:这里的正则表达式有问题，后面已修正，看的书绝壁是盗版(╬▔皿▔) 便寻思查了一下正则表达式的一些用法,学习总结了一下 正则表达式是一种字符串匹配规则，可以用来检查一个字符串是否含有某种子串（可以是具体的子串或一类子串，如
事件处理
SkewRain的专栏
01-13 713
1.所有的事件都是以On开头的，这也是事件的一个标准命名。 2.onsubmit事件是一个在表单上编写的事件操作，只要是表单提交都要触发此操作。 3.在JavaScript中如果用户输入的某些数据需要满足某些特定条件，则需要使用正则表达式。/正则/.test(内容)。而且在JavaScript中使用正则的时候最好加上开头“^”和结尾“$”。 示例代码： （1）
正则表达式/^\w+$/i的理解
coolpad9187的专栏
04-29 9621
/^\w+$/i 两个//表示开始和结束 ^表示开始字符串 $表示结束字符串 \w表示包含【a-z，A-Z, _ , 0-9】 +表示一个或者多个\w 后面的i表示不区分大小写，在此处没用，因为\w里已经包含了大小写。
逻辑运算符,选择结构,输出的一些语法以及数据转换
m0_68505386的博客
04-18 341
一.逻辑运算符 <script> &&(与号) var num1 = 5; var num2 = 10; // document.write(num1<15<num2)==>true document.write(num1 < 15 && 15 < num2)//==>false &&表示两者都要满足才为true /...
Javascript学习总结.doc
11-16
JavaScript学习总结 JavaScript是一种解释型的脚本语言，主要应用于Web应用开发，尤其在HTML网页中，它赋予网页动态功能，使得用户体验更加丰富。早期JavaScript主要用于简单的网页特效，如表单验证和浮动广告，但...
javascript学习总结之js使用技巧
10-23
在JavaScript学习过程中，理解这些技巧并应用到实际项目中，可以让你的代码更加健壮、高效。持续关注浏览器的最新特性和最佳实践，是成为一名优秀JavaScript开发者的关键。希望这篇文章的总结对你在JavaScript的学习...
javascript学习总结
08-04
在深入学习JavaScript时，理解和掌握函数是至关重要的，因为它们是组织代码、执行特定任务的基本单元。 函数在JavaScript中扮演着核心角色，允许我们将代码封装到可重用的块中。创建函数有两种主要方式：函数声明和...
js学习笔记、个人学习心得
11-03
自己学习js的体会！js笔记！js学习笔记、个人学习心得
跟着狂神学JavaScript
qq_40649503的博客
11-12 884
跟着狂神学JavaScript
我学习Javascript的心得体会与Javascript的小总结
热门推荐
gxt19970917的博客
03-19 2万+
第一部分   小总结         经过今天的学习，让我认识和了解了Javascript的基本知识，知道了js是一门弱类型的脚本语言，能够实现网页特效。对今后的发展对我有巨大的作用，我来简单的总结一下今天我所学的的内容：JS就是用来控制结构（HTML）和样式（CSS）的，用来实现网页特效；我知道了程序员一般使用console.log来检测代码；"=" 叫做赋值，将右侧的值给左边的变量；函数的定义...
JavaScript基础知识学习总结篇(每个知识点都附带上机的例子，而不是纯理论) 上，当前字数统计：12435
LJCC_c的博客
11-08 2608
JavaScript基础知识 1 — JavaScript概述 2 — HTML嵌入JavaScript代码方式 3 — JavaScript的标识符 4 — HTML的变量 5 — JavaScript的函数 5 —
javascript日期时间操作总结
bcbobo21cn的专栏
03-02 3269
js获得当前系统日期时间       js时间显示     var curr_time = new Date();  var strDate = curr_time.getYear()+"年";  strDate += curr_time.getMonth()+1+"月";  strDate += curr_time.getDate()+"日";  strDate
JavaScript总结
dustdawn的博客
06-19 399
文章目录JavaScript基础JavaScriptJavaScript高级DOM简单学习事件简单学习BOMDOM事件监听机制 JavaScript基础 JavaScript * 概念： 一门客户端脚本语言 * 运行在客户端浏览器中的。每一个浏览器都有JavaScript的解析引擎 * 脚本语言：不需要编译，直接就可以被浏览器解析执行了 * 功能： * 可以来增强用户和html页面的交互过...
javascript之DOM操作
ajwqb06628的专栏
12-25 2293
javascript之DOM操作 一、document.getElementById() 根据Id获取元素节点 <div id="div1"> <p id="p1"> 我是第一个...
JS词法分析器实验报告
ting119的博客
10-19 3786
1.实验环境 Linux系统  WebStorm环境 2.实验目的 设计、编制、调试一个词法分析子程序－识别单词，加深对词法分析原理的理解 3.单词分类表 4.单词状态表 5.算法描述 用Javascipt实现词法分析器，首先是读取文件，然后把读入的字符转为数组形式，遍历数组。 如果读到字母，就读完余下连续的字母或数字，然后以此与关键字表中元素进行对比，如果是关键字

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值