001_JS基础_JavaScript简介

1.1 历史

JS的发展历史:

http://www.w3school.com.cn/js/pro_js_history.asp

1.2 JavaScript简介

以下摘自维基百科对javascript的介绍:

JavaScript,一种高级编程语言,通过解释执行,是一门动态类型,面向对象(基于原型)的解释型语言[4]。它已经由ECMA(欧洲电脑制造商协会)通过ECMAScript实现语言的标准化[4]。它被世界上的绝大多数网站所使用,也被世界主流浏览器(Chrome、IE、FireFox、Safari、Opera)支持。JavaScript是一门基于原型、函数先行的语言[5],是一门多范式的语言,它支持面向对象编程,命令式编程,以及函数式编程。它提供语法来操控文本、数组、日期以及正则表达式等,不支持I/O,比如网络、存储和图形等,但这些都可以由它的宿主环境提供支持。 虽然JavaScript与Java这门语言不管是在名字上,或是在语法上都有很多相似性,但这两门编程语言从设计之初就有很大的不同,JavaScript的语言设计主要受到了Self(一种基于原型的编程语言)和Scheme(一门函数式编程语言)的影响[5]。在语法结构上它又与C语言有很多相似(例如if条件语句、while循环、switch语句、do-while循环等)[6]。 在客户端,JavaScript在传统意义上被实现为一种解释语言,但在最近,它已经可以被即时编译(JIT)执行。随着最新的HTML5和CSS3语言标准的推行它还可用于游戏、桌面和移动应用程序的开发和在服务器端网络环境运行,如Node.js。

1.3 打印出HelloWorld

  应该这么讲,学习任何一门语言的第一步都是先了解了它的打印输出语句,我们可以通过打印输出做很多测试,那我们如何使用在浏览器中打印出“Hello World”呢,有如下三种方式:

/*
*alert()用于弹出一个警告框
*/
alert("Hello World");
		
/*
* document.write()用户向网页页面中输入内容
*/
document.write("Hello World");
		
/*
*向控制台(在开发者工具中)输入内容 
*/			
console.log("hello World");

  将以上js语句写入<script></script>标签对中,便可以执行,并且注意js语句是从上到下,一句一句的执行。

1.4 JS的编写位置

  1. 将JS代码编写到标签的onclick属性中,当我们点击标签元素时,执行js代码;
  2. 将JS代码卸载超链接的href属性中,当点击超链接时,执行js代码;
    <!DOCTYPE html>
    <html>
    <head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body>
	    <!--
	        onclick属性中直接添加js代码,注意由于外层有双引号,js语句中若有使用引号的地方便使用单引号。
	    -->
		<button onclick="alert('js代码执行成功!');">Click me</button>
		
		<!--
			javascript:是表示在触发默认动作时,执行一段JavaScript代码,而 javascript:; 表示什么都不执行,这样点击时就没有任何反应。 
        -->
		<a href="javascript:alert('js代码执行!')">点击</a>
		<a href="javascript:;">点击</a>
		
	</body>
    </html>

  注意以上两种方式都写在了标签的属性中,属于结构与行为耦合,不方便维护,类似于将CSS样式写入标签内部,不推荐使用。
  您可以在 HTML 文档中放入不限数量的脚本。脚本可位于 HTML 的 <body> 或 <head> 部分中,或者同时存在于两个部分中。通常的做法是把函数放入<head> 部分中,或者放在页面底部。这样就可以把它们安置到同一处位置,不会干扰页面的内容。

  1. 将js代码写在<script></script>标签里面;
  2. 将js代码编写到外部js文件中,然后通过script标签引入;写到外部文件中,可以在不同页面中引用同一个js文件,也可以利用浏览器的缓存机制等,所以推荐使用这种方式;

注意: script标签一旦用于引入外部文件后,就不能在编写代码了,即使编写了也会被浏览器忽略,如果需要在html文件内部编写js代码,则在重新写一个新的script标签;

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
	<title></title>
	<!--
		外部链接js文件
	-->
	<script type="text/javascript" src="js/test.js"></script>
	
	<!--
		 重新写一个script标签			
	-->
	<script type="text/javascript">
		document.write("html文档内部的js")
	</script>
</head>
<body>
</body>
</html>
posted @ 2018-01-15 21:40  逆旅wy  阅读(340)  评论(0编辑  收藏  举报