欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页  >  IT编程

JavaScript 基础入门

程序员文章站 2022-08-11 21:43:15
JavaScript 基础入门 JavaScript 的组成 JS 由三部分组成，它们分别是：ECMAScript、DOM、BOM. ECMAScript 因为网景开发了JavaScript，一年后微软又模仿JavaScript开发了JScript，为了让JavaScript成为全球标准，几个公司联 ......

javascript 基础入门

　  javascript 的组成

　　　　js 由三部分组成，它们分别是：ecmascript、dom、bom.

　　　　ecmascript

　　　　    因为网景开发了javascript，一年后微软又模仿javascript开发了jscript，为了让javascript成为全球标准，几个公司联合ecma（european computer manufacturers association）组织定制了javascript语言的标准，被称为ecmascript标准。

　　　　dom

　　　　    文档对象模型（document object model）。dom把整个页面映射成一个多层节点结构。html 页面组成都是某种类型的节点，这些及节点又包含着不同类型的数据。

　　　　bom

　　　　    浏览器对象模型（browser object model）。可以访问浏览器窗口的 bom，对浏览器窗口进行操作。

　　　　ecmascript、dom、bom 之间的关系

　　　　    ecmascript 是用来操作平台或者运行平台上页面的工具，它构成了 js 核心的语法基础。

　　　　　 dom 是运行在平台上的页面，用来操作网页中的元素。

　　　　　 bom 是运行平台，bom 的规则(语法)是建立在 ecmascript 的规则之上，用来操作浏览器上的对象。

　　　　javascript 和 ecmascript 规范

　　　　     javascript 的标准化组织是 ecma ——这个欧洲信息与通信系统标准化协会提供基于 javascript 的标准化方案（ecma 原先是欧洲计算机制造商协会的首字母缩写）。这种标准化版本的 javascript 被称作 ecmascript，在所有支持该标准的应用中以相同的方式工作。公司可以使用开放标准语言来开发他们自己的 javascript 实现版本。ecmascript 标准在ecma－262规范中进行文档化。

　　　　　 ecma-262 标准也通过了 国际标准化组织（iso）的 iso-16262。你可以在这里找到该规范文件。 ecmascript 规范并没有描述文档对象模型（dom），该模型由 万维网联盟（w3c） 制定。dom 定义了html文件对象被脚本操作的方法。　　

　　　　javascript 文献 和 ecmascript 规范

　　　　     ecmascript 规范是实现 ecmascript 的一组需求;如果你想在 ecmascript 实现或引擎(如firefox 中的 spidermonkey 或 chrome 中的 v8)中实现符合标准的语言特性，那么它是非常有用的。

　　　　　  ecmascript 文档不是用来帮助脚本程序员的;使用 javascript 文档获取关于编写脚本的信息。

　　　　　  ecmascript 规范使用了 javascript 程序员可能不熟悉的术语和语法。尽管 ecmascript 中对语言的描述可能有所不同，但语言本身保持不变。javascript 支持 ecmascript 规范中列出的所有功能。

　　　　　  javascript 文档描述了适合 javascript 程序员的语言方面。

　　javascript 代码位置

　　    内部 javascript

1 <script>
2     // 在此编写 javascript 代码
3 </script>

　　       内部 javascript 通常写在 </body> 后面；或者<body></body>里面；再或者写在<head></head>中，比如：

1 <head>
2 window.onload = function () {
3 　　// 在此编写 javascript 代码
4 }
5 </head>

　　    推荐将 js 代码写在</body>后面或者<head>标签中。因为如果将 js 代码写在<body>中，那么当浏览器加载时，会按照从上到下的顺序解析代码，加载完 js 代码时，html 还没有载入，会破坏页面的渲染效果，js 代码无法实现与 html 的交互行为。

　　外部 javascript

　　　      将外部的 js 文件引入当前页面，类似于引入外部 css 文件，代码如下：

1 <script src="script.js"></script>

　　    这种方式是最好的，优点如下：

　　　     1. 可维护性：遍及不同 html 页面的 javascript 会造成维护问题，但把所有 js 文件都放在一个文件夹中维护起来就轻松多了。而且开发人员因为也能够在不触及 html 标记的情况下集中精力编写 js 代码

