JavaScript自学者入门



JavaScript自学者入门

 

JavaScript是一种属于网络的脚本语言,已经被广泛用于Web应用开发,常用来为网页添加各式各样的动态功能,为用户提供更流畅美观的浏览效果。可以直接嵌入HTML页面,但写成单独的js文件有利于结构和行为的分离。

JavaScript的组成部分

ECMAScript,描述了该语言的语法和基本对象。ECMAScriptJavaScript脚本语言规范,由Javascript引擎具体实现。

文档对象模型(DOM),描述处理网页内容的方法和接口。 

浏览器对象模型(BOM),描述与浏览器进行交互的方法和接口。

若想进一步了解可参见本文后面的附录

 

JavaScript脚本代码的运行环境有浏览器和node.js环境:

1JavaScript被定义为一种浏览器的脚本语言,一直以来其运行环境都是客户端浏览器,因为JavaScript设计的初衷就是做一些浏览器与用户的交互和一些网页的特效来补充HTMLCSS的不足。这是最常用的。

2、在2009年,诞生了node.js技术,node.js是一个Javascript运行环境。实际上它是对Google V8引擎进行了封装, node.js是一个基于ChromeJavaScript运行时(runtime)建立的平台, 用于方便地搭建响应速度快、易于扩展的网络应用。node.js使得JavaScript可以运行在服务器端作为一种服务器脚本语言运行,类似于php等动态语言。简单地说,Node.js 是运行在服务端的 JavaScript,主要用来在后端(服务端)开发部署一些高性能的服务

 

一、使用浏览器运行JavaScript代码

通常用这种方法运行JavaScript代码。

JavaScript采用的格式如下:

<Script Language="JavaScript">

JavaScript 语句

</Script>

 

把上述语句放在HTML<head></head>之间,也可放在<body></body>之间。

例子、用“记事本”(或其它文本编辑器)建立包含如下内容的HTML文件,文件名为Test01.html,注意文件名中点后面的后缀不要错了,文件内容如下

<html>

<head>

<scripttype="text/javascript">

  document.write("您好,JavaScript欢迎您的到来");

</script>

</head>

<body>

<br />

这是网页运行JavaScript的例子。

</body>

</html>

 

说明:<br />标签插入换行符。

双击Test01.html文件名运行:

 

也可以使用调用JavaScript文件方法

将纯JavaScript的语句另外保存在一个文件名后缀为js的文件中,再调用之。这种方法需要注意被调用文件的路径。

例子:调用test.js文件,显示提示。

先用“记事本”建立一个HTML文件,文件名为Test02.html

<html>

<body>

调用jsFile.js s文件

<br />

<script language="JavaScript"src=" jsFile.js ">

</script>

</body>

</html>

 

再用“记事本”(或其它文本编辑器)建立一个js文件,文件名为jsFile.js注意文件名中点后面的后缀不要错了,文件内容如下:

document.write("您好,JavaScript欢迎您的到来");

说明:该示例文件比较简单的一行。现实情况当然不会如此简单。

Test02.htmljsFile.js放在同一个文件夹中,双击Test02.html文件名运行:

JavaScript开发工具很多,HBuilder是较好的JavaScriptIDE(集成开发环境,IntegratedDevelopment Environment )之一,国货精品,专注H5,全中文,很给力。

小结:JavaScript应放网页的哪里

1head 部分中的脚本: 需调用才执行的脚本或事件触发执行的脚本放在HTMLhead部分中。当你把脚本放在head部分中时,可以保证脚本在任何调用之前被加载。

<html>

<head>

<script type=”text/javascript”>

</script>

</head>

2body 部分中的脚本: 当页面被加载时执行的脚本放在HTMLbody部分。放在body部分的脚本通常被用来生成页面的内容。

<html>

<head>

l</head>

<body>

<script type=”text/javascript”>

</script>

</body>

顺便指出,body head 部分可同时有脚本:你可在文件中放无数的脚本,因此你的文件中可以在bodyhead部分同时存在脚本。

<html>

<head>

<script type=”text/javascript”>

</script>

</head>

<body>

<script type=”text/javascript”>

</script>

</body>

3外部脚本的使用

有时候你可能想在几个页面中运行同样的脚本程序, 而不需在各个页面中重复的写这些代码。这时你就要用到外部脚本。你可以把脚本写在一个外部文件中,保存在扩展名为 .js的文件中。注意:外部脚本文件中不要包含标记符<script>

使用外部脚本时将标记符<script>的“src”属性值指向相应的.js文件就可以了:

<html>

<head>

<script src=”xxx.js”></script>

</head>

<body>

</body>

</html>


二、使用Node.js运行JavaScript代码

Node.js的官方网站上,一直将其项目称之为Node或者Node.js

简单地说,Node.js 就是运行在服务端的 JavaScript运行环境。Node.js主要用来在后端(服务端)开发部署一些高性能的服务,一般不用这种方法运行JavaScript代码。

一般来说,Javascript都是运行在浏览器中的。如果抛开浏览器,能不能运行js代码呢?Nodejs提供的就是ECMAScript的运行环境,它包含了浏览器内核,使得ECMAScript能在浏览器之外运行。

首先去Node.js官网下载.msi文件 https://nodejs.org/en/

或到中文网站http://nodejs.cn/

