javascript 简介

JavaScript 是互联网上最流行的脚本语言，这门语言可用于 HTML 和 web，更可广泛用于服务器、PC、笔记本电脑、平板电脑和智能手机等设备。

JavaScript 是脚本语言

JavaScript 是一种轻量级的编程语言。

JavaScript 是可插入 HTML 页面的编程代码。

JavaScript 插入 HTML 页面后，可由所有的现代浏览器执行。

JavaScript 很容易学习。

您将学到什么

下面是您将在本教程中学到的主要内容。

JavaScript：直接写入 HTML 输出流

实例

document.write("<h1>这是一个标题</h1>");

document.write("<p>这是一个段落。</p>");

尝试一下 »

您只能在 HTML 输出中使用 document.write。如果您在文档加载完成后使用该方法，会覆盖整个文档。

JavaScript：对事件的反应

实例

<button type="button" οnclick="alert('欢迎!')">点我!</button>

尝试一下 »

alert() 函数在 JavaScript 中并不常用，但它对于代码测试非常方便。

onclick 事件只是您即将在本教程中学到的众多事件之一。

JavaScript：改变 HTML 内容

使用 JavaScript 来处理 HTML 内容是非常强大的功能。

实例

x=document.getElementById("demo") //查找元素

x.innerHTML="Hello JavaScript"; //改变内容

尝试一下 »

您会经常看到 document.getElementById("some id")。这个方法是 HTML DOM 中定义的。

DOM (Document Object Model)（文档对象模型）是用于访问 HTML 元素的正式 W3C 标准。

您将在本教程的多个章节中学到有关 HTML DOM 的知识。

JavaScript：改变 HTML 图像

“点亮灯泡”实现代码详解：

<script>functionchangeImage(){//通过查看src中是否有bulbon这个单词来判断当前状态并切换到另外一种状态element=document.getElementById('myimage');if (element.src.match("bulbon")){//如果src属性中有bulbon这个单词，则将其改为下面这个srcelement.src="https://www.w3cschool.cn/statics/images/course/pic_bulboff.gif";}else{//如果src属性中没有bulbon这个单词，则将其改为这个srcelement.src="https://www.w3cschool.cn/statics/images/course/pic_bulbon.gif";}
}
</script><imgid="myimage"onclick="changeImage()"src="https://www.w3cschool.cn/statics/images/course/pic_bulboff.gif"width="100"height="180">

以上实例中代码 element.src.match("bulbon") 的作用意思是：检索 <img id="myimage" οnclick="changeImage()" src="/images/pic_bulboff.gif" width="100" height="180"> 里面 src 属性的值有没有包含 bulbon 这个字符串，如果存在字符串 bulbon，图片 src 更新为 bulboff.gif，若匹配不到 bulbon 字符串，src 则更新为 bulbon.gif

JavaScript 能够改变任意 HTML 元素的大多数属性，而不仅仅是图片。

JavaScript：改变 HTML 样式

改变 HTML 元素的样式，属于改变 HTML 属性的变种。

实例

x=document.getElementById("demo") //找到元素

x.style.color="#ff0000"; //改变样式

尝试一下 »

JavaScript：验证输入

JavaScript 常用于验证用户的输入。

实例

if isNaN(x) {alert("不是数字")};

尝试一下 »

以上实例只是普通的验证，如果要在生产环境中使用，需要严格判断，如果输入的空格，或者连续空格 isNaN 是判别不出来的。

您知道吗？

JavaScript 与 Java 是两种完全不同的语言，无论在概念上还是设计上。

Java（由 Sun 发明）是更复杂的编程语言。

ECMA-262 是 JavaScript 标准的官方名称。

JavaScript 由 Brendan Eich 发明。它于 1995 年出现在 Netscape 中（该浏览器已停止更新），并于 1997 年被 ECMA（一个标准协会）采纳。

javaScript和ECMAScript的关系

ECMAScript是欧洲计算机制造商协会通过ECMA-262标准化的脚本程序设计语言。

JavaScript 已经由 ECMA 通过 ECMAScript 实现语言的标准化。

ECMAScript 版本

JavaScript 已经由 ECMA（欧洲电脑制造商协会）通过 ECMAScript 实现语言的标准化。

年份

名称

描述

1997

ECMAScript 1

第一个版本

1998

ECMAScript 2

版本变更

1999

ECMAScript 3

添加正则表达式

添加 try/catch

ECMAScript 4

没有发布

2009

ECMAScript 5

添加 "strict mode"，严格模式

添加 JSON 支持

2011

ECMAScript 5.1

版本变更

2015

