javascript基础知识

javaScript（脚本语言）

HTML和CSS是标记语言 没有逻辑

javascript是编程语言

组成

W3C 万维网联盟

DOM（文档对象模型(Document Object Model)）

BOM （浏览器对象模型(BrowserObjectModel)）

js变量的基本概念

• 栈内存

  原始类型保存在栈内存⾥

• 堆内存

  

7种原始类型(基本类型、简单类型)

• Boolean(布尔值)

​ 计算机 ⾮真即假

• Null

​ 指的是你声明了⼀个对象未设置值

​ 可以理解尚未创建的对象

• Undefifined

​ 声明了变量，但是没有赋值var a = 2;

​ var a

• Number

​ 超过⼀定的范围，会丢失精度

​ 0.1 + 0.1 === 0.2

• String

​ 在js⾥ 字符串使⽤单引号或者双引号围住的

• Symbol

​ es6提出的概念

• BigInt

​ 引⽤类型(复杂类型)

• Object

​ 万物皆对象

原始类型和引⽤类型

原始类型 值是保存在栈内存，按值保存

引⽤类型 栈内存⾥保存的指针， 堆内存⾥保存的是值

6个假变量

• false (布尔型)
• null (⽤于定义空的或者不存在的引⽤)
• undefined (未定义值)
• 0 (数字类型)
• “” ‘’ (空字符串) (字符型)
• NaN(not a Number) 数字类型转换失败时输出

== 和 ===的区别

• ==会先判断数据类型⼀不⼀致，不⼀致的话就会转换数据类型
• ===直接进⾏值判断 不会自动转换数据类型

parseInt(str) //将类型转换为数字类型
prompt(''imgservice)  //弹出一个用户输入框
window.alert("")  //弹出一个窗口  设置文字
document.write('') //在页面上输出内容
console.log(typeof 1)  //判断属于什么类型

// 使⽤instanceof 判断引⽤数据类型
// 判断是不是由这个构造函数创建出来的对象实例，返回的值是布尔
类型
var list = [1,2,3,4]
console.log(list instanceof Array)

函数

语法

function name(参数 1, 参数 2, 参数 3) {
 要执⾏的代码
}

示例
function sum(a, b) {
 // return undefined
return a * 10 + b }

• 声明⽅式

​ 函数声明

function name(参数) {
 // 执⾏语句
}
// Date

// Array

​ (匿名)函数表达式

​ new Function()

var a=function (num1,num2){
    return num1+num2
}

• 注意

  • 声明函数过程中，函数⾥的语句是不会执⾏

  • 只有当调⽤函数的时候，函数⾥的语句才会执⾏

函数里的变量是局部变量 外的变量是全局变量 全局变量是挂载在windos上的

if(a>b>c){}  //不能这么写  比较的是  a>b 为true   true>c  结果为false
if(a > b && b > c){}

小例子

编写⼀个函数，计算三个数字的⼤⼩，按从⼤到⼩顺序输出
/**
 * 假设a>b>c
 * 那么会有 六种情况 a>b a>c b>c b>a c>a c>b
 * 有三种情况符合a>b>c
 * 那么只剩下三种情况 b>a c>a c>b
 */
function sort(a, b, c) {
    let temp //设置一个临时变量
    if (b > a) {
        temp = a //把a赋值給临时变量
        a = b //把a赋值給b
        b = temp //把临时变量赋值給b
    }
    if (c > a) {
        temp = a
        a = c
        c = temp
    }
    if (c > b) {
        temp = b
        b = c
        c = temp
    }
    console.log(a + '>' + b + '>' + c)
}

console.log(sort(12, 32, 144))

阶乘
let n = prompt('请输入阶乘的数')
function factorial(n) {
    if (n <= 1) {
        return 1
    } else {
        return n * factorial(n - 1)
    }
}
alert(factorial(n))

//闭包示例   外界无法访问number的值   如果在外界定义个值  那么他就挂载在windows上  而在函数中定义的变量是挂载在函数中的  因此外界无法访问
function a() {
    let number = 0
    return function aa() {
        number++
        console.log(number)
    }
}

let add = a()
add()  //1
add()  //2
console.log(number)  //number is not defined

对象

查

let person = {
    name: '张三',
    age: 12,
    sex: '男'
    //定义一个方法
    sayHello: function () {
        console.log('你好')
    }
}
console.log(person.name)

增 改

person.hobby = 'play'   person.age=21

