JavaScript 基础

阅读量：3950 次

发布时间：2019-05-24

本文共 11626 字，大约阅读时间需要 38 分钟。

JavaScript

1.什么是javaScript？

JavaScript（简称“JS”）是一种具有函数优先的轻量级，解释型或即时编译型的编程语言。

2.快速入门

2.1引入JavaScript

1.内部标签

html

2.外部引入

abc.js

//代码

test.html

2.2基本语法入门

2.3 数据类型

数值，文本，图形，音频，视频…

变量

var sb = sb

number

js不区分小数和整数，Number

Nan    //没有这个数字Infinity  //表示无限大

字符串

‘bcd’

布尔值

true false

逻辑运算符

&&||!

比较运算符

=   ==   //等于（类型不一样，值一样，也会判断为true）===   // 绝对等于（类型一样，值一样，结果true）

这是一个JS的陷阱，坚持不要使用 == 比较

须知：

NaN === NaN，这个与所有的数值都不相等，包括自己

只能通过isNaN(NaN) 来判断这个数是否是NaN

浮点数：

尽量避免使用浮点数进行运算，存在精度问题！

null 和 undefined

null 空

undefined 未定义

数组

java的数组必须是相同类型的对象，JS中不需要这样！

//保证代码可读性，尽量使用[]var arr = [12,'hello',null,true]new Array(12,'hello',null,true)

取数组下标元素时，如果越界了，就会undefined

对象

对象是大括号，数组是中括号

每个属性之间使用逗号隔开，最后一个不需要添加

// Person person = new Person()var person = {
   	name : "jay",	age : 40,	tags : ['js','java','web','...']}

取对象的值

person.name> "jay"

3.数据类型

3.1 字符串

1.正常字符串使用单引号，或者双引号

注意转义字符 \

多行字符串编写

// tab键 上面的ESC键下面var msg = 	`hello	world	傻逼·

模板字符串

// tab键 上面的ESC键下面let name = "Jay";let age = 44;let msg ='你好啊，&{name}';

字符串长度
```
str.length
```

字符串的可变性，不可变

大小写转换

//这是方法，不是属性student.toUpperCase() // 变大写student.toLowerCase()  //变小写

student.indexOf(‘t’)

索引该字符所在的位置

substring

[)student.substring(1)  // 从第一个字符截取到最后一个字符student.substring(1, 3)  // 截取{1,3）

3.2 数组

Array数组可以包含任意的数据类型

var arr = [1,2,3,4,5,傻逼]；arr[0]arr[0] = 11  // 通过下标取值和赋值

长度

arr.length

注意：加入给arr.length 赋值，数组大小就会发生变化，如果赋值小于本身的length，元素就会丢失

indexOf（），通过元素获得下标索引
```
arr.indexOf(2)> 1                 //表示arr[1] = 2
```
字符串的"1" 和数字 1 是不同的

alice() 截取Array的一部分，返回一个新数组，类似于String中的substring

push() , pop()

``` push()   //压入数组的尾部 pop()    //弹出尾部的一个元素 ```

unshift() , shift() 头部

``` unshift()  //压入数组头部 shift()    //弹出头部的一个元素 ```

排序 sort()

var arr = ["B", "C", "A"];arr.sort();>>> ["A", "B", "C"]

元素反转 reverse()

var arr = ["A", "B", "C"];arr.reverse();>>> [ "C", B,"A"]

concat()

``` var arr = ["C","B","A"]; arr.concat([1, 2, 3]); >>>["C", B, "A", 1, 2, 3] arr >>> ["C","B","A"] ``` ==注意==：concat() 并没有修改数组，只是会返回一个新的数组

连接符 join()

打印拼接数组，使用特定的字符串连接
```
var arr = ["C","B","A"];arr.join('-');>>> "C-B-A"
```

多维数组

```  var arr = [[1,2],[3,4],[5,6]];  arr[1][1];  >>> 4  ```

3.3 对象

若干个键值对

