JavaScript
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属性
