JavaScript入门教程（基础知识讲解）

介绍

是什么？

是一种web前端的描述语言，也是一种基于对象（）和事件驱动（Event Driven）的、安全性好的脚本语言。它运行在客户端从而减轻服务器的负担。

的特点：

主要用来向html页面中添加交互行为
是一种脚本语言，语法和C语言系列语法类似，属于弱语言类型
一般用来编写客户端脚本，如node.js例外
是一种解释性语言，边执行边解释无需另外编译

在此之间我们就已经学过了HTML+CSS，那么我们就需要重新了解下web前端：

HTML：从语义的角度，描述页面结构
CSS：从审美的角度，描述样式（美化页面）
：从交互的角度，描述行为（提升用户体验）

历史背景介绍

布兰登 • 艾奇（Brendan Eich，1961年～），1995年在网景公司，发明的。

一开始叫做Live ，但是由于当时Java语言特别火，所以为了傍上打牌，就改名为。Java和的关系，就如同北大和北大青鸟的关系。

在同时期还有其他的网页语言，比如、J 等等，后来都被打败了，所以现在的浏览器中，只运行一种脚本语言就是。

的用途

的用途是解决页面交互和数据交互，最终目的是峰峰客户端效果以及数据的有效传递。

实现页面交互，提升用户体验实现页面特效。即js操作html的dom结构或操作样式
客户端表单验证，即在数据送达服务端之前进行用户提交信息及时有效地验证，减轻服务器压力。即数据交互

和ECMA 的关系

ECMA 是一种由Ecma国际（前身为欧洲计算机制造商协会）制定的一种标准。

是由公司开发而成的，问题是不便于其他的公司拓展和使用。所以ECMA组织牵头执行了的标准，取名为ECMA 。

简单的说，ECMA 不是一门语言，而是一个标准。符合这个标准的比较常见的有：、Action (Flash)。就是说当你的学完了，那么Flash程序也就轻而易举了。

ECMA 在2015年6月，发布了ECMA 6版厄本那，语言能力更强（也包含了很多新特性）。但是，浏览器的厂商不能那么快追上这个标准。

更多信息请点击：

入门易学性

对初学者比较友好
是有界面效果的
是弱语言，变量只需要var来声明。而Java中变量的声明，要根据变量的类型来定义

比如Java中需要定义以下变量：

int a;
float a;
double a;
String a;
boolean a;

但是在中，只用定义一个变量：

var a;

不用关心其他的事情，更关心自己的业务

的组成

基础分为三个部分：

ECMA ：的语法标准。包括变量、表达式、运算符、函数、if语句、for语句等
DOM：操作网页上的元素的API。比如让盒子移动、变色、轮播图等
BOM：操作浏览器部分功能的额API。比如让浏览器自动滚动

PS：重复性的劳动几乎为0，基本都是创造性的劳动。而不像HTML、CSS这种的margin、padding都是机械重复劳动。

第一个实例

引入的3种方式

外链式
行内式
内部式

外链式

也就是和我们引入外部CSS文件一样，在head头部引入我们自定义脚本：

<  src=\"01%20index.js\">

行内式

因为我们的是可以操作我们的标签的，也就是说我们可以把标签当成DOM（Document Module），所以我们就可以使用行内式来引入：

<body>
    <p id=\"p1\"  =\"clickHandler()\">你好， !</p>
</body>

但是我们发现给了p标签id和属性后，依然是没有任何效果，所以，我们需要讲一下我们的内部式

内部式

在我们写的HTML代码中，拿到浏览器那边，浏览器是从上到下开始解析的，那么我们需要把写在最后面，等全部加载成功后，再来加载：

<  type=\"text/ \">
    
</ >

我们的内部式就是这样引入的，那么我们现在可以去写我们的第一个实例了

Hello, !

当我们点击P标签的时候，弹框输出：Hello, !

