本篇文章给大家带来了关于javascript的相关知识，其中主要介绍了关于基础语法的相关问题，JavaScript是互联网上最流行的脚本语言，下面就一起来看一下，希望对大家有帮助。

【相关推荐：javascript视频教程、web前端】

介绍

JavaScript是互联网上最流行的脚本语言，这门语言可用于 HTML 和 web，更可广泛用于服务器、PC、笔记本电脑、平板电脑和智能手机等设备。

JavaScript特点

• JavaScript 是一门脚本语言。
• JavaScript 是一种轻量级的编程语言。
• JavaScript 是可插入 HTML 页面的编程代码。
• JavaScript 插入 HTML 页面后，可由所有的现代浏览器执行。
• JavaScript 很容易学习。

JavaScript 已经由 ECMA（欧洲电脑制造商协会）通过 ECMAScript 实现语言的标准化。

用法

HTML 中的脚本必须位于 标签之间。脚本可被放置在 HTML 页面的和部分中。

通常，我们需要在某个事件发生时执行代码，比如当用户点击按钮时。如果我们把 JavaScript 代码放入函数中，就可以在事件发生时调用该函数。

实例1：head中的script函数

      
  
我的函数
 
一段话
 这是函数  

实例2：body中的script函数

     
  
我的函数
 
我的函数
 点击一下   

JavaScript也可以放在外部供调用，注意外部拓展名为.js。

实例3：外部调用JavaScript

外部调用.js

function myFunction() { document.getElementById('demo').innerHTML = "这是我的函数" }

调用外部script

     
  
一段文字
 尝试一下   

输出

JavaScript 可以通过不同的方式来输出数据：

• 使用window.alert()弹出警告框。
• 使用document.write()方法将内容写到 HTML 文档中。
• 使用innerHTML写入到 HTML 元素。
• 使用console.log()写入到浏览器的控制台。

实例1：aler()弹窗输出

     
  
alert输出
   

实例2：document.write()输出

     
  
document.write输出
   

实例3：写到HTMl文档

     
  
写到HTMl文档
  点击这里  

实例4：使用 console.log() 写入到浏览器的控制台

     
  
console.log()写入到浏览器的控制台
   

语法介绍

JavaScript 是一个脚本语言，它是一个轻量级，但功能强大的编程语言。

字面量

在编程语言中，一般固定值称为字面量。