ECMAScript 6

添加类和模块

2016

ECMAScript 7

增加指数运算符 (**)

增加 Array.prototype.includes

ECMAScript 6 也称为 ECMAScript 2015。
ECMAScript 7 也称为 ECMAScript 2016。

JavaScript 用法

HTML 中的脚本必须位于 <script> 与 </script> 标签之间。

脚本可被放置在 HTML 页面的 <body> 和 <head> 部分中。

<script> 标签

如需在 HTML 页面中插入 JavaScript，请使用 <script> 标签。

<script> 和 </script> 会告诉 JavaScript 在何处开始和结束。

<script> 和 </script> 之间的代码行包含了 JavaScript:

实例

<script>

alert("我的第一个 JavaScript");

</script>

您无需理解上面的代码。只需明白，浏览器会解释并执行位于 <script> 和 </script>之间的 JavaScript 代码

那些老旧的实例可能会在 <script> 标签中使用 type="text/javascript"。现在已经不必这样做了。JavaScript 是所有现代浏览器以及 HTML5 中的默认脚本语言。

<body> 中的 JavaScript

在本例中，JavaScript 会在页面加载时向 HTML 的 <body> 写文本：

实例

<!DOCTYPE html>

<html>

<body>

.

.

<script>

document.write("<h1>这是一个标题</h1>");

document.write("<p>这是一个段落</p>");

</script>

.

.

</body>

</html>

尝试一下 »

JavaScript 函数和事件

上面例子中的 JavaScript 语句，会在页面加载时执行。

通常，我们需要在某个事件发生时执行代码，比如当用户点击按钮时。

如果我们把 JavaScript 代码放入函数中，就可以在事件发生时调用该函数。

您将在稍后的章节学到更多有关 JavaScript 函数和事件的知识。

在 <head> 或者 <body> 的JavaScript

您可以在 HTML 文档中放入不限数量的脚本。

脚本可位于 HTML 的 <body> 或 <head> 部分中，或者同时存在于两个部分中。

通常的做法是把函数放入 <head> 部分中，或者放在页面底部。这样就可以把它们安置到同一处位置，不会干扰页面的内容。

<head> 中的 JavaScript 函数

在本例中，我们把一个 JavaScript 函数放置到 HTML 页面的 <head> 部分。

该函数会在点击按钮时被调用：

实例

<!DOCTYPE html>

<html>

<head>

<script>

function myFunction(){

document.getElementById("demo").innerHTML="我的第一个 JavaScript 函数";

}

</script>

</head>

<body>

<h1>我的 Web 页面</h1>

<p id="demo">一个段落</p>

<button type="button" οnclick="myFunction()">尝试一下</button>

</body>

</html>

尝试一下 »

<body> 中的 JavaScript 函数

在本例中，我们把一个 JavaScript 函数放置到 HTML 页面的 <body> 部分。

该函数会在点击按钮时被调用：

实例

<!DOCTYPE html>

<html>

<body>

<h1>我的 Web 页面</h1>

<p id="demo">一个段落</p>

<button type="button" οnclick="myFunction()">尝试一下</button>

<script>

function myFunction(){

document.getElementById("demo").innerHTML="我的第一个 JavaScript 函数";

}

</script>

</body>

</html>

尝试一下 »

提示：我们把 JavaScript 放到了页面代码的底部，这样就可以确保在 <p> 元素创建之后再执行脚本。

外部的 JavaScript

也可以把脚本保存到外部文件中。外部文件通常包含被多个网页使用的代码。

外部 JavaScript 文件的文件扩展名是 .js。

如需使用外部文件，请在 <script> 标签的 "src" 属性中设置该 .js 文件：

实例

<!DOCTYPE html>

<html>

<body>

<script src="myScript.js"></script>

</body>

</html>

尝试一下 »

你可以将脚本放置于 <head> 或者 <body>中 实际运行效果与您在 <script> 标签中编写脚本完全一致。

myScript.js 文件代码如下：

functionmyFunction() {document.getElementById("demo").innerHTML="我的第一个 JavaScript 函数";
}

外部脚本不能包含 <script> 标签。

