手把手教你JavaScript编程(1):写一个简单的网页

我之前已经和大家分享了CodeMonkey的过关教程。CodeMonkey的卡通画面非常吸引孩子,是一个很好的入门编程的教育类游戏。不过,为了让孩子得到更大的提升,学习一门实用的计算机语言是必不可少的。现在的编程语言有很多,比如Matlab,Python,C/C++等属于在科研领域使用比较广泛的语言,Python,C/C++,Java,JavaScript是属于在工业界广泛使用的语言,近几年比较热门的Lua,Julia也是一些比较不错的选择。不过我在这一系列教程里,会介绍JavaScript语言这一普遍使用而上手难度相对很容易的编程语言。另外,JavaScript被广泛应用在绝大多数网站和浏览器里面,所以其“所写即所见”的特性非常适合作为孩子初期学习的编程语言。

《手把手教你JavaScript编程(1):写一个简单的网页》

一个例子

我用一个例子来给大家一个初步的感觉,能引起大家对JavaScript的学习兴趣就最好了。 

JavaScript最基本的功能就是生成文本,比如下面这段JavaScript代码

《手把手教你JavaScript编程(1):写一个简单的网页》

会产生如下的网页效果:

《手把手教你JavaScript编程(1):写一个简单的网页》

我们只需要更改document.write(“Hello World!”)这行代码里的”Hello World!”,就可以生成不同的文本,非常简单,都不需要懂的上述代码里的那些指令。大家如果有兴趣,可以在W3School网站的这里(http://www.w3school.com.cn/tiy/t.asp?f=jseg_text)尝试写不同的文本。

JavaScript:写入 HTML 输出

document.write(“”)是写入HTML的输出文本的指令,我们可以在””里写入任何我们想写的文本。

比如document.write(“<h1>This is a heading</h1>”);写的是一个标题(heading),“<h1>”表明标题开始,后面写入标题,“</h1>”表明标题结束,其实“/”放在h1前面就表示标题结束,有一种“停”的意思。其效果如下:

This is a heading

再比如document.write(“<p>This is a paragraph<p>”);是一个段落(paragraph)的例子,“<p>”

表明段落开始,后面写入文字,这些文字被浏览器或者网页认为是一段话,和我们学习语文里的写作的时候是一样的。“</p>”和前面的“</h1>”类似,表明段落的结束。这行代码的效果如下:

This is a paragraph

大家可以在http://www.w3school.com.cn/tiy/t.asp?f=js_intro_document_write学习更复杂的例子,也可以尝试写出自己的标题和段落。例子如下:

代码:

《手把手教你JavaScript编程(1):写一个简单的网页》

解释:“<!DOCTYPE html>”表明所写的代码类型是html网页,

网页效果:

《手把手教你JavaScript编程(1):写一个简单的网页》

这样的例子看起来未免有点无趣,我们可以根据我们的需要修改里面的文字,比如家长们如果想和孩子一起建一个自己家庭的个人网页,那么可以这样写代码:

《手把手教你JavaScript编程(1):写一个简单的网页》

输出效果如下:

《手把手教你JavaScript编程(1):写一个简单的网页》

今天的教程就到这里,我们初步感受了JavaScript在网页编辑里的强大,下次我们会继续学习JavaScript的其他功能。

    原文作者:君君玩科技
    原文地址: https://www.jianshu.com/p/4913f123bf79
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