　　　　  2. 可缓存：浏览器能够根据具体的设置缓存链接的所有外部 js 文件，也就是说，如果有2个页面都使用同一个文件，那么这个文件只需下载一次。因此，最终结果就是能够加快页面加载速度。

　　　　  3.  适应未来：通过外部文件包含 js 无需使用 xhtml 或 hack 注释。html 和 xhtml 包含外部文件的语法是相同的。

　　 内联 javascript 处理器

　　　      示例：

1 <button onclick="createparagraph()">点我呀</button>

　　　　    强烈不推荐这样编写 js 代码，这将使 javascript 污染到 html，而且效率低下。

　　　　这三者中，一般在练习中使用内部 javascript，实际开发中使用 外部 javascript，几乎不使用 内联 javascript 处理器。

　  javascript 中的大小写

　　    js 是区分大小写的，并使用 unicode 字符集。如：

var a = 10;
var a = 11;

console.log(a);
console.log(a);

/*
   结果为
   10
   11
   由此可见，a 和 a 并不是同一个变量    
*/

　　javascript 中的注释

　　    就像 html 和 css，javascript 代码中也可以添加注释，浏览器会忽略它们，注释只是为你的同事（还有你，如果半年后再看自己写的代码你会说，这是什么垃圾玩意。）提供关于代码如何工作的指引。注释非常有用，而且应该经常使用，尤其在大型应用中。注释分为两类：

　　    在双斜杠后添加单行注释，比如：

// 啦啦啦，我是注释~~~

　　    在 /* 和 */ 之间添加多行注释，比如：

/* 
   多行注释1
   多行注释2
   多行注释3 
*/

　　javascript 代码执行顺序

　　    当浏览器执行到一段 js 代码时，通常会按照 从上到下，从左往右 的顺序执行代码。比如：

 1 var a = 10;
 2 var b = 11;
 3 console.log(a);
 4 console.log(b);
 5 console.log(a + b);
 7 /* 
 8    控制台显示的结果为：
 9    10
10    11       
11    21     
12 */

　　javascript 语句

　　    js 当中的语句表示 js 向宿主环境发送的命令。

　　　 例如下面的语句是向控制台中输出计算 10 + 2 的结果。

console.log(10 + 2); // 在每一条语句的后面都带有一个分号，表示语句结束

　　    当然 js 允许我们将分号省掉，但是无论是从代码的维护成本还是其他因素考虑，都不建议将每条语句后面的分号省略掉。

           需要注意的是，如果分号前面的语句为空，则没有意义。

　　javascript 的输出方式

　　    两种输出方式

// 第一种
console.log();

// 第二种
document.write();

　　    console.log(); 是将数据输出到浏览器的控制台中，一般用来调试 js 代码

　　    document.write(): 是将数据输出到网页的页面中，此方式可以直接解析标签。如：

document.write(<strong>内容</strong>);

　　    我们通常将 console.log(); 这种输出代码的形式称之为 代码打印

　　    并且，我们一般使用 console.log(); 来打印数据 而不是 document.write(); ，因为后者会影响页面布局，某些情况下，后者甚至会覆盖页面。

　　javascript 中的表达式

　　    一般情况下，表达式需要得到一个结果

　　    例如 11 + 3 就是一个表达式，我们在创建这个表达式的时候，就希望得到 11 + 3 的结果

console.log(11 + 3); // 将 11 + 3 的结果 打印到浏览器的控制台中　　

　　javascript 的弹窗

　　    js 中的弹窗有三种方式，它们分别是：

// 第一种，警告对话框，只有确认键
alert(); 
    // 没有返回值，返回 undefined; 不同的浏览器，显示不同

// 第二种，模态对话框(确认框)，有确认件和取消键
confirm(); 
    // 返回 boolean 类型：true、false  表示选择确定还是取消

// 第三种，对话框，对话框中包含一条文字信息，用来提示用户输入文字,有确认键和取消键以及输入框
prompt(); 
    // 如果文本输入框中为空,则返回一个空字符串，如果用户点击"取消"按钮，则返回null

　　    注意事项：

　　        alert 对话框使用在无需用户确认的情况下,否则应该使用其他类型的对话框

　　　　 confirm 对话框是弹出式，直到这个对话框被点击后, 后面的脚本才会运行. 请勿滥用此功能

　　　　 prompt 和 alert 以及类似的对话框都是模态窗口，它们会阻止用户激活程序其他部分的界面，直到该对话框关闭。因此，你不应该过度使用该方法。

