vlambda博客
学习文章列表

如何编写网页开发工具JavaScript?


This browser does not support music or audio playback. Please play it in WeChat or another browser.



又到了学习编写语言的时候了,学习一门新的语言看起来可能很难,但并非如此,虽然它看起来比css更复杂,但只要领悟了它的语法,就会发现自己又掌握了一项超级强大的web开发工具。我们先来看看JavaScript的基本语法。

准备工作


从html+css过渡到写JS不需要添加任何软件,依旧使用你的编辑器IDE以及一个浏览器就足够了。

用JS写的脚本代码通常需要通过html文档才能执行,有两种方式可以做到这一点。

第一种是JS代码放到<script>标签中直接插入页面。
第二种更好的办法是把JS代码存为一个扩展名为.js的独立文件,然后在html中放一个<script>标签并把它的src属性指向这个文件:

<head>
<meta charset="UTF-8">
<script charset="utf-8"></script>
</head>
<body>
...
</body>

建议大家在写代码的时候养成良好的习惯,没有特殊需求的情况下都使用第二种方式。

这样的习惯会在以后代码量变大后逐渐感受到这样的好处。
不过我们在讲课的时候可能会用第一种方式,这是为了方便让大家可以更直观的看到所有代码。


一个简单的例子让页面互动起来

在没有加入JS代码之前的网页,无论做得再怎么酷炫,但始终是少了与用户的交互。
幸好我们有JS可以帮忙完成这一个有趣的事情:

<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript">
window.onload = function() {
var name = prompt("please enter your name:");
if (name != null && name != "") {
document.write("Hello, " + name + " welcome to Javascript world!");
} else {
document.write("Hello, welcome to Javascript world!");
}
}
</script>
</head>
<body>
</body>

这段代码大家可能看不懂,但没有关系我们可以大体的体会一下。

页面的功能非常简单:
当页面加载完毕后,调出一个对话框供用户输入一串字符串,并且根据用户输入的内容进行判断,展示相应内容到页面上。

这样就实现了一个最简单的互动的欢迎页面,JS就是这么简单又有趣儿。
接下来我们就要进入语法部分,详细学习这门语言的基础语法,尝试完成一些有趣的功能。

语法部分


在语法部分,我们可能不会罗列出JS基础语法的每一个部分。

我们只会将最主要最需要的部分捋一遍,剩下的知识点还是需要大家下来自己去练习去看。

     1、语句
     2、变量
     3、数据类型
     4、条件语句
     5、循环语句
     6、函数
     7、对象

1.语句

JS编写出来的脚本和其他程序一样,都是由一系列指令构成的,这些指令就叫做语句。
只有按照正确的语法编写出来的语句才能够正确的执行。

就如同英语的语法是:
第一个字母以大写开始,以一个句号结尾。
而JS的良好的语法习惯则是,把每条语句放在不同的行上,以分号结尾。

这样代码容易阅读,并且不会发生代码压缩后的未知错误:

statement one;
statement two;
...
2.变量

当页面还打开着的时候,也就是页面还活着的时候,它的很多内容存在一个生命周期。

比如最开始看到那个例子里,用户在对话框里输入的内容,如果只使用一次也就罢了,用过就可以释放掉忘掉。

但问题是很有可能要多次使用,那就需要一个容器来存储它的值。

还比如存在一个数字,我们会在这个数字上反复加减计算,这就意味着,它需要放在一个容器里,便于我们反复调用。

而变量就是存储器里有独一无二名字的存储位置,创建变量需要使用关键字var,并且为它命名:

var names;

这个时候变量是空的,它只是声明了它的存储位置和存储名称。

然后我们可以为这个变量赋值:

names = “Bob”;

但我们还有声明和赋值放在一起的最有效率的做法:

var names = “Bob”;

另外值得注意的是,变量名不允许包含空格或者是标点符号,美元符号$除外。

今天小编先介绍前两个部分,剩下的内容请大家持续关注JavaScript的相关内容吧。