LOADING...

加载过慢请开启缓存(浏览器默认开启)

loading

JavaScript

2022/8/12 前端

js概述(课程目标)

  • JS的重要作用，HTML+CSS+JS之间的关系
  • JS是为了实现动态页面
  • JS脚本语言程序控制语法
  • JS脚本语言函数、自定义函数
  • JS脚本语言事件响应及处理、表单处理
  • JS脚本语言DOM模型及操作

自定义函数

自定义函数是完成某一功能的代码段，可重复执行，方便管理和维护

创建方法1：这种是函数声明，可以先使用后定义

function fun1(){
    代码片段
    return ***;
}

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <script type="text/javascript" src="a.js"></script>
</head>
<body>
    
</body>
</html>
------------------------------------------
function add(n1,n2){
    var n3;
    n3 = n1 + n2;
    return n3;
}
var num = add(13,4);
console.log(num); //F12 Console
// alert(num); 弹窗

创建方法2：这种叫做函数表达式 必须先定义后使用

var fun1 = function(x){
    return x+1;
};

var num1=function(n1,n2){
    var n3 = n1 + n2;
    return n3;
}
var n = num1(13,14);
alert(n);

数据类型

基本数据类型

number、string、boolean、undefined、null

undefined：未定义，一般指的是已经声明，但是没有赋值的变量

null：空对象类型，var a = null，和 var a =”” 有区别

特殊数据类型

object：对象类型，在js常见的有window，document，array等

NaN：是Number的一种特殊类型，isNaN()，如果是数字返回false，不是数字返回true

类型转换

parseInt()、parseFloat()、**Number()**、Boolean()

Number优先使用

作用：强制类型转换、隐式类型转换

var str = "123";
console.log(str+1); //1231
console.log(parseInt(str)+1); //124

var str1 = "aa";
if(!isNaN(str1)){
// isNaN()，如果是数字返回false，不是数字返回true
    console.log(parseInt(str1));
}else{
    console.log("is error");
    str = 0;
}
console.log(str); //is error / 0

var str="123a"; //后置字母可以忽略
console.log(parseInt(str)); //123
console.log(parseFloat(str)); //123
console.log(Number(str)); //NaN

var str="a123"; //前导字母不可忽略
console.log(parseInt(str)); //NaN
console.log(parseFloat(str)); //NaN
console.log(Number(str)); //NaN

var str="0123"; //0也是数字
console.log(parseInt(str)); //123
console.log(parseFloat(str)) ; //123
console.log(Number(str)); //123

var str="0123.654";
console.log(parseInt(str)); //123
console.log(parseFloat(str)); //123.654
console.log(Number(str)); //123.654

var str=null;
console.log(parseInt(str)); //NaN
console.log(parseFloat(str)); //NaN
console.log(Number(str)); //0

变量作用域

作用域：全局变量、局部变量

局部变量：在函数内部创建的变量，称为局部变量，其他函数不能使用。

全局变量：在函数外部创建的变量，称之为全局变量，在函数之间可以共享使用

运算符

比较运算符：用于比较两个值，结果是true或者false

运算符范围：>、>=、!=、<、<=

示例：x<10为true //x=2

内置函数

  • 字符函数
    • substring、substr、charAt
    • split
    • length、indexOf
    • concat
    • replace
  • 日期函数
    • Date
    • getDate、getDay、getMonth
    • getFullYear、getYear、getHours、getMinutes、getSeconds
  • 数学函数
    • Math.round
    • max、min、abs
  • 转化函数
    • parseInt、parseFloat、Number、Boolean
console.log(str.substr(0,3));//从0开始截取3个长度的字符串
console.log(str.substring(0,3));//从起始到结束的位置 
console.log(str.charAt(16));//获取第十六位置上的数字
console.log(str.length)//长度
console.log(str.indexOf(1));//查找1的位置 (1,4)从4的位置开始找第一次出现1的
console.log(str.length)
console.log(str.concat("55","77"));//字符串连接
console.log(str.replace("aa","pcy"));//字符的替换
---------------------------------------------------------------------
var d1 = new Date();
var d2 = new Date("2020-1-1");
console.log(d1.getDate());
var n = d2.getTime() - d1.getTime();
console.log(parseInt(n/(24*3600*1000)));//转换为天数
======================================================
//2020-1-1 15:58 日期格式化
function fun_FmtDate(){
    var d1 = new Date();
    var yyy,mm,dd,hh,mi,ss;
    yyy = d1.getFullYear();
    mm = d1.getMonth()+1; //month从01开始 需要加1
    dd = d1.getDay();
    hh = d1.getHours();
    mi = d1.getMinutes();
    ss = d1.getSeconds(); 
    time = yyy+"-"+mm+"-"+dd+" "+hh+":"+mmi+":"+"ss";
    return time; //谁调用fun_FmtDate 谁就会得到time
}
console.log(fun_FmtDate()); 
======================================================
var n = 16.654;
console.log(Math.round(n)); //17
console.log(n.toFixed(2)); //16.65
console.log(Math.min(2,6,81,1)); //1
console.log(Math.abs(-2)); //2

