JavaScript基础版实例（二）

最新推荐文章于 2024-07-08 10:04:44 发布

Gary jie

最新推荐文章于 2024-07-08 10:04:44 发布

阅读量199

点赞数

分类专栏： # 前端 JavaScript 文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/qq_44174346/article/details/125907831

版权

前端 JavaScript 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

Js调试

console.log() 方法在调试窗口上打印 JavaScript 值：

<body>
<h1>我的第一个 Web 页面</h1>
<p>
浏览器中(Chrome, IE, Firefox) 使用 F12 来启用调试模式， 在调试窗口中点击 "Console" 菜单。
</p>
<script>
a = 5;
b = 6;
c = a + b;
console.log(c);
</script>
</body>

  <!-- debugger断点 >
<p id="demo"></p>
<p>开启调试工具，在代码执行到第三行前会停止执行。</p>
<script>
var x = 15 * 5;
debugger;
document.getElementById("demo").innerHTML = x;
</script>

js声明提升

函数声明和变量声明总是会被解释器悄悄地被"提升"到方法体的最顶部。

<body>
<p id="demo"></p>
<script>
var x = 5; // 初始化 x
elem = document.getElementById("demo"); // 查找元素 
elem.innerHTML = "x 为：" + x + "，y 为：" + y;           // 显示 x 和 y
var y = 7; // 初始化 y
</script>
</body>

y 输出了 undefined，这是因为变量声明 (var y) 提升了，但是初始化(y = 7) 并不会提升，所以 y 变量是一个未定义的变量。

js严格模式

<h1>使用 "use strict":</h1>
<h3>不允许使用未定义的变量。</h3>
<p>浏览器按下 F12 开启调试模式，查看报错信息。</p>
<script>
"use strict";
x = 3.14;       // 报错 (x 未定义)
</script>

//数组只能用数字索引
<p id="demo"></p>
<p id="stu2"></p>
<script>
var person = [];
person[0] = "John";
person[1] = "Doe";
person[2] = 46; 
document.getElementById("demo").innerHTML =
	person[0]+ " "+person[1] + " " + person.length;
	document.getElementById("stu2").innerHTML=person[1]
</script>

Js表单验证⭐

判断表单字段(fname)值是否存在，如果不存在，就弹出信息，阻止表单提交：

<script>
function validateForm() {
    var x = document.forms["myForm"]["fname"].value;
    if (x == null || x == "") {
        alert("需要输入名字。");
        return false;
    }
}
</script>

<form name="myForm" action="demo_form.php"
onsubmit="return validateForm()" method="post">
名字: <input type="text" name="fname">
<input type="submit" value="提交">
</form>

Js 验证输入的数字

<script>
function myFunction() {
    var x, text;

    // 获取 id="numb" 的值
    x = document.getElementById("numb").value;

    // 如果输入的值 x 不是数字或者小于 1 或者大于 10，则提示错误 Not a Number or less than one or greater than 10
    if (isNaN(x) || x < 1 || x > 10) {
        text = "输入错误";
    } else {
        text = "输入正确";
    }
    document.getElementById("demo").innerHTML = text;
}

典型的数据验证有：
必需字段是否有输入?
用户是否输入了合法的数据?
在数字字段是否输入了文本?
大多数情况下，数据验证用于确保用户正确输入数据。
数据验证可以使用不同方法来定义，并通过多种方式来调用。

服务端数据验证是在数据提交到服务器上后再验证。
客户端数据验证是在数据发送到服务器前，在浏览器上完成验证。

E-mail验证

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

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;
	}
}

<form name="myForm" action="demo-form.php" onsubmit="return validateForm();" method="post">
Email: <input type="text" name="email">
<input type="submit" value="提交">
</form>

Js验证API

checkValidity() , 输入信息不合法，则返回错误信息

function myFunction() {
    var inpObj = document.getElementById("id1");
    if (inpObj.checkValidity() == false) {
        document.getElementById("demo").innerHTML = inpObj.validationMessage;
    }
}

rangeOverflow () 大于100显示一个信息

function myFunction() {
    var txt = "";
    if (document.getElementById("id1").validity.rangeOverflow) {              
       txt = "输入的值太大了";
    } 
    document.getElementById("demo").innerHTML = txt;
}

var txt="";
if( inpObj=document.getElementById("id1").validity.rangOverflow){
txt="新输入的值太大了";
} else {txt="输入正确"}
document.getElementById("demo").innerHTML =txt;

JavaScript this 关键字

在 JavaScript 中函数也是对象，对象则有方法，apply 和 call 就是函数对象的方法。这两个方法异常强大，他们允许切换函数执行的上下文环境（context），即 this 绑定的对象。

<script>
// 创建一个对象
var person = {
  firstName: "John",
  lastName : "Doe",
  id     : 5566,
  fullName : function() {
    return this.firstName + " " + this.lastName;
  }
};

