JavaScript总结

JavaScript基础

如何引入JavaScript

外联文件

<script src="引入的文件位置（本地文件位置或者远程链接）"></script>

内联文件

<script type="text/javascript">
	js代码编写的位置
</script>

Js输出语句

用于基本的调试：

document.write()	//向body中写入字符串
console.log()	//向控制台输出
alert()		//弹出框

基础语法

• 语句分号（ ；）结尾，大括号包裹语句块（基本与Java语法类似）

• 严格区分大小写

• 没有添加分号时浏览器自动添加，但是消耗资源并且可能添加出错

注释

Hbuilder快捷键 Ctrl + / 添加注释**

• 单行注释：//

• 多行注释：/* */

JavaScript基本数据类型

​ JavaScript 变量能够保存多种数据类型：数值、字符串值、数组、对象等

• Number

  • Js中只有一种数值类型Number
  • Js中的Number可以表示十进制，八进制，十六进制整数，浮点数，科学记数法
  • Js中的Number基本类型可以精确表示的最大整数是2^53，BigInt可以表述任意大的整数

• String

  • 字符串被引号包围。可以使用单引号或双引号

• Boolean

  • 布尔值只有两个值 true false，经常用在条件测试中

• undefined

  • 表示声明了但未赋值的变量，其值是 undefined ，typeof 也返回 undefined

    //已经声明的变量未赋值则成为undefined
          var a;
          console.log(typeof a);
    //结果为undefined

  • 任何变量均可通过设置值为 undefined 进行清空。其类型也将是 undefined

  • 空值与 undefined 不是一回事，空的字符串变量既有值也有类型。

    var car = "";	// 值是 ""，类型是 "string"

• null

  • null表示一个对象不存在，其数据类型为Object

    //表示一个空对象
           var a = null;
           console.log(typeof a);
    //结果为object

• Object

  • Function

    • Function是一个功能完整的对象，作为JS的内置对象之一。JS的普通函数都是Function对象的实例，所以函数本身也是一个对象，就像var一样，只不过这个对象具有可调用特征而已。
    • function只是一个关键字，用来创建一个普通函数或对象的构造函数。

  • RegExp

    • RegExp 对象是带有预定义属性和方法的正则表达式对象

    • 正则表达式，在 JavaScript 中，正则表达式常用于两个字符串方法：search() 和 replace()

      search()	//使用表达式来搜索匹配，然后返回匹配的位置。
      replace()	//返回模式被替换处修改后的字符串。

    • 正则表达式修饰符

      i	//执行对大小写不敏感的匹配
      g	//执行全局匹配（查找所有匹配而非在找到第一个匹配后停止）
      m	//执行多行匹配

  • Date

    • 日期对象是一个静态的对象，计算机时间会不断变化，但日期对象不会

    • new Date() 用当前日期和时间创建新的日期对象，参数可以填year, month, ...，用于指定日期和时间创建新的日期对象

      var d = new Date(2018, 11, 24, 10, 33, 30, 0); 		//变量分别为年、月、日、小时、分钟、秒和毫秒

• JSON

  • JSON对象语法

    { "name":"Nya", "age":21, "car":null }

    • JSON 对象被花括号{}包围
    • JSON对象以键/值对的方式书写
    • 键必须是字符串，值必须是有效的 JSON 数据类型（字符串、数字、对象、数组、布尔或 null）
    • 键和值由冒号分隔
    • 每个键/值对由逗号分隔

  • 访问JSON对象值

    • 使用点（.）访问对象JSON值

      myObj =  { "name":"Nya", "age":21, "car":null };
      x = myObj.name;

    • 也可以使用户方括号（[]）访问JSON对象值

      myObj =  { "name":"Nya", "age":21, "car":null };
      x = myObj["name"];

  • 遍历JSON对象

    • 使用for-in遍历JSON对象

      myObj =  { "name":"Nya", "age":21, "car":null };
      for (x in myObj){
          document.getElementById("demo").innerHtml += myObj[x];
      }

    • 对于嵌套的JSON对象，使用点号和括号访问嵌套的JSON对象

      /***实例***/
      myObj =  {
         "name":"Bill Gates",
         "age":62,
         "cars": {
      	  "car1":"Porsche",
      	  "car2":"BMW",
      	  "car3":"Volvo"
         }
      }

      /***访问方法***/
      x = myObj.cars.car2;
      //或者：
      x = myObj.cars["car2"];

  • 修改值

    • 也是使用点号或括号来修改JSON对象中的任意值

      myObj.cars.car3 = "Mercedes Benz";	//使用点号
      myObj.cars["car3"] = "Mercedes Benz";	//使用括号

  • 删除对象属性

    • 使用delete删除JSON对象的属性

      delete myObj.cars.car1;