数组

var array = new Array();
var array = new Array(5);
var array = new Array(1,2,3,"a","y",4);
var array = [1,2,3,"a","y",4];
---------------------------------------
数组遍历
//console.log(array[0]);
var array = [1,2,3,"a","y",4];
for(var str in array){
    console.log(array[str]);
}
=======================================
var i = 0;
var n = array.length;
for(i;i<n;i++){
    console.log(array[i]);
}

表单< form >

表单的主要作用是在客户端接收用户的信息，然后将数据递交给后台的程序来操控这些数据

JS做什么：设置或获取各种表单元素的值

示例：利用js给列表框等表单元素初始化

在js中所有事件都是以on开头 eg: onclick

< span > < label >不涉及到换行

onload + onclick
<!DOCTYPE html>
<html>
<head>
    <title></title>
    <script type="text/javascript" src="a.js"></script>
</head> 
<!-- onload是加载/刷新页面时候执行 -->
<body onload="show1()">
    <form>
        <label>用户名：</label>
        <input type="text" id="userName" name="userName" value="123"/>
        <input type="button" id = "btn" onclick="show1()" value="btn" />
    </form>
</body>
</html>
----------------------------------------------------------------------
function show1(){
    // alert("123456");
    //按照元素的id来获取该元素
    document.getElementById("userName").value="999";
}

单选按钮正反馈
<!DOCTYPE html>
<html>
<head>
    <title></title>
    <script type="text/javascript" src="a.js"></script>
</head> 
<!-- onload是刷新页面时候执行 -->
<body>
    <form>
        <label>用户名：</label>
        <input type="text" id="userName" name="userName" value="123"/><br>
        <!-- 设置name="xb"可以单选 不设置则会多选  value是给后台看的数据-->
        <input type="radio" name="xb" value="1" checked="checked">男
        <input type="radio" name="xb" value="0">女<br>
        <input type="button" id = "btn" onclick="show1()" value="btn" />
    </form>
</body>
</html>
------------------------------------------------------------------
function show1(){
    // alert("123456");
    //按照元素的id来获取该元素
    // document.getElementById("userName").value="999";
    var xb = document.getElementsByName("xb");
    var xbText;
    if(xb[0].checked){//checked 判断0是否被选中
        xbText = xb[0].value;
    }else{
        xbText = xb[1].value;
    }
    alert(xbText);
}

日期随着年份变化
<!DOCTYPE html>
<html>
<head>
    <title></title>
    <script type="text/javascript" src="a.js"></script>
</head> 
<!-- onload是刷新页面时候执行 -->
<body onload="ymd()">
    <form>
        <select name="yyyy" id="yyyy"></select>年
        <select name="mm" id="mm"></select>月
        <select name="dd" id="dd"></select>日
    </form>
</body>
</html>
-------------------------------------------------------------
function ymd(){
// 将yyyy被获取到 获取控件
    var yyyy = document.getElementById("yyyy");
    var mm = document.getElementById("mm");
    var dd = document.getElementById("dd");
    var date = new Date();
    var year = parseInt(date.getFullYear());
    initSelect(yyyy,1999,year);
    initSelect(mm,1,12);
    initSelect(dd,1,31);
}
// 给列表框赋值,传递三个参数:表单元素,开始,结束值
function initSelect(obj,start,end){
    for(var i=start;i<=end;i++){
        obj.options.add(new Option(i,i));
    }
}

日期[年月日]的三级联动
<!DOCTYPE html>
<html>
<head>
    <title></title>
    <script type="text/javascript" src="a.js"></script>
</head> 
<!-- onload是刷新页面时候执行 onchange是改变效果-->
<body onload="ymd(),initLogo()">
    <form>
        <select name="yyyy" id="yyyy" onchange="selectYmd()"></select>年
        <select name="mm" id="mm" onchange="selectYmd()"></select>月
        <select name="dd" id="dd"></select>日
        <input type="button" value="删除列表框条目" onclick="deleteSelect()" /><br>
        <img id="logoImg" src="../image/1.gif">
        <select id="logo" onchange="selectLogo()"></select>
    </form>
