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>

001_JS基础_JavaScript简介的更多相关文章

  1. 【Machine Learning】机器学习及其基础概念简介

    机器学习及其基础概念简介 作者:白宁超 2016年12月23日21:24:51 摘要:随着机器学习和深度学习的热潮,各种图书层出不穷.然而多数是基础理论知识介绍,缺乏实现的深入理解.本系列文章是作者结 ...

  2. XML 参考：XML基础 XML 简介

    XML 参考:XML基础 -- XML简介和用途 转:http://www.cnblogs.com/Dlonghow/archive/2009/01/22/1379799.html XML 参考:XM ...

  3. Java基础类库简介

    Java基础类库简介 一.常用的基础类库:11个jar(Java Archive,Java归档)包 作为java语言使用者,我们可以感受到java语言带来的优势(平台无关.面向对象.多线程.高效易扩展 ...

  4. SpringCloud(1) 架构演进和基础知识简介

    一.传统架构演进到分布式架构 简介:讲解单机应用和分布式应用架构演进基础知识 (画图) 高可用 LVS+keepalive 1.单体应用:开发速度慢.启动时间长.依赖庞大.等等 2.微服务:易开发.理 ...

  5. Python运维开发基础-概述-简介

    Python基础知识分为以下几块 1.Python概述 2.基础语法 3.数据结构 4.Python进阶 5.实训案例 一.Python概述 1.Python简介 2.Hello World 3.搭建 ...

  6. Python基础--Python简介和入门

    ☞写在前面 在说Python之前,我想先说一下自己为什么要学Python,我本人之前也了解过Python,但没有深入学习.之前接触的语言都是Java,也写过一些Java自动化用例,对Java语言只能说 ...

  7. JMeter各个基础组件简介

    刚从LoadRunner转到JMeter,对JMeter的各种概念比较懵.在这里记录下.欢迎大家关注我的个人微信号:测试杂货铺. JMeter的各个功能都是它的组件来完成或实现的,下面来对JMeter ...

  8. 【JAVAWEB学习笔记】26_Linux基础：简介安装、常用命令和JDK、Mysql、Tomcat的安装

    Linux基础 学习目标 1.了解Linux的简介与安装 2.掌握Linux常用的命令 3.掌握Linux系统上JDK.Mysql.Tomcat的安装 一.Linux的简介 1．Linux的概述 Li ...

  9. 前端基础-HTML简介及发展史

    一 HTML简介 二 HTML发展史 一. HTML简介 用户使用浏览器打开网页看到结果的过程就是:浏览器将服务端的文本文件(即网页文件)内容下载到本地,然后打开显示的过程. 而文本文件的文档结构只有 ...

随机推荐

  1. Codeforces 29D Ant on the Tree 树的遍历 dfs序

    题目链接:点击打开链接 题意: 给定n个节点的树 1为根 则此时叶子节点已经确定 最后一行给出叶子节点的顺序 目标: 遍历树并输出路径.要求遍历叶子节点时依照给定叶子节点的先后顺序訪问. 思路: 给每 ...

  2. JAVA入门[5]-初步搭建SpringMVC站点

    一.新建Module 1.新建Module,类型如下图所示: 2.为项目添加Spring框架支持,操作步骤如下: 首先在Module右键->Add Framework Support: 2.Sp ...

  3. javascript中的事件Event

    一.事件流 1.事件流:描述的是从页面中接受事件的顺序 IE的事件流是事件冒泡流,Netscape的事件流是事件捕获流. 2.事件冒泡 IE的事件流叫做事件冒泡(event bubbing),即事件开 ...

  4. 自学Zabbix3.1-语言切换

    题记:   默认使用的zabbix版本为Zabbix 3.0.8 登陆到zabbix web控制台默认是英文界面,对有些英文不好或者习惯中文的人来说会有不适应. 实际上是切换到中文版本,步骤:点击用户 ...

  5. Vue购物车实例

    <div class="buyCarBox" id="buyCarBox" v-cloak> <div class="haveClo ...

  6. Java Mac电脑配置java环境，JAVA IDE eclipse开发svn使用

    .SELECT TOP 规定返回记录的数目(对于大型数据库很有用的) SELECT TOP number|percent column--name FROM table; 1.2 SELECT LIM ...

  7. Run a task only once in (akka) cluster

    在stackOverflow网站上看到这一提问,下文是部分摘抄问题简述: Java cluster, run task only once We have a java process, which ...

  8. Udacity并行计算课程笔记-The GPU Programming Model

    一.传统的提高计算速度的方法 faster clocks (设置更快的时钟) more work over per clock cycle(每个时钟周期做更多的工作) more processors( ...

  9. RabbitMQ 1-入门学习

    环境: 软件环境MacOS ,Homebrew包管理工具 IDE: Eclipse 项目:Maven项目 1.安装RabbitMQ Server: 方式一:通过homebrew :终端执行:brew ...

  10. Python的文件及异常

    1. Python的文件及异常 1.1 文件操作 1.1.1 从文件中读取数据 许多情况下,我们的信息是存储在文本中的.例如对用户行为的分析,用户访问系统或者网站的访问信息会被存储于文本中,然后对文本 ...