javascriptjava中国免费 javascript中文网

一、js介绍

1.js背景

js全称是javascript，是web的脚本语言。它最初由Netscape(网景公司)的Brendan Each（布兰登·艾奇，javascript之父）发明，刚开始的命名是Livescript，后来Netscape公司与Sun公司合作，为了让它看起来像Java，才改名为Javascript。因此JS与Java在语法、名称和命名规范上都有许多相似之处。

2.js特点

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

3.js组成

• ECMAScript（一种脚本语言的标准化规范）
• 文档对象模型（DOM）
• 浏览器对象模型（BOM）

4.引入方式

行内引用：

<button type="button" onclick="console.log('我是行内引用')">行内引用</button>

内嵌（写在head或body里）：

<script>
        function myFunc(){
            console.log("我是内嵌js")
        }
 </script>

外部引用：

<script src="文件路径.js"></script>

注意：js代码以及引入最好放到底部，因为浏览器渲染网页是从上往下，如果js代码放在前面，浏览器就会优先加载js，导致html页面加载不完全，出现bug。

如果想放在前面，可以在js中使用window.onload方法。这个方法用于在网页加载完毕后立刻执行的操作，即当 HTML 文档加载完毕后，立刻执行某个方法。

window.onload = function(){
   ....
    }

5.输出

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

注意：出现提示类窗口时，程序的执行都会暂停，等待用户动作后再继续执行

<script>
 	console.log("写入控制台");
    alert("警告框")
    confirm("欢迎来到我的网页")
    prompt('你的名字是')
    document.write("重写网页")
    bt3.innerHTML = '重写HTML'
 </script>

6.语法规范

// 单行注释   		快捷键 control + /
/* 多行注释 */  		快捷键 shift + alt + a

• 使用;表示结束。但只有一行内写了多个语句，才必须写分号。js有分号自动补全功能，当一行只有一条语句的时候，可以不加分号。
• 严格区分大小写。
• 忽略空白符（空格 换行 tab）
• 注意标识符和关键字（关键字会自动高亮）

二、js基础语法

1.变量

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

var a
var b = 1
var c,d,e

2.命名规则

• 由字母、数字、下划线以及$组成，不能以数字开头。
• 不允许使用JS的关键字和保留关键字：break、case、catch、default、false、new、this、undefined……
• 可以采用驼峰命名法：第一个单词全小写，此后单词首字母大写。
• 尽量见名知意

2.数据类型

JavaScript 拥有动态类型。这意味着相同变量可用作不同类型：也就是说先声明再定义，定义值可以覆盖。

var x  				 // 现在 x 是undefind
var x = 2;           // 现在 x 是数值
var x = "string";      // 现在 x 是字符串值

1.基本数据类型（值类型）：

• 数字（Number）：int、float、NaN （程序出现错误时出现，不是一个数，但本身是一个Number类型）、Infinity （无穷）。
• 字符串（String）：使用单/双引号成对括起来；字符串断行时，可使用 + 连接几个字符串；模板字符串，使用反引号 。

var name1 = 'LiLei'
    var name2 = 'HanMeiMei'
    console.log(name1 + ' ' + name2);
    var html = `<h3>我是模板字符串</h3>
                <button>按钮</button>`
    document.getElementById('data').innerHTML = html

• 布尔(Boolean)：true、false，是JS中的特殊关键字，不需要加引号，加了就变成字符串。
• 未定义(Undefined)、空(Null)

var state = true;
var name;
var name
console.log(name,typeof(name)); //undefined 'undefined'
var value = null
console.log(value,typeof(value)); //null 'object'

2.引用数据类型：

• 对象(Object)：：{ }包裹，里面是一项项键值对。
• 数组(Array)：[ ]包裹，每一项可以是字符串、数字、对象等任何数据类型
• 函数(Function)：为了能够重复引用相同的功能，减少代码的书写和维护的方便，js提供函数功能，由关键字function引导：

// 对象
var join = {  
        name: "卓音工作室",
        part: '前端',
        number: 20
    }
 // 数组
 var arr = [2,'好好学习',join];
 // 函数 定义之后记得调用
    function myFunc(a, b) {
        return a + b; // 返回a+b结果
    }
    console.log(myFunc(3,5));

3.数据类型转换
typeof()可以返回变量的6种数据类型：number、string、boolean、undefined、object、function

显示类型转换：

• Number()转换为数字类型
• parseInt()转换为int类型
• parseFloat()转换为浮点型
• String()转换为字符串类型
• Boolean()转换为布尔类型。0,'',NaN,null,undefined转换成布尔型都默认为false，其他的为true.
• 变量.toString()将变量转换为字符串类型（toString()无法转换null和undefined），对象则返回一个【表示对象】的【字符串】，数字则可返回该数字对应进制的字符串。

