1.1 历史
JS的发展历史:
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的编写位置
- 将JS代码编写到标签的onclick属性中,当我们点击标签元素时,执行js代码;
- 将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> 部分中,或者放在页面底部。这样就可以把它们安置到同一处位置,不会干扰页面的内容。
- 将js代码写在<script></script>标签里面;
- 将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>