[JavaScript知识库]2021-07-31

JavaScript

函数

变量的作用域

在JavaScript中，var定义变量实际是有作用域的。

假设在函数体中声明，则在函数体外不可以使用。

  function qj(){
    var x = 1;
    x = x + 1;
  }
  x = x + 2;//Uncaught ReferenceError: x is not definedat 

如果两个函数使用了相同的变量名，只要在函数内部，就不冲突

function qj(){
    var x = 1;
    x = x + 1;
  }

  function qj1(){
    var x = 'abc';
    x = x + 1;
  }

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

function qj(){
    var x = 1;
  //内部函数可以访问外部函数的成员，反之则不行
    function qj1(){
      var y = x + 1;
    }
    var z = y + 1;//Uncaught ReferenceError: y is not defined
  }

假设，内部函数变量和外部函数，重名！

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

function qj(){
    var x = 1;
  
    function qj1(){
      var x = 'A';
      console.log('inner'+x);//innerA
    }
    console.log('outer'+x)//outer1
    qj1()
  }

提升变量的作用域

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

结果：xundefined

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

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

这个是在JavaScript建立之初就存在的特性。养成规范：所有的变量定义都放在函数的头部，不要乱放，便于代码维护

全局变量

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

全局对象 window

var x = "xxx";
  alert(x);
  alert(window.x);//默认所有的全局变量，都会自动绑定在window对象下；

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

  var x = "xxx";
  window.alert(x);
  var old = window.alert;
  //old(x)
  window.alert = function (){
    
  } ;
  //发现alect()失效了
  window.alert(1123);
  //恢复
  window.alert = old;
  window.alert(456);

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

规范

? 由于我们的所有的全局变量都会绑定到我们的window上，如果不同的js文件，使用了相同的全局变量，就会发生冲突。如何减少冲突？

//唯一全局变量
  var fengzi = {};

  //定义全局变量
  fengzi.name = 'jianghu';
  fengzi.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);//Uncaught ReferenceError: i is not defined
  }

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

常量 const

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

var PI = '3.14';
PI = '321'//可以直接改变这个值

在ES6引入了常量关键字 const

const PI = "3.14"; //只读变量
  PI = "321";//这里直接报错，不可以修改

方法

定义方法：

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

var fengzi = {
    name: '小明',
    bitrh: 2000,
    //方法
    age: function(){
      //当前年龄= 今年 - 出生的年
      var now = new Date().getFullYear()
      return now - this.bitrh;
    }
  }
//属性
fengzi.name
//方法，一定要带()
fengzi.age()

this代表什么？

function getAge(){
    //当前年龄= 今年 - 出生的年
    var now = new Date().getFullYear()
    return now - this.bitrh;
  }
  var fengzi = {
    name: '小明',
    bitrh: 2000,
    //方法
    age: getAge();
  }
  //fengzi.age(); 可以运行
  //getAge() NaN 不能单独调用 getAge是window的对象

this是无法指向的，是默认指向调用它的那个对象（java中是这样的）；

apply

但在js中可以控制this的指向！

function getAge(){
    //当前年龄= 今年 - 出生的年
    var now = new Date().getFullYear()
    return now - this.bitrh;
  }
  var fengzi = {
    name: '小明',
    bitrh: 2000,
    //方法
    age: getAge()
  };
  //fengzi.age(); 可以运行
  getAge.apply(fengzi,[]);//this.指向了fengzi ,参数为空

//结果：
  //fengzi.age()
  //21
  //getAge.apply(fengzi,[])
  //21
  //getAge()
  //NaN

内部对象

标准对象

typeof 123
"number"
typeof '123'
"string"
typeof true
"boolean"
typeof NaN
"number"
typeof []
"object"
typeof {}
"object"
typeof Math.abs
"function"
typeof undefined
"undefined"

Date

基本使用

var now = new Date();//Sat Jul 31 2021 09:43:45 GMT+0800 (中国标准时间)
  now.getFullYear();//年
  now.getMonth();//月 0~11 代表月
  now.getDate();//日
  now.getDay();//星期几
  now.getHours();//时
  now.getMinutes();//分
  now.getSeconds();//秒
  
  now.getTime();// 时间戳 全世界统一 1970 1.1 0：00：00 毫秒数

  console.log(new Date(1627695825997))//时间戳转化为时间

转换

now = new Date(1627695825997)
Sat Jul 31 2021 09:43:45 GMT+0800 (中国标准时间)
now.toLocaleDateString()
"2021/7/31"
now.toLocaleString//注意调用是一个方试，不是一个属性。
? toLocaleString() { [native code] }
now.toLocaleString()
"2021/7/31 上午9:43:45"
now.toGMTString()
"Sat, 31 Jul 2021 01:43:45 GMT"

