[前端]Javascript进阶学习总结

文章目录

前言
Javascript作用
Javascript使用

前言

基本的变量语法,条件循环语句（与c语言类似）等请看菜鸟教程

Javascript作用

写入html输入流

<script>
document.write("<h1>这是一个标题</h1>");
document.write("<p>这是一个段落。</p>");
</script>

响应事件
如在button按钮中声明onclick方法触发相应事件

<button type="button" onclick="alert('欢迎!')">点我!</button>

改变html内容，同样包括html图像

<p id="demo">
JavaScript 能改变 HTML 元素的内容。
</p>
<script>
function myFunction()
{
	x=document.getElementById("demo");  // 按照id找到demo元素对应的内容
	x.innerHTML="Hello JavaScript!";    // 自定义改变内容
}
</script>
<button type="button" onclick="myFunction()">点击这里</button>

在myFunction方法中自定义改变内容：

改变内容： x.innerHTML=" "
改变样式： x.style.color=" " //color为style包含的属性之一
对内容加以判断，如判断输入的内容(value值）是否为数字：
var x=document.getElementById("demo").value;
	if(x==""||isNaN(x))
	{
		alert("不是数字");
	}

Javascript使用

声明

必须放在<script>与 </script>标签之间
变量使用var 声明，声明字符串：

var firstName = "John"
var firstName = new String("John")

用法

基本操作

<script>
window.alert(5 + 6);//使用windows警示
document.getElementById("demo").innerHTML = "段落已修改。"; //修改内容
document.write(Date()); //写入
console.log(c); //写入到控制台,F12调试窗口console菜单
</script>

document.write("你好 \
世界!");

函数

//同样可以声明全局变量和局部变量
var carName = " Volvo"; //全局
function myFunction(var1,var2)
{
 var carName = "Volvo"; //局部
代码
}

事件

<some-HTML-element some-event="JavaScript 代码">
如：
<button onclick="this.innerHTML=Date()">现在的时间是?</button>//onclick内容可以为声明的函数

属性

//使用constructor 属性来查看对象是否为数组 (包含字符串 "Array"):
function isArray(myArray) {
    return myArray.constructor.toString().indexOf("Array") > -1;
}
// 使用 constructor 属性来查看对象是否为日期 (包含字符串 "Date"):
function isDate(myDate) {
    return myDate.constructor.toString().indexOf("Date") > -1;
}

全局方法 Number() 可以将字符串转换为数字。Number(“3.14”) // 返回 3.14
全局方法 String() 可以将数字转换为字符串。String(123) // 将数字 123 转换为字符串并返回

正则表达式

语法

/正则表达式主体/修饰符(可选)
在这里插入图片描述

方法

search() 方法用于检索字符串中指定的子字符串，或检索与正则表达式相匹配的子字符串，并返回子串的起始位置。

var str = "Visit Runoob!"; 
var n = str.search(/Runoob/i);
返回Runoob所在位置6

replace() 方法用于在字符串中用一些字符替换另一些字符，或替换一个与正则表达式匹配的子串。
test() 方法用于检测一个字符串是否匹配某个模式，如果字符串中含有匹配的文本，则返回 true，否则返回 false。

var patt = /e/;
patt.test("The best things in life are free!");
//判断字符串是否包含e返回true
//判断输入是否为数字、字母、下划线组成
/^\w+$/.test(str);
//判断字符串是否全部由字母组成
var isletter = /^[a-zA-Z]+$/.test(val);

exec() 方法用于检索字符串中的正则表达式的匹配。
该函数返回一个数组，其中存放匹配的结果。如果未找到匹配，则返回值为 null。

正则表达式表单验证规则：

/*是否带有小数*/
function    isDecimal(strValue )  {  
   var  objRegExp= /^\d+\.\d+$/;
   return  objRegExp.test(strValue);  
}  

/*校验是否中文名称组成 */
function ischina(str) {
    var reg=/^[\u4E00-\u9FA5]{2,4}$/;   /*定义验证表达式*/
    return reg.test(str);     /*进行验证*/
}

/*校验是否全由8位数字组成 */
function isStudentNo(str) {
    var reg=/^[0-9]{8}$/;   /*定义验证表达式*/
    return reg.test(str);     /*进行验证*/
}

/*校验电话码格式 */
function isTelCode(str) {
    var reg= /^((0\d{2,3}-\d{7,8})|(1[3584]\d{9}))$/;
    return reg.test(str);
}

/*校验邮件地址是否合法 */
function IsEmail(str) {
    var reg=/^\w+@[a-zA-Z0-9]{2,10}(?:\.[a-z]{2,4}){1,3}$/;
    return reg.test(str);
}

异常处理

try 语句允许我们定义在执行时进行错误测试的代码块。
catch 语句允许我们定义当 try 代码块发生错误时，所执行的代码块。
finally 语句不论之前的 try 和 catch 中是否产生异常都会执行该代码块
JavaScript 语句 try 和 catch 是成对出现的。

function myFunction() {
  var message, x;
  message = document.getElementById("p01");
  message.innerHTML = "";
  x = document.getElementById("demo").value;
  try { 
    if(x == "") throw "值是空的";
    if(isNaN(x)) throw "值不是一个数字";
    x = Number(x);
    if(x > 10) throw "太大";
    if(x < 5) throw "太小";
  }
  catch(err) {
    message.innerHTML = "错误: " + err + ".";
  }
  finally {
    document.getElementById("demo").value = "";
  }
}

this 关键字

在方法中，this 表示该方法所属的对象。
如果单独使用，this 表示全局对象。
在函数中，this 表示全局对象。
在函数中，在严格模式下，this 是未定义的(undefined)。
在事件中，this 表示接收事件的元素。
类似 call() 和 apply() 方法可以将 this 引用到任何对象。

var person = {
  firstName: "John",
  lastName : "Doe",
  id       : 5566,
  fullName : function() {
    return this.firstName + " " + this.lastName;
  }
};

let关键字

let 声明的变量只在 let 命令所在的代码块内有效，相对于var作用域的范围较小

var i = 5;
for (var i = 0; i < 10; i++) {
    // 一些代码...
}
// 这里输出 i 为 10

let i = 5;
for (let i = 0; i < 10; i++) {
    // 一些代码...
}
// 这里输出 i 为 5

在第一个实例中，使用了 var 关键字，它声明的变量是全局的，包括循环体内与循环体外。

在第二个实例中，使用 let 关键字，它声明的变量作用域只在循环体内，循环体外的变量不受影响。

Javascript异步编程

同步按你的代码顺序执行，异步不按照代码顺序执行，异步的执行效率更高。
在这里插入图片描述

回调函数

//程序等待三秒后执行
function print() {
    document.getElementById("demo").innerHTML="RUNOOB!";
}
setTimeout(print, 3000);

这段程序中的 setTimeout 就是一个消耗时间较长（3 秒）的过程，它的第一个参数是个回调函数，第二个参数是毫秒数，这个函数执行之后会产生一个子线程，子线程会等待 3 秒，然后执行回调函数 “print”，在命令行输出 “Time out”。

异步AJAX

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();

配合jquery使用

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"> //引入jquery
</script>
<script>

$(document).ready(function(){
	$("button").click(function(){
		$.get("/try/ajax/demo_test.php",function(data,status){
			alert("数据: " + data + "\n状态: " + status);
		});
	});
});
</script>
</head>
<body>

<button>发送一个 HTTP GET 请求并获取返回结果</button>

</body>
</html>

PS：js ready函数
在DOM完成，并且页面完全展现后执行的函数。

调用的方式:

1. $(document).ready(function(){ })

2. $().ready(function(){ })

3. $(function() {})