var 对象名 = {
   	属性名：属性值，	属性名：属性值，	属性名：属性值}// 定义了一个person对象，它有四个属性var person = {
   	name ："Jay",	age : 45,	email : "2222222@qq.com",	score : 0}

JS中对象，{…}表示一个对象，键值对描述属性 xxxxx:xxxx, 多个属性之间使用逗号隔开，最后一个属性不加逗号！

JavaScript 中的所有的键都是字符串，值是任意对象

对象赋值
```
person.name = "Jay"person.name>>>Jay
```

使用一个不存在的对象属性，不会报错！undefined
```
person.haha>>> underdined
```

动态的删减属性，通过delete删除对象的属性
```
delete person.name>>> true
```

动态的添加，直接给新的属性添加即可
```
person.sb = "sb"
```

判断一个属性值是否是这个对象自身拥有的hasOwnProperty()
```
person.hasOwnProperty()>>> falseperson.hasOwnProperty()>>> true
```

判断属性值是否在这个对象中

'age' in person>>> true'tostring' in person   //继承>>> true

3.4 流程循环

if判断

while循环

for循环

for (let i = 0; i < 100; i++){}

forEach 循环

var age = [12, 12, 5, 55, 100]//函数age.forEach(function(value){	console.log(value)})

for … in

// for(var num in age){		if(age.hasOwnProperty(num)){		console.log("存在")		console.log(age[num])		}}

3.5 Map 和 Set

ES6新特性

Map :

var map = new Map(['tom',100],['jack',90],['sb',10]);var name = map.get('tom'); // 通过key获得valuemap.set('admin',123456);   // 新增或修改map.delete('tom'); // 删除

Set：无需不重复的集合

set.add(2);  //添加set.delete(1)  //删除set.has(3)   // 是否包含元素3

3.6 iterator

使用iteratior 来遍历Map，Set：

遍历数组：

//  通过 for of 实现   /for in 打印下标var arr = [3,4,5]for(var x of arr){
   	console.log(x)}

遍历Map：

var map = new Map([['tom',100],['jack',90],['sb',10]]);for(let x of map){
   	console.log(x)}

遍历Set：

var set = new Set([5,6,7]);for(let x of set){	console.log(x)}

4. 函数

4.1 定义函数

定义方式一

绝对值函数

function abs(x){
   	if(x>=0){
   		return x;	}else{
   		return -x;	}}

一旦执行到return代表函数结束，返回结果！

若没有执行return，函数执行也会返回结果，结果就是undefined

定义方式二

var abs = function(x){
   	if(x>=0){
   		return x;	}else{
   		return -x;	}}

这是一个匿名函数，可以把结果赋值给abs,通过abs就可以调用函数。方式一二等价

调用函数

参数问题：JavaScript可以传任意个参数，也可以不传递参数

参数传进来是否存在问题？

假设不存在参数，如何规避？

var abs = function(x){
   	// 手动抛出异常来判断	if(typeof x!=='number'){
   		throw 'Not a Number';	}	if(x>=0){
   		return x;	}else{
   		return -x;	}}

arguments

arguments代表传递进来的所有参数，是一个数组

var abs = function(x){
       console.log("x=>" +x);    for(var i = 0; i < arguments.length; i++){
           console.log(arguments[i]);    }    if(x>=0){
   		return x;	}else{
   		return -x;	}}

问题：arguments 包含所有的参数，我们有时候想用多余的参数来进行附加参数，需要排除已有的参数

rest

ES6引入的新特性，获取除了已经定义的参数之外的所有参数

function a(a,b,...rest){
       console.log("a-->"+a);    console.log("b-->"+b);    console.log(rest)}

rest参数只能写在最后面，必须用 … rest标识

4.2变量的作用域

内部函数可以访问外部函数的成员，反之则不行

当内部函数变量和外部函数的变量重名时，假设在JavaScript中函数查找变量从自身函数开始，由内向外查找，假设外部存在这个同名的函数变量，则内部函数会屏蔽外部函数的变量

提升变量的作用域