</body>
</html>
----------------------------------------------------------------------
function ymd(){
// 将yyyy被获取到 获取控件
    var yyyy = document.getElementById("yyyy");
    var mm = document.getElementById("mm");
    var dd = document.getElementById("dd");
    var date = new Date();
    var year = parseInt(date.getFullYear());
    initSelect(yyyy,1999,year);
    initSelect(mm,1,12);
    initSelect(dd,1,31);
    //获取列表框的长度
    var n = yyyy.length;
    yyyy.selectedIndex = Math.round(n/2);
    //删除列表框里的信息→月、日可以做到联动效果
    // 将某个列表框的条目数设置为零,效果是删除
    // dd.options.length = 0;
}
// 给列表框赋值,传递三个参数:表单元素,开始,结束值
function initSelect(obj,start,end){
    for(var i=start;i<=end;i++){
        obj.options.add(new Option(i,i));
    }
}

function selectYmd(){
    var yyyy = document.getElementById("yyyy");
    var mm = document.getElementById("mm");
    var dd = document.getElementById("dd");
    var m = parseInt(mm.value);
    var dayEnd;
    if(m==4 || m==6 || m==9 || m==11){
        dayEnd = 30;
    }else if(m == 2){
        dayEnd = 28;
        y = parseInt(yyyy.value);
        if((y % 4 == 0 && y % 100 != 0) || y % 400 == 0){
            dayEnd = 29;
        }
    }else{
        dayEnd = 31;
    }
    dd.options.length = 0;
    initSelect(dd,1,dayEnd);
}
// 删除列表框的某一个条目，即：按索引号删除
function deleteSelect(){
    var dd = document.getElementById("dd");
    // dd.options.remove(1);
    for(i=dd.length;i>=0;i--){
        dd.options.remove(0);
    }
}
function initLogo(){
    var logo = document.getElementById("logo");
    for(i=1;i<=15;i++){
        logo.options.add(new Option(i,i));
    }
}
function selectLogo(){
    var logo = document.getElementById("logo");
    var n = logo.value;//value是属性 不是函数
    // alert(n);测试的值
    var logoImg = document.getElementById("logoImg");
    logoImg.src = "../image/"+ n +".gif"; //字段的链接匹配
    
}

复选框全选+反选
<!DOCTYPE html>
<html>
<head>
    <title></title>
    <script type="text/javascript" src="a.js"></script>
</head>
<body>
    <form>
    <input type="checkbox" name="interest" value="youyong"/><label>游泳</label>
    <input type="checkbox" name="interest" value="pashan" /><label>爬山</label>
    <input type="checkbox" name="interest" value="kanshu" /><label>看书</label>
    <input type="checkbox" name="interest" value="tingge" /><label>听歌</label><br>
    <input type="button" id="btn1" value="全选" onclick="checkInterest()"/>
    <input type="button" value="反选" onclick="checkInterest1()"/>
    </form>
</body>
</html>
--------------------------------------------------------------------
var flag = true;
function checkInterest(){
    var interest = document.getElementsByName("interest");
    for(i=0;i<interest.length;i++){
        interest[i].checked=flag;
    }
    if(flag){
        document.getElementById("btn1").value="全不选";
    }else{
        document.getElementById("btn1").value="全选";
    }
    flag=!flag;//开关变量
}
function checkInterest1(){
    var interest = document.getElementsByName("interest");
    for(i=0;i<interest.length;i++){
        interest[i].checked=!interest[i].checked;
        // 复选框获取console值
        console.log(interest[i].value);
    }
}

事件

事件是指被程序发现的行为或发生的事情，并且它可能会被程序处理

特点：js的事件、都是以on开头，有onclick[当鼠标点击时]、onchange[当列表框发生改变]、onload…

分类：键盘事件、鼠标事件、表单事件…

  • 鼠标事件

    • onclick、ondblclick

    • onmouseover、onmouseout、onmousedown

  • 键盘事件

    • onkeydown[按下去还没松开之前]、onkeyup、keypress

  • 表单事件

    • onfoucs、onsubmit、onblur、onchange

Dom(Document Object Model)

什么是DOM：将文档(页面)表现为结构化的表现方法，使每一个页面元素都是可操控，DOM将网页和脚本以及其他的编程语言联系了起来。

特点：利用js控制页面中的所有元素，使页面更加”聪明”

分类：元素节点、属性节点、文本节点

方法 描述
getElementById 返回带有指定ID的元素
getElementByName 获取相同名称(name)的元素的节点列表
getElementByClassName 返回包含带又指定类名的所有元素的节点列表
getElementByTagName 返回包括含有指定标签名称的所有元素的节点列表

DOM作用

  • 通过id、name获取元素
  • 通过标签名获取所有的标签
  • 改变HTML属性，例如：改变img的src属性
© 2018 - 2025 P-luminary @Asuna
Based on the Hexo Engine