JSON

• json是什么：

  • JSON(JavaScript Object Notation, JS 对象简谱) 是一种轻量级的数据交换格式。
  • 简洁和清晰的层次结构使得 JSON 成为理想的数据交换语言。
  • 易于人阅读和编写，同时也易于机器解析和生成，并有效地提升网络传输效率。

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

• 格式：

  • 对象都用 {}
  • 数组都用 []
  • 所有的键值对 都使用 key：value

JSON字符串和js对象的转化

var user = {
    name : "fengzi",
    age : 3,
    sex : "男"
  }
  //对象转化为json字符串
  var jsonUser = JSON.stringify(user)
  //json字符串转化为对象 参数为json字符串
  var obj = JSON.parse('{"name":"fengzi","age":3,"sex":"男"}');//里面是双引号，外面就是单引号，里面是单引号，外面就是双引号

很多人搞不清楚，JSON 和 js对象的区别

var obj = {a:"hello", b:"hellob"};
var json = '{"a":"hello", "b":"hellob"}';

面向对象编程

什么是面向对象

原型对象

JavaScript，Java，C#…这些语言都是面向对象的；但JavaScript有些区别！

• 类：模板 原型对象
• 对象：具体的实例

在JavaScript中需要大家换一下思维方式！

原型：

var Student = {
    name : "fengzi",
    age : 3,
    run: function (){
      console.log(this.name+"run.....");
    }
  }

  var Xiaoming = {
    name:"xianming"
  };
  //小明的原型 是Student
  Xiaoming._proto_ = Student;

  var Bird ={
    fly: function(){
      console.log(this.name+"fly.....");
    }
  };
  //原型对象
  Xiaoming._proto_ = Bird;

class 继承

class关键字是在ES6引入的

1. 定义一个类，属性，方法

   //定义一个学生类  
   class Student{    
   	constructor(name) {      
   		 this.name = name;    }   
   	 hello(){      
   	 	alert("hello");    
   	 	}  }
   	 var xiaoming = new Student("xiaoming"); 
   	  var xiaohong = new Student("xiaohong");xiaoming.hello()
   

2. 继承

    //定义一个学生类  class Student{    constructor(name) {      this.name = name+"123";    }    hello(){      alert("hello");    }  }  class XiaoStudent extends Student{      constructor(name,grade) {        super(name);//这里没有定义this.name = name;用的父类的构造器        this.grade = grade;      }      myGrade(){        alert("我是一名小学生");      }  }  var xiaoming = new Student("xiaoming");  var xiaohong = new XiaoStudent("xiaohong",1);
   

本质：查看对象原型

原型链

操作BOM对象（重点）

浏览器介绍

JavaScript 和浏览器关系？

JavaScript 的诞生就是为了能够让他在浏览器中运行！

BOM：浏览器对象模型

主流浏览器：

• IE 6~11
• Chrome
• Safari
• FireFox

三方：

• QQ浏览器
• 360浏览器

Window

window 代表浏览器窗口

window.alert(1)
undefined
window.innerHeight
150
window.innerWidth
718
window.outerHeight
790
window.outerWidth
732

Navigator（不建议使用）

Navigator,封装了浏览器的信息

window.navigator.appName
"Netscape"
navigator.appVersion
"5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/92.0.4515.107 Safari/537.36 Edg/92.0.902.55"
navigator.userAgent
"Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/92.0.4515.107 Safari/537.36 Edg/92.0.902.55"
navigator.platform
"Win32"

大多数时候，我们不会使用navigator对象，因为会被人为修改！不建议使用这些属性来判断和编写代码

screen

代表屏幕尺寸

screen.width
1536px
screen.height
864px

location （重要）

location 代表当前页面的URL信息

host: "www.baidu.com"
href: "https://www.baidu.com/"
protocol: "https:"
reload: ? reload()//刷新网页
//设置新的地址
location.assign("")

document

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

document.title
"百度一下，你就知道"
document.title = '小度小度'
"小度小度"

获取具体的文档树节点

<dl id="app">
  <dt>Java</dt>
  <dt>JavaSE</dt>
  <dt>JavaEE</dt>
</dl>
<script>
    var dl = document.getElementById(`app`);
</script>

获取cookie

document.cookie

history（不建议使用）

history ：代表浏览器的历史记录

history.back()//网页后退一页
history.forward()//网页前进一页

操作DOM对象（重点）

核心

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

• 更新：更新Dom节点
• 遍历dom节点：得到Dom节点
• 删除：删除一个Dom节点
• 添加：添加一个新的节点

获得节点

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