​    

typeof 操作符的注意点：

• typeof 是操作符，不是方法。虽然我们经常使用 typeof() 的方式获取对象的数据类型
• 对 null 取 typeof 是 object（这是因为 null 是 空的对象引用），对函数取 typeof 是 function

console.log(typeof null);	//返回object

function demo(){  
	console.log('demo');  
}  
console.log(typeof demo);	// 返回function

JavaScript变量

JavaScript 变量是存储数据值的容器，作用和Java里的变量类似

其声明形式不需要指定具体类型，统一用var关键字声明

var x = 7;
var y = 8;
var z = x + y;

Js标识符：所有JavaScript变量必须以唯一的名称标识。这些唯一的名称称为标识符，标识符命名规则与java基本一致

JavaScript 变量可存放多种数据类型：

​ 字符串被包围在双引号或单引号中。数值不用引号。如果把数值放在引号中，会被视作文本字符串。

程序控制语句

条件语句

用来执行逻辑判断的语句

• 条件判断语句

  var a = 1;
  if(a = 1){
  	console.log("A");
  }else{
  	console.log("B");
  	if(a != 5)｛
  		console.log("C");
  	｝
  }

• 条件分支语句

  var a = 1;
   switch(a){
      case 1:
          console.log("1");
          break;
      case 2:
          console.log("2");
          break;
      default:
          console.log("其他");
          break;
   }

循环语句

使代码能在某种条件下不断执行的语句

• for循环

  /**语法**/
  for(初始化变量; 条件表达式; 更新变量){
      语句...
  }
      
  /**例**/
  function p(i){
     document.write(i);
     document.write("<br>");
  }
  for(var i = 0; i < 10; i++){
  	 p(i);
  }

• for…in循环：

  • 用于对数组或者对象的属性进行循环操作
  • 循环中的代码每执行一次，就会对数组的元素或者对象的属性进行一次操作

  /**语法**/
  for (变量 in 对象){
      执行代码...
  }
  
  /**例**/
  var x
  var mycars = new Array()
  mycars[0] = "Saab"
  mycars[1] = "Volvo"
  mycars[2] = "BMW"
  for (x in mycars){
  	document.write(mycars[x] + "<br />")
  }

对象

自定义对象

• 使用new关键字创建对象

  var person = new Person();
  person.name = "Nya";
  person.age = 21;
  person.sex = "男";
  //创建了对象的一个新实例，并向其添加了四个属性

  new所调用的函数是一个构造函数constructor()，构造函数是专门用来创建对象的函数，使用typeof语句会返回object

• 通过function设计一个对象

  //创建函数构造器
  function person(name, age, sex){
      this.name = name;
      this.age = age;
      this.sex = sex	//在JS中，this通常指向的是我们正在执行的函数本身，或者是指向该函数所属的对象（运行时）
  }
  
  //创建对象实例
  var myFather = new person("Ton", 51, "男");
  var myMother = new person("Sally", 49, "女");

  构造函数内部也可以定义方法

• 使用JSON创建对象

  –-详见数据类型一节-–

JS内置对象

Window对象