<!DOCTYPE html>
<html>
    <head>
        <  charset=\"UTF-8\">
        < ></ >
    </head>
    <body>
        <p id=\"p1\"  =\"clickHandler()\">你好， !</p>
    </body>
    <  type=\"text/ \">
        function clickHandler(){
            alert(\'Hello, !\')
        }
    </ >
</html>

alert语句

alert（英文翻译为“警报”）的用途：弹出警告框

alert(\'这是我的第一个 程序！\')

当我们保存后在浏览器刷新，那么就会出现这样的效果：

的语法规则

学习程序，是有规律可循的，就是程序中有相同的部分，这些部分就是一种规定，不能更改，我们称为：语法

对换行、缩进、空格不敏感

备注：每一条语句末尾都要加上分号，虽然分号不是必须添加的，但是为了程序今后要压缩，如果不加分号，那么压缩后的程序将不能运行

所有的符号，都是英语的。比如括号、引号、分号
的注释：

单行注释：

// 我是注释

多行注释：

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

在网页中输出信息的写法

在中，网页输出新的写法有三种：

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

使用window.alert()输出警告框

windos.alert(""),弹框效果，window是BOM对象，指的是整个浏览器，可以省略不写。弹框比较突然，对用户来说体验不是太好，基本上就是测试代码使用的：

<  type=\"text/ \">
    window.alert(\'星儿今天很漂亮\')  # window是可以忽略的
    alert(\'星儿今天很漂亮\')
</ >

使用document.write()方法将内容写到HTML文档中

document.write("")会直接在页面上输出内容

<  type=\"text/ \">
    document.write(\'星儿今天很漂亮\')
</ >

既然我们说过，是用来操作DOM的，那么我们就可以来尝试一下：

<  type=\"text/ \">
    document.write(\"星儿今天很漂亮\")
    document.write(\"<h1>我是一级标题</h1>\")
</ >

使用innerHTML写入到HTML元素

<!DOCTYPE html>
<html>
    <head>
        <  charset=\"UTF-8\">
        < ></ >
    </head>
    <body>
        <h1 id=\"demo1\">我是一级标题</h1>
        <button type=\"button\"  =\"changeContent()\">更改内容</button>
    </body>
    <  type=\"text/ \">
        function changeContent(){
            document.getElementById(\"demo1\").innerHTML = \"通过innerHTML方法向页面输出内容\"
        }
    </ >
</html>

当我们还没有点击的时候是这样的：

当我们点击按钮后是这个样子的：

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

其实console是一个系列，不仅仅之后console.log()方法，还有console.error(),console.warn()，当然这些都是输出在控制台上面的:

<  type=\"text/ \">
    //控制台日志
    console.log(\"控制台.日志\")
</ >

<  type=\"text/ \">
    //控制台警告
    console.warn(\"控制台.警告\")
</ >

<  type=\"text/ \">
    //控制台错误
    console.error(\"控制台.错误\")
</ >

prompt()方法

prompt()方法用于显示可提示用户进行输入的对话框。

<!DOCTYPE html>
<html>
    <head>
        <  charset=\"UTF-8\">
        < ></ >
    </head>
    <body>
        <input type=\"button\"  =\"hello_user()\" value=\"点我点我\"/>
    </body>
    <  type=\"text/ \">
        function hello_user(){
            var name = prompt(\"请输入用户名：\")
            if(name != null && name != \'\'){
                document.write(\"hello,\"+name+\"!\")
            }
        }
    </ >
</html>

点我们没有点击的时候，此时就只有一个button按钮

当我们点击按钮的时候，会弹框让我们输如用户名

当点击确定后，会在浏览器界面输出一句话

中的变量

变量的含义

变量，即是在程序运行过程中它的值是允许修改的量，与他相对应的就是常量：在程序运行过程中它的值不允许修改的量

和Python是一样的弱类型语言，Python中定义变量没有关键字:username = 'xiao'，但是在中定义变量使用关键字: var name = 'xiao';

var name = \"xiao\";

变量的声明和定义

有两种方式：

先声明后定义
声明立刻定义

先声明后定义

//1.先声明
var dog;
console.log(dog)  //undefined代表未定义

//2.后定义
dog = \"校长\";
console.log(dog)

声明立刻定义(常用)

<  type=\"text/ \">
    var dog2 = \"雪儿\";
    console.log(dog2)
</ >

变量名的命名规范

严格去分大小写
命名时可以出现字母、数字、下划线、$，但是不能数字开头，也不能是纯数字，不能包括的关键字和保留字
推荐驼峰命名法
匈牙利命名法

的保留关键字

https://www.runoob.com/js/js-reserved.html

基本数据类型

数据类型包括：基本数据类型和引用数据类型

基本数据类型指的是简单的数据段，引用数据类型指的是具有多个值构成的对象

当我们把变量赋值给一个变量时，解析器首先要确认的是这个值是基本数据类型还是引用数据类型

基本数据类型

基本数据类型分为以下五种：

number
string
boolean
null
undefined

数字类型:number

<  type=\"text/ \">
    var num = 123;
    console.log(num)
</ >

number类型在控制台输出是蓝色的

字符串类型:string

<  type=\"text/ \">
    var str = \"泰然城\";
    console.log(str)
</ >

字符串类型在控制台输出是黑色的

布尔类型:boolean

<  type=\"text/ \">
    var b1 = true;
    console.log(b1)
    console.log(typeof b1)
</ >

空对象:null

<  type=\"text/ \">
    var n1 = null;
    console.log(n1)
    console.log(typeof n1)
</ >

null代表的是空对象

未定义:undefined

这个在刚刚我们讲变量的声明和定义已经说过了，如果一个变量声明了但是没有定义，那么就是undefined

<  type=\"text/ \">
    var name1;
    console.log(name1)
    console.log(typeof name1)
</ >

其实还有一种数据类型,Infinity 属性用于存放表示正无穷大的数值：

<  type=\"text/ \">
    var dev = 5/0;
    console.log(dev)
    console.log(typeof dev)
</ >

引用数据类型

Function
Array
String
Date

后面会慢慢讲解

的运算符

运算符分为四种：

算术运算符
赋值运算符
比较运算符
逻辑运算符

算数运算符和赋值运算符请参考：http://www.w3school.com.cn/js/js_operators.asp

比较运算符和逻辑运算符请参考：http://www.w3school.com.cn/js/js_comparisons.asp

特殊情况

字符串拼接

我们有这么一段文字需要拼接：

相比10年前的北京奥运，这一次，大家选择了少而精的策略，真正在舞台上的演员只有70余人。

那么此时我们想把北京奥运和70拿出来再通过字符串进行拼接，做法是这样的：

<  type=\"text/ \">
    var n1 = \"北京奥运\";
    var n2 = 70;
    var str = \"相比10年前的\"+n1+\"，这一次，大家选择了少而精的策略，真正在舞台上的演员只有\"+n2+\"余人。\";
    console.log(str)
</ >

字符串运算

字符串相加

<  type=\"text/ \">
    var str1 = \"1\";
    var str2 = \"2\";
    var newStr = str1+str2;
    console.log(newStr)
    console.log(typeof newStr)
</ >

虽然结果是12，但是还是string类型

如果我们想要将string类型转换成int类型，需要使用到parseInt()方法

<  type=\"text/ \">
    //将string类型转换成int类型
    var newStr2 = parseInt(newStr);
    console.log(typeof newStr2)
</ >

当我们使用字符串相减的时候：

<  type=\"text/ \">
    var str1 = \"1\";
    var str2 = \"2\";
    var newStr3 = str1-str2;
    console.log(newStr3)
</ >

同样，在我们使用字符串相乘/相除都是可以执行成功不需要转换数据类型的，验证结果略过

我们来尝试下两个都是字符串且不像数字的相乘：

<  type=\"text/ \">
    var n1 = \'one\';
    var n2 = \'two\';
    console.log(n1*n2)
</ >

输出为NaN,即Not a Num

中的流程控制语句

if
switch
while
do while
for

if语句

定义鸡为20，如果大于15则大吉大利今晚吃鸡

<  type=\"text/ \">
    var ji = 20;
    if (ji >=20) {
        console.log(\"大吉大利，今晚吃鸡！\")
    }
</ >

if...else

<  type=\"text/ \">
    var ji = 15;
    if (ji >=20) {
        console.log(\"大吉大利，今晚吃鸡！\")
    } else{
        console.log(\"很遗憾，今晚不能吃鸡！\")
    }
</ >

if...else if

<  type=\"text/ \">
    var mathScore = 140;
    var totalScore = 500;
    if (mathScore >= 138 && totalScore >= 680) {
        console.log(\"恭喜你被清华大学录取！\")
    } else if( totalScore >= 700 || mathScore >= 139){
        console.log(\"恭喜你被复旦大学录取！\")
    }else {
        console.log(\"很抱歉！\")
    }
</ >

switch

switch和case一起用，case表示的是一个条件，满足这个条件就会走进来，遇到break就会跳出

<  type=\"text/ \">
    var gameScore = \"best\";
    switch (gameScore){
        case \"best\":
            console.log(\'大吉大利今晚吃鸡！\')
            break;
        case \"better\":
            console.log(\"你是最优秀的！\")
            break;
        default:
            break;
    }
</ >

while

while循环有3个条件：

初始化循环变量
循环判断条件
更新循环变量

<  type=\"text/ \">
    var n = 1;
    while (n<=100){
        console.log(n)
        n++;
    }
</ >

练习：打印1-100之间3的倍数

<  type=\"text/ \">
    var n = 1;
    while (n<=100){
        if (n%3===0) {
            console.log(n)
        }
        n++
    }
</ >

do...while

do...while和while不一样，do...while不管符不符合条件，至少会运行一次

<  type=\"text/ \">
    var n = 3;
    do{
        console.log(n)
        n++
    }while (n<10){
        
    }
</ >

for循环

打印1-100之间9的倍数

<  type=\"text/ \">
    for (var n=1;n<=100;n++) {
        if (n%9==0) {
            console.log(n)
        }
    }
</ >

计算1-100的和

<  type=\"text/ \">
    var sum=0;
    for (var n=1;n<=100;n++) {
        sum+=n
    }
    console.log(sum)
</ >

数组的创建和使用

在Python中，能存放数据的有列表，用[]表示，但是在中，[]被当做为数组，所谓的数组看以看成是一个容器，用来存放东西的容器。

数组创建的两种方式：

字面量方式创建
使用构造函数的方式创建

字面量方式创建

所谓字面量的方式，是我们最经常用的，这种方法简单直观

//因为Array是一个对象，那么这个对象就有自己的方法和属性
var arr = [\'red\',\'yellow\',\'black\']

//创建一个空数组
var arr2 = []

使用构造方法创建数组

<  type=\"text/ \">
    var arr1 = new Array();//创建的是空数组
    
    //万事万物皆对象，没有对象new一个，此时的Array可以看成是一个类
    var colors = new Array(\'red\',\'blue\',\'yellow\');
    console.log(colors)
    
</ >

数组的基本操作

数组的赋值

<  type=\"text/ \">
    //1.创建一个空的数组
    var colors = new Array();
    
    //2.为数组赋值
    colors[0] = \"red\";
    colors[1] = \"black\";
    colors[2] = \"white\";
    
    //3.打印数据
    console.log(colors)
    
</ >

通过下标获取元素的值

<  type=\"text/ \">
    //1.创建一个空的数组
    var colors = new Array();
    
    //2.为数组赋值
    colors[0] = \"red\";
    colors[1] = \"black\";
    colors[2] = \"white\";
    
    //3. 通过下标获取数组的值
    console.log(colors[0])
    console.log(colors[2])
    
</ >

获取数组的长度

<  type=\"text/ \">
    //1.创建一个空的数组
    var colors = new Array();
    
    //2.为数组赋值
    colors[0] = \"red\";
    colors[1] = \"black\";
    colors[2] = \"white\";

    //3.获取数组的长度
    console.log(colors.length)
    
</ >

遍历数组

<  type=\"text/ \">
    //1.创建一个空的数组
    var colors = new Array();
    
    //2.为数组赋值
    colors[0] = \"red\";
    colors[1] = \"black\";
    colors[2] = \"white\";

    //3.遍历数组
    for (var count=0;count<=colors.length;count++) {
        console.log(colors[count])
    }
    
</ >

这里在后面有个undefined，是因为我们在设置循环条件的时候设置成了小于等于数据的长度，但是数组的第一个元素是从0开始的，所以才会有undefined

数组的常用方法

concat():数组的合并

<  type=\"text/ \">
    //1.首先创建两个数组
    var n1 = [\'北京\',\'上海\',\'深圳\']
    var n2 = [\'固始\',\'信阳\']
    
    //2.concat():两个数组的合并
    var newN = n1.concat(n2)
    console.log(newN)
</ >

toString()：将数组转换成为字符串

<  type=\"text/ \">
    //1.首先创建两个数组
    var n1 = [\'北京\',\'上海\',\'深圳\']
    var n2 = [\'固始\',\'信阳\']
    
    //2.concat():两个数组的合并
    var newN = n1.concat(n2)
    //console.log(newN)

    //3.将数组转换成字符串
    var num = [98,54,66,100,0]
    var newNum = num.toString()
    console.log(newNum)
</ >

join()：将数组里的字符串按照指定的字符连接起来

<  type=\"text/ \">
    //1.首先创建两个数组
    var n1 = [\'北京\',\'上海\',\'深圳\']
    var n2 = [\'固始\',\'信阳\']
    
    //2.concat():两个数组的合并
    var newN = n1.concat(n2)
    //console.log(newN)

    //3.将数组转换成字符串
    var num = [98,54,66,100,0]
    var newNum = num.toString()
    //console.log(newNum)
    
    //4.join()
    console.log(newN.join(\'__\'))
</ >

indexOf():通过内容查找下标，正向查找

<  type=\"text/ \">
    //1.首先创建两个数组
    var n1 = [\'北京\',\'上海\',\'深圳\']
    var n2 = [\'固始\',\'信阳\']
    
    //2.concat():两个数组的合并
    var newN = n1.concat(n2)
    //console.log(newN)

    //3.将数组转换成字符串
    var num = [98,54,66,100,0]
    var newNum = num.toString()
    //console.log(newNum)
    
    //4.join()
    //console.log(newN.join(\'__\'))
    
    //5.通过内容查找下标
    console.log(newN.indexOf(\"固始\"))
</ >

lastindexOf():反向查找

<  type=\"text/ \">
    //1.首先创建两个数组
    var n1 = [\'北京\',\'上海\',\'深圳\']
    var n2 = [\'固始\',\'信阳\']
    
    //2.concat():两个数组的合并
    var newN = n1.concat(n2)
    //console.log(newN)

    //3.将数组转换成字符串
    var num = [98,54,66,100,0]
    var newNum = num.toString()
    //console.log(newNum)
    
    //4.join()
    //console.log(newN.join(\'__\'))
    
    //5.通过内容查找下标
    //console.log(newN.indexOf(\"固始\"))
    
    //6.lastIndexOf()
    console.log(newN.lastIndexOf(\"固始\"))
</ >

我们可以看到这个值依然是3，因为不管你正向还是反向，顺序是不会变的

sort():数组的排序

<  type=\"text/ \">
    //1.首先创建两个数组
    var n1 = [\'北京\',\'上海\',\'深圳\']
    var n2 = [\'固始\',\'信阳\']
    
    //2.concat():两个数组的合并
    var newN = n1.concat(n2)
    //console.log(newN)

    //3.将数组转换成字符串
    var num = [98,54,66,100,0]
    var newNum = num.toString()
    //console.log(newNum)
    
    //4.join()
    //console.log(newN.join(\'__\'))
    
    //5.通过内容查找下标
    //console.log(newN.indexOf(\"固始\"))
    
    //6.lastIndexOf()
    //console.log(newN.lastIndexOf(\"固始\"))
    
    //7.sort()：对数组排序
    var names = [\"lipeng\",\"jiaduobao\",\"wanglaoqi\",\"zhangsan\"]
    console.log(names.sort())
</ >

这样是按照26个字母进行排序的，如果首字母相同，那么就比较第二个字母，以此类推

reverse()：反转数组

<  type=\"text/ \">
    //1.首先创建两个数组
    var n1 = [\'北京\',\'上海\',\'深圳\']
    var n2 = [\'固始\',\'信阳\']
    
    //2.concat():两个数组的合并
    var newN = n1.concat(n2)
    //console.log(newN)

    //3.将数组转换成字符串
    var num = [98,54,66,100,0]
    var newNum = num.toString()
    //console.log(newNum)
    
    //4.join()
    //console.log(newN.join(\'__\'))
    
    //5.通过内容查找下标
    //console.log(newN.indexOf(\"固始\"))
    
    //6.lastIndexOf()
    //console.log(newN.lastIndexOf(\"固始\"))
    
    //7.sort()：对数组排序
    var names = [\"lipeng\",\"jiaduobao\",\"wanglaoqi\",\"zhangsan\"]
    //console.log(names.sort())
    
    //8.reverse()反转数组
    console.log(names.reverse())
</ >

仅仅是对数组的反转，并不会排序

shift():移除掉数组中的第一个元素，返回的是移除掉元素的值

<  type=\"text/ \">
    //1.首先创建两个数组
    var n1 = [\'北京\',\'上海\',\'深圳\']
    var n2 = [\'固始\',\'信阳\']
    
    //2.concat():两个数组的合并
    var newN = n1.concat(n2)
    //console.log(newN)

    //3.将数组转换成字符串
    var num = [98,54,66,100,0]
    var newNum = num.toString()
    //console.log(newNum)
    
    //4.join()
    //console.log(newN.join(\'__\'))
    
    //5.通过内容查找下标
    //console.log(newN.indexOf(\"固始\"))
    
    //6.lastIndexOf()
    //console.log(newN.lastIndexOf(\"固始\"))
    
    //7.sort()：对数组排序
    var names = [\"lipeng\",\"jiaduobao\",\"wanglaoqi\",\"zhangsan\"]
    //console.log(names.sort())
    
    //8.reverse()反转数组
    console.log(names.reverse())
    
    //9.移除元素和添加元素
    var shiftNames = names.shift();
    console.log(shiftNames)
</ >

unshift()：向数组的第一个元素插入一个或者多个值，并返回新的长度

<  type=\"text/ \">
    //1.首先创建两个数组
    var n1 = [\'北京\',\'上海\',\'深圳\']
    var n2 = [\'固始\',\'信阳\']
    
    //2.concat():两个数组的合并
    var newN = n1.concat(n2)
    //console.log(newN)

    //3.将数组转换成字符串
    var num = [98,54,66,100,0]
    var newNum = num.toString()
    //console.log(newNum)
    
    //4.join()
    //console.log(newN.join(\'__\'))
    
    //5.通过内容查找下标
    //console.log(newN.indexOf(\"固始\"))
    
    //6.lastIndexOf()
    //console.log(newN.lastIndexOf(\"固始\"))
    
    //7.sort()：对数组排序
    var names = [\"lipeng\",\"jiaduobao\",\"wanglaoqi\",\"zhangsan\"]
    //console.log(names.sort())
    
    //8.reverse()反转数组
    console.log(names.reverse())
    
    //9.移除元素和添加元素
    //var shiftNames = names.shift();
    //console.log(shiftNames)
    
    var unShiftNames = names.unshift(\"liming\",\"王鹏飞\")
    console.log(unShiftNames)
</ >

push():向数组的尾部添加一个或者多个值，并返回数组的长度

<  type=\"text/ \">
    //1.首先创建两个数组
    var n1 = [\'北京\',\'上海\',\'深圳\']
    var n2 = [\'固始\',\'信阳\']
    
    //2.concat():两个数组的合并
    var newN = n1.concat(n2)
    //console.log(newN)

    //3.将数组转换成字符串
    var num = [98,54,66,100,0]
    var newNum = num.toString()
    //console.log(newNum)
    
    //4.join()
    //console.log(newN.join(\'__\'))
    
    //5.通过内容查找下标
    //console.log(newN.indexOf(\"固始\"))
    
    //6.lastIndexOf()
    //console.log(newN.lastIndexOf(\"固始\"))
    
    //7.sort()：对数组排序
    var names = [\"lipeng\",\"jiaduobao\",\"wanglaoqi\",\"zhangsan\"]
    //console.log(names.sort())
    
    //8.reverse()反转数组
    console.log(names.reverse())
    
    //9.移除元素和添加元素
    //var shiftNames = names.shift();
    //console.log(shiftNames)
    
    var unShiftNames = names.unshift(\"liming\",\"王鹏飞\")
    //console.log(unShiftNames)
    
    //10.push():在数组的尾部添加一个或多个值，返回的是数组的长度
    var pushNames = names.push(\"lihaiming\",\"languansheng\")
    console.log(pushNames)
</ >

pop()：删除数组尾部的一个元素，并返回这个元素的值

<  type=\"text/ \">
    //1.首先创建两个数组
    var n1 = [\'北京\',\'上海\',\'深圳\']
    var n2 = [\'固始\',\'信阳\']
    
    //2.concat():两个数组的合并
    var newN = n1.concat(n2)
    //console.log(newN)

    //3.将数组转换成字符串
    var num = [98,54,66,100,0]
    var newNum = num.toString()
    //console.log(newNum)
    
    //4.join()
    //console.log(newN.join(\'__\'))
    
    //5.通过内容查找下标
    //console.log(newN.indexOf(\"固始\"))
    
    //6.lastIndexOf()
    //console.log(newN.lastIndexOf(\"固始\"))
    
    //7.sort()：对数组排序
    var names = [\"lipeng\",\"jiaduobao\",\"wanglaoqi\",\"zhangsan\"]
    //console.log(names.sort())
    
    //8.reverse()反转数组
    console.log(names.reverse())
    
    //9.移除元素和添加元素
    //var shiftNames = names.shift();
    //console.log(shiftNames)
    
    var unShiftNames = names.unshift(\"liming\",\"王鹏飞\")
    //console.log(unShiftNames)
    
    //10.push():在数组的尾部添加一个或多个值，返回的是数组的长度
    var pushNames = names.push(\"lihaiming\",\"languansheng\")
    //console.log(pushNames)
    
    //11.pop():删除数组的最后一个元素,并且返回删除的元素值
    var popNames = names.pop();
    console.log(popNames)
</ >

对字符串进行反转

<  type=\"text/ \">
    var str = \"hello  !\"
    console.log(str.split(\"\").reverse().join(\"\"))
</ >

函数的使用

字面量方式创建

<  type=\"text/ \">
    //1.字面量方式的创建
    function add(){
        alert(\"add函数被调用了！\")
    }
    add()
</ >

不管在什么语言中，定义了函数那么就需要有调用，在是这样的：

定义函数时需要携带参数

<  type=\"text/ \">
    //1.字面量方式的创建
    function add(){
        alert(\"add函数被调用了！\")
    }
    //add()
    
    //第二种方式：定义函数时携带参数
    function add2(a,b){
        console.log(a*b)
    }
    add2(4,5)
</ >

定义函数值需要有返回值

<  type=\"text/ \">
    //1.字面量方式的创建
    function add(){
        alert(\"add函数被调用了！\")
    }
    //add()
    
    //第二种方式：定义函数时携带参数
    function add2(a,b){
        console.log(a*b)
    }
    //add2(4,5)
    
    //第三种方式：定义函数需要有返回值
    function add3(a,b){
        return a*b
    }
    var a = add3(5,9)
    console.log(a)
</ >

_构造函数

对象的创建有以下几种方式：

字面量方式创建
使用 ()创建对象
使用构造函数方式创建对象

字面量方式创建

在中，对象的属性是用key:value的方式存储的

<  type=\"text/ \">
    var stu = {
        name:\"(*^_^*)亚飞\",
        age:22,
        fav:\"鸡汤\",
    }
    console.log(stu)
</ >

推荐使用这种字面量方式创建，这种方式简单直观

如果想要设置name属性的值，那么我们需要用点语法，也就是在python中的get方法和set方法

<  type=\"text/ \">
    var stu = {
        name:\"(*^_^*)亚飞\",
        age:22,
        fav:\"鸡汤\",
    }
    console.log(stu)
    
    stu.name = \"li\"
    console.log(stu)
</ >

使用 ()创建对象

使用构造函数特点：首字母要大写想要创建对象就需要自己new一个

<  type=\"text/ \">
    var Stu = new  ();
    Stu.name = \"小明\";
    console.log(Stu)
</ >

使用构造函数方式创建对象

<  type=\"text/ \">
    var Student = function(){
        this.name = \"海明\";
        this.age = 22;
        this.fav = function(){
            alert(\'旅游\')
        }
    }
    
    //创建对象
    var stu1 = new Student();
    console.log(stu1)
</ >

使用构造函数创建对象，有以下三点：

函数名首字母大写
构造函数不需要return
为对象添加成员变量：this.name = 'guansheng';

但是使用构造函数方式创建对象有一个弊端：每new一次对象，里面的成员变量和方法都是一样的，所以我们在调用的时候不知道调用的是哪个

当然，到最后我们推荐的是构造函数方式

<  type=\"text/ \">
    function Animal(){
        this.name = \"jingjing\";
        this.age = 21;
    }
    Animal.prototype.shownames1 = function(){
        alert(\'调用了shownames1方法！\')
    }
    Animal.prototype.shownames2 = function(){
        alert(\'调用了showname2方法！\')
    }
    
    var a = new Animal();
    a.shownames1()
</ >

String_Number

String字符串对象，那么这是一个对象就会有自己的方法

obj.length获取字符串的长度

<  type=\"text/ \">
    var str = \"hello,world!\"
    
    console.log(str.length)
</ >

toUpperCase(obj)把小写变大写

<  type=\"text/ \">
    var str = \"hello,world!\"
    
    console.log(str.toUpperCase())
</ >

toLowerCase()把大写变成小写

    <  type=\"text/ \">
        var str = \"hello,world!\"
        
        var bigStr = str.toUpperCase();
        
        console.log(bigStr.toLowerCase())
    </ >

obj.split("",n)以xx进行切割，并返回数组的最大长度为m

    <  type=\"text/ \">
        var str = \"hello,world!\"
        
        console.log(str.split(\" \"))
    </ >

obj.sunstring(n,m)左开右闭的方式获取str的n到m元素的值

    <  type=\"text/ \">
        var str = \"hello,world!\"
        
        console.log(str.substring(2,5))
    </ >

Number类型

obj.toString()将number装换成字符串类型

    <  type=\"text/ \">
        var num = 123.4567
        
        var num2String = num.toString();
        console.log(num2String)
        console.log(typeof num2String)
    </ >

toFixed(n)四舍五入，最大长度为n

    <  type=\"text/ \">
        var num = 123.4567
        
        console.log(num.toFixed(2))
    </ >

Date对象的使用

    <  type=\"text/ \">
        var myDate = new Date();
        
        //1.获取今天是第几号
        console.log(myDate.getDate())
        
        //2.获取当天的日期和时间
        console.log(Date())
        
        //3.获取今天是星期几 0代表周日 6代表周六
        console.log(myDate.getDay())
        
        //4.获取现在是几时
        console.log(myDate.getHours())
        
        //5.获取一年中的几个月  0代表1月  11代表12月
        console.log(myDate.getMonth()+1)
    </ >

Date对象的小练习

在桌面显示当前时间：

    <  type=\"text/ \">
        function getCurrentTime(){
            //1.创建一个时间对象
            var date = new Date();
            
            //2.获取当前时间
            var timeInfo = date.getFullYear()+\"年\"+num(date.getMonth()+1)+\"月\"+num(date.getDate())+\"日 \"+ num(date.getHours())+\":\"+num(date.getMinutes())+\":\"+num(date.getSeconds());
            
            //3.获取span1这个元素
            var oSpan = document.getElementById(\'span1\');
            
            //4.将时间写到span标签中
            oSpan.innerHTML = timeInfo.fontcolor(\'red\');
        }
        getCurrentTime()
        
        //5.设置定时器
        setInterval(\"getCurrentTime()\",1000)
        
        //我们发现：秒钟走到59后 就变成了0  而不是00
         function num(n){
            if (n<10) {
                return \"0\"+n
            } else{
                return n
            }
         }
    </ >

Math对象的使用

Math对象用于执行数学任务

    <  type=\"text/ \">
        
        //1.ceil() 天花板函数 向上取整  大于等于1，并且最接近的整数
        var reg1 = Math.ceil(1.12131)
        console.log(reg1)
        
        //2.floor() 地板函数  向下取整  小于等于1，并且最接近的整数
        var reg2 = Math.floor(1.12131)
        console.log(reg2)
        
        //3.最大值与最小值
        var reg3 = Math.max(4,5)
        console.log(reg3)
        
        var reg4 = Math.min(1,9)
        console.log(reg4)
        
        //4.取随机数  这个是0-1之间的随机数
        var reg5 = Math.random()
        console.log(reg5)
        
        //获取100-200之间的随机数
        var reg6 = 100+Math.random()*100
        console.log(reg6)
    </ >

案例

模态框案例

<!DOCTYPE html>
<html>
    <head>
        <  charset=\"UTF-8\">
        < ></ >
        <style type=\"text/css\">
            *{
                margin: 0;
                padding: 0;
            }
            html,body{
                height: 100%;
            }
            #box{
                width: 100%;
                height: 100%;
                background-color: rgba(0,0,0,.3);
            }
            #content{
                width: 400px;
                height: 200px;
                line-height: 200px;
                background-color: white;
                position: relative;
                top: 150px;
                margin: auto;
                text-align: center;
                color: red;
            }
            #span1{
                position: absolute;
                top: 0px;
                right: 0px;
                background-color: red;
                color: white;
                width: 20px;
                height: 20px;
                text-align: center;
                line-height: 20px;
            }
        </style>
    </head>
    <button id=\"btn\">点我</button>
    <body>
    </body>
    <  type=\"text/ \">
        var myBtn = document.getElementById(\'btn\');
        
        var myDiv = document.createElement(\'div\');
        var myP = document.createElement(\'p\');
        var mySpan = document.createElement(\'span\')
        
        myDiv.id = \'box\';
        myP.id = \'content\';
        mySpan.id = \"span1\";
        
        myP.innerHTML = \"成功弹出模态框\";
        mySpan.innerHTML = \"x\";
        
        myDiv.appendChild(myP);
        myP.appendChild(mySpan);
        
        myBtn.  = function(){
            //console.log(myBtn.parentNode)
            myBtn.parentNode.insertBefore(myDiv,myBtn)
        }
        mySpan.  = function(){
            myDiv.parentNode.removeChild(myDiv)
        }
    </ >
</html>

点一点有惊喜

<!DOCTYPE html>
<html>
    <head>
        <  charset=\"UTF-8\">
        < ></ >
        <style type=\"text/css\">
            *{
                padding: 0;
                margin: 0;
            }
            .box{
                width: 200px;
                height: 200px;
                background-color: red;
                text-align: center;
                line-height: 200px;
                margin: 20px auto;
                color: white;
                font-size: 22px;
                font-weight: blod;
            }
        </style>
    </head>
    <body>
        <div class=\"box\">
            点击有惊喜
        </div>
    </body>
    <  type=\"text/ \">
        //getElementsByClassName获取的是所有符合条件的元素,用数组保存的
        var myBox = document.getElementsByClassName(\"box\")[0];
        
        var a = 0;
        myBox.  = function(){
            a++;
            if (a%4===1) {
                this.style.background = \"green\";
                this.innerText = \"逗你玩呢\";
            } else if(a%4===2){
                this.style.background = \"blue\";
                this.innerText = \"再点一次\";
            } else if(a%4===3){
                this.style.background = \"transparent\";
                this.innerText = \"\";
            } else{
                this.style.background = \'red\';
                this.innerText = \"点击有惊喜\"
            }
        }
    </ >
</html>

简易留言框

<!DOCTYPE html>
<html>
    <head>
        <  charset=\"UTF-8\">
        < ></ >
    </head>
    <body>
        <div id=\"box\">
            
        </div>
        <textarea id=\'msg\'></textarea>
        <input type=\"button\" id=\"btn\" value=\"提交\" />
        <button  =\"sum()\">统计</button>
    </body>
    <  type=\"text/ \">
        
        var ul = document.createElement(\'ul\')
        var box =  document.getElementById(\'box\');
        box.appendChild(ul)
        
        var msg = document.getElementById(\'msg\');
        var btn = document.getElementById(\'btn\');
        
        var count=0;
        btn.  = function(){
            var li = document.createElement(\'li\');
            li.innerHTML = msg.value + \"<span>&nbsp;&nbsp;&nbsp;&nbsp;X</span>\";
            
            var lis = document.getElementsByTagName(\'li\');
            
            if (lis.length==0) {
                ul.appendChild(li);
                count++;
            } else{
                ul.insertBefore(li,lis[0]);
                count++;
            }
            msg.value = \"\";
            
            var spans = document.getElementsByTagName(\'span\');
            for (var i=0;i<spans.length;i++) {
                spans[i].  = function(){
                    ul.removeChild(this.parentNode)
                    count--;
                }
            }

        }
        function sum(){
            alert(\"一共有\"+count+\"条留言\")
        }
    </ >
</html>

选项卡

<!DOCTYPE html>
<html>
    <head>
        <  charset=\"UTF-8\">
        < ></ >
        <style type=\"text/css\">
            *{
                margin: 0;
                padding: 0;
                list-style: none;
                text-decoration: none;
            }
            #tab{
                width: 480px;
                margin: 20px auto;
                border: 1px solid red;
            }
            ul li{
                float: left;
                width: 160px;
                height: 60px;
                text-align: center;
                line-height: 60px;
                background-color: #CCCCCC;
            }
            ul li a{
                color: #000000;
            }
            li.active{
                background-color: #FFFFFF;
            }
            p{
                height: 200px;
                display: none;
            }
            p.active{
                display: block;
                height: 200px;
                text-align: center;
                line-height: 200px;
                background-color: #FFFFFF;
            }
        </style>
    </head>
    <body>
        <div id=\"tab\">
            <ul>
                <li class=\"active\"><a href=\"\">我的商城</a></li>
                <li><a href=\"\">我的收藏</a></li>
                <li><a href=\"\">我的订单</a></li>
            </ul>
            <p class=\"active\">商城展示</p>
            <p>收藏展示</p>
            <p>订单展示</p>
        </div>
    </body>
    <  type=\"text/ \">
        var tabli = document.getElementsByTagName(\'li\')
        var tabContent = document.getElementsByTagName(\'p\')
        
        for (var i=0;i<tabli.length;i++) {
            tabli[i].index = i;
            tabli[i].  = function(){
                for (var j=0;j<tabli.length;j++) {
                    tabli[j].className = \'\';
                    tabContent[j].className = \'\';
                }
                this.className = \'active\';
                console.log(this.index)
                tabContent[this.index].className = \'active\';
            }
        }
    </ >
</html>

仿淘宝搜索框

<!DOCTYPE html>
<html>
    <head>
        <  charset=\"UTF-8\">
        < >仿淘宝搜索框</ >
        <style type=\"text/css\">
            *{
                margin: 0;
                padding: 0;
            }
            input{
                outline: none;
                display: block;
                width: 390px;
                height: 40px;
                margin-top: 20px;
                font-size: 20px;
                border: 2px solid red;
                border-radius: 5px;
            }
            label{
                position: absolute;
                top: 32px;
                left: 10px;
                font-size: 20px;
                color: gray;
            }
        </style>
    </head>
    <body>
        <div id=\"search\">
            <input type=\"text\" name=\"\" id=\"text\" value=\"\" />
            <label for=\"text\" id=\"msg\">泰然城</label>
        </div>
    </body>
    <  type=\"text/ \">
        var txt = document.getElementById(\'text\');
        var msg = document.getElementById(\'msg\');
        
        txt.oninput = function(){
            if (txt.value == \'\') {
                msg.style.display = \'block\'
            } else{
                msg.style.display = \'none\'
            }
        }
    </ >
</html>

匀速移动案例

<!DOCTYPE html>
<html>
    <head>
        <  charset=\"UTF-8\">
        < >匀速移动</ >
        <style type=\"text/css\">
            *{
                margin: 0;
                padding: 0;
            }
            #box{
                width: 100px;
                height: 100px;
                background-color: red;
                position: absolute;
                top: 50px;
                left: 0px;
            }
        </style>
    </head>
    <body>
        <button id=\"btn\">点我</button>
        <div id=\"box\">
            
        </div>
    </body>
    <  type=\"text/ \">
        var btn = document.getElementById(\'btn\');
        var box = document.getElementById(\'box\');
        
        var count = 0;
        var timer = null;
        
        //当点击按钮时
        btn.  = function(){
            setInterval(function(){
                count++;
                if (count >1000) {
                    clearInterval(timer)
                    box.style.display = \'none\'
                } else{
                    box.style.left = count +\'px\'
                }
                
            },1)
            
        }
    </ >
</html>

5秒自动关闭广告

<!DOCTYPE html>
<html>
    <head>
        <  charset=\"UTF-8\">
        < ></ >
        <style type=\"text/css\">
            *{
                padding: 0;
                margin: 0;
                list-style: none;
            }
            img{
                position: fixed;
            }
            #left{
                left: 0px;
            }
            #right{
                right: 0px;
            }
            ul li{
                font-size: 26px;
            }
        </style>
    </head>
    <body>
        <img src=\"../JS_dom/1.gif\" id=\"left\"/>
        <img src=\"../JS_dom/1.gif\" id=\"right\"/>
        <ul>
            <li>屠龙宝刀 点击就送</li>
            <li>屠龙宝刀 点击就送</li>
            <li>屠龙宝刀 点击就送</li>
            <li>屠龙宝刀 点击就送</li>
            <li>屠龙宝刀 点击就送</li>
            <li>屠龙宝刀 点击就送</li>
            <li>屠龙宝刀 点击就送</li>
            <li>屠龙宝刀 点击就送</li>
            <li>屠龙宝刀 点击就送</li>
            <li>屠龙宝刀 点击就送</li>
            <li>屠龙宝刀 点击就送</li>
            <li>屠龙宝刀 点击就送</li>
            <li>屠龙宝刀 点击就送</li>
            <li>屠龙宝刀 点击就送</li>
            <li>屠龙宝刀 点击就送</li>
            <li>屠龙宝刀 点击就送</li>
            <li>屠龙宝刀 点击就送</li>
            <li>屠龙宝刀 点击就送</li>
            <li>屠龙宝刀 点击就送</li>
            <li>屠龙宝刀 点击就送</li>
            <li>屠龙宝刀 点击就送</li>
            <li>屠龙宝刀 点击就送</li>
            <li>屠龙宝刀 点击就送</li>
            <li>屠龙宝刀 点击就送</li>
            <li>屠龙宝刀 点击就送</li>
            <li>屠龙宝刀 点击就送</li>
            <li>屠龙宝刀 点击就送</li>
        </ul>
    </body>
    <  type=\"text/ \">
        var left = document.getElementById(\'left\')
        var right = document.getElementById(\'right\')
        var timer = null;
        timer = setTimeout(function(){
            left.style.display = \'none\'
            right.style.display = \'none\'
        },5000)
    </ >
</html>

小米轮播图

<!DOCTYPE html>
<html>
    <head>
        <  charset=\"UTF-8\">
        < >小米滚动框</ >
        <style type=\"text/css\">
            *{padding: 0;margin: 0;}
            .wrap{
                width: 512px;
                height: 400px;
                border: 3px solid #808080;
                position: relative;
                overflow: hidden;
                margin: 100px auto;
            }
            .wrap span{
                width: 100%;
                height: 200px;
                position: absolute;     
            }
            .up{
                top: 0;
            }
            .down{
                bottom: 0;
            }
            img{
                position: absolute;
                top: 0;
                left: 0;        
            }
        </style>
    </head>
    <body>
        <div id=\"box\" class=\"wrap\">
            <img src=\"../JS_dom/mi.png\" id

JavaScript入门教程（基础知识讲解）

浏览：313 2026-04-29

介绍

是什么？

历史背景介绍

的用途

和ECMA 的关系

入门易学性

的组成

第一个 实例

引入 的3种方式

Hello, !

alert语句

的语法规则

在网页中输出信息的写法

prompt()方法

中的变量

变量的含义

变量的声明和定义

变量名的命名规范

基本数据类型

基本数据类型

引用数据类型

的运算符

特殊情况

中的流程控制语句

if语句

switch

while

do...while

for循环

数组的创建和使用

数组的基本操作

数组的常用方法

函数的使用

_构造函数

String_Number

Date对象的使用

Math对象的使用

案例

模态框案例

点一点有惊喜

简易留言框

选项卡

仿淘宝搜索框

匀速移动案例

5秒自动关闭广告

小米轮播图

继续阅读与本文标签相同的文章

2026-05-18栏目： 教程

2026-05-18栏目： 教程

2026-05-18栏目： 教程

2026-05-18栏目： 教程

2026-05-18栏目： 教程

2026-04-23栏目： 教程

2026-04-23栏目： 教程

2026-04-23栏目： 教程

2026-04-23栏目： 教程

2026-04-24栏目： 教程

特别推荐 2026年05月18日 星期一

精彩发现

热门标签

相关文章

第一个实例

引入的3种方式

2026-05-18栏目：教程

2026-05-18栏目：教程

2026-05-18栏目：教程

2026-05-18栏目：教程

2026-05-18栏目：教程

2026-04-23栏目：教程

2026-04-23栏目：教程

2026-04-23栏目：教程

2026-04-23栏目：教程

2026-04-24栏目：教程

特别推荐 2026年05月18日星期一