删

delete person.age

通过this我们能够访问对象⾃⼰

var obj2 = {
 name: 'Jack',
 sayHello: function name(params) {
 console.log('Hello, I am ' + this.name)
 }
}

构造函数

//构造函数命名都是大驼峰的形式
function Person(name) {
    this.name = name
    this.sayHello = function () {
        console.log('hello' + this.name)
    }
}
let a = new Person('张晓亮')
console.log(a)
a.sayHello()

立即执行函数

写法

(function() {
 
})();
// w3c建议
(function() {
 
}());

• 括号的作⽤

​ 帮助我们调⽤函数

• 什么是⽴即执⾏函数

​ IIFE：immediately-invoked function expression

• 特点

​ ⾃动执⾏

​ 执⾏完成以后销毁

• 注意

​ 以()[]开头的语句，前⾯的语句必须加分号，否则会解析错误

(function test1() {
 ...
})()
 
var test2 = function() {
 ...
}()
function test3() {
 ...
}()

括号执⾏的是表达式

函数声明变成表达式的⽅法

!function() {}

js当中构造函数的参数

• 固定参数

  function Car(name, price, size) {
   this.name = name
   this.price = price
   this.size = size
  }
  

  不知道创建对象实例的时候，传⼊的参数是什么，

  位置也要严格对应

• 不定参数

  function Car(obj) {
   this.name = obj.name
   this.price = obj.price
   this.size = obj.size
  }
  

  维护起来⽅便

  ⽤户使⽤也⽅便

new做了些什么事

• 没有new 直接调用构造函数

  构造函数内部的this指向的是window

function test(obj) {
    this.name = obj.name
    this.age = obj.age
    this.sex = obj.sex
    return this  //输出的是window对象
}

let w = test({
    name: '张三',
    age: 21,
    sex: '男'
})
console.log(w)  //结果显示 undefined  未找到

• 有new

​ 创建了⼀个空的对象

​ 帮助我们把对象返回回来

​ 改变了this的指向，指向了空对象

原型

原型的作⽤

给我们构造函数实例化出来的对象设置公共的属性或者⽅法使⽤的

原型链

js⾥万物皆对象，所以⼀直访问__proto__属性就会产⽣⼀条链条

链条的尽头是null

当js引擎查找对象的属性时，会先判断对象本身是否存在改属性

不存在的属性就会沿着原型链⽹上找

写一个插件

//第一步 先写一个立即执行函数
;(function () {
    //第二部 讲构造函数写在立即执行函数
    let Computer = function () {
    }
    //讲公共方法写在原型上
    Computer.prototype = {
        plus: function (num1, num2) {
            return num1 + num2
        }
    }
    //讲Computer挂载到window上
    window.Computer = Computer
})()
let a = new Computer()
let number = a.plus(1, 3)
console.log(number)  // 4

数组

增加

push
push这个⽅法是在数组后⾯插⼊⼀条数据
unshift
这个⽅法是在数组的第⼀位插⼊⼀条数据

const list=['张三', '李四', '王五', '赵六']
list.push('王八七')
list.unshift('我是第一我怕谁')
console.log(list)

删除

pop
删除数组中最后一个元素  和push配合使用
shift
删除数组中第一个元素   和unshift配合使用

splice

⽤于删除或替换元素

// 第⼀个参数是控制从哪⾥开始删除或者替换(得看第三个参数有
没有值)
// 第⼆个参数控制删除的数量
// 第三个参数将删除了的元素替换掉，可⽤逗号隔开
list.splice(2, 2, 'hello','Nick')

join

• 将数组类型的数据转换成字符串

• 和toString的区别 可以⾃定义元素之间⽤什么隔开

  console.log(list.join('*'))
  // 1*2*hello*Nick*true*5*6
  

concat

​ 拼接数组

const list=['张三', '李四', '王五', '赵六']
const list2=['张三', '李四', '王五', '赵六']
let listAndList2=list.concat(list2)
console.log(listAndList2)  //'张三', '李四', '王五', '赵六','张三', '李四', '王五', '赵六'
const list3=['张三', '李四', '王五', '赵六']
let listAndLists=list.concat(list2,list3)
console.log(listAndLists)
['张三', '李四', '王五', '赵六', '张三', '李四', '王五', '赵六', '张三', '李四', '王五', '赵六']

示例