function demo(){
   	var x = "x" + y;	console.log(x);	var y = 'y';}>>> x undefined

说明：js执行引擎，自动提升了y的声明，但是不会提升变量y的赋值

function demo2(){
   	var y;		var x = 'x' + y;	console.log(x);	y = 'y';}

这个是在JavaScript建立之初就存在的特性。

规范：所有的变量定义都放在函数的头部，不要乱放，便于维护。

function demo2(){	var x = 1,		y = x + 1,		z,i,a;  //undefined		// 之后随意用}

全局函数

// 全局变量x = 1;function f(){
   	console.log(x);}f(x);console.log(x);

全局对象window

alert()这个函数本身也是一个window变量

注意：JavaScript实际上只有一个全局作用域，任何变量（函数也可以视为变量），假如没有在函数作用范围内找到，就会向外查找，如果在全局作用域都没有找到，报错RefrenceError

规范

由于我们所有的全局变量都会绑定到我们的window上，如果不同的js文件使用了相同的全局变量，冲突–>如果能够减少冲突？

// 唯一的全局变量var sb = {
   };// 定义全局变量sb.name = 'caixukun';sb.add = function(a, b){
   	return a + b;}

把自己的代码全部放入自己定义的唯一空间名字中，降低全局命令冲突的问题

局部作用域 let