// 显示对象的数据
document.getElementById("demo").innerHTML = person.fullName();
</script>


h2>JavaScript this 关键字</h2>
<p>实例中 <strong>this</strong> 指向了 person2，即便它是 person1 的方法:</p>
<p id="demo"></p>
<script>
var person1 = {
  fullName: function() {
    return this.firstName + " " + this.lastName;
  }
}
var person2 = {
  firstName:"John",
  lastName: "Doe",
}
var x = person1.fullName.call(person2); 
document.getElementById("demo").innerHTML = x; 
</script>

JavaScript let 和 const

let 声明的变量只在 let 命令所在的代码块 {} 内有效，在 {} 之外不能访问。
const 用于声明一个或多个常量，声明时必须进行初始化，且初始化后值不可再修改：

<p>JavaScript var 关键字定义的变量可以在使用后声明，也就是变量可以先使用再声明：</p>
<p id="demo"></p>
<script>
carName = "Volvo";
document.getElementById("demo").innerHTML = carName;
var carName;
</script>

JavaScript JSON⭐

JSON 是用于存储和传输数据的格式。
JSON 通常用于服务端向网页传递数据。

<h2>为 JSON 字符串创建对象</h2>
<p id="demo"></p>
<script>
var text = '{ "sites" : [' +
	'{ "name":"Runoob" , "url":"www.runoob.com" },' +
	'{ "name":"Google" , "url":"www.google.com" },' +
	'{ "name":"Taobao" , "url":"www.taobao.com" } ]}';	
obj = JSON.parse(text);    
//将一个 JSON 字符串转换为 JavaScript 对象。
document.getElementById("demo").innerHTML = obj.sites[1].name + " " + obj.sites[1].url;
</script>

var obj = {a: 'Hello', b: 'World'}; 
//这是一个js对象，注意js对象的键名也是可以使用引号包裹的,这里的键名就不用引号包含
var json = '{"a": "Hello", "b": "World"}'; 
//这是一个 JSON 字符串，本质是一个字符串

var obj = JSON.parse('{"a": "Hello", "b": "World"}'); 
//结果是 {a: 'Hello', b: 'World'}  一个对象
var json = JSON.stringify({a: 'Hello', b: 'World'}); 
//结果是 '{"a": "Hello", "b": "World"}'  一个JSON格式的字符串

javascript:void(0) 含义

包含了一个位置信息，默认的锚是#top 也就是网页的上端。
而javascript:void(0), 仅仅表示一个死链接。
在页面很长的时候会使用 # 来定位页面的具体位置，格式为：# + id。
如果你要定义一个死链接请使用 javascript:void(0) 。

<a href="javascript:void(0);">点我没有反应的!</a>
<a href="#pos">点我定位到指定位置!</a>
<br>
...
<br>
<p id="pos">尾部定位点</p>

JavaScript 异步编程⭐

回调函数(用来异步之后回归主线程

<p>回调函数等待 3 秒后执行。</p>
<p id="demo"></p>
<script>
function print() {
    document.getElementById("demo").innerHTML="RUNOOB!";
}
setTimeout(print, 3000);                          //setTimeout()
</script>

//简化
<script>
setTimeout(function () {
    document.getElementById("demo").innerHTML="RUNOOB!";
}, 3000);
</script>

//主次分明
<script>
setTimeout(function () {
    document.getElementById("demo1").innerHTML="RUNOOB-1!";
}, 3000);
document.getElementById("demo2").innerHTML="RUNOOB-2!";
</script>

异步 AJAX

<p><strong>以下内容是通过异步请求获取的：</strong></p>
<p id="demo"></p>

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

JavaScript Promise

resolve 和 reject 都是函数，其中调用 resolve 代表一切正常，reject 是出现异常时所调用的：
.then() 可以将参数中的函数添加到当前 Promise 的正常执行序列，.catch() 则是设定 Promise 的异常处理序列，.finally() 是在 Promise 执行的最后一定会执行的序列。

<script>
new Promise(function (resolve, reject) {
    var a = 0;
    var b = 1;
    if (b == 0) reject("Divide zero");
    else resolve(a / b);
}).then(function (value) {
    console.log("a / b = " + value);
}).catch(function (err) {
    console.log(err);
}).finally(function () {
    console.log("End");
});
</script>

–a / b = 0
–End

Gary jie

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
JavaScript基础版实例（二）

Js调试console.log() 方法在调试窗口上打印 JavaScript 值：<body><h1>我的第一个 Web 页面</h1><p>浏览器中(Chrome, IE, Firefox) 使用 F12 来启用调试模式，在调试窗口中点击 "Console" 菜单。</p><script>a = 5;b = 6;c = a + b;console.log(c);</script></bo
复制链接

扫一扫