//对应 css 选择器
  var h1 = document.getElementsByTagName('h1')
  var p1 = document.getElementById('p1')
  var p2 = document.getElementsByClassName('p2')
  var div1 = document.getElementById('div1')

  var childrens = div1.children //获取父亲节点下的所有子节点
  div1.children[index]//获得父亲节点下的某一个节点加入下标
  //div1.firstChild
  //div1.lastChild

更新节点

<div id="id1">
    
</div>

<script>
    var id1 = document.getElementById("id1");
    
</script>

操作文本

• **id1.innerText=‘456’**修改文本的值
• **id1.innerHTML=’< strong>123</ strong>’**可以解析HTML文本标签

操作css

id1.style.color = 'yellow';//属性使用 字符串 包裹
id1.style.fontSize = '20px'//- 转 驼峰命名问题
id1.style.padding = '2em';

删除节点

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

<div id="div1">
  <h1>标题一</h1>
  <p id="p1">p1</p>
  <p class="p2">p2</p>
</div>
<script>
    var p1 = document.getElementById('p1')
    var div1 = p1.parentElement;
	div1.removeChild(p1)

	//删除是一个动态的过程
	div1.removeChild(div1.children[0])
	div1.removeChild(div1.children[1])
	div1.removeChild(div1.children[2])
</script>

注意：删除多个节点的时候，children是在时刻变化的，删掉第一个了，第二个就成了第一个，删除节点的时候一定要注意！

插入节点

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

追加

<p id="js">JavaScript</p>
<div id="list">
  <p id="se">JavaSE</p>
  <p id="ee">JavaEE</p>
  <p id="me">JavaME</p>
</div>

<script>
  var js = document.getElementById('js')
  var list = document.getElementById('list')
  list.appendChild(js)//追加到后面
</script>

效果：

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

//通过JS 创建一个新的节点
var newp = document.createElement('p');//创建一个p标签
  newp.id='newp';//给它id属性赋值
  newp.innerText = 'hello,world';//给它加上文本
//创建一个标签节点 （通过这个属性，可以设置任意的值）
  var myScript = document.createElement('script');
  myScript.setAttribute('type','text/javascript')
	
//可以创建一个Style标签
  var myStyle = document.createElement('style');//创建了一个空style标签
  myScript.setAttribute('type','test/css');
  myStyle.innerHTML = 'body{ background-Color:chartreuse;}';//设置标签的内容

  document.getElementsByTagName('head')[0].appendChild(myStyle);//将创建的style标签引入到head中

insert:

  var ee = document.getElementById('ee');
 var js = document.getElementById('js');
 var list = document.getElementById('list');
 //要包含的节点.inserBefore(newNode,targetNode)
 list.insertBefore(js,ee)

操作表单（验证）

表单是什么

• from 也是DOM树下的一个子节点
  • 文本框 text
  • 下拉框 < select>
  • 单选框 radio
  • 多选框 checkbox
  • 隐藏域 hidden
  • 密码框 password
  • …

表单的目的

• 提交信息

获得要提交的信息

<form action="post">
  <p>
    <span>用户名：</span> <input type="text" id="username">
  </p>
<!--多选框的值，就是定义好的value-->
  <p>
    <span>性别：</span>
    <input type="radio" name="sex" value="nan" id="boy">男
    <input type="radio" name="sex" value="" id="girl">女
  </p>
</form>

<script>
  var boy = document.getElementById("boy");
  var girl = document.getElementById("girl");

  var input_text = document.getElementById("username");
  //得到输入框的值
  input_text.value
  //修改输入框的值
  input_text.value = '123'

  //对于单选框，多选框等固定的值，boy ，girl.value只能取到当前的值
  boy.checked;//查看返回的结果，是否为true，如果为true，则被选中
</script>

提交表单

<!--表单绑定提交事件
οnsubmit=绑定一个提交检测的函数，true false
将这个结果返回给表单，使用 onsubmit 接收！
οnsubmit="return aaa()"
-->
<form action="https://www.baidu.com/" method="post" onsubmit="return aaa()">
  <p>
    <span>用户名：</span> <input type="text" id="username" name="username">
  </p>
  <p>
    <span>密码：</span> <input type="text" id="password">
  </p>
<!--  隐藏域-->
  <input type="hidden" id="word" name="password">

  <button type="submit">提交</button>
</form>

<script>
  function aaa(){
     var uname = document.getElementById('username');
      var pword = document.getElementById('password');
      var hword = document.getElementById('word');
      hword.value = pword.value;//将密码框的值给隐藏域，
      console.log(uname.value);
      console.log(pword.value);

      //可以校验判断表单内容，true就是通过提交，false 阻止提交
      return true;
  }
</script>