function aaa{	for(var i = 0; i < 100; i++){		console.log(i)	}	console.log(i+1); //问题？ i出了这个作用域还可以使用}

ES6 let 关键字，解决局部作用域冲突问题

function aaa{	for(let i = 0; i < 100; i++){		console.log(i)	}	console.log(i+1);  // i is not defined}

建议用let去定义局部作用域的变量

常量const

在ES6 之前，怎么定义常量；只有全部大写字母命名的变量就是常量；建议不要修改这样的值

var PI = '3.14';console.log(PI);PI = '213';  //可以改变这个值

在ES6引入了常量关键字const

const PI = '3.14'; // 只读变量console.log(PI);PI = '1111';  // 不能修改console.log(PI);  // 输出3.14

4.3 方法

`定义方法

方法就是把函数放在对象里面，对象只有两个东西：属性和方法

var shabi = {
   	name:'华晨宇',	birth:2010,	//方法	age: function(){
   		//今年 - 出生的年		var now = new Date().getFullYear();		return now - this.birth;	}}shabi.name   //调用对象的属性shabi.age()  //调用方法，一定要带()

this代表什么，拆开上方的代码

function getAge(){
   	//今年 - 出生的年	var now = new Date().getFullYear();	return now - this.birth;}var shabi = {
   	name:'华晨宇',	birth:2010,	age:getAge}

注意：this是无法指向的，是默认指向调用它的那个对象；

apply函数：

在js中可以控制this的指向

function getAge(){	//今年 - 出生的年	var now = new Date().getFullYear();	return now - this.birth;}var shabi = {	name:'华晨宇',	birth:2010,	age:getAge}getAge.apply(kuangshen, []);  // this，指向了shabi,参数为空

5. 内部对象

5.1 Date

基本使用

var now = new Date()now.getFullYear(); //年now.getMonth(); //月now.getDate();  //日now.getDay();  // 星期几now.getHours(); // 小时now.getMinutes(); // 分now.getSeconds();  // 秒now.getTime();  // 时间戳console.log(new Date(434543543465))

转换

var now = new Date(434543543465);now.toLocaleString()  //调用的是方法now.toGMTString()

5.2 JSON

json是什么

JSON 是一种轻量级的数据交换格式

在JavaScript一切皆为对象，任何js支持的类型都可以用JSON来表示；

格式

对象都用{}

数组都用[]

所有的键值对都用 key : value

JSON 字符串和JS 对象放入转化

var user = {
       name : "shabi",    age : 11,    sex : '男'}// 对象转化为json字符串"{"name":"shabi","age":11,"sex":"男"}"var jsonUser = JSON.stringify(user);// json 字符串转化为对象 参数为JSON字符串var obj = JSON.parse('{"name" : "shabi", "age":"11","sex":"男"}')

5.3 Ajax

6. 面向对象编程

原型对象

类 : 模板

对象：具体的实例

var Student = {
   	name : "shabi",	age : 11,	run : function(){
   		console.log(this.name + "run.....");	}};var xiaozhang = {
   	name : "xiaozhang"};//指定xiaoming的原型为Student ，就能打印run方法xiaoming.__proto__ = Student;

class继承

class关键字，是在ES6引入的

定义一个类，属性，方法

class Student{
   	constructor(name){
   		this.name = name;	}		hello(){
   		alert('hello')	}}

继承

class Student{	constructor(name){		this.name = name;	}		hello(){		alert('hello')	}}class XiaoXueSheng extends Student{	constructor(name, grade){		super(name);		this.grade = grade;	}	say(){		alert('我是小学生')	}	var xiaoming = new Student("xiaoming");var xiaohong = new XiaoXueSheng("xiaohong", 11);}

原型链

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-dZVfQ40p-1618725864097)(C:\Users\22683\AppData\Roaming\Typora\typora-user-images\image-20210417164118022.png)]

7. 操作BOM对象（重点）

浏览器介绍

BOM：浏览器对象模型

window （重要）

window代表浏览器的窗口

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-TPfedxMt-1618725864100)(C:\Users\22683\AppData\Roaming\Typora\typora-user-images\image-20210417170241122.png)]

Navigator（不建议使用）

Navigator 封装了浏览器的信息

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-lurhRa1O-1618725864101)(C:\Users\22683\AppData\Roaming\Typora\typora-user-images\image-20210417170412265.png)]大多数时候，我们不会使用navigator对象，因为会被人修改，不建议使用这些属性来判断和编写代码

screen 代表屏幕尺寸

screen.widthsreen.height

location(重要)

location代表当前页面的URL信息

host: "cn.bing.com"hostname: "cn.bing.com"href: "https://cn.bing.com/"origin: "https://cn.bing.com"pathname: "/"port: ""protocol: "https:"reload: ƒ reload()// 设置当前页面新的地址为哔哩哔哩location.assign('https://www.bilibili.com/')

document

document 代表当前的页面，HTML DOM文档树

document.title >>> "微软 Bing 搜索 - 国内版"docunebt.title = 'shabi'  // 修改当前页面的title名

获取具体的文档树节点

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-mGfs7oZr-1618725864103)(C:\Users\22683\AppData\Roaming\Typora\typora-user-images\image-20210417171907081.png)]

获取cookie

document.cookie

history

history代表浏览器的历史记录

history.back() //当前页面后退history.forward()  // 前进

8. 获取DOM对象（重点）

核心

浏览器网页就是一个DOM树形结构

更新：更新DOM节点

遍历DOM节点：得到DOM节点

删除：删除一个DOM节点

添加：添加一个新的节点

要操作一个DOM节点，就必须要先获得这个DOM节点

获得DOM节点;

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-iS17fl4A-1618725864104)(C:\Users\22683\AppData\Roaming\Typora\typora-user-images\image-20210417173820353.png)]

这是原生代码，之后我们尽量都是用jQuery();

更新节点

操作文本

id1.innerText=‘444’ 修改文本的值

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-TrL1zc3o-1618725864106)(C:\Users\22683\AppData\Roaming\Typora\typora-user-images\image-20210417181306765.png)]可以解析HTML文本标签

操作css

id1.style.color = 'yellow'; // 属性使用字符串 包裹id1.style.fontSize = '20px';id1.style.padding = '2em';

删除DOM节点

删除节点的步骤：先获取父节点，再通过父节点删除自己

注意：删除多个节点的时候，children是在时刻变化的，删除节点的时候一定要注意

插入DOM节点

我们获得了某个DOM节点，假设这个DOM节点是空的，我们通过innerHTML就可以增加一个元素了，但是这个DOM节点已经存在元素了，我们就不能这么干了，会产生覆盖

追加

JavaScript

JavaSe

JavaEe

JavaMe

结果：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-bed2SDAf-1618725864107)(C:\Users\22683\AppData\Roaming\Typora\typora-user-images\image-20210417211320064.png)]

创建一个新的标签，实现插入

insertBefore

9. 操作表单（验证）

表单是什么 form DOM树

文本框 text

下拉框

单选框 radio

多选框 checkbox

隐藏框 hidden

密码框 password

…

表单的目的：提交信息

获得要提交的信息


       
            用户名：     
    
        
            性别：        男        女

提交表单 MD5加密密码，表单优化

10. JQuery

JavaScript

JQuery库，里面存在大量的JavaScript函数

获取JQuery

公式： $(selector选择器).action()

    
       Title //引入CDN点我

选择器

文档工具站： https://jquery.cuishifeng.cn/

事件

    
       Title        
   mouse: 
   
        移动鼠标试试

操作DOM

节点文本操作

$('#test-ul li[name=python]').text(); // 获得值$('#test-ul li[name=python]').text('设置值'); // 设置值$('#test-ul).html();  // 获得值$('#test-ul').html('123');  // 设置值

css 的操作

$('#test-ul li[name = python]').css({"color","red"})

元素的显示和隐藏：本质display ：none

$('#test-ul li[name=python]').show()  // 显示$('#test-ul li[name=python]').hide()  // 隐藏

t.getElementsByClassName(); // 类

// JQuery $('p').click();  // 标签选择器$('#id1').click();  // id选择器$('.class1').click();  // class类选择器

```

文档工具站： https://jquery.cuishifeng.cn/

事件

    
       Title        
   mouse: 
   
        移动鼠标试试

操作DOM

节点文本操作

$('#test-ul li[name=python]').text(); // 获得值$('#test-ul li[name=python]').text('设置值'); // 设置值$('#test-ul).html();  // 获得值$('#test-ul').html('123');  // 设置值

css 的操作

$('#test-ul li[name = python]').css({"color","red"})

元素的显示和隐藏：本质display ：none

$('#test-ul li[name=python]').show()  // 显示$('#test-ul li[name=python]').hide()  // 隐藏

在这里插入图片描述

转载地址：http://eeqwi.baihongyu.com/

你可能感兴趣的文章

Providing Ancestral and Temporal Navigation 设计高效的应用导航

查看>>

Putting it All Together: Wireframing the Example App 把APP例子用线框图圈起来

查看>>

Implementing Lateral Navigation 实现横向导航

查看>>

Implementing Ancestral Navigation 实现原始导航

查看>>

Implementing Temporal Navigation 实现时间导航

查看>>

Responding to Touch Events 响应触摸事件

查看>>

Defining and Launching the Query 定义和启动查询

查看>>

Handling the Results 处理结果

Contacts Provider 联系人存储

查看>>

android 图库播放幻灯片时灭屏再亮屏显示keyguard

查看>>

android 图库语言更新

查看>>

android camera拍照/录像后查看图片/视频并删除所有内容后自动回到camera预览界面

查看>>

android 图库中对非mp4格式的视频去掉"修剪"功能选项

查看>>

how to disable watchdog

查看>>

android SDIO error导致wifi无法打开或者连接热点异常的问题

查看>>

android USB如何修改Serial Number or SN?

查看>>

android 用svn管理的版本编译出来有问题

查看>>

android 如何用jar包代替java代码编译

查看>>

JavaScript

1.什么是javaScript？

2.快速入门

2.1引入JavaScript

2.2基本语法入门

2.3 数据类型

3.数据类型

3.1 字符串

3.2 数组

3.3 对象

3.4 流程循环

3.5 Map 和 Set

3.6 iterator

4. 函数

4.1 定义函数

4.2变量的作用域

4.3 方法

5. 内部对象

5.1 Date

5.2 JSON

5.3 Ajax

6. 面向对象编程

原型对象

7. 操作BOM对象（重点）

8. 获取DOM对象（重点）

标题一

标题一

9. 操作表单（验证）

10. JQuery