直接安装就可以了,可以自定义路径。安装时会自动配置环境变量(默认自动将安装路径添加path环境变量)。

WndowsCMDPowerShell都是命令行执行窗口,PowerShell Windows7 时代开始内置于 Windows 系统当中,可以看作是微软对CMD的大升级,两者并存于 Windows 系统中。

安装node好后,进入命令行执行窗口

输入node回车即可进入Node.js运行环境。

退出只需要按Ctrl+D键或者输入 .exit 回车即可。

 

在命令控制台中输入

node -v

如果能显示出版本,OK ,既已经配置好环境变量。如果显示“不是内部或外部命令”,则需要手动配置环境变量。配置环境变量过程不赘述。

用“记事本”建立一个文件test01.js

'use strict';

console.log("Hello World");

说明:第一行写上'use strict';是因为我们总是以严格模式运行JavaScript代码,避免各种潜在陷阱。

console.log(),主要是方便你调式javascript用的。可以让你在console中看到在页面中输出的内容。

注:console即控制台,主要特点是字符界面,和图形用户界面相对。

node运行

node d:\jsDemo\test01.js

例:实现九九乘法表,multiplication.js

var str = "";

for(var i=1;i<10;i++){

   for(var j =1;j<=i;j++){

       str += `${j}*${i}=${i*j} `;//字符串和变量的拼接

    }

   str +=`\r\n`;//实现换行操作

}

console.log(str);

node运行node d:\jsDemo\ multiplication.js

 

例:打印输出100以内的质数 prime.js

/**

 * 输出100以内的质数.

 */

for(vari=2;i<100;i++){

    for(var j=2;j<i;j++){

        if(i%j===0){

            break;

        }

    }

    if(i===j){

        console.log(j+"是质数");

    }

}

代码中有汉字,保存时请注意编码用UTF-8,参见下图,否则汉字显示不正常。

node运行node d:\jsDemo\prime.js

 

上面简要介绍了用node运行一个.js文件的方法。

下面介绍交互模式运行JavaScript代码

Node.js REPLRead-Eval-Print Loop,输入-求值-输出循环,也译为交互式解释器),为运行JavaScript脚本与查看运行结果提供了一种交互方式(交互模式)。

打开终端,键入node进入命令交互模式

出现提示符>后,就可以输入代码语句,回车后立即执行并显示结果

说明:为何出现undefined?这是因为node,每一行代码执行完,都会显示一下返回值,这里没有返回值,所以有个undefined

要结束Node的运行状态,按Ctrl+D键或者输入 .exit 回车即可。

 

node环境和浏览器执行JavaScript代码注意事项

JavaScript包括3个部分:ECMAScript-262BOMDOMBOM与浏览器相关,DOMHTML页面相关。Node.js中只是包括了ECMAScript。所以我们以前的一些关于BOM的操作和DOM的操作都是基于浏览器端运行的,在Node.js中是无法使用的。

 

附录:ECMAScriptBOMDOM

ECMAScriptJavaScript脚本语言规范,提供JavaScript语言(如数据类型、运算符、语句等方面)必须遵守的规则、细节和准则。发布一个新的ECMAScript 版本并不意味着所有现存的 JavaScript 引擎突然就拥有了这些新功能。这取决于负责那款 JavaScript 引擎的团体或组织是否要更新到最新的 ECMAScript 规范并采用其所带来的变化。

JavaScript 引擎——能够理解和执行 JavaScript 代码的程序或解释器。

BOM(Browser Object Model) 是指浏览器对象模型,是用于描述这种对象与对象之间层次关系的模型,浏览器对象模型提供了独立于内容的、可以与浏览器窗口进行互动的对象结构。其中代表浏览器窗口的Window对象是BOM的顶层对象,其他对象都是该对象的子对象。

有特殊双重身份的对象:

window对象既是ECMAScript规范中的Global对象,也是BOM中的顶级对象;window对象是相对于web浏览器而言的,依赖于浏览器。

global对象可以说是ECMAScript中对特别的一个对象了,因为不管你从什么角度上看,这个对象都是不存在的。从某种意义上讲,它是一个终极的“兜底儿对象”,换句话说呢,就是不属于任何其他对象的属性和方法,最终都是它的属性和方法。比如isNaN()parseInt()以及parseFloat()等,实际都是它的方法;还有就是常见的一些特殊值,如:NaNundefined等都是它的属性,以及一些构造函数ObjectArray等也都是它的方法。总之,记住一点:global对象就是“老祖宗”,所有找不到归属的就都是它的。

document对象既是BOM顶级对象的一个属性,也是DOM模型中的顶级对象。文档对象模型(Document Object Model,简称DOM)是针对HTMLXML文档的一个API((ApplicationProgramming Interface,应用程序编程接口)),现在已经成为表现和操作页面标记的真正的跨平台、语言中立的一种标准。

document对象是window对象的一个属性,是显示于窗口内的一个文档。而window对象则是一个顶层对象,它不是另一个对象的属性。document可以理解为文档,就是你的网页,而window是你的窗口,就是你的浏览器包含的。它们俩在没有框架的情况下可以说是等同的,在有框架的情况下就要区别对待了。

location对象既是window对象的属性,同时也是document对象的属性。换句话说,window.locationdocument.location引用的是同一个对象。





猜你喜欢

转载自blog.csdn.net/cnds123/article/details/80864191
今日推荐