JavaScript 之基础知识

Posted 迷之月夜

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JavaScript 之基础知识相关的知识，希望对你有一定的参考价值。

JavaScript 基础知识

javascript 是属于网络的脚本语言！

JavaScript 被数百万计的网页用来改进设计、验证表单、检测浏览器、创建cookies，以及更多的应用。

JavaScript 是因特网上最流行的脚本语言。

JavaScript 很容易使用！你一定会喜欢它的！

 

JavaScript 简介

在数百万张页面中，JavaScript 被用来改进设计、验证表单、检测浏览器、创建cookies，等等等等。JavaScript 是因特网上最流行的脚本语言，并且可在所有主要的浏览器中运行，比方说 Internet Explorer、 Mozilla、Firefox、Netscape、和 Opera。

什么是 JavaScript？
  • JavaScript 被设计用来向 html 页面添加交互行为。
  • JavaScript 是一种脚本语言（脚本语言是一种轻量级的编程语言）。
  • JavaScript 由数行可执行计算机代码组成。
  • JavaScript 通常被直接嵌入 HTML 页面。
  • JavaScript 是一种解释性语言（就是说，代码执行不进行预编译）。
  • 所有的人无需购买许可证均可使用 JavaScript。

JavaScript 能做什么？

JavaScript 为 HTML 设计师提供了一种编程工具
HTML 创作者往往都不是程序员，但是 JavaScript 却是一种只拥有极其简单的语法的脚本语言！几乎每个人都有能力将短小的代码片断放入他们的 HTML 页面当中。
JavaScript 可以将动态的文本放入 HTML 页面
类似于这样的一段 JavaScript 声明可以将一段可变的文本放入 HTML 页面：document.write("<h1>" + name + "</h1>")
JavaScript 可以对事件作出响应
可以将 JavaScript 设置为当某事件发生时才会被执行，例如页面载入完成或者当用户点击某个 HTML 元素时。
JavaScript 可以读写 HTML 元素
JavaScript 可以读取及改变 HTML 元素的内容。
JavaScript 可被用来验证数据
在数据被提交到服务器之前，JavaScript 可被用来验证这些数据。
JavaScript 可被用来检测访问者的浏览器
JavaScript 可被用来检测访问者的浏览器，并根据所检测到的浏览器，为这个浏览器载入相应的页面。
JavaScript 可被用来创建 cookies
JavaScript 可被用来存储和取回位于访问者的计算机中的信息。

真实的名称是 ECMAScript

JavaScript 的正式名称是 "ECMAScript"。 这个标准由 ECMA 组织发展和维护。ECMA-262 是正式的 JavaScript 标准。这个标准基于 JavaScript (Netscape) 和 JScript (Microsoft)。Netscape (Navigator 2.0) 的 Brendan Eich 发明了这门语言，从 1996 年开始，已经出现在所有的 Netscape 和 Microsoft 浏览器中。ECMA-262 的开发始于 1996 年，在 1997 年 7 月，ECMA 会员大会采纳了它的首个版本。在 1998 年，该标准成为了国际 ISO 标准 (ISO/IEC 16262)。这个标准仍然处于发展之中。

 

如何实现 JavaScript

HTML 的 <script> 标签用于把 JavaScript 代码插入 HTML 页面当中。

方式一：

<script language="javascript" type="text/javascript">
    document.write("这是由javascript输出的文字");
</script>

方式二：

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

如何与老的浏览器打交道

那些不支持 JavaScript 的浏览器会把脚本作为页面的内容来显示。为了防止这种情况发生，我们可以使用这样的 HTML 注释标签：

<script type="text/javascript">

<!--

  document.write("Hello World!");

//—>

</script>

注释行末尾的两个正斜杠是 JavaScript 的注释符号，它会阻止 JavaScript 编译器对这一行的编译。

 

把 JavaScript 放置到何处

当页面载入时，会执行位于 body 部分的 JavaScript。当被调用时，位于 head 部分的 JavaScript 才会被执行。

你可以在文档中放置任何数量的脚本，因此你既可以把脚本放置到 body，又可以放置到 head 部分。