查找并解决 javascript 代码的错误

　　错误类型

　　      一般来说，代码错误主要分为两种：

　　      语法错误：代码中存在拼写错误，将导致程序完全或部分不能运行，通常你会收到一些出错信息。只要熟悉语言并了解出错信息的含义，你就能够顺利修复它们。

　　          逻辑错误：有些代码语法虽正确，但执行结果和预期相悖，这里便存在着逻辑错误。这意味着程序虽能运行，但会给出错误的结果。由于一般你不会收到来自这些错误的提示，它们通常比语法错误更难修复。

　　解决 bug 的方法

　　     以下是几种常见的 bug 形式

　　       有报错

　　　     当在控制台中看到报错信息时，我们要观看它报的什么错，一般来说，我们可以很直观的看到报错信息。如：

cannot set property 'onclick' of null
// 不是onc1ick为nu11，是onclick不能加给nu1l

xxx is not defined
// xxx 未定义

　　        有报错但是代码没有问题

　　　     解决方法：反向查找

　　　　  发生这种情况时，我们要观看报错信息，如果在报错信息中没有找到来源，我们要根据报错的变量，向上逐步查找来源，如果没有找到，那就继续向上查找。

　　        没有报错，没有结果

　　        解决方法：反向查找

　　        解决方法：

　　　     解决 bug 的通用方式

　　　    使用 console.log("1"); 

　　　　 将 console.log("1"); 逐行使用，哪行代码打印不出来，哪行就出现了问题(最好的方式是，将 "1" 换位当前测试行的变量名，同时，变量名不要手写，而是将当前变量名 copy 一下)

　　        定位 bug 信息的工具(工具帮助找到定位 bug 的信息)

　　　　      打断点：让浏览器逐行执行代码

　　  　　    1. 使用 js 提供的关键字：debugger (debugger要配合控制台使用)

　　　　　   2. 使用浏览器提供的控制台 sources，在 sources 选项中找到要需要断点的文件，点击要进行断点的行号，之后一步步执行。

　　        以下有几种常见的错误类型

　　　　 syntaxerror: missing ; before statement (语法错误：语句缺少分号)

　　　　     这个错误通常意味着你漏写了一行代码最后的分号，但是此类错误有时候会更加隐蔽。例如如果我们把 checkguess() 函数中的这一行 :

let userguess = number(guessfield.value);
// 改成
let userguess === number(guessfield.value);

　　　　　　将抛出一个错误。因为系统认为你在做其他事情。请不要把赋值运算符（=，为一个变量赋值）和严格等于运算符（===，比较两个值是否相等，返回 true/false）弄混淆。

　　　　syntaxerror: missing) after argument list (语法错误：参数表末尾缺少括号)

　　　　     顾名思义：此错误通常意味着 函数 or 方法 调用或的结束括号忘写了。

　　　　syntaxerror: missing: after property id (语法错误：属性 id 后缺少冒号)

　　　　    js 对象的形式有错时通常会导致此类错误，如：

function checkguess() {
//写成了
function checkguess( {

　　　　    浏览器会认为我们试图将函数的内容当作参数传回函数。写圆括号时要小心！

　　　　syntaxerror: missing} after function body (语法错误：函数末尾缺少花括号)

　　　　    通常意味着函数或条件结构中丢失了一个花括号。如果我们将 checkguess() 函数末尾的花括号删除，就会得到这个错误。

　　　　syntaxerror: expected expression, got'string' (语法错误：得到一个 'string' 而非表达式)

　　　　↑↑↑↑↑↑ 或者 ↓↓↓↓↓↓

　　　　syntaxerror: unterminated string literal (语法错误：字符串字面量未正常结束)

　　　　    这个错误通常意味着字符串两端的引号漏写了一个。如果你漏写了字符串开始的引号，将得到第一条出错信息，这里的 'string' 将被替换为浏览器发现的意外字符。如果漏写了末尾的引号将得到第二条。

　　　　notes: 错误出现时，转到错误所在的行观察是否能发现问题所在。记住，错误不一定在那一行，甚至可能是由某个不相关的问题造成的！

上一篇： 全球前十大SSD模组厂排名：金士顿狂揽四分之一

下一篇： 2019年内存价格暴跌50% 明年下半年又要涨了

推荐阅读