// const str='nick,jack,张三,李四'
// //split方法使用指定的分隔符字符串将一个String对象分割成子字符串数组，以一个指定的分割字串来决定每个拆分的位置。
// const list=[str.split(',')]
// //indexOf()方法返回在数组中可以找到一个给定元素的第一个索引，如果不存在，则返回-1。
// console.log(list[0])
// let index=list[0].indexOf('jack')
// const newList=list[0].splice(index)
// console.log(newList)

// 假如插入的是44  则插入到32和45之间
// let number=prompt('请输入要插入的值')
const list=[23,32,45,53,62,68]
function test(arr,num){
for (let i = 0; i < arr.length; i++) {
    if(arr[i]> num){
        // arr.indexOf(arr[i])  获取到比输入值大的下标
        arr.splice(i,0,num)  //插入操作  把i下标获取到  0 不删除 插入num
        return arr
    }
}
}
console.log(test(list,12))

ajax

Json

const obj={
    name:'nick',
    age:12
}
//序列化成JSON
console.log(JSON.stringify(obj))
//反序列化成对象
console.log(JSON.parse(JSON.stringify(obj)))

什么是ajax

• 以前前后端是后端返回整个html

​ 每次更新⼀些数据，他都会整个⽹⻚刷新

• 现在

​ ajax帮助我们向服务器发异步请求

• 什么是同步，什么是异步

​ 煮着开⽔，在旁边盯着，等到⽔开了，你才做下件事煮着开⽔，同时你继续做了其他事

原理

​ 通过XmlHttpRequest对象向服务器发异步请求，从服务器或的数据然后通过js来操作DOM⽽更新⻚⾯

​ 它是在 IE5 中⾸先引⼊的，是⼀种⽀持异步请求的技术

​ 简单的说，也就是 javascript 可以及时向服务器提出请求和处理响应，⽽不阻塞⽤户，达到⽆刷新的效果

• 注意

​ JavaScript是单线程的，会阻塞代码运⾏，所以引⼊XmlHttpRequest请求处理异步数据

示例

console.log(1)
alert(2) //同步操作 这样就会卡在这里 不会继续往下执行
console.log(3)
console.log(4)


console.log(1)
//js有个队列的概念  等待主线程执行结束后执行
setTimeout(function () {
    alert(2) //这样 不管你执行不执行这行代码  都会继续往下走
},500)
console.log(3)
console.log(4)

DOM

• DOM(w3c提的⼀个标准)

​ DOM就是⽂档对象模型，是⼀个抽象的概念

​ 定义了访问和操作HTML⽂档的⽅法

• HTML和txt⽂本的区别

​ HTML是有组织的结构化⽂件

• 什么是DOM树

​ 浏览器将结构化的⽂档以"树"的结构存储在浏览器内存⾥

​ 每个HTML元素被定义为节点

​ 这个节点有⾃⼰的属性(名称、类型、内容… …)

​ 有⾃⼰的层级关系(parent, child, sibling)

• 图解DOM树

  

详解DOM节点的⼀些常⻅操作

查找节点⽅法

⽅法	描述
document.getElementById(id)	通过元素 id 来查找元素
document.getElementsByTagName(name)	通过标签名来查找元素
document.getElementsByClassName(name)	通过类名来查找元素
document.querySelector(selector)	通过css选择器选择元素，⽆法选择伪类

改变元素内容

方法	描述
element.innerHTML = new html content	改变元素的 innerHTML
element.attribute = new value	改变 HTML 元素的属性值
element.setAttribute(attribute,value)	改变 HTML 元素的属性值
element.style.property = new style	改变 HTML 元素的样式

添加和删除元素

方法	描述
document.createElement(element)	创建 HTML 元素
document.removeChild(element)	删除 HTML 元素
document.appendChild(element)	添加 HTML 元素
document.replaceChild(element)	替换 HTML 元素
document.write(text)	可写⼊ HTML

//查
var title=document.getElementById('title')
console.log(title)
var title2=document.getElementsByTagName('h1')
console.log(title2)
//改
title.innerHTML='hello'
title.style.backgroundColor='red'
//增
var divObj=document.createElement('div')
divObj.innerHTML=123
document.body.append(divObj)  //append 就是插入的方法

DOM中事件的概念

• 什么是事件

​ 事件指的是在html元素上发⽣的事情

​ ⽐如图⽚元素被点击

​ 事件触发时，可设置触发⼀段js代码, 事件触发后会执⾏这段js代码

