JavaScript小白学习笔记1——基础知识

ACM不能落下,但是网页制作也不能咕着不管啊。。这里打算学一些简单的JavaScript知识,不至于让自己是一个完全小白的状态。


关于JavaScript

随着Web的发展,网页设计人员希望页面能够与用户进行交互,于是就催生了JavaScript语言。Netscape公司发明了JavaScript,自其诞生以来,JavaScript经历了巨大的演化,现在已经成为主流Web开发语言。

JavaScript是一种轻量级、解释型的Web开发语言,该语言系统不是很庞杂,简单易学,由于所有的现代浏览器都已经嵌入了JavaScript引擎,JavaScript源代码可以在浏览器中直接被解释和执行,我们不需要担心支持问题。

(以下文字摘自百度百科)

JavaScript一种直译式脚本语言,是一种动态类型、弱类型、基于原型的语言,内置支持类型。它的解释器被称为JavaScript引擎,为浏览器的一部分,广泛用于客户端的脚本语言,最早是在HTML(标准通用标记语言下的一个应用)网页上使用,用来给HTML网页增加动态功能。

在1995年时,由Netscape公司的Brendan Eich,在网景导航者浏览器上首次设计实现而成。因为Netscape与Sun合作,Netscape管理层希望它外观看起来像Java,因此取名为JavaScript。但实际上它的语法风格与Self及Scheme较为接近。

在网页中插入JavaScript代码

使用<script>标签,可以把JavaScript源代码直接放到网页文档中。

一个简单的helloworld程序:

1
2
3
4
5
6
7
8
9
10
11
12
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>JavaScript练习</title>
</head>
<body>
<script>
document.write("<p>Hello, World!</p>");
</script>
</body>
</html>

<script></script>标签配合使用,作为脚本语言的标识符来分隔其他的源代码。避免与HTML标签和CSS样式代码混淆。在解析网页源代码时,浏览器检索到<script>标签时,会自动调用JavaScript引擎对其中包含的字符信息做解释处理。

document是JavaScript在浏览器中定义的一个对象。它表示HTML文档内容。write()是document对象的一个方法,它表示在网页文档中输出显示指定的参数内容。

<script>标签包含两个属性,一个是type,设置标签包含脚本属于什么语言类型,如“text/javascript”属性值表示JavaScript代码类型的文本,默认值为text/javascript。另一个是language,设置标签包含脚本属于什么语言类型,JavaScript属性值表示JavaScript语言类型。该属性主要适应早期浏览器的解析,因为它们会忽略掉type属性声明。但是在实际开发中,可以省略这两个属性设置,因为浏览器默认<script>标签包含的字符信息是JavaScript脚本。

一般来说,JavaScript代码可以被嵌入到网页中任何位置,如<head>标签的顶部,<head>和</head>之间,<body>标签内部,甚至可以被放在<html>或</html>标签的外部,浏览器都可以正确解析。但是,根据W3C标准,<script>和<link>
标签作为HTML文档的一个结点而存在,因此,它们也应该包含在<html>和</html>根节点内,以便构成合理的结构,方便DOM控制。

插播一句DOM是啥:

文档对象模型(Document Object Model,简称DOM),是W3C组织推荐的处理可扩展标志语言的标准编程接口。在网页上,组织页面(或文档)的对象被组织在一个树形结构中,用来表示文档中对象的标准模型就称为DOM。

需要注意的是,引擎是按着从上到下的顺序来解析网页源代码的,在解析JavaScript脚本时,不能出现解析代码使用未解析代码的情况。比如说,你在head标签里面加了document.getElementById("box").style.fontSize = "50px";,然后在body标签里加了<p id="box">test</p>,此时前面的修改字体大小操作是不生效的。原因是,解析从上到下进行,在解析到document.getElementById("box").style.fontSize = "50px";时,box这个id还没有建立,自然也就get不到ID,这条语句也就随之无效了。

考虑到HTML文档的DOM结构模型规范性,建议把JavaScript脚本写在<head>和</head>之间,或者写在<body>和</body>之间。

每个网页可以包含多个<script>标签,每个<script>标签包含的代码被称为JavaScript脚本块。一般建议把相同或相近功能的代码放在一个脚本块中,而不同功能的代码分别放在不同脚本块中会更适宜管理。适当时可以把通用脚本模块放在单独的JavaScript文件中,或者把它们封装为一个独立的对象以方便进行调用。对于页面内的JavaScript脚本来说,各种公共函数和变量应放在<head>和</head>之间,而将页面加载期间执行的代码,DOM对象初始化以及与DOM相关的全局引用赋值操作放在<body>和</body>之间,如果没有特殊要求,不妨放在</body>前面。

使用JavaScript文件

与CSS文件一样,JavaScript代码也可以存放在独立的文件中,以增强JavaScript脚本的可重复调用。JavaScript文件是一个文本类型的文件,在任何文本编辑器中都可以被打开和编辑,JavaScript文件的扩展名为js。

关于重用性:

重用性一直是应用开发的一个重要话题。所谓重用性就是相同的代码能够被反复利用。这对于大型项目开发显得非常重要。因为项目中很多页面或区域的功能都是相同的。如果在不同文件或区域内反复编写相同的代码块,这回浪费大量的资源和时间,后期维护的工作量也很大。

引入JavaScript文件时,可以使用<script>标签实现。通过该标签的src属性指定JavaScript文件的URL即可。