var tim = 100.11
    console.log(typeof(tim));
    console.log(Number(tim));
    console.log(parseInt(tim));
    console.log(parseFloat(tim));
    console.log(String(tim));
    console.log(Boolean(tim));
    console.log(typeof(tim.toString()));
    // 返回一个【表示对象】的【字符串】
    //每一个对象都有一个 toString()方法。 默认的情况下，toString()方法被每一个对象继承。如果toString没有被定义的对象覆盖。toString返回 '[object type]' 其中type是对象的类型,type的值可以是Object，
    join.toString()
    console.log(join.toString());
    // 返回该数字对应进制的字符串。
    var num = 10
    console.log(num.toString(2)) //10专为为2进制'1010'

隐式类型转换：

• isNaN()判断括号内是否为NaN，是数字返回false,不是数字返回true.

console.log(isNaN(tim));  // false
 console.log(isNaN(join));  // true
  // 运算过程中的隐式类型转换
    var str = '12'
    var a = 5
    var b = a*str
    console.log(b)    //60

3.运算符

• 算数运算符 +、-、、/、%、++、- -、+=，-=，=，/=
• 比较运算符 和C语言相比，多了=== 和 !==
• 逻辑运算符 &&、||、!

1 == '1',true 不同类型先做类型转换，再判断
1 === '1',false 不做任何转换，直接判断

4.条件循环语句（和C语言一样）

• if( ){ }else if( ){ }else{ }、switch case
• for、while、do while
• break直接跳出循环、continue结束当前循环，进入下一循环

5.数组方法

• .toString()，将数组转化为字符串，将数组值（用逗号分割）的字符串

var arr = [1,2,3,4,5,6];
console.log(arr.toString());

• .length获取数组元素个数；不需要加（）
• .pop() （也叫弹出）是将数组中最后一个数给删除掉，并将删除的数返回；
• .push() （在数组结尾处）向数组添加一个新的元素，并返回新元素的下表；
• .shift() 将数组中第一个元素移除数组，并返回移除的元素，并把所有其他元素“位移”到更低的索引。
• .unshift() 向数组中第一个位置进行添加新的元素，会有返回值，返回值是新的数组的长度。（如果unshift()没有添加新的数值，会返回原数组的长度）。
• .sort() 方法对数组进行排序
• .reverse() 方法反转数组中的元素。

不改变原数组的操作

• .join()，用法和toString()方法类似，将所有数组元素结合为一个字符串，只不过join可以规定分割符

console.log(arr.join());  //什么也不加结果同toString类似
console.log(arr.join(""));//这样会将逗号去掉，不以任何符号分割
console.log(arr.join("-"));

• concat() 合并数组，通过合并（连接）现有数组来创建一个新数组
• splice() 拼接数组，可用于向数组添加新项或删除元素，该方法有几项参数（开始拼接的位置，删除元素个数，拼接项1，拼接项2…）
• slice() 裁剪数组，方法中会有一些参数（开始裁剪，结束位置），不限制剪裁位置就剪到最后。

6.对象

JavaScript的对象是一种无序的集合数据类型，它由若干键值对组成，属性由逗号分隔。

• 对象的创建

var people = {	// 字面量形式创建
        name: 'Amy',
        age: 18,
        sex: 'girl'
    }
// 属性名与属性值书法方式与字面量有区别. 
//对象名.属性名 = 属性值,每个属性用分号;结尾
var obj = new Object();
obj.name = 'LiMing';
obj.age = 20;
obj.sex = 'boy';

• 获取对象属性值：对象属性有两种寻址方式，对象.属性名、对象[“属性名”]
• 属性的增删：增加新属性，直接写新键值对obj.key = value，删除属性 delete obj.key
• 遍历对象：for...in语句 对象中有几个属性，循环体就会执行几次，每次执行时，会将对象中的一个属性名赋值给变量

for(var item in people){
        console.log('属性名：'+ item);
        console.log('属性值：'+ people[item]);
    }

• JS的常用内置对象：Math对象，Data日期对象
• window时间类对象：

定时器：window.setTimeout(方法，延时)

window.setTimeout(function(){
   console.log("延时2秒后执行");
},2000);

计时器：window.setInterval(方法，时间间隔);

var count = ;
window.setInterval(function(){
   console.log(“第”+count+"次执行");
   count++;
},2000);

清除计时器：clearInterval(所要清除的计数器名字)

var count = 0;
var timer = setInterval(function(){
   count ++;
   if(count > 3){
      clearInterval(timer);
   }
   console.log(count);
},2000);

