JavaScript基础教程：从环境搭建到核心语法全解析

JavaScript是一种描述性脚本语言，学习难度适中，只要用心掌握，即可熟练运用。通常在学习HTML后，通过JavaScript可以实现网页与用户之间更丰富的交互效果。

JavaScript概述与执行原理

一、JavaScript概述

1. 什么是JavaScript

JavaScript是一种基于对象和事件驱动的脚本语言，具备安全性，主要用于描述网页行为。

2. JavaScript的主要特点

JavaScript主要用于为HTML页面添加交互行为。

作为一种脚本语言，其语法结构与Java相似。

JavaScript通常用于编写客户端脚本。

JavaScript属于解释型语言，无需预先编译即可执行。

3. JavaScript的组成结构

ECMAScript标准：规定了所有属性、方法和对象的标准。

BOM（浏览器对象模型）：用于与HTML页面进行交互。

DOM（文档对象模型）：用于访问和操作HTML文档结构。

4. JavaScript的基本结构


<script language=”javascript” type=”text/javascript”>

</script>

Language=”javascript”用来表示使用的语言是javascript

5. JavaScript的执行原理

1. 浏览器客户端向服务器发送请求（例如在地址栏输入网址）。

2. 数据处理：服务器端处理包含JavaScript的页面。

3. 发送响应：服务器将处理后的HTML文件发送回客户端，浏览器从上至下逐条解析HTML标签和JavaScript代码，最终呈现页面效果给用户。

网页中引入JavaScript的方式

二、在网页中引入JavaScript的方式

1. 使用<script>标签直接嵌入。

2. 使用外部JavaScript文件。

若希望多个页面实现相同的JavaScript效果，通常使用扩展名为.js的外部文件。

引用.js扩展名文件的方法如下：

注意：外部.js文件中不能包含<script></script>标签。

3. 直接在HTML标签中编写（内联方式）。


<input name='btn' type=”button” value=”弹出消息框” onclick=”javascript:alert(“欢迎你”);”/>

JavaScript核心语法详解

三、JavaScript核心语法

1. 变量的声明和赋值

变量声明需使用var关键字，命名规范与Java类似。例如：Var num=1；

在JavaScript中，变量可以不声明直接使用，但强烈不推荐这种做法。

2. 数据类型

Undefined（未定义类型）

Null（空类型）

Number（数字类型）

String（字符串类型）

Boolean（布尔类型）

3. undefined和null的区别

null表示“没有对象”，即该处不应该有值。典型用法包括：

（1）作为函数的参数，表示该函数的参数不是对象。

（2）作为对象原型链的终点。

Object.getPrototypeOf (Object.prototype) // 返回 null

undefined表示“缺少值”，即此处应该有一个值，但尚未定义。典型用法包括：

（1）变量被声明但未赋值时，其值等于undefined。

（2）调用函数时，未提供应有的参数，该参数等于undefined。

（3）对象中未赋值的属性，其值为undefined。

（4）函数没有返回值时，默认返回undefined。

4. 判定结果为假的6种情况

null, false, undefined, 0, "", NaN

5. 字符串的一些常用方法

toString(); 返回字符串。

toLowerCasee(); 把字符串转换为小写。

toUpperCase(); 把字符串转换成大写。

charAt(index); 返回指定位置的字符。

indexOf(str,index); 查找指定字符串在字符串中首次出现的位置。

Substring(index,index); 返回位于指定索引index1和index2之间的字符串（包括index1，不包括index2）。

Split(str); 将字符串分割为字符数组。

6. 创建数组并为数组赋值的三种方式

01. Var num=('1','2');

02. var num=new Array(2);

Num[0]=1;

Num[1]=2;

03. var num=['1','2'];

数组的常用方法和属性： Length：设置或返回数组中元素的数目。

Join(): 把数组的所有元素放入一个字符串，通过分隔符进行分割。

Sort(): 对数组进行排序。

Push(): 向数组末尾添加一个或多个元素，并返回新的长度。

//01.方式一：创建数组,并给数组赋值

// var fruit = new Array('apple', 'orange', 'peach', 'bananer');