• Document对象

  Document对象包含当前文档的信息，例如：标题、背景、颜色、表格等

  常用方法：

  • 通过write()方法在浏览器中显示内容

  • getElementById()和getElementByTagName()，这两个方法会忽略文档的结构，可查找整个HTML文档中的任何元素（不论它们在文档中所处的位置，例如通过getElementByTagName()可以把文档中所有的

    元素找到）

  • cookie方法会返回一个包含所有的cookie的字符串，每条cookie以分号和空格(; )分隔(即key*=*value键值对)：

    allCookies = document.cookie;

  • body方法会返回道歉文档中的<body>元素或者<frameset>元素

• Screen对象

  window.screen对象在编写时可以不使用 window 这个前缀

  一些属性：

  • screen.availWidth - 可用的屏幕宽度

    document.write("可用宽度: " + screen.availWidth);

  • screen.availHeight - 可用的屏幕高度

    document.write("可用高度: " + screen.availHeight);

• Location对象

  location.href 属性

  //改变当前网页地址（加载新的网页）：
  location.href = 'http://www.baidu.com';
  
  //返回（当前页面的)整个URL：
  document.write(location.href);

• History对象

  一些方法：

  • history.back()

    <input type="button" value="Back" onclick="goBack()">
    <script>
    	function goBack(){
        	window.history.back()
    	}
    </script>

    以上代码效果为返回上一页按钮

  • history.forward()

    <input type="button" value="Forward" onclick="goForward()">
    <script>
        function goBack(){
        	window.history.forwardk()
    	}
    </script>

    以上代码效果为跳到下一页按钮

函数

JavaScript函数语法

function functionname( 参数.../*可选*/ ){
    // 执行代码
}
//注：JavaScript 对大小写敏感。关键词 function 必须是小写的，并且必须以与函数名称相同的大小写来调用函数

​ 当调用该函数时，会执行函数内的代码。

​ 可以在某事件发生时直接调用函数（比如当用户点击按钮时），并且可由 JavaScript 在任何位置进行调用。

获取函数参数

• 常规方式
• 通过内置arguments对象获取

自调用函数

函数表达式可以 “自调用”，自调用表达式会自动调用。

如果表达式后面紧跟 () ，则会自动调用。

不能自调用声明的函数。

通过添加括号，来说明它是一个函数表达式

(function () {
    var x = "Hello!!";      // 我将调用自己
})();
//以上函数实际上是一个匿名自我调用的函数(没有函数名)

JavaScript的使用场景

添加交互事件

​ 对事件做出反应

​ 可以在事件发生时执行 JavaScript，比如当用户在 HTML 元素上点击时

<h1 onclick="this.innerHTML='Ooops!'">点击文本!</h1>

操作DOM元素

​ 可以使用JavaScript 来向HTML DOM元素分配事件：

//例：向button元素分配onclick事件：
document.getElementById("myBtn").onclick=function(){displayDate()};

操作样式

​ JavaScript操作style样式

//语法
dom.style.属性名 = 属性值;
//例如：
document.getElementsByClassName('box')[0].style.background = 'red';

验证表单

• 必填（或必选项目）

  JavaScript可以用来检查用户是否已填写表达中的必填（或必选）项目。假如必填或必选项为空，那么警告框会弹出

  <form name="myForm" action="demo-form.php" onsubmit="return validateForm()" method="post">
  姓: <input type="text" name="fname">
  <input type="submit" value="提交">
  </form>
  
  function validateForm()
  {
    var x=document.forms["myForm"]["fname"].value;
    if (x==null || x=="")
    {
      alert("姓必须填写");
      return false;
    }
  }

• Email验证

  检查输入的数据是否符合电子邮件地址的基本语法，只能做些基本检查：

  输入的数据必须包含 @ 符号和点号(.)。同时，@ 不可以是邮件地址的首字符，并且 @ 之后需有至少一个点号

  <form name="myForm" action="demo-form.php" onsubmit="return validateForm();" method="post">
      Email: <input type="text" name="email">
      <input type="submit" value="提交">
  </form>
  
  function validateForm(){
    var x=document.forms["myForm"]["email"].value;
    var atpos=x.indexOf("@");
    var dotpos=x.lastIndexOf(".");
    if (atpos<1 || dotpos<atpos+2 || dotpos+2>=x.length){
      alert("不是一个有效的 e-mail 地址");
      return false;
    }
  }

