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

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

介绍

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

JavaScript特点

立即学习“Java免费学习笔记（深入）”；

• 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特点

立即学习“Java免费学习笔记（深入）”；

相对其它语言，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-element some-event='JavaScript 代码'>
• 双引号：some-HTML-element some-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类似。

==与===区别

VisualizeAI

用AI把你的想法变成现实

下载

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前端】