• 常⻅的HTML事件

  事件	描述
  onchange	HTML 元素已被改变
  onclick	⽤户点击了 HTML 元素
  onmouseover	⽤户把⿏标移动到 HTML 元素上
  onmouseout	⽤户把⿏标移开 HTML 元素
  onkeydown	⽤户按下键盘按键
  onload	浏览器已经完成⻚⾯加载

• 怎么对事件作出反应

​ 通过元素的事件属性

​ 启⽤事件监听器

• 什么是事件监听器

​ addEventListener给DOM对象添加事件处理程序

​ removeEventListener 删除给DOM对象的事件处理程序

• onclick和addEventListener的区别

​ onclick会被覆盖

​ addEventListener可以同时注册多个，根据注册顺序，先后执⾏

var title=document.getElementById('title')
title.addEventListener('click',function(){
    alert('你点我干什么')
})
title.onclick=function(){
    alert('我是简化')
}

深度剖析JS中事件的⼀些机制

事件传播的两种机制

• 冒泡

• 捕获

图解事件捕获和事件冒泡

• 什么是事件代理

​ **思考：**⽗级那么多⼦元素，怎么区分事件本应该是哪个⼦元素的

​ 事件代理就是利⽤事件冒泡，只指定⼀个事件处理程序，就

​ 可以管理某⼀类型的所有事件。

• 怎么取消冒泡或者捕获

  event.stopPropagation();
  

  拓展⽅法

  // 阻⽌元素⾏为, 例如a连接跳转
  event.preventDefault()
  

示例

//设置定时器  延迟执行
var timer=setTimeout(function(){
    console.log('2秒后执行定时器')
},2000)
clearTimeout(timer) //清除定时器

//定时执行
var timer2=setInterval(function(){
    console.log('2秒执行一次定时器')  //0.2秒运行一次定时器
},200)

var timer=setTimeout(function(){
    clearInterval(timer2) //两秒后停止   
},2000)

BOM

• 什么是BOM

​ 浏览器对象模型（Browser Object Model (BOM)）

• 内置对象

​ window

​ screen

​ location

​ history

//客户端的屏幕
console.log(screen.height) //获取屏幕的高度
console.log(screen.width)  //获取屏幕的宽度



// console.log(location.reload)  //刷新操作
// location.href='http://lx0615.xyz/#/'  //跳转到指定网站
console.log(location.href ) //输出地址栏的路径

JavaScript中弹出框的类型

• 警告框

  alert('hello')  //弹出框后会阻止代码运行   所有弹出框都会阻止代码运行
  

• 确认框

  var isConfirm = confirm('请确认')
  console.log('下⼀步', isConfirm)
  // 有返回值的
  

• 提示框

  var isPrompt = prompt('请输⼊姓名')
  console.log(isPrompt) // 是null 或者 ⽤户输⼊的值
  

浏览器基本概念之Cookie

• 浏览器中

  • 请求是⽆状态
  • ⽐如说你进⼊⼀个⽹站，根据传参，⽹站的后台会告诉浏览器谁谁谁登录了

• 什么是Cookie

  • Cookie 是计算机上存储浏览器的数据⽤的

  • 容量⼤⼩⼤概4KB

  • 基本语法

  • document.cookie
    

• 为什么存在Cookie

  • 浏览器关闭后，服务器会忘记⽤户的⼀切

  • 让浏览器记住⽤户信息

• cookie操作

  • 如何创建和读取cookie

    // 通过Document对象
    document.cookie="username=Nick; expires=Thu, 18
    Dec 2043 12:00:00 GMT";
    setCookie('username', 'Nick')
    

  • 删除cookie

    // 设置过期时间
    document.cookie = "username=; expires=Thu, 01 Jan
    1970 00:00:00 UTC; path=/;";
    

  • 设置cookie函数

    function setCookie(cname,cvalue){
     var d = new Date();
     d.setTime(d.getTime()+ (exdays*24*60*60*1000));
     var expires = "expires="+d.toGMTString();
     document.cookie = cname+"="+cvalue+";
    "+expires; }
    function getCookie(cname){
     var name = cname + "=";
     var ca = document.cookie.split(';'); // 将字符
    串以; 分割数组
     for(var i=0; i<ca.length; i++) {
     var c = ca[i].trim(); // 把多余空格和回⻋删掉
     if (c.indexOf(name)==0) {
     return
    c.substring(name.length,c.length);
     }
     }
     return ""; }