//02.方式二：先创建数组，后通过下标给数组赋值

var fruits = new Array(4);

fruits[0] = 'apple';

fruits[1] = 'orange';

fruits[2] = 'peach';

fruits[3] = 'bananer';

//03方式三：和方式一类似只不过改变了符号

//var fruitss = new Array['apple', 'orange', 'peach', 'bananer'];

//04.访问数组中下标为3的数据

document.write(fruits[0]);

//05通过数组的join方法把元素放到字符串中并用指定分隔符进行分割

var result = fruits.join(',');

//06通过sort方法对数组进行排序

fruits.sort();

//06.向末尾添加一个或多个元素，最后返回该数组的新长度

var length= fruits.push('wert','foot');

document.write('\n' + length);

//07.遍历数组

for(var item in fruits)

{

alert(fruits[item]);

}

</script>

7. 运算符

JavaScript概述与执行原理

程序调试方案

8. 程序调试

方案一：在VS中调试

步骤：01. 将要调试的页面设置成起始页

02. 设置断点

03. 按F5启动调试

方案二：chrome浏览器调试

步骤：01. 点击F12，将工具调出

02. 设置断点

03. 刷新页面

方案三：IE浏览器

步骤：01. F12，开发人员工具

02. 切到脚本选项卡

03. 设置断点

04. 启动调试

05. 刷新

JavaScript函数定义与调用

四、JavaScript中的函数

1. 常用的系统函数

01. parseInt（“字符串”）；

parseInt（）函数首先查看位置为0处的字符，判断其是否为有效数字。如果不是则返回NaN，不再执行其他操作；但如果该字符是有效参数，则该函数将查看位置为1处的字符，进行同样的测试，这一过程将持续到发现该字符是有效字符为止，此时将之前的字符串转换成数字。

eg：

var num1=parseInt（“78.9”）//返回值为78

var num2=parseInt（“afa78.9”）//返回值为NaN

02. parseFloat（“字符串”）；

其用法和parseInt类似，只不过字符串中出现的第一个点将被认为是有效字符。

eg:

var num1=parseInt（“78.9”）//返回值为78

var num2=parseInt（“afa78.9”）//返回值为NaN

2. 自定义函数

在JavaScript中，自定义函数由function关键字、函数名、一组参数以及置于括号中待执行的JavaScript语句组成。

下面来看一看语法：

function 函数名(参数1，参数2,..)

{

//JavaScript语句

[return 返回值]

}

function是定义函数的关键字，必须存在。

参数1和参数2是该函数的参数，因为JavaScript本身是弱类型语言，所以在给定参数时没有必要提供类型。

{}定义函数的开始和结尾。

return语句用来规定函数返回的值。

2. 调用函数

要执行一个函数，首先必须调用该函数，需指定函数名及其后的参数。

eg：


<script type=”text/javascript”>

function show(){



}

show();

</script>

3. 匿名函数

匿名函数即没有名字的函数，也叫闭包函数(closures)，允许临时创建一个没有指定名称的函数。它最常用作回调函数(callback)参数，许多新手对此了解不足。这里来分析一下。

function 函数名(参数列表){函数体;}

如果是创建匿名函数，则应为：

function(){函数体;}

因为是匿名函数，所以一般也不会有参数传给它。

为什么要创建匿名函数？在什么情况下会使用到匿名函数？匿名函数主要有两种常用场景：一是回调函数，二是直接执行函数。

eg：


<script language="javascript">
var a = "a";
(function(){
  var a="b";
  alert(a);
})();
alert(a);
</script>

在上面这段代码中，会顺序输出两个alert框。第一个alert框内容为b，第二个为a。因为该Script标签中有一个匿名方法时自调用的，所以首先弹出b，然后碰到匿名方法后的alert（a）则弹出a。

以上这篇JavaScript基础教程——入门必看篇就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持本站。

JavaScript入门教程：核心语法、数据类型与函数详解

JavaScript概述与执行原理

网页中引入JavaScript的方式

JavaScript核心语法详解

程序调试方案

JavaScript函数定义与调用

实用工具推荐