整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线:

最好的JavaScript在线教程

互联网发展的早期,JavaScript就已经成为支持网页内容交互体验的基础技术。随着时间推移,JavaScript业已升级成为互联网的核心技术。

长期以来,我都在学习JavaScript。学习JS一时爽,一直学习一直爽。

在学习过程中,接触很多学习资料,图书、视频等不一而足。

今天给大家介绍两个线上教程,都是广受好评的,相信你一定也看过。

1 Mozilla 开发者社区 JavaScript 教程

https://developer.mozilla.org/zh-CN/docs/Web/JavaScript

教程内容:

  • 对于完全初学者
    • JavaScript 第一步
    • JavaScript 基本结构
    • 介绍JavaScript 对象
  • JavaScript 指南
  • 中级内容
    • 客户端 Web API
    • 重新介绍 JavaScript(JS 教程)
    • JavaScript 数据结构
    • 如何使用比较操作符
    • 闭包
  • 高级内容
    • 继承和原型链
    • 严格模式
    • JavaScript 类型数组
    • 内存管理
    • 并发模型以及事件循环


2 现代 JavaScript 教程

https://zh.javascript.info/

教程内容:

第 一 部分 JavaScript 编程语言

在这儿我们将从头开始学习 JavaScript,也会学习 OOP 等相关高级概念。

第 二 部分 浏览器:文档,事件,接口

学习如何管理浏览器页面:添加元素,操纵元素的大小和位置,动态创建接口并与访问者互动。

第 三 部分 其他文章

教程的前两部分未涉及的其他主题的内容列表。此处没有明确的层次结构,你可以按你需要的顺序阅读文章。

avaScript概述

  • 1992年Nombas开发出C-minus-minus(C--)的嵌入式脚本语言(最初绑定在CEnvi软件中).后将其改名ScriptEase.(客户端执行的语言)
  • Netscape(网景)接收Nombas的理念,(Brendan Eich)在其Netscape Navigator 2.0产品中开发出一套livescript的脚本语言.Sun和Netscape共同完成.后改名叫Javascript
  • 微软随后模仿在其IE3.0的产品中搭载了一个JavaScript的克隆版叫Jscript.
  • 为了统一三家,ECMA(欧洲计算机制造协会)定义了ECMA-262规范.国际标准化组织及国际电工委员会(ISO/IEC)也采纳 ECMAScript 作为标准(ISO/IEC-16262)。从此,Web 浏览器就开始努力(虽然有着不同的程度的成功和失败)将 ECMAScript 作为 JavaScript 实现的基础。EcmaScript是规范.

二 JavaScript的基础

1 直接编写
    <script>
        alert('hello yuan')
    </script>
2 导入文件
    <script src="hello.js"></script>

1、声明变量时不用声明变量类型. 全都使用var关键字;

var a;<br>a=3;

2、一行可以声明多个变量.并且可以是不同类型

var name="yuan", age=20, job="lecturer";

3、声明变量时 可以不用var. 如果不用var 那么它是全局变量

4、变量命名,首字符只能是字母,下划线,$美元符 三选一,余下的字符可以是下划线、美元符号或任何字母或数字字符且区分大小写,x与X是两个变量 

常量 :直接在程序中出现的数据值

标识符:

  1. 由不以数字开头的字母、数字、下划线(_)、美元符号($)组成
  2. 常用于表示函数、变量等的名称
  3. 例如:_abc,$abc,abc,abc123是标识符,而1abc不是
  4. JavaScript语言中代表特定含义的词称为保留字,不允许程序再定义为标识符

2.3.1 数字类型(number)

  • 不区分整型数值和浮点型数值;
  • 所有数字都采用64位浮点格式存储,相当于Java和C语言中的double格式
  • 能表示的最大值是±1.7976931348623157 x 10308
  • 能表示的最小值是±5 x 10 -324  

整数:
在JavaScript中10进制的整数由数字的序列组成
精确表达的范围是-9007199254740992 (-253) 到 9007199254740992 (253)
超出范围的整数,精确度将受影响
浮点数:
使用小数点记录数据
例如:3.4,5.6
使用指数记录数据
例如:4.3e23 = 4.3 x 1023

16进制和8进制数的表达:
16进制数据前面加上0x,八进制前面加0;16进制数是由0-9,A-F等16个字符组成;8进制数由0-7等8个数字组成

16进制和8进制与2进制的换算:

2.3.2 字符串类型(string)

是由Unicode字符、数字、标点符号组成的序列;字符串常量首尾由单引号或双引号括起;JavaScript中没有字符类型;常用特殊字符在字符串中的表达;
字符串中部分特殊字符必须加上右划线\;常用的转义字符 \n:换行 \':单引号 \":双引号 \:右划线

2.3.3 布尔类型(boolean)

Boolean类型仅有两个值:true和false,也代表1和0,实际运算中true=1,false=0
布尔值也可以看作on/off、yes/no、1/0对应true/false
Boolean值主要用于JavaScript的控制语句,例如:

if (x==1){
      y=y+1;
}else{
      y=y-1;
      }

2.3.4 Null & Undefined类型

