手把手教你JavaScript编程(2):JavaScript的强大功能

在上次的教程里,我介绍了如何用JavaScript写一个简单的网页。在这次教程里,我介绍3个JavaScript的例子,更全面的展现JavaScript在网页编辑里的潜力。

先给大家安利一下~

JavaScript是世界上最流行的编程语言

JavaScript的受欢迎程度可以通过Github(一个代码托管社区)上最流行的项目所用的编程语言可以看出:

图片来源:http://zikka.blogspot.hk/2017/05/what-programming-language-should.html

由上图可以看出,直到今年4月份,在1000+star的项目里有2772个项目是由JavaScript写成的。1000+star是什么意思呢?每个star都表示有一个人对这个项目特别感兴趣所以按下了star。这个star不仅仅类似于朋友圈的点赞,项目一旦有新的动向或改进,按下star的人就会第一时间得到消息从而查看更新。1000+star就是特别受欢迎的意思。

我非常惭愧的表示,我目前写的代码里,最受欢迎的只有15个星,其中还包括我自己(捂脸)。气愤啊,看来是编程语言用错了ε=(´ο`*)))唉。。。

为什么JavaScript这么受欢迎呢?最主要的原因是JavaScript被广泛用于HTML和Web端,更被普遍用于各种服务器,个人主机,笔记本电脑,和智能手机设备。

此外,JavaScript不仅用途广泛,而且是一门轻量级的脚本语言。什么叫轻量级?在我的理解就是非常容易入门。举个例子吧,大家都知道拳击比赛也分轻量级和重量级,轻量级大概在55千克到65千克之间,这是很容易达到的一个体重,而重量级要达到75千克到85千克之间,这就是一个很难达到的区间了。(哎,那个角落里的胖子先不要那么愤怒,你们看我啊,我的体重还在55千克边缘摇摆,请你们理解一个瘦子的难处。)当然,非常容易入门就是说需要的外部支持很少,几乎没有。


JavaScript还可以插入HTML页面,并在插入HTML之后可由所有的常用浏览器执行。事实上,我只用Chrome浏览器,这个浏览器里的很多功能都是由JavaScript写就。

下面我们就来一起瞅瞅我们究竟可以用JavaScript语言做些什么事情吧。

JavaScript:写入 HTML 输出

用JavaScript在HTML中写一段输出可以用到:

document.write("<h1>This is a heading</h1>");

document.write("<p>This is a paragraph</p>");

举个简单的例子。代码如下:

在代码里,“<!DOCTYPE html>”表示文件类型是HTML文件。

“<html>”和“</html>”分别表示html文件的开始和结束。

“<body>”和“</body>”分别表示html里文档内容的开始和结束。

除了body之外还有什么?一个简单的 HTML 文档,最基本的必需元素包括html标签(html文件),head标签(文档的标题),和body标签(文档的内容)。

<html>到</html>之间是HTML文档的部分。类似地,<head>和</head>之间是HTML文档的标题,<body>和</body>之间的部分就是HTML文档的身体,也就是内容。

“<p>”和“</p>”分别表示段落的开始和结束。同样“<script>”表示开始写代码,“</script>”表示代码结束。

我们不能把代码写在“<p>”和“</p>”之间,否则这些代码就无法被HTML编译,也无法显示在浏览器上。

上图中的代码的输出效果如下:

JavaScript:对事件作出反应

用JavaScript在HTML中写一个按钮可以用到:

看看具体HTML网页里的代码:

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

onclick是一个事件,表示一旦点击就会发生onclick的内容(这里是alert('Welcome!'))。

效果如下:

用户就可以点击“点击这里”这个按钮了。

JavaScript:改变 HTML 内容

我们还可以使用 JavaScript 来处理 HTML的内容,这是一个非常强大的功能。

例子:

我们会经常看到 document.getElementByID("some id")。这个方法是 HTML DOM 中定义的。DOM(文档对象模型)是用以访问 HTML 元素的正式 W3C 标准。我们会在本教程的后续章节中学到 HTML DOM的知识。

我们先看看一个具体例子中的代码:

在这段代码里,我们在代码模块(script)里定义了一个函数myFunction(),myFunction()函数会把“id=demo”的那段文字,也就是“JavaScript 能改变 HTML 元素的内容。”,改成“Hello JavaScript!”。

当然,这个改变只发生在当我们点击“点击这里”这个按钮的时候(上图中倒数第三行代码)。

以下是改变之前的网页:

以下是改变之后的网页:


好了,这次讲了JavaScript的三个功能,包括输出文字,设置按钮对事件做出反应,改变网页内容。

下次我会介绍如何用JavaScript改变HTML中的图像,样式,和设置验证输入。

谢谢大家的关注!

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 199,478评论 5 467
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 83,825评论 2 376
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 146,482评论 0 330
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 53,726评论 1 271
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 62,633评论 5 359
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,018评论 1 275
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,513评论 3 390
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,168评论 0 254
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,320评论 1 294
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,264评论 2 317
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,288评论 1 328
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 32,995评论 3 315
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,587评论 3 303
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,667评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,909评论 1 255
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,284评论 2 345
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 41,862评论 2 339

推荐阅读更多精彩内容