前端学习（二）JavaScript基础

https://www.runoob.com

---

一、JavaScript是什么？

JavaScript ( JS ) 是一种具有函数优先的轻量级，解释型或即时编译型的编程语言。JavaScript 控制了网页的行为。

二、基础知识点

1.变量作用域

变量在函数内声明，变量为局部作用域。

局部变量：只能在函数内部访问。

// 此处不能调用 carName 变量
function myFunction() {
    var carName = "Volvo";
    // 函数内可调用 carName 变量
}

变量在函数外定义，即为全局变量。

全局变量有全局作用域: 网页中所有脚本和函数均可使用。

var carName = " Volvo";
 
// 此处可调用 carName 变量
function myFunction() {
    // 函数内可调用 carName 变量
}

JavaScript 变量生命周期在它声明时初始化。

局部变量在函数执行完毕后销毁。

全局变量在页面关闭后销毁。

2.对象

    // 对象 JavaScript 引用 基本类型
    var obj = {}; // 最基本的对象
    var obj = new Object(); // 这种创建方式的原理

1. 对象身上有属性和方法
2. 有属性和方法的一定是对象

var obj  = {
  name: 'iii',
  age: 20,
  fn: function () {
    console.log('I like JavaScript!!!!');
  }
};

对象属性的增删改查

console.log(obj.name + '的年龄是' + obj.age);
obj.name = 'aaa';
console.log(obj.name + '的年龄是' + obj.age);
obj.fn();

// 直接访问对象身上不存在的值, 值为 undefined

3.方法

函数主要由function 关键词，变量名或函数名，参数（ 形参 、实参），返回值构成
函数三要素 函数名称 形参 返回值

 //两种定义方式
   function fn() {
     console.log('我很nb');
   } // 函数声明
   var fn= function name(name) {
     console.log(name);
     return 'ok';
   } // 函数表达式

立即执行函数，在函数结尾加上’()’，变量不泄露

     var fn = (function () {
		console.log('running......')
     })();

三、DOM

1.改变 HTML

document.write(Date());//改变HTML输出流
document.getElementById(id).innerHTML=新的 HTML//改变HTML内容
document.getElementById("image").src="landscape.jpg";//改变HTML属性

2.改变 CSS

document.getElementById(id).style.property=新样式

3.添加事件

document.getElementById("myBtn").addEventListener("click", displayDate);

4.元素（节点）

//创建新的 HTML 元素 (节点) - appendChild()
var para = document.createElement("p");
var node = document.createTextNode("这是一个新的段落。");
para.appendChild(node);

//如果我们需要将新元素添加到开始位置，可以使用 insertBefore() 方法:
var element = document.getElementById("div1");
var child = document.getElementById("p1");
element.insertBefore(para, child);

//要移除一个元素，你需要知道该元素的父元素。
var parent = document.getElementById("div1");
var child = document.getElementById("p1");
parent.removeChild(child);

四、Ajax

AJAX = 异步 JavaScript 和 XML。
计算机的同步（做完一件事才可以做另一件事）和异步（同时进行）

1.json和xml格式区别

Json对象数据传输，xml其实和html文件一样，是一个文本文件以标记存储数据

  // xml : 
  <student>
    <name>apple</name>
    <age>20</age>
  </student>
  
  //json
  {
	  "name": "apple",
	  "age": 20,
	  "friends": {
	    "name": "pear"
	  }
  }

2.XMLHttpRequest

XMLHttpRequest 常常用于请求来自远程服务器上的 XML 或 JSON 数据。一个标准的 XMLHttpRequest 对象往往包含多个回调：

var xhr = new XMLHttpRequest();
 
xhr.onload = function () {
    // 输出接收到的文字数据
    document.getElementById("demo").innerHTML=xhr.responseText;
}
 
xhr.onerror = function () {
    document.getElementById("demo").innerHTML="请求出错";
}
 
// 发送异步 GET 请求
xhr.open("GET", "https://www.runoob.com/try/ajax/ajax_info.txt", true);
xhr.send();

3.jquery封装的ajax

       $.ajax({
		type:'GET',	//请求的类型,GET、POST等	
		url:'www.baidu.com',	//向服务器请求的地址。
		contentType:'application/json',	//向服务器发送内容的类型，默认值是：application/x-www-form-urlencoded
		dataType:'JSON',	//预期服务器响应类型
		async:true,	//默认值是true,表示请求是异步的，false是同步请求，同步请求会阻碍浏览器的其他操作（不建议使用）
		timeout:'5000',	//设置本地的请求超时时间（单位是毫秒）
		cache:true,	//设置浏览器是否缓存请求的页面
		success:function(result,status,XMLHttpRequest){		//请求成功是执行的函数,result：服务器返回的数据，    status：服务器返回的状态，
                }，
                error:function(xhr,status,error){	//请求失败是执行的函数
                }，
                complete：function(xhr,status){     //不管请求失败还是请求成功，都执行的函数
                }
            })