文章目录
一、什么是JavaScript？
1.概述
JS是一种脚本编程语言，也是一种基于对象的面向对象语言，还是一种解释性的语言。它的基本结构形式与其他编程语言相似，如C语言、VB语言等，但需要先编译后执行。它支持客户端与服务端的应用程序以及构件的开发。
2.JavaScript的基本组成
注意：ECMScript最新版本已经到es6,但现在的大多数浏览器还处在es5.
3.怎么引入JavaScript
①内部标签引入
<script type="text/javascript">
alert('hello,world');
</script>
注意：body和head都可以存放。type="text/javascript"不必要写，默认。
②外部引入
<script src="js/qj.js"></script>
注意：Script标签必须成对存在。
4.JavaScript的基本语法
①定义变量
变量类型 变量名 = 变量值;
var score = 71;
注意：JavaScript严格区分大小写！
②打印变量
console.log(score) 在浏览器的控制台打印变量！
③在页面输出
alert(num);
④定义对象
<script>
var person = {
name: "qinjiang",
age: 3,
tags: ['js','java','web','...']
}
</script>
注意：
对象是大括号；
数组是中括号~~每个属性之间使用逗号隔开，最后一个不需要添加。
Java的数值必须是相同类型的对象，JavaScript中不需要这样！
如果取数组下标越界，就会输出undefined（未定义）
5.JavaScript的数据类型
注意：
-
尽量避免使用浮点数进行运算，存在精度问题！
-
NaN===NaN ，这个与所有的数值都不相等，包括自己 只能通过 isNaN(NaN) 来判断这个数是否是 NaN
-
null和undefined可以等同
typeof 123 "number" typeof '123' "string" typeof true "boolean" typeof NaN "number" typeof [] "object" typeof {} "object" typeof Math.abs "function" typeof undefined "undefined"
大String与小String的区别
var a="qqq"; //小string 属于原始数据类型
var b=new String("abc"); //string是内置类 父类是object ,大string属于object
6.严格检查格式：‘use strict’; 预防JavaScript的随意性导致产生的一些问题
<script>
'use strict';
let dh = 1;
</script>
注意：必须写在JavaScript的第一行！局部变量建议都使用 let 去定义
7.比较运算符问题
=
== 等于（类型不一样，值一样，也会判断为true）
=== 绝对等于(类型一样，值一样，结果true)
8.for in 语句与with语句
①for in语句
var arr=[false,1,2,"ac",3.14] ;
for(var i=0 ; i<arr.length;i++){
console.log(arr[i])
}
//for in 语句 可以遍历对象的属性，还有数组
for (var i in arr){
console.log(arr[i])
}
② with语句
with(obj){
console.log(sname+ sno);//相当于给对象的属性前面加obj. with语句
}
二、JavaScript的函数
1.定义函数
(1)方式一
function abs(x){
if(x>=0){ return x; }
else{ return -x; }
}
注意：如果没有执行 return ，函数执行完也会返回结果，结果就是 undefined
(2)方式二
var abs = function(x){
if(x>=0){ return x; }
else{ return -x; }
}
注意：function(x){ …. } 这是一个匿名函数。但是可以把结果赋值给 abs ，通过abs 就可以调用函数！
2.假设不存在参数，如何规避？
var abs = function(x){
//手动抛出异常来判断
if (typeof x!== 'number') {
throw 'Not a Number';
}
if(x>=0){
return x;
}else{
return -x;
}
}
3.arguments:是一个JS免费赠送的关键字
for (var i = 0; i<arguments.length;i++){
console.log(arguments[i]);
}
4.多个参数的问题：获取除了已经定义的参数之外的所有参数
<script>
function aaa(a,b,...rest) {
console.log("a=>"+a);
console.log("b=>"+b);
console.log(rest);
}
aaa()
</script>
注意：rest 参数只能写在最后面，必须用 … 标识。
5.变量的作用域
①假设在函数体中声明，则在函数体外不可以使用（非要想实现的话，后面可以研究一下闭包 ）
function qj() {
var x = 1;
x = x + 1;
}
x = x + 2; //Uncaught ReferenceError: x is not defined
②如果两个函数使用了相同的变量名，只要在函数内部，就不冲突
function qj() {
var x = 1;
x = x + 1;
}
function qj2() {
var x = 'A';
x = x + 1;
}
③内部函数可以访问外部函数的成员，反之则不行
function qj() {
var x = 1;
// 内部函数可以访问外部函数的成员，反之则不行
function qj2() {
var y = x + 1; // 2
}
var z = y + 1; // Uncaught ReferenceError: y is not defined
}
④假设，内部函数变量和外部函数的变量，重名！
<script>
function qj() {
var x = 1;
function qj2() {
var x = 'A';
console.log('inner'+x); // outer1
}
console.log('outer'+x); //innerA
qj2()
}
qj()
</script>
注意：JavaScript 中 函数查找变量从自身函数开始~，由 ‘’内‘’ 向 ‘’外‘’ 查找 . 假设外部存在这个同名的函数变量，则内部函数会屏蔽外部函数的变量。
⑤提升变量的作用域
function qj() {
var x = "x" + y;
console.log(x);
var y = 'y';
}
结果为：xundefined
⑥js 执行引擎，自动提升了y的声明，但是不会提升变量y的赋值
function qj2() {
var y;
var x = "x" + y;
console.log(x);
y = 'y';
}
qj2()
6.全局函数
(1)全局对象window
var x = 'xxx';
alert(x);
alert(window.x); // 默认所有的全局变量，都会自动绑定在 window对象下；
(2)alert() 这个函数本身也是一个 window 变量；
<script>
var x = 'xxx';
window.alert(x);
var old_alert = window.alert;
//old_alert(x);
window.alert = function () {
};
// 发现 alert() 失效了
window.alert(123);
//恢复
window.alert = old_alert;
window.alert(456);
</script>
注意：Javascript 实际上只有一个全局作用域， 任何变量（函数也可以视为变量），假设没有在函数作用范围内找到，就会向外查找，如果在全局作用域都没有找到，报错 RefrenceError
(3)问题：局部作用域var的结果超出了范围，依然被计算
function aaa() {
for (var i = 0; i < 100; i++) {
console.log(i)
}
console.log(i+1); //问题？ i 出了这个作用域还可以使用
}
解决办法：let关键字
function aaa() {
for (let i = 0; i < 100; i++) {
console.log(i)
}
console.log(i+1); //Uncaught ReferenceError: i is not defined
}
7.常量const
(1)一般定义常量
var PI = '3.14';
console.log(PI);
PI = '213'; //可以改变这个值
console.log(PI);
(2)ES6中引入常量const
const PI = '3.14'; // 只读变量
console.log(PI);
PI = '123'; // TypeError: Assignment to constant variable.
console.log(PI);
注意：定义const不可以改变，ES6之前可以被赋值。
8.常用的函数总结
①数据类型相关的函数
isNaN() 函数，数据不是一个数字true
parseInt() 字符串转换为数字，并且取整数位
parseFloat() 字符串转float
Math.cell() 向上取整
"abcdef".substr(1,4) //从1下标开始，取4个字符bcde
"abcdef".substring(1,4) //左闭右开bcd
②通过object 类型的prototype属性 给对象添加属性和函数。
function student(a,b,c){
this.sno=a;
this.sname=b;
this.sage=c;
}
student();
var obj = new student(217,"刘恒",11);
console.log(obj.sno);
console.log(obj.sname);
console.log(obj["sage"]);
//所有类都继承了父类object，object中的属性prototype可以给类增加属性和函数
student.prototype.getPname = function(){
return this.sname;
}
student.prototype.telephone=null;
obj.telephone=1346666;
console .log(obj.getPname())
console.log(obj.telephone)
三、JavaScript的事件
1.常用的事件
2.注册事件的两种方式
①直接在标签上使用 on事件
<input type="button" value="删除数据" onclick="window.confirm('确定要删除数据')"/>
②通过内置对象注册
var tableElt=document.getElementById("tabl"); //标签id
tableElt.onclick=function(){}
四、JavaScript表单
1.表单验证
代码展示：
<!doctype html>
<html>
<head>
<title>表单验证</title>
<style>
span{
color:red;
font-size:"12px";
}
</style>
<script type="text/javascript">
window.onload=function(){
//获取span对象
var usernameerror=document.getElementById("usernameerror");
//获取用户名对象
var usernameElt=document.getElementById("username");
usernameElt.onblur=function(){
//获取value
var username=usernameElt.value;
//去掉空格
username=username.trim();
if(username===""){
usernameerror.innerText="用户名不能为空";
}
else{
//用户名不为空
if(username.length < 6||username.length > 14){
usernameerror.innerText="用户名必须在6-14位之间";
}
else{
var regExp = /^[A-Za-z0-9]+$/;
var ok = regExp.test(username);
if(ok){
//用户名最终合法
}else{
//用户名中含有特殊符号
usernameerror.innerText = "用户名只能由字母和数字组成"
}
}
}
}
username.onfocus=function(){
if(usernameerror.innerText != ""){
username.value=" ";
}
usernameerror.innerText="";
}
var passwordElt1=document.getElementById("password1");
var passwordElt = document.getElementById("password");
var passworderror = document.getElementById("passworderror");
passwordElt1.onblur=function(){
var password1=passwordElt1.value;
var password=passwordElt.value;
if(password !=password1){
passworderror.innerText="密码与确定密码不一致";
}
else{
//密码一致
}
}
passwordElt1.onfocus=function(){
if(passworderror.innerText != ""){
password1.value=" ";
}
passworderror.innerText="";
}
var emailerrorElt=document.getElementById("emailerror");
var emailElt=document.getElementById("email");
emailElt.onblur=function(){
var email=emailElt.value;
var emailRegExp = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;
var ok=emailRegExp.test(email);
if(ok){
//邮箱最终合法
}else{
//邮箱不符合
emailerrorElt.innerText = "邮箱不合法";
}
}
emailElt.onfocus=function(){
if(emailerrorElt.innerText != ""){
emailElt.value=" ";
}
emailerrorElt.innerText="";
}
var buttonElt=document.getElementById("submitBtn");
buttonElt.onclick=function(){
usernameElt.focus();
usernameElt.blur();
passwordElt1.focus();
passwordElt1.blur();
emailElt.focus();
emailElt.blur();
if(emailerrorElt.innerText=="" &&passworderror.innerText=="" &&usernameerror.innerText==""){
var formElt=document.getElementById("userform");
formElt.submit();
}
}
}
</script>
</head>
<body bgcolor="" " >
欢迎学习HTML语言
<form action="http://localhost:8080/jd/save" id="userform">
<table border="1px">
<tr>
<td>用户名</td> <td><input type="text" id="username" name="username" /></td>
<span id="usernameerror"></span>
<tr>
<td>密码</td> <td><input type="password" id="password" name="password"/></td>
<tr>
<td>确定密码</td> <td><input type="password" id="password1"/></td>
<span id="passworderror" ></span>
<tr>
<td>邮箱</td> <td><input type="email" id="email" name="email"s/></td>
<span id="emailerror" ></span>
<tr>
<td> <input type="button" id="submitBtn" value="注册" />
<input type="reset" value="重置"/></td>
</table>
</form>
</body >
</html>
2.复选框的全选和取消全选
window.onload=function(){
var firstElt=document.getElementById("firstChk");
var checkboxElt =document.getElementsByName("aihao");
firstElt.onclick=function(){
for(var i=0;i<checkboxElt.length; i++){
checkboxElt[i].checked=firstElt.checked;
}
}
for(var i=0;i<checkboxElt.length; i++){
checkboxElt[i].onclick=function(){
var count=0 ;
for(var i=0;i<checkboxElt.length; i++){
if(checkboxElt[i].checked){
count++;
}
}
if(count==checkboxElt.length){
firstElt.checked=true;
}
}
}
}
}
3.将当前窗口设置为顶级窗口
4.文本框改复选框
五、Date的基本使用
1.Date的函数
<script>
var now = new Date(); //Sat Jan 04 2020 10:47:06 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(1578106175991)) //时间戳转为时间
now.toLocaleString() "2020/1/4 上午10:49:35"
now.toGMTString() "Sat, 04 Jan 2020 02:49:35 GMT"
</script>
2.周期函数，不断刷新时间
<script>var getTim =function(){
var date=new Date();
document.getElementById("data").innerHTML=date.toLocaleString();
}
var start=function(){
ends= window.setInterval("getTim()",1000);
}
var end=function(){
window.clearInterval(ends);
}
</script>
<input type="button" value="点击获取时间" onclick="start()"/>
<div id="data" ></div>
<input type="button" value="点击停止时间" onclick="end()"/>
六、JSON
1.JSON是什么
- JSON(JavaScript Object Notation, JS 对象简谱) 是一种轻量级的数据交换格式。
- 简洁和清晰的层次结构使得 JSON 成为理想的数据交换语言。
- 易于人阅读和编写，同时也易于机器解析和生成，并有效地提升网络传输效率。
2.JSON的格式
- 对象都用 {}
- 数组都用 []
- 易于人阅读和编写，同时也易于机器解析和生成，并有效地提升网络传输效率。
①JSON字符串 和 JS 对象的转化**
var user = {
name: "qinjiang",
age: 3,
sex: '男'
}
//对象转化为json字符串 {"name":"qinjiang","age":3,"sex":"男"}
var jsonUser = JSON.stringify(user);
//json 字符串转化为对象 参数为 json 字符串
var obj = JSON.parse('{"name":"qinjiang","age":3,"sex":"男"}');
②通过JSON给表格赋值
<!doctype html>
<html>
<head>
<title>弹出确定框，获取表格中的数据并展示出来</title>
</head>
<body >
<script>
var dorm ={
"personnel":6,
"student":[
{"name":"刘恒","id":"7758521","address":"陕西省西安市","assets":"100亿"},
{"name":"常铭轩","id":"7758522","address":"陕西省西安市","assets":"250"},
{"name":"贾刘煜","id":"7758523","address":"陕西省西安市","assets":"100亿"},
{"name":"岳囿辰","id":"7758524","address":"陕西省西安市","assets":"100亿"},
{"name":"张友为","id":"7758525","address":"陕西省西安市","assets":"2500"},
{"name":"张少华","id":"7758526","address":"陕西省西安市","assets":"100亿"}
]
};
window.onload=function(){
var tableElt=document.getElementById("tabl");
tableElt.onclick=function(){
var student = dorm.student;
var html="";
for(var i=0;i<student.length;i++){
var stu=student[i];
html +="<tr>";
html +="<td>"+stu.name+"</td>" ;
html +="<td>"+stu.id+"</td>";
html +="<td>"+stu.address+"</td>";
html +="<td>"+stu.assets+"</td>";
html +="</tr>";
}
document.getElementById("emptbody").innerHTML=html;
document.getElementById("personnum").innerHTML=dorm.personnel;
}
}
</script>
</body >
<h1>217宿舍成员登记表</h1>
<input type="button" value="显示表格内容" id="tabl" />
<table border="1px" width="500px">
<tr>
<td>姓名</td>
<td>学号</td>
<td>家庭地址</td>
<td>资产</td>
</tr>
<tbody id="emptbody">
</tbody>
</table>
宿舍总人数:
<span id="personnum"></span>
</html>
1322
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
