001_JS基础_JavaScript简介
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>001_JS基础_JavaScript简介的更多相关文章
- 【Machine Learning】机器学习及其基础概念简介
机器学习及其基础概念简介 作者:白宁超 2016年12月23日21:24:51 摘要:随着机器学习和深度学习的热潮,各种图书层出不穷.然而多数是基础理论知识介绍,缺乏实现的深入理解.本系列文章是作者结 ...
- XML 参考：XML基础 XML 简介
XML 参考:XML基础 -- XML简介和用途 转:http://www.cnblogs.com/Dlonghow/archive/2009/01/22/1379799.html XML 参考:XM ...
- Java基础类库简介
Java基础类库简介 一.常用的基础类库:11个jar(Java Archive,Java归档)包 作为java语言使用者,我们可以感受到java语言带来的优势(平台无关.面向对象.多线程.高效易扩展 ...
- SpringCloud(1) 架构演进和基础知识简介
一.传统架构演进到分布式架构 简介:讲解单机应用和分布式应用架构演进基础知识 (画图) 高可用 LVS+keepalive 1.单体应用:开发速度慢.启动时间长.依赖庞大.等等 2.微服务:易开发.理 ...
- Python运维开发基础-概述-简介
Python基础知识分为以下几块 1.Python概述 2.基础语法 3.数据结构 4.Python进阶 5.实训案例 一.Python概述 1.Python简介 2.Hello World 3.搭建 ...
- Python基础--Python简介和入门
☞写在前面 在说Python之前,我想先说一下自己为什么要学Python,我本人之前也了解过Python,但没有深入学习.之前接触的语言都是Java,也写过一些Java自动化用例,对Java语言只能说 ...
- JMeter各个基础组件简介
刚从LoadRunner转到JMeter,对JMeter的各种概念比较懵.在这里记录下.欢迎大家关注我的个人微信号:测试杂货铺. JMeter的各个功能都是它的组件来完成或实现的,下面来对JMeter ...
- 【JAVAWEB学习笔记】26_Linux基础：简介安装、常用命令和JDK、Mysql、Tomcat的安装
Linux基础 学习目标 1.了解Linux的简介与安装 2.掌握Linux常用的命令 3.掌握Linux系统上JDK.Mysql.Tomcat的安装 一.Linux的简介 1．Linux的概述 Li ...
- 前端基础-HTML简介及发展史
一 HTML简介 二 HTML发展史 一. HTML简介 用户使用浏览器打开网页看到结果的过程就是:浏览器将服务端的文本文件(即网页文件)内容下载到本地,然后打开显示的过程. 而文本文件的文档结构只有 ...
随机推荐
- (转）Maven依赖的jar包下载不了、jar更新不了的解决办法
场景一: 使用Maven的同学可能偶尔会遇到这种情况:pom.xml中依赖了项目需要的某个jar文件,但是使用Maven –> update project 还是没办法下载该jar到项目中,你可 ...
- CentOS 7下Samba服务器的安装与配置
文基于<CentOS 6.3下Samba服务器的安装与配置>,参照原博文,自己在CentOS7环境上实现,并按照自己的环境修改博文内容 一.简介 Samba是一个能让Linux系统应用Mi ...
- javascript 面向对象设计之 Function 普通类
var test = "Class01"; function Class01(privateValue, publicValue) { var _this = this; if ( ...
- CS:APP3e 深入理解计算机系统_3e bomblab实验
bomb.c /*************************************************************************** * Dr. Evil's Ins ...
- intellij IDEA里各图标对应的文件类型
本篇内容为大家提供的是IntelliJ IDEA 使用教程中的常见文件类型的图标介绍,IntelliJ IDEA是java语言开发的集成环境,IntelliJ在业界被公认为最好的java开发工具之一, ...
- git 设置和取消代理
# 设置ss git config --global http.proxy 'socks5://127.0.0.1:1080' git config --global https.proxy 'soc ...
- 《程序员修炼之道：从小工到专家》【PDF】下载
<程序员修炼之道:从小工到专家>[PDF]下载链接: https://u253469.ctfile.com/fs/253469-231196340 内容简介 <程序员修炼之道> ...
- adobe acrobat x pro破解版
adobe acrobat x pro破解版是Adobe官方出品的PDF文档全能解决方案套件. PDF文件格式是Adobe公司设计的,用其公司开发的Adobe Acrobat X Pro来创建.编辑. ...
- Vue购物车实例
<div class="buyCarBox" id="buyCarBox" v-cloak> <div class="haveClo ...
- iOS屏幕适配（尺寸适配）
屏幕尺寸适配:一 在.pch中加入以下代码,在定义每个尺寸值的时候都调用下边的宏 //以iphone7为例 定义 view相关的宽高宏#define IPHONEHIGHT(b) [UIScreen ...