JavaScript 入门教程||javascript 简介||JavaScript 用法相关推荐

  1. 零基础JavaScript入门教程(1)–走进JavaScript的世界

    点此查看 所有教程.项目.源码导航 本文目录 1. 前言 2. JS的历史 3. JS的地位 4. JS与HTML.CSS的区别 5. JS是真正的编程语言 6. JS的组成部分 7. 小结 1. 前 ...

  2. Node.js 入门教程 6 V8 JavaScript 引擎

    Node.js 入门教程 Node.js官方入门教程 Node.js中文网 本文仅用于学习记录,不存在任何商业用途,如侵删 文章目录 Node.js 入门教程 6 V8 JavaScript 引擎 6 ...

  3. JavaScript 入门教程-不古出品

    JavaScript 教程入门-不古出品 JavaScript 背景 JavaScript 简介 JavaScript 使用 < script > 标签 JavaScript 函数和事件 ...

  4. HTML+CSS+JavaScript入门教程（万字）

    前言 作为一名后端开发人员,开发过程中,必不可少的与前端进行对接,因此尽管是后端开发者,也需要一定的前端知识,因此写下HTML+CSS+JavaScript入门知识,着重介绍了JavaScript,方 ...

  5. Typescript系列(一)：TS入门教程之简介、安装、编译、监听

    一个比java更script的语言,它是js的超集,它是Typescript. 一.typescript是什么? Typescript是javascript的一个超集,主要提供了类型系统和对ES6的支 ...

  6. [雪峰磁针石博客]数据仓库快速入门教程1简介

    数据仓库是从各种渠道收集和管理数据的技术,可提供有意义的业务洞察,战略性地使用数据. 它用于查询和分析而不是事务处理,是将数据转换为信息并及时向用户提供的过程. 决策支持数据库(数据仓库)与组织的运营 ...

  7. 0基础JavaScript入门教程（一）认识代码

    1. 环境: JavaScript简称js,后续我们将使用js来代替JavaScript. 认识代码前,需要安装js代码运行环境. 安装nodejs:在https://nodejs.org/zh-cn ...

  8. 零基础JavaScript入门教程(8)–JS之输出语句

    点此查看 所有教程.项目.源码导航 本文目录 1. 前言 2. 弹窗输出 3. 网页内容输出 4. 控制台输出 5. 小结 1. 前言 之前我们只讲过一个JS语句:alert,用于弹窗显示信息.一般这 ...

  9. ArcGIS API for JavaScript 入门教程[5] 再讲数据——Map类之底图与高程

    [回顾]前4篇交代了JsAPI的背景.资源如何获取,简介了数据与视图分离的概念与实现,剖析了页面的大骨架. 这篇开始,讲Map类. 转载注明出处,博客园/CSDN/B站/知乎:秋意正寒 目录:http ...

最新文章

  1. linux系统photoshop安装教程,在ubuntu中安装photoshop cs6
  2. pynlpir(ICTCLAS)初步使用
  3. 数学--数论--HDU-2698 Maximum Multiple（规律）
  4. Head First设计模式之备忘录模式
  5. 阿里如何做到百万量级硬件故障自愈？
  6. 【深度学习】卷积神经网络(CNN)原理
  7. 机器学习：金融领域的岗位需求
  8. Linux优秀软件整理 - 摘自Linux 开源中国
  9. java定义一个长方形类，该类中具有长方形长宽两种属性，并具有相应的构造方法属性访问方法，计算长方形的周长和面积的方法，要求输出长是5，宽是4的长方形
  10. Vultr VPS如何修改root密码
  11. php跑满CPU的问题终于发现原因了
  12. java图像处理：灰度化，二值化，降噪，切割，裁剪，识别，找相似等
  13. 每日一题:1220. 统计元音字母序列的数目(Count Vowels Permutation)
  14. DIY主机：华硕B450m+AMD2600x
  15. 【论文夜读】陈天琦神作Neural Ordinary Differential Equations(NuerIPS2018最佳paper)
  16. JAVA:实现XXTea加解密算法(附完整源码)
  17. Grin：这个世界真的需要电子现金吗？
  18. OTP在实际项目中的集成
  19. 单片机C语言制作ESR表,电容ESR表（二） 电容ESR表的设计、制作、调试
  20. 台式电脑可以练计算机二级吗,全国计算机二级考试（考二级能用office2019练吗）...

热门文章

  1. 计算机毕业设计JAVA校园课室资源预约系统设计与实现mybatis+源码+调试部署+系统+数据库+lw
  2. 【Python】输入某年某月某日，判断这一天是这一年的第几天？
  3. FCFS算法java实现
  4. 以太坊开发文档09 - javascriptApi
  5. 通过API接口获取下来的数据需要怎样才能应用
  6. linux sec是什么类型,SEC 文件扩展名： 它是什么以及如何打开它？
  7. ClusterManager 源码及原理学习
  8. 第四章、连上 Internet
  9. python中符号计算三维可视化_Python科学计算三维可视化章节答案
  10. 鸿蒙红包系统,不朽鸿蒙录红包版