Undefined类型

Undefined 类型只有一个值,即 undefined。当声明的变量未初始化时,该变量的默认值是 undefined。

当函数无明确返回值时,返回的也是值 "undefined";

Null类型

另一种只有一个值的类型是 Null,它只有一个专用值 null,即它的字面量。值 undefined 实际上是从值 null 派生来的,因此 ECMAScript 把它们定义为相等的。

尽管这两个值相等,但它们的含义不同。undefined 是声明了变量但未对其初始化时赋予该变量的值,null 则用于表示尚未存在的对象(在讨论 typeof 运算符时,简单地介绍过这一点)。如果函数或方法要返回的是对象,那么找不到该对象时,返回的通常是 null

2.4 运算符

算术运算符:
    +   -    *    /     %       ++        -- 

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

逻辑运算符:
     &&   ||   !

赋值运算符:
    =  +=   -=  *=   /=

字符串运算符:
    +  连接,两边操作数有一个或两个是字符串就做连接运算

2.4.1 算术运算符

注意1: 自加自减

假如x=2,那么x++表达式执行后的值为3,x--表达式执行后的值为1;i++相当于i=i+1,i--相当于i=i-1;
递增和递减运算符可以放在变量前也可以放在变量后:--i

var i=10;
console.log(i++);
console.log(i);
console.log(++i);
console.log(i);
console.log(i--);
console.log(--i);

注意2: 单元运算符

- 除了可以表示减号还可以表示负号 例如:x=-y

+ 除了可以表示加法运算还可以用于字符串的连接 例如:"abc"+"def"="abcdef"

注意3: NaN

    var d="yuan";
    d=+d;
    alert(d);//NaN:属于Number类型的一个特殊值,当遇到将字符串转成数字无效时,就会得到一个NaN数据
    alert(typeof(d));//Number

    //NaN特点:
    
    var n=NaN;
    
    alert(n>3);
    alert(n<3);
    alert(n==3);
    alert(n==NaN);
    
    alert(n!=NaN);//NaN参与的所有的运算都是false,除了!=

2.4.2 比较运算符

> >= < <= != == === !==

2.4.3 逻辑运算符

if (2>1 && [1,2]){
    console.log("条件与")
}

// 思考返回内容?
console.log(1 && 3);
console.log(0 && 3);
console.log(0 || 3);
console.log(2 || 3);

2.5 流程控制

  • 顺序结构(从上向下顺序执行)
  • 分支结构
  • 循环结构

2.5.1 顺序结构

    <script>
        console.log(“星期一”);
        console.log(“星期二”);
        console.log(“星期三”);
    </script>

2.5.1 分支结构

if-else结构:

if (表达式){
   语句1;
   ......
   } else{
   语句2;
   .....
   }

功能说明:如果表达式的值为true则执行语句1,否则执行语句2

if-elif-else结构:

if (表达式1) {
    语句1;
}else if (表达式2){
    语句2;
}else if (表达式3){
    语句3;
} else{
    语句4;
}

switch-case结构

switch基本格式
switch (表达式) {
    case 值1:语句1;break;
    case 值2:语句2;break;
    case 值3:语句3;break;
    default:语句4;
}
switch(x){
case 1:y="星期一";    break;
case 2:y="星期二";    break;
case 3:y="星期三";    break;
case 4:y="星期四";    break;
case 5:y="星期五";    break;
case 6:y="星期六";    break;
case 7:y="星期日";    break;
default: y="未定义";
}

2.5.2 循环结构

for循环:

语法规则:

    for(初始表达式;条件表达式;自增或自减)
    {
            执行语句
            ……
    }

功能说明:实现条件循环,当条件成立时,执行语句1,否则跳出循环体

for( 变量 in 数组或对象)
    {
        执行语句
        ……
    }

while循环:

语法规则:

while (条件){
    语句1;
    ...
}

功能说明:运行功能和for类似,当条件成立循环执行语句花括号{}内的语句,否则跳出循环;同样支持continue与break语句。

2.5.3 异常处理

try {
    //这段代码从上往下运行,其中任何一个语句抛出异常该代码块就结束运行
}
catch (e) {
    // 如果try代码块中抛出了异常,catch代码块中的代码就会被执行。
    //e是一个局部变量,用来指向Error对象或者其他抛出的对象
}
finally {
     //无论try中代码是否有异常抛出(甚至是try代码块中有return语句),finally代码块中始终会被执行。
}

三 JavaScript的对象

在JavaScript中除了null和undefined以外其他的数据类型都被定义成了对象,也可以用创建对象的方法定义变量,String、Math、Array、Date、RegExp都是JavaScript中重要的内置对象,在JavaScript程序大多数功能都是基于对象实现的。

<script language="javascript">
var aa=Number.MAX_VALUE; 
//利用数字对象获取可表示最大数
var bb=new String("hello JavaScript"); 
//创建字符串对象
var cc=new Date();
//创建日期对象
var dd=new Array("星期一","星期二","星期三","星期四"); 
//数组对象
</script>

3.1 String对象

字符串对象创建