7.函数以及构造函数

1) 函数的定义和调用

function 函数名(参数 1, 参数 2, 参数 3) {//函数命名要符合驼峰命名法
    ... //要执行的代码
}
函数名()//调用

2) 函数表达式

• 命名函数表达式

function fun() {
    console.log('命名函数')
}
fun()

• 匿名函数表达式

var add = function () {
    console.log('匿名函数')
}
add()

3) 参数和返回值

• 函数的形参不用指定参数的类型。
• 形参可以比实参多，实参也可以比形参多。
• arguments是JS的一个内置的类数组对象。当不确定有多少参数传递时，需要用arguments来获取，储存了传递的所有实参，展示形式是一个伪数组，可以遍历。只能在函数体中使用。

function funArg(){
    console.log(arguments,arguments[2])
}
funArg(2, "11",true);

arguments 是一个类数组对象，不是一个数组 ，除了length属性和索引元素之外没有任何数组属性。例如，它没有 pop 方法。但是它可以被转换为一个真正的数组。

var args = [].slice.call(arguments);  // 方式一
var args = Array.prototype.slice.call(arguments); // 方式二
// 下面是 es6 提供的语法
let args = Array.from(arguments)   // 方式一
let args = [...arguments]; // 方式二

• 返回值：当 JavaScript 到达 return 语句，函数将停止执行。函数通常会计算出返回值，不加括号返回的是函数本身。

var x = multiply(7, 8); 
    function multiply(a, b) {
        return a * b; 
    }
    console.log(x);//x=56
    console.log(mutiply)//

4) 构造函数
所谓”构造函数”，就是专门用来生成实例对象的函数。

• 构造函数首字母一般大写。
• 构造函数返回的是一个对象。
• 函数体内部使用了this关键字，代表了所要生成的对象实例。
• 生成对象的时候，必须使用new命令
• new命令的作用，就是执行构造函数，返回一个实例对象。
• new 就是创造对象的过程，也叫做实例化对象的过程
• new 创造出来的对象叫做构造函数的实例对象

为什么要使用构造函数？
在使用对象字面量创建一系列同一类型的对象时，这些对象可能具有一些相似的特征(属性)和行为(方法)，此时会产生很多重复的代码，而使用构造函数就可以实现代码复用。

var p1 = { name: 'zs', age: 6, gender: '男', hobby: 'basketball' };
var p2 = { name: 'ls', age: 6, gender: '女', hobby: 'dancing' };
var p3 = { name: 'ww', age: 6, gender: '女', hobby: 'singing' };
var p4 = { name: 'zl', age: 6, gender: '男', hobby: 'football' };

function Person(name, gender, hobby) {
    this.name = name;
    this.gender = gender;
    this.hobby = hobby;
    this.age = 6;
}
var p1 = new Person('zs', '男', 'basketball');
var p2 = new Person('ls', '女', 'dancing');
var p3 = new Person('ww', '女', 'singing');
var p4 = new Person('zl', '男', 'football');

5) 作用域：变量和函数生效（能被访问）的区域。

全局变量：在函数外定义的变量，可以全局使用，使用不甚容易污染window的其他属性
局部变量：在函数内部定义的变量，只能在函数内部使用

8.预编译

js代码执行分成两个阶段：先进行预编译，再按顺序逐行执行代码，预编译有以下特点。

• 函数声明整体提升 无论函数调用和声明的位置是前是后，系统总会把函数声明移到调用前面。
• 变量声明提升 无论变量调用和声明的位置是前是后，系统总会把声明移到调用前，注意仅仅只是声明，变量赋值不会提升，所以值是undefined。

console.log(a)  
var a = 100;

// 上面这段代码相当于
var a;
console.log(a)  //undefined
a = 100;

三、事件

1.描述：

HTML事件是发生在HTML元素上的事情。当在 HTML 页面中使用 JS 时， JS 可以触发这些事件。事件可以是浏览器行为，也可以是用户行为。

2.事件三要素

• 事件源 ：事件被触发的对象
• 事件类型 ：事件触发机制，什么事件
• 事件处理程序： 通过一个函数赋值的方式完成

3.常见事件

事件	描述
onchange	HTML 元素改变
onclick	用户点击 HTML 元素
onmouseover	用户在一个HTML元素上移动鼠标
onmouseout	用户从一个HTML元素上移开鼠标
onkeydown	用户按下键盘按键
onload	浏览器已完成页面的加载

4.执行事件的三个步骤

• 获取事件源
• 注册事件（绑定事件）
• 添加事件处理程序（采用函数赋值形式）

5.事件作用

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

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

扩展：闭包、立即执行函数、原型、原型链、this、typescript……