需要注意的是：

在一个HTML文档中，所有位置的脚本代码，包括引入的外部js代码，他们都将成为一个整体。你可以把他们想象成在一个类中。因此，有时来自不同文件的重名方法或重名变量，会导致意想不到的错误发生。

 

JavaScript 语句

JavaScript 是由浏览器执行的语句序列。这些命令的作用是告诉浏览器要做的事情。通常要在每行语句的结尾加上一个分号。大多数人都认为这是一个好的编程习惯，而且在 web 上的 JavaScript 案例中也常常会看到这种情况。

分号是可选的（根据 JavaScript 标准），浏览器把行末作为语句的结尾。正因如此，常常会看到一些结尾没有分号的例子。通过使用分号，可以在一行中写多条语句。

 

JavaScript 变量

JavaScript 变量名称的规则：

  • 应该起一些具有意义的，描述性的，让人望文生义的变量名
  • 变量对大小写敏感（y 和 Y 是两个不同的变量）【JavaScript 对大小写敏感】
  • 变量必须以字母或下划线开始
  • 变量名不能使用系统的关键字或保留字

JavaScript 变量的类型：

JavaScript 是一种弱类型的语言，因此变量的类型由赋值号右边的数据所决定。

 

JavaScript 运算符

算术运算符：+  –  *   /  %  ++  --  ，其中+号还被重载用于拼接字符串，另外，任何类型+上字符串都是字符串。

赋值运算符：=  +=  -=  *=  /=  %=

比较运算符：==  ===  !=  >  <  >=  <=

逻辑运算符：&&  ||  !

条件运算符：？ :

 

JavaScript 分支语句

传统的 if 。。else，if 。。else if 。。else 的嵌套都是可行的。

switch（n）中的 n 可以是表达式，但通常是变量，case 结构中也需要使用 break 分隔。

 

JavaScript 消息框

可以在 JavaScript 中创建三种消息框：警告框、确认框、提示框。

警告框经常用于确保用户可以得到某些信息。当警告框出现后，用户需要点击确定按钮才能继续进行操作。

alert("文本")

 

确认框用于使用户可以验证或者接受某些信息。当确认框出现后，用户需要点击确定或者取消按钮才能继续进行操作。如果用户点击确认，那么返回值为 true。如果用户点击取消，那么返回值为 false。

confirm("文本")

 

提示框经常用于提示用户在进入页面前输入某个值。当提示框出现后，用户需要输入某个值，然后点击确认或取消按钮才能继续操纵。如果用户点击确认，那么返回值为输入的值。如果用户点击取消，那么返回值为 null。

prompt("文本","默认值")

 

JavaScript 函数

将脚本编写为函数，就可以避免页面载入时执行该脚本。函数包含着一些代码，这些代码只能被事件激活，或者在函数被调用时才会执行。你可以在页面中的任何位置调用脚本（如果函数嵌入一个外部的 .js 文件，那么甚至可以从其他的页面中调用）。

建议将函数在页面起始位置定义，即 <head> 部分。

创建函数的语法：

function 函数名() { 代码．．． }

function 函数名(var1,var2,...,varX) { 代码．．． }

JavaScript 变量的生存期

当您在函数内声明了一个变量后，就只能在该函数中访问该变量。当退出该函数后，这个变量会被撤销。这种变量称为本地变量。您可以在不同的函数中使用名称相同的本地变量，这是因为只有声明过变量的函数能够识别其中的每个变量。

如果您在函数之外声明了一个变量，则页面上的所有函数都可以访问该变量。这些变量的生存期从声明它们之后开始，在页面关闭时结束。

 

JavaScript 循环

在编写代码时，你常常希望反复执行同一段代码。我们可以使用循环来完成这个功能，这样就用不着重复地写若干行相同的代码。

JavaScript 有两种（也只有2种）不同种类的循环：
for
将一段代码循环执行指定的次数
while
当指定的条件为 true 时循环执行代码

 

 

语法格式和java或.NET是一样的。

使用什么语句可以直接跳出多重循环？

continue 语句可以在符合一定的条件下结束本轮循环，直接进行下一轮循环。