• 数字（Number）字面量：可以是整数或者是小数，或者是科学计数(e)。如3.14，5.88等。
• 字符串（String）字面量：”可以使用单引号或双引号。如"Hello"，"Web"等
• 表达式字面量：用于计算的固定值。3 + 2.2,3.14 * 2等。
• 数组（Array：字面量：定义一个数组。如[1,2,3,4,5,6]。
• 对象（Object：字面量：定义一个对象。如{firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"}。
• 函数（Function）字面量：定义一个函数。如function myFunction(a, b) { return a * b;}。

注意，在JavaScript中，语句需要加结束符“；”。

JavaScrip变量

在编程语言中，变量用于存储数据值。JavaScript 使用关键字var来定义变量， 使用等号来为变量赋值，变量之间可以相互操作：

var y = false // 布尔值 var length = 16; // 数字 var points = x * 10; // 数字计算 var lastName = "Johnson"; // 字符串 var cars = ["Saab", "Volvo", "BMW"]; // 数组 var person = {firstName:"John", lastName:"Doe"}; // 对象字典

JavaScript函数

为了能够重复引用相同的功能，减少代码的书写和维护的方便，JavaScript提供函数功能，由关键字function引导：

function myFunc(a, b) { return a + b; // 返回a+b结果 }

JavaScript特点

相对其它语言，JavaScript具有下列特点：

• JavaScript对大小写敏感。
• JavaScript使用Unicode字符集。
• JavaScript推荐使用驼峰命名法定义变量，命名避免关键字。
• JavaScript属于弱类型语言，定义变量都是var关键字。

JavaScript注释（与Java相同）

// 这是代码：单句注释，在编辑器一般是ctrl + L键。

/* 这是代码 */：多行注释，在编辑器一般是ctrl + shift + L键。

语句

JavaScript语句向浏览器发出的命令，告诉浏览器该做什么。下面的JavaScript语句向id="demo"的 HTML元素输出文本"Hello World!" ：

document.getElementById("demo").innerHTML = "Hello World!";

与Python不同的是，JavaScript代码块都是在大括号中的，这点像极了Java。

Java标识符

大部分语言能够自动补全空格，我们建议在运算符两边加上空格，这样清晰美观，但是要注意在HTML中空格的是要留意用法的，切勿混谈。在JavaScript中，下面两句话是一样的：

var a = 10; var b=10;

与Python相似，JavaScript也是脚本语言，属于解释型。

对象

定义对象

任何事物都是对象，具有相同特点的事物中抽象出来的一个特点实例。如人类中的小明。

在JavaScript中，对象就是是属性变量的容器，类似Python中的字典，Java中的哈希映射，其中定义了对象的属性。

var people = { firstName: "Mike", lastName: "Smith", age: "18", address: "Beijing", job: "Student" };

以上就是对象定义，当然你也可以写作一行，我这样是为了美观，以后也强烈大家这样写。

访问对象属性

可以说 "JavaScript 对象是变量的容器"。但是，我们通常认为 "JavaScript 对象是键值对的容器"。键值对通常写法为key : value(键与值以冒号分割)，键值对在JavaScript对象通常称为对象属性。我们访问属性也是通过万能的" . "（大部分语言都是用的这个）。

     
  
访问类属性
  
   

两种访问方式,你可以使用 对象名 .property 或 对象名.["property"] 。

函数

函数是由事件驱动的或者当它被调用时执行的可重复使用的代码块。当调用该函数时，会执行函数内的代码。可以在某事件发生时直接调用函数（比如当用户点击按钮时），并且可由 JavaScript 在任何位置进行调用。

参数与返回值

在调用函数时，您可以向其传递值，这些值被称为参数，参数个数不限。

function myFunction(var1,var2)
{
代码
}

参数在调用时，应该严格按照其顺序传参，如下所示：

     
  
函数参数传递问题
 
点击下面按钮调用
 点击这里   

JavaScript函数允许有返回值，返回关键字为return。当函数返回值后，函数将停止执行，在return后面的语句将不会被执行。

实例：计算两个数的乘积并返回结果

     
  
计算两个数的值返回
 
   

变量

JavaScript变量分为两种：

• 全局变量：在函数外声明的变量是全局变量，网页上的所有脚本和函数都能访问它。
• 局部变量：在JavaScript函数内部声明的变量（使用 var）是局部变量，所以只能在函数内部访问它。

当我们向未声明的JavaScript变量分配值时，该变量将被自动作为window的一个属性。如下列语句：

name = "Mike";

将声明window的一个属性name。非严格模式下给未声明变量赋值创建的全局变量，是全局对象的可配置属性，可以删除。如：

var var1 = 1; // 不可配置全局属性 var2 = 2; // 没有使用 var 声明，可配置全局属性 console.log(this.var1); // 1 console.log(window.var1); // 1 delete var1; // false 无法删除 console.log(var1); //1 delete var2; console.log(delete var2); // true console.log(var2); // 已经删除 报错变量未定义

事件

描述

HTML事件是发生在HTML元素上的事情。当在 HTML 页面中使用JavaScript时， JavaScript可以触发这些事件。

HTML事件可以是浏览器行为，也可以是用户行为。以下是HTM 事件的实例：

• HTML 页面完成加载
• HTML input 字段改变时
• HTML 按钮被点击

通常，当事件发生时，你可以做些事情。在事件触发时JavaScript可以执行一些代码。HTML元素中可以添加事件属性，使用JavaScript代码来添加HTML元素。

• 单引号：<some-HTML-elementsome-event='JavaScript 代码'>
• 双引号：<some-HTML-elementsome-event="JavaScript 代码">

     
  
JavaScript事件处理两种方式
 
 点击查看时间1 
 点击查看时间2  

JavaScript通常是多行代码，比较差常见的就是通过事件属性调用。

     
  
JavaScript事件之属性调用
 
点击执行myFunc()函数
 点击这里 
   

后续会继续学习更多事件。

事件作用

事件可以用于处理表单验证，用户输入，用户行为及浏览器动作：

• 页面加载时触发事件
• 页面关闭时触发事件
• 用户点击按钮执行动作
• 验证用户输入内容的合法性

可以使用多种方法来执行 JavaScript 事件代码：

• HTML 事件属性可以直接执行 JavaScript 代码
• HTML 事件属性可以调用 JavaScript 函数
• 你可以为 HTML 元素指定自己的事件处理程序
• 你可以阻止事件的发生

字符串

字符串：一系列字符的集合。

var a = "abc"; var b = "Hello";

与Python类似，可以使用索引来访问字符串中的每个字符：

var c = b[1]; // e

length

该属性可以计算字符串的长度。

JavaScript也有一些特殊字符，例如当我们要打印引号时，需要加上“\”来进行转义，否则编译器无法解析。

字符串作为对象

通常，JavaScript字符串是原始值，可以使用字符创建： var firstName = "Mike"，但我们也可以使用new关键字将字符串定义为一个对象：var firstName = new String("Mike")，这点与Java类似。

==与===区别

1、对于 string、number 等基础类型，== 和 === 是有区别的

• a）不同类型间比较，==之比较"转化成同一类型后的值"看"值"是否相等，===如果类型不同，其结果就是不等。
• b）同类型比较，直接进行 "值" 比较，两者结果一样。

2、对于 Array,Object 等高级类型，== 和 === 是没有区别的

进行 "指针地址" 比较

3、基础类型与高级类型，== 和 === 是有区别的

• a）对于 ==，将高级转化为基础类型，进行 "值" 比较
• b）因为类型不同，=== 结果为 false

4、!= 为 == 的非运算，!== 为 === 的非运算

var num=1； var str="1"； var test=1； test == num //true　相同类型　相同值 test === num //true　相同类型　相同值 test !== num //false test与num类型相同，其值也相同,　非运算肯定是false num == str //true 　把str转换为数字，检查其是否相等。 num != str //false == 的 非运算 num === str //false 类型不同，直接返回false num !== str //true num 与 str类型不同 意味着其两者不等　非运算自然是true啦

运算符

JavaScript 还包含了基于某些条件对变量进行赋值的条件运算符。如：

variablename=(condition)?value1:value2

条件判断

在 JavaScript 中，我们可使用以下条件语句：

• if 语句- 只有当指定条件为 true 时，使用该语句来执行代码
• if...else 语句- 当条件为 true 时执行代码，当条件为 false 时执行其他代码
• if...else if....else 语句- 使用该语句来选择多个代码块之一来执行
• switch 语句- 使用该语句来选择多个代码块之一来执行

if语句

条件为true时才会执行代码。如：

      
  
这是if语句
 点击这里 
   

if...else语句

使用 if....else语句在条件为true时执行代码，在条件为false时执行其他代码。

      
  
这是if...else语句
 点击这里 
   

多重if..else语句

      
  
多重if...else语句
 点击这里 
   

switch语句

使用switch语句来选择要执行的多个代码块之一。如：

      
  
switch语句
 点击这里 
   

循环

JavaScript 支持不同类型的循环：

• for- 循环代码块一定的次数
• for/in- 循环遍历对象的属性
• while- 当指定的条件为 true 时循环指定的代码块
• do/while- 同样当指定的条件为 true 时循环指定的代码块

for循环

     
  
点击按钮循环代码5次。
 点击这里 
   

fo /in循环

      
  
点击下面的按钮，遍历对象person属性
 点击这里 
   

while循环

      
  
点击按钮，i小于5就会打印输出
 点击这里 
显示在这里
   

do/while循环

      
  
点击按钮，打印小于5的数
 点击这里 
   

for循环和while循环比较

      
  
这是funcOne
 点击funcOne 
funcOne在这里
 
这是funcTwo
 点击funcTwo 
funcTwo在这里
   

Break和Continue

break 语句用于跳出循环。continue 用于跳过循环中的一个迭代。

      
  
这是continue和break语句
 点击funcOne 
这是funcOne
 
 
 
 
 
 
 点击funcTwo 
这是funcTwo
   

typeof、null和undefined

使用typeof操作符来检测变量的数据类型。

在JavaScript中，数组是一种特殊的对象类型。 因此 typeof [1,2,3,4] 返回 object。

null表示空，也就是”什么也没有“。当使用typeof 检测时，返回object。对象可以使用undefined来清空。

      
  
one:
 
 
two:
 
   

constructor属性

constructor属性返回所有JavaScript变量的构造函数。可以使用constructor属性来查看对象是否为数组或者是否为日期 (包含字符串 "Date")等。

      
  
constructor属性返回变量或者构造函数
 
HRER
   

类型转换

JavaScript 变量可以转换为新变量或其他数据类型：

• 通过使用JavaScript函数
• 通过JavaScript自身自动转换

      
  
String()方法可以将数字转化为字符串
 
HERE
 
toString()方法可以将数字转化为字符串
 
HERE
   

一元运算符+

Operator+可用于将变量转换为数字：

      
  
typeof操作符返回变量或者表达式类型
 CLICK HERE ONE 
HERE
 CLICK HERE TWO 
HERE
   

正则表达式

正则表达式（英语：Regular Expression，在代码中常简写为regex、regexp或RE）使用单个字符串来描述、匹配一系列符合某个句法规则的字符串搜索模式。

search()

用于检索字符串中指定的子字符串，或检索与正则表达式相匹配的子字符串，并返回子串的起始位置。

      
  
收索字符串，匹配位置
 CLICK HERE ONE 
HERE
 CLICK HERE TWO 
HERE
   

replace()

用于在字符串中用一些字符替换另一些字符，或替换一个与正则表达式匹配的子串。

      
  
正则表达式replace()替换
 CLICK ONE 
Hello,Java
 CLICK TWO 
Hello,Java
   

正则表达式模式

test()

用于检测一个字符串是否匹配某个模式，如果字符串中含有匹配的文本，则返回true，否则返回false。

exec()

用于检索字符串中的正则表达式的匹配，该函数返回一个数组，其中存放匹配的结果。如果未找到匹配，则返回值为 null。

错误异常

错误类型

• 当 JavaScript 引擎执行 JavaScript 代码时，会发生各种错误。
• 可能是语法错误，通常是程序员造成的编码错误或错别字。
• 可能是拼写错误或语言中缺少的功能（可能由于浏览器差异）。
• 可能是由于来自服务器或用户的错误输出而导致的错误。
• 当然，也可能是由于许多其他不可预知的因素。

try...catch

try语句允许我们定义在执行时进行错误测试的代码块，catch语句允许我们定义当try代码块发生错误时，所执行的代码块。

throw

throw语句允许我们创建自定义错误。正确的技术术语是：创建或抛出异常（exception）。如果把throw与try和catch一起使用，那么您能够控制程序流，并生成自定义的错误消息。

      
  
请输入一个5-10之间的数字
  CLICK 
HERE
   

函数调用

JavaScript 函数有 4 种调用方式，每种方式的不同在于this的初始化。一般而言，在Javascript中，this指向函数执行时的当前对象。

调用1：作为一个函数调用

one

function myFunc(a, b) { return a * b; } myFunc(1, 2);

two

function myFunc(a, b) { return a * b; } window.myFunc(1, 2);

调用2：函数作为方法调用

      
  
函数作为方法调用
 
HERE
   

调用3：使用构造函数调用函数

      
  
该实例中，myFunc()是函数的构造函数
 
   

调用4：作为函数方法调动函数

      
  
作为函数方法调动函数
 
HERE
   

闭包

内嵌函数

实际上，在JavaScript中，所有函数都能访问它们上一层的作用域。JavaScript支持嵌套函数，嵌套函数可以访问上一层的函数变量。内嵌函数plus()可以访问父函数的counter变量：

      
  
内嵌函数
 
HERE
   

闭包

函数的自我调用称为bibao

      
  
局部计数器
 计数器 
HERE
   

【相关推荐：javascript视频教程、web前端】

以上是归纳整理JavaScript基础之语法的详细内容。更多信息请关注PHP中文网其他相关文章！