字符串创建(两种方式)
① 变量 = “字符串”
② 字串对象名称 = new String (字符串)

var str1="hello world";

var str1= new String("hello word");



字符串对象的属性和函数

       x.length         ----获取字符串的长度

 x.toLowerCase()        ----转为小写
 x.toUpperCase()        ----转为大写
 x.trim()               ----去除字符串两边空格       


----字符串查询方法

x.charAt(index)         ----str1.charAt(index);----获取指定位置字符,其中index为要获取的字符索引

x.indexOf(findstr,index)----查询字符串位置
x.lastIndexOf(findstr)  

x.match(regexp)         ----match返回匹配字符串的数组,如果没有匹配则返回null
x.search(regexp)        ----search返回匹配字符串的首字符位置索引

                        示例:
                        var str1="welcome to the world of JS!";
                        var str2=str1.match("world");
                        var str3=str1.search("world");
                        alert(str2[0]);  // 结果为"world"
                        alert(str3);     // 结果为15
                        

----子字符串处理方法

x.substr(start, length) ----start表示开始位置,length表示截取长度
x.substring(start, end) ----end是结束位置

x.slice(start, end)     ----切片操作字符串
                        示例:
                            var str1="abcdefgh";
                            var str2=str1.slice(2,4);
                            var str3=str1.slice(4);
                            var str4=str1.slice(2,-1);
                            var str5=str1.slice(-3,-1);

                            alert(str2); //结果为"cd"
                            
                            alert(str3); //结果为"efgh"
                            
                            alert(str4); //结果为"cdefg"
                            
                            alert(str5); //结果为"fg"

x.replace(findstr,tostr) ----    字符串替换

x.split();                 ----分割字符串
                                 var str1="一,二,三,四,五,六,日"; 
                                var strArray=str1.split(",");
                                alert(strArray[1]);//结果为"二"
                                
x.concat(addstr)         ----    拼接字符串

3.2 Array对象

3.2.1 数组创建

创建数组的三种方式:

 HTML、CSS、Javascript是前端Web开发的主要语言,但是学生们经常混淆Javascript和HTML。因此,今天我们在这里讨论这两种最重要的编程语言之间的差异。

  Javascript简介

  Javascript 是一种基于文本的编程语言,主要用于Web开发。它是WWW(万维网)的核心技术之一。

  通过使用 Javascript,程序员可以创建交互式和响应式Web元素并增强网站的UI。Javascript 在客户端Web开发中非常流行,以至于互联网上超过97%的网站都将其用于客户端行为。弹出窗口、图像滑块、站点导航菜单、选项卡、表单验证是用于Web开发的Javascript的一些示例。

  HTML简介

  HTML是超文本标记语言的首字母缩写,它是用于创建网页和Web应用程序的标准标记语言。HTML描述了网页的结构,浏览器从服务器接收HTML页面,然后将文档呈现到屏幕上。

  HTML包含多个元素,这些元素告诉浏览器内容的外观。例如,<p>标签定义了一个段落,<title>定义了web文档的标题,<body>定义了可见的页面内容,<table>定义了一个表格等等。HTML可以嵌入脚本程序如JS程序 会影响网页的内容和行为。此外,它可以包含 CSS(层叠样式表)来改善网页的布局和外观。

  


  Javascript与HTML:主要区别是什么?

  句法

  HTML是一种标记语言,它有多种标签,如表格标签、换行标签、图片标签、标题标签等。同时,Javascript具有不同的功能,可以使网页具有交互性和动态性。HTML语法更容易学习和理解。与HTML相比,Javascript是一种复杂的语言。

  动态规划

  Javascript使网站动态化,它可以更改用户操作的HTML标记的值和属性,它主要包含在HTML代码中以制作交互式网页。

  另一方面,仅HTML无法制作动态网页,因此,无法动态更改代码。程序员可以在HTML代码中包含Javascript来制作动态网页。

  兼容性

  兼容性是Javascript与HTML的主要关注问题之一。每个浏览器都支持HTML,它的标签可以在每个浏览器上毫无问题地呈现,但是,Javascript并不总是与每个浏览器兼容。

  例如,一些Javascript函数在Chrome或Firefox中运行良好,但在Internet Explorer 中运行不佳,这就是为什么一些网站提到兼容浏览器列表以确保在客户端浏览器中正确查看网站。

  客户端和服务器端Web开发

  HTML用于对网页的客户端进行编码,程序员不能使用它来编写服务器端代码。相比之下,Javascript可以在网站的客户端和服务器端使用,服务器端 Javascript(SSJS)是核心javascript的扩展版本。

  例如,NodeJS是一个开源和跨平台的Javascript运行时环境,允许程序员使用 javascript编写服务器端代码。在NodeJS的帮助下,Javascript代码可以在浏览器之外运行。

  JavaScript与HTML的比较


  总结

  我们已经讨论了有关Javascript与HTML的所有内容。HTML用于创建网页,它由浏览器解释并以文本和图像的形式显示在屏幕上,而javascript主要用于使网页具有交互性。Javascript是一种比HTML更先进、更复杂的语言,这两种语言一起使用来制作优秀的网站。