break  语句可以在符合一定的条件下直接结束循环，代码会跳转到循环外靠后的最近一条语句继续向下执行。

在 .NET 中，goto 语句可以直接定位到指定的标记为继续执行代码，而 javascript 中是没有 goto 语句的，那么怎么直接跳出多重循环呢？

看下面的示例：

outerloop: // 命名外圈语句  
for(var i=0; i<10; i++)  
{  
    innerloop://命名内圈语句  
    for(var j=0; j<10; j++)  
    {  
        // 跳出内圈循环  
        if(j>3){break;}  
        // 跳出内圈循环  
        if(i==2){break innerloop;}  
        // 跳出外圈循环  
        if(i==4){break outerloop;}  
        document.write("i = "+i+" , j = "+j+"<br />");  
    }  
}  
document.write("final"+" i = "+i+" , j = "+j);

可以在循环外设置标记为，然后使用 break 或 continue 加上标记名直接跳出循环。这里要注意，和其他语言不同，JS中一旦跳出，程序是不会继续从标记位处再度往下执行代码的，而是直接执行最外层循环之后的 code，如果后面没有 code，那么程序就此结束。

 

JavaScript For...In 声明

For...In 声明用于遍历数组或者对象的属性（对数组或者对象的属性进行循环操作）。[也是 for 循环家族的一员]

下例是使用 for..in 遍历一个数组对象，注意这里 .NET 中 foreach 的区别。

var x
var mycars = new Array();
mycars[0] = "Saab";
mycars[1] = "Volvo";
mycars[2] = "BMW";
 
for (x in mycars)
{
    document.write(mycars[x] + "<br />");
}

 

JavaScript 事件

事件是可以被 JavaScript 侦测到的行为。

JavaScript 使我们有能力创建动态页面。事件是可以被 JavaScript 侦测到的行为。

网页中的每个元素都可以产生某些可以触发 JavaScript 函数的事件。比方说，我们可以在用户点击某按钮时产生一个 onClick 事件来触发某个函数。事件在 HTML 页面中定义。

事件举例：
  • 鼠标点击
  • 页面或图像载入
  • 鼠标悬浮于页面的某个热点之上
  • 在表单中选取输入框
  • 确认表单
  • 键盘按键

注意：事件通常与函数配合使用，当事件发生时函数才会执行。

 

onload 和 onUnload

当用户进入或离开页面时就会触发 onload 和 onUnload 事件。onload 事件常用来检测访问者的浏览器类型和版本，然后根据这些信息载入特定版本的网页。onload 和 onUnload 事件也常被用来处理用户进入或离开页面时所建立的 cookies。例如，当某用户第一次进入页面时，你可以使用消息框来询问用户的姓名。姓名会保存在 cookie 中。当用户再次进入这个页面时，你可以使用另一个消息框来和这个用户打招呼："Welcome John Doe!"。

 
onFocus, onBlur 和 onChange

onFocus、onBlur 和 onChange 事件通常相互配合用来验证表单。

下面是一个使用 onChange 事件的例子。用户一旦改变了域的内容，checkEmail() 函数就会被调用。

<input type="text" size="30" id="email" onchange="checkEmail()">
 
onSubmit

onSubmit 用于在提交表单之前验证所有的表单域。

下面是一个使用 onSubmit 事件的例子。当用户单击表单中的确认按钮时，checkForm() 函数就会被调用。假若域的值无效，此次提交就会被取消。checkForm() 函数的返回值是 true 或者 false。如果返回值为true，则提交表单，反之取消提交。

<form method="post" action="xxx.htm" onsubmit="return checkForm()">

 

onMouseOver 和 onMouseOut

onMouseOver 和 onMouseOut 用来创建“动态的”按钮。

下面是一个使用 onMouseOver 事件的例子。当 onMouseOver 事件被脚本侦测到时，就会弹出一个警告框：

<a href="http://www.w3school.com.cn" onmouseover="alert(\'An onMouseOver event\');return false">
<img src="w3school.gif" width="100" height="30"></a>

 

JavaScript Try...Catch 语句