可以试一下。新建一个文本文件,另存为test.js,在该文件中输入下面的代码:

1
2
3
4
5
6
7
8
9
10
11
function strlen(str) {
var len;
len = 0;
for (var i = 0; i < str.length; i++) {
if (str.charCodeAt(i) > 255 )
len += 2;
else
len++;
}
return len;
}

然后写下面的HTML代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>JavaScript练习</title>
<script type="text/javascript" src="js/test.js"></script>
<script>
var str = "JavaScript是个好东西";
document.write("<h2>" + str + "</h2>");
document.write("<p>实际长度=" + strlen(str) + "字节</p>");
</script>
</head>
<body>

</body>
</html>

运行,发现结果是这样的:

JavaScript语法基础

语法。。。。怎么说呢,这也是一个C风格编程语言,掌握了C语言的话JavaScript便不难掌握。

综述

语言编码

JavaScript语言建立在Unicode字符集基础纸上,因此在脚本中,用户可以使用双字节的字符命名常量、变量或者函数。但是,考虑到JavaScript脚本是嵌入在网页中,如果网页编码与脚本字符编码不同,将会存在风险,所以建议不要使用中文命名,但是可以使用中文注释。

大小写敏感

与HTML与CSS不同,JavaScript语言对大小写敏感。emmm命名法的话还是遵照驼峰式命名法就可以。也就是命名中第一个单词全部小写,后面每个单词首字母大写。

代码格式化

JavaScript一般会忽略空格符,如空格符、制表符和换行符。在保证不引起歧义的情况下,用户可以利用分隔符对脚本进行排版,但不能连在一起的变量名、关键字中间插入分隔符,因为JavaScript引擎是根据分隔符来区分词的。如果需要在字符串、表达式中间插入分隔符,可以转义分割字符。比如,使用’\t’表示制表符,使用’\n’表示换行符。使用’\s’表示空白符(包括空格,制表符,换页符或换行符)

代码注释

JavaScript的注释格式和C语言是一样的。使用//注释单行代码,使用/**/注释多行代码。

标签

在JavaScript脚本中可以加上标签,方便JavaScript程序进行快速定位。标签一般由一个合法的字符名称后加一个冒号组成,标签可以放在任意行的起始位置,这样就可以为该行设置一个标记,然后在结构体中使用break,continue等跳转语句跳出循环结构。

比如说,可以为外层循环加一个标签loop,然后使用break语句直接结束外层循环。

等等,这个操作怎么这么熟悉……原来是Java也有这个操作……

JavaScript语法特性

刚才说到,JavaScript属于C风格语言,也就是书上讲的属于C语系范畴。具有C风格的语言在学习时都可以触类旁通,因为结构都大体相似。

我们假设您具有C语言的基础知识。

前置知识:C语言语法基础

这里仅列举一些与C语言不同的地方。

声明函数需要使用关键字function,声明变量需要使用关键字var,这是因为JavaScript是一个弱类型语言。正因如此,在声明函数的时候如果需要用到参数,是不用写类型的,连var都不用写。

JavaScript对象。对象都以左大括号开始,以右大括号结束。里面一个或多个“名/值”对,多个这种对之间没有先后顺序之分。名称和值之间使用冒号进行分隔,而对与对之间使用逗号分隔。下面是一个示例:

1
2
3
4
5
6
7
8
var me = {
name : "ShawnZhou",
age : 18,
greeting : function() {
return "Hello!";
}
}
document.write("<h1>" + me.name + ":" + me.greeting() + "</h1>");

对与对之间的逗号一定不要忘了加上。

JavaScript数组。数组以左中括号开始,以右中括号结束。中间可以包含很多值,值与值之间由逗号分隔。数组是值的有序集合,所谓有序就是指多个值之间必须按先后顺序排列在一起,能够根据序号可以找到对应的值。

1
2
3
4
5
var test = [1,2,3,4,5]

for (var i = 0; i < 5; i++){
document.write(test[i] + " ");
}

你甚至还可以往数组元素里塞函数。

1
2
3
4
5
6
7
8
var amazing = [
"wow, ",
function() {
return "that's amazing!";
}
]

document.write("<p>" + amazing[0] + amazing[1]() + "</p>");

有两个小细节需要注意。第一个,对于数组里那个函数,如果里面写成了document.write("that's amazing!");会导致什么呢?这句话仍然会被输出,但是还会附带输出一个undefined,由于这个函数没有return,说明这里没有返回值,那自然这个函数的值就是未定义了。第二个需要注意调用数组函数的时候,需要在后面加上一对括号()。这个的原因在下面会讲。

JavaScript调用和逻辑分隔。在JavaScript中,小括号表示一个逻辑运算符,用来调用函数。小括号也可以作为逻辑运算符,在定义函数时,放在函数名称的后面,用来分隔函数与参数。

(其实后面那句话就是常规操作。。。function(woshicanshu)这样。。。)


-------------本文结束,感谢您的阅读转载请注明原作者及出处-------------


本文标题:JavaScript小白学习笔记1——基础知识

文章作者:Shawn Zhou

发布时间:2019年02月07日 - 18:02

最后更新:2019年02月18日 - 13:02

原始链接:http://shawnzhou.xyz/2019/02/07/19-02-07-01/

许可协议: 署名-非商业性使用-禁止演绎 4.0 国际 转载请保留原文链接及作者。

知识无价,码字不易。对您有用,敬请打赏。金额随意,感谢关心。
0%