异步请求Ajax

请求：

• 同步请求:只有当一次请求完全结束以后才能够发起另一次请求
• 异步请求:不需要其他请求结束就可以向服务器发起请求

Ajax：Asynchronous javaScript and xml (异步的JavaScript和xml技术)。

当我们向服务器发起请求的时候，服务器不会像浏览器响应整个页面，而是只有局部刷新。它是一个异步请求，浏览器页面只需要进行局部刷新，效率非常的高

正则匹配

详见上文正则部分

定时器

js 定时器有以下两个方法：

setInterval

不停地重复执行，按照指定的周期（以毫秒计）来调用函数或计算表达式。方法会不停地调用函数，直到 clearInterval() 被调用或窗口被关闭

使用形式：函数setInterval(函数名, 重复执行的时间间隔毫秒数 );

<script>
function printTime(){
	var d = new Date();
	var h= d.getHours();
	var m= d.getMinutes();
	var s= d.getSeconds();
	document.getElementById("time").innerHTML= h+":"+m+":"+s;
}
function showTimeIn3Seconds(){
	setTimeout(printTime,3000); 
}
</script>

<div id="time"></div>
<button onclick="showTimeIn3Seconds()">点击后3秒钟后显示当前时间，并且只显示一次</button>

/**
通过setInterval**重复执行同一个函数**，重复的时间间隔由第二个参数指定
**/

setTimeout

在指定的毫秒数后调用函数或计算表达式

使用形式：函数setTimeout(functionname, 距离开始时间毫秒数 );

//例：每隔1秒钟，打印当前时间
<script>
function printTime(){
	var d = new Date();
	var h= d.getHours();
	var m= d.getMinutes();
	var s= d.getSeconds();
	document.getElementById("time").innerHTML= h+":"+m+":"+s;
}
var t = setInterval(printTime,1000);
</script>

<div id="time"></div>

/**
document.getElementById 获取id=time的div元素 
.innerHTML 修改该元素的内容
**/

事件

事件是JavaScript允许HTML与用户交互的行为。 用户任何对网页的操作，都会产生一个事件

onchange HTML元素改变事件

//例：离开输入字段时，会触发一个函数，将输入文本转换为大写
<script>
function myFunction() {
  var x = document.getElementById("fname");
  x.value = x.value.toUpperCase();
}
</script>

请输入您的名字：<input type="text" id="fname" onchange="myFunction()">

onclick 鼠标点击事件

//例：点击按钮弹出“Hello JavaScript”
<script>
function showHello(){
	alert("Hello JavaScript");
}
</script>

<button onclick="showHello()">点击一下</button>

onblur

onblur 事件会在对象失去焦点时发生

//例：离开输入框后会将文本转化为大写
<script type="text/javascript">
function upperCase(){
	var x=document.getElementById("fname").value
	document.getElementById("fname").value=x.toUpperCase()
}
</script>

输入您的姓名：
<input type="text" id="fname" onblur="upperCase()" />

onmouseover / onmouseout

//例：鼠标移入移出事件
<script>
function mOver(obj) {
	obj.innerHTML = "谢谢您"
}
function mOut(obj) {
	obj.innerHTML = "请把鼠标移上来"
}
</script>

<div onmouseover="mOver(this)" onmouseout="mOut(this)" style="background-color:#D94A38;width:120px;height:20px;padding:40px;">
	请把鼠标移上来
</div>

onload

//onload事件
<script>
function checkCookies() {
  var text = "";
  if (navigator.cookieEnabled == true) {
    text = "Cookie 已启用";
  } else {
    text = "Cookie 未启用";
  }
  document.getElementById("demo").innerHTML = text;
}
</script>

<p id="demo"></p>

onkeydown

键盘按下事件