JavaScript - 捕获错误

当我们在网上冲浪时，总会看到带有 runtime 错误的 Javascript 警告框，同时会询问我们“是否进行 debug？”。像这样的错误信息或许对开发人员有用，对用户则未必。当错误发生时，他们往往会选择离开这个站点。

有两种在网页中捕获错误的方法：

  • 使用 try...catch 语句。(在 IE5+、Mozilla 1.0、和 Netscape 6 中可用)
  • 使用 onerror 事件。这是用于捕获错误的老式方法。(Netscape 3 以后的版本可用)

注意：chrome、opera 和 safari 浏览器不支持 onerror 事件。【不建议使用此方式】

下一个例子会显示一个确认框，让用户来选择在发生错误时点击确定按钮来继续浏览网页，还是点击取消按钮来回到首页。

<html>
<head>
<script type="text/javascript">
var txt=""
function message()
{
    try
    {    
        adddlert("Welcome guest!");
    }
    catch(err)
    {
        txt = "There was an error on this page.\\n\\n";
        txt += "Click OK to continue viewing this page,\\n";
        txt += "or Cancel to return to the home page.\\n\\n";
    if(!confirm(txt))
    {
        document.location.href="http://www.w3school.com.cn/";
    }
  }
}
</script>
</head>
<body>
<input type="button" value="View message" onclick="message()" />
</body>
</html>

 

JavaScript Throw 声明

throw 声明的作用是创建 exception（异常）。你可以把这个声明与 try...catch 声明配合使用，以达到控制程序流并产生精确错误消息的目的。

下面的实例的作用是测定变量 x 的值。如果 x 的值大于 10 或者小于 0，错误就会被抛出 (throw)。这个错误被 catch 的参数捕获后，就会显示出自定义的出错信息。

<html>
<body>
<script type = "text/javascript">
var x = prompt("Enter a number between 0 and 10:","");
try
{ 
    if(x>10) 
        throw "Err1";
    else if(x<0)
        throw "Err2";
} 
catch(er)
{
    if(er == "Err1") 
        alert("Error! The value is too high");
    if(er == "Err2") 
        alert("Error! The value is too low");
}
</script>
</body>
</html>

 

JavaScript 特殊字符

你可以在 JavaScript 中使用反斜杠来向文本字符串添加特殊字符。

反斜杠用来在文本字符串中插入省略号、换行符、引号和其他特殊字符。

请看下面的 JavaScript 代码：

var txt="We are the so-called "Vikings" from the north."
document.write(txt)

在 JavaScript 中，字符串使用单引号或者双引号来起始或者结束。这意味着上面的字符串将被截为：We are the so-called。

要解决这个问题，就必须把在 "Viking" 中的引号前面加上反斜杠 (\\)。这样就可以把每个双引号转换为字面上的字符串。

var txt="We are the so-called \\"Vikings\\" from the north."
document.write(txt)

现在 JavaScript 就可以输出正确的文本字符串了：We are the so-called "Vikings" from the north。

 

JavaScript 指导方针

JavaScript 对大小写敏感

名为 "myfunction" 的函数和名为 "myFunction" 的函数是两个不同的函数，同样，变量 "myVar" 和变量 "myvar" 也是不同的。JavaScript 对大小写敏感 - 所以当您创建或使用变量、对象及函数时，请注意字符的大小写。

 

空格

JavaScript 会忽略多余的空格。所以您可以在代码中添加适当的空格，使得代码的可读性更强。下面的两行是等效的：

name="Hege"
name = "Hege"

 

换行

您可以在文本字符串内部使用反斜杠对代码进行折行。下面的例子是正确的：

document.write("Hello \\
World!")

但是不能像这样折行：

document.write \\
("Hello World!")

以上是关于JavaScript 之基础知识的主要内容，如果未能解决你的问题，请参考以下文章

selenium之调用Javascript

VSCode自定义代码片段12——JavaScript的Promise对象

VSCode自定义代码片段12——JavaScript的Promise对象

30秒就能看懂的JavaScript 代码片段

前端基础之JavaScript

常用Javascript代码片段集锦