继续补js
day3_javascript1
1javascript介绍
javascript 语法有自己的特点
简称为js
核心语法 ECMAScript 简称ES
文档对象模型 DOM
浏览器对象模型 BOM
2js引入方式
1使用script标签 调试代码<script>console.log("hello world");</script>2使用js文件 上线使用script带src 引入js文件注意:带src的script标签 标签体无效<script src="./js/myjs.js"></script>
3直接写js代码段 尽量少用<button onclick="javascript:console.log('1233333')">点击我</button>3js变量(*)
变量名 多单词+驼峰
变量声明
(弱类型) 使用统一的关键字 声明变量
赋值时变量的类型根据值的类型决定
var 不需要使用
let 声明变量
const 声明常量
4js数据类型(*)
5种数据类型
number 数字
string 字符串
boolean 布尔
undefined 未定义/未初始化
object 对象
隐藏类型
function 函数
// 数字类型做了合并 所以数据精确计算经常有bug let myNum = 0.11111111;console.log(myNum);console.log(typeof myNum);//字符串类型// "" '' ``模板字符串 ${myNum}拼接变量let myStr = `"'a${myNum}'${myNum}"`;console.log(myStr);console.log(typeof myStr);//布尔类型let myBool = true;console.log(myBool);console.log(typeof myBool);//未定义或未初始化 undefinedlet myVal;console.log(myVal);console.log(typeof myVal);console.log(typeof myVal2);//对象类型let myDate = new Date();console.log(myDate);console.log(typeof myDate);let myArr = new Array();console.log(myArr);console.log(typeof myArr);//函数类型let myFun = function () {console.log(1);}
console.log(typeof myFun);5js运算符
<!DOCTYPE html> <html> <head><meta charset="UTF-8" /><title>title</title><script> /*控制台打印的颜色蓝色 数字 bol类型黑色 字符串 string类型灰色 未定义 undefined类型*/ let myNum1 = 0.1;let myNum2 = 0.2;let myNum3 = myNum1 + myNum2;console.log( myNum1);// toFixed()函数 保留小数点位数 会转为字符串console.log( myNum3.toFixed(1));let myNum4 = 7;let myNum5 = 3;//除法 如果除不尽 会带小数console.log( myNum4/myNum5);//取余数 如果带小数点 余数也带小数点console.log( myNum4%myNum5); //++ -- 先取值再运算 i++ i-- 先运算再取值 ++i --i let myStr;//赋值运算符 有返回值 是赋给变量的值console.log( myStr="aaa"); //***笔试题// == 和 === 的区别// == 比较值 === 值和类型都相等//内置类型转换 //哪些情况会进行类型转换//1.数字和能转成数字的字符串//2.数字 0/1 布尔值 false / true let temp1 = 10;let temp2 = "10";console.log( temp1 == temp2);console.log( temp1 === temp2); let temp3 = 0;let temp4 = false;console.log( temp3 == temp4);console.log( temp3 === temp4); //逻辑运算符// && 有一个为假 则为假 || 有一个为真 则为真 ! 逻辑取反//前端代码压缩 生产版本(经过压缩) 开发版本(未经过压缩)console.log(!0);</script> </head> <body></body> </html>
6js类型转换
//主动转换 数字和字符串//parseInt 转整型 还可以用来去掉小数点//parseFloat 转小数
<!DOCTYPE html> <html> <head><meta charset="UTF-8" /><title>title</title><script>let myStr = "a1a11a111";//NaN not a numberconsole.log( typeof parseInt(myStr)); let myStr2 = "a1a1.11";console.log(parseFloat(myStr2)); let myNum = 11.823;console.log(parseInt(myNum)); //主动转换 数字和字符串//parseInt 转整型 还可以用来去掉小数点//parseFloat 转小数 </script> </head> <body></body> </html>
7js条件语句(*)
注意:js中if判断条件 不限定必须用bol值
// if条件中 有正常值 就可以执行 if(1) if("a")
// if 不执行 0 null undefined '' if(0) if("")
<!DOCTYPE html>
<html>
<head><meta charset="UTF-8" /><title>title</title><script>//if 条件语句let myNum = 1;//配合bol值 判断// if条件中 有正常值 就可以执行// if 不执行 0 null undefined ''let score = 86;if(score<60){console.log("给一巴掌");}else if(score<80){console.log("给一个赞");}else{console.log("给一个牛");}// switch 条件语句let myGrade = "S";switch(myGrade){case "A":console.log("优秀");break;case "B":console.log("良好");break;case "C":console.log("及格");break;default:console.log("数据有误");}</script>
</head>
<body></body>
</html>8循环语句
<!DOCTYPE html>
<html>
<head><meta charset="UTF-8" /><title>title</title><script>/*** 循环语句* for 结构体* 基础for循环* for(初始化;条件;更新){* 循环体* }* 循环的用法:* 指定次数的循环 遍历集合* * for in 循环 得到索引* for of 循环 得到数据* * * while 结构体* 未知次数的循环* * */for (let i = 0; i < 10; i++) {console.log(i);}//console.log(i);let myArr = ["a", "b", "c"];// for (let i = 0; i < myArr.length; i++) {// console.log(myArr[i]);// }for(let item in myArr){console.log(myArr[item]);}for(let item of myArr){console.log(item);}let flag;while(flag<5){//生成随机数if(flag>=5){break;}}do{//生成随机数}while(flag<5);</script>
</head>
<body></body>
</html>基本语法练习
<!DOCTYPE html>
<html>
<head><meta charset="UTF-8" /><title>title</title><script>//运算符练习//数字 1549 把每个位数数字摘出来 再相加let myNum = 1549;let num1 = myNum % 10;let num2 = parseInt(myNum / 10%10) ;let num3 = parseInt(myNum / 100%10) ;let num4 = parseInt(myNum / 1000) ;console.log(num1);console.log(num2);console.log(num3);console.log(num4);console.log(num1+num2+num3+num4);//条件语句练习let myDay = 1;//0-6//输出工作日/周末// if(myDay == 0 || myDay == 6)// console.log("weekend");// else// console.log("weekday");// switch(myDay){// case 0:// case 6:// console.log("weekend");// break;// default:// console.log("weekday");// }//循环语句练习//输出乘法口诀表//document.write("<h1>aaa</h1>")document.write(`<table border="1">`)for(let x = 1; x <= 9; x++){document.write(`<tr>`)for(let y = 1;y<=x;y++){document.write(`<td>`);document.write(`${y}x${x} =${x*y}`);document.write(`</td>`);//if(x*y<10){document.write(" ");}}document.write(`</tr>`)//document.write(`<br>`);}document.write(`</table>`)</script>
</head>
<body></body>
</html>9函数
1系统函数
系统预设的函数
parseInt()parseFloat()isNaN("10") 检测是否是数字eval("1+2*3") 把可运行的字符串转换成代码并执行2自定义函数(*)
自己封装代码
声明式函数function 函数名(参数列表){//执行的代码//需要返回值时 直接加return关键字return 返回值;}
匿名函数let myFun3 = function(num1,num2){console.log("myFun3");return num1+num2;}1.js中没有重载 如果函数名重复 则后面的会覆盖前面的2.形参和实参可以不对应尽量避免形参和实参数量不匹配 3.函数名是一种特殊的变量 要注意避免与变量冲突
变量作用域
//全局变量在当前页面任何地方都生效//局变量只在当前函数有效//let 块作用域 只在for循环体中生效
<!DOCTYPE html>
<html>
<head><meta charset="UTF-8" /><title>title</title><script>/*** 函数* 类似于java中的方法* * 1系统函数* parseInt()parseFloat()isNaN("10") 检测是否是数字eval("1+2*3") 把可运行的字符串转换成代码并执行* * 2自定义函数* 声明式函数* function 函数名(参数列表){//执行的代码//需要返回值时 直接加return关键字return 返回值;}匿名函数let myFun3 = function(num1,num2){console.log("myFun3");return num1+num2;} 1.js中没有重载 如果函数名重复 则后面的会覆盖前面的2.形参和实参可以不对应尽量避免形参和实参数量不匹配 3.函数名是一种特殊的变量 要注意避免与变量冲突* */// console.log(isNaN("10"));// console.log(eval("1+2*3"));function myFun(){console.log("myFun");}myFun();// function myFun2(a,b){// //console.log(a+b);// return a+b;// }//js中没有重载 如果函数名重复 则后面的会覆盖前面的//console.log(myFun2(1,3));function myFun2(){//console.log(a+b);return "aaa";} function myFun2(a,b){//debugger//console.log(a+b);return a+b;}//形参和实参可以不对应//尽量避免形参和实参数量不匹配console.log(myFun2(1)); let myFun3 = function(num1,num2){console.log("myFun3");return num1+num2;}//避免冲突 函数名也是变量// 避免变量名和函数名冲突let res = myFun3(1,4);console.log(res);//变量作用域//全局变量在当前页面任何地方都生效//局变量只在当前函数有效//let 块作用域 只在for循环体中生效let muTemp = 10;let myFun4 = function(){let muTemp2 = 20;console.log(muTemp);console.log(muTemp2);}myFun4();console.log(muTemp);console.log(muTemp2);</script>
</head>
<body></body>
</html>10 元素 函数 事件的关系
11.js常用事件
页面通用操作
1.元素 函数 事件的关系
2.函数中处理的代码找元素 处理属性document.getElementById("myTitle")document.getElementById("myTitle").xxx属性 读取document.getElementById("myTitle").xxx属性 = "xxx" 赋值常用元素属性
隐藏的属性innerHTML 双标签内容显式的属性id 标签idvalue 文本框内容style.xxx 样式属性className 类名 class属性
1. onclick 点击事件(鼠标单击) (可以配合任意元素操作)
<!DOCTYPE html>
<html>
<head><meta charset="UTF-8" /><title>title</title><style>.myDiv{width: 200px;height: 200px;background-color: red;}.myDiv2{width: 100px;height: 100px;background-color: blue;border: 5px solid black;}</style><script>/*1.元素 函数 事件的关系2.函数中处理的代码找元素 改属性document.getElementById("myTitle")document.getElementById("myTitle").xxx属性 读取document.getElementById("myTitle").xxx属性 = "xxx" 赋值常用的元素属性隐藏的属性innerHTML 双标签内容显式的属性id 标签idvalue 文本框内容style.xxx 样式属性className 类名 class属性*/ function changeTitle (){console.log(11111);let ele = document.getElementById("myTitle")//innerHTML 双标签的内容console.log(ele.innerHTML);ele.innerHTML = "耳朵被biu了"}function changeText(){let ele = document.getElementById("myText")ele.value ="恭喜大佬上线!!!"}function myCopy(){// console.log( document.getElementById("text1").value);document.getElementById("text2").value = document.getElementById("text1").value }function changeDivColor(){// document.getElementById("aimDiv").style.backgroundColor = "blue"// document.getElementById("aimDiv").style.border = "5px solid black"document.getElementById("aimDiv").className = "myDiv2"}</script>
</head>
<body><h1 id="myTitle">特朗普</h1><button onclick="changeTitle()">biubiubiu</button><hr><input id="myText" type="text" ><button onclick="changeText()">日服第一男枪上线</button><hr><input id="text1" type="text" ><button onclick="myCopy()" >复制</button><input id="text2" type="text" ><hr><div id="aimDiv" class="myDiv"></div><button onclick="changeDivColor()" >改成蓝色</button>
</body>
</html>2. onmouseover鼠标悬停 onmouseout 鼠标移出 鼠标移动事件
1 一个元素可以标记多个事件 2 函数可以合并 调用时传实参 3 this关键字 实参传this 指向到发生事件的元素
<!DOCTYPE html>
<html>
<head><meta charset="UTF-8" /><title>title</title><style>.myDiv{width: 100px;height: 100px;border: 1px solid black;}</style><script>/*** 函数如果功能相近 可以合并 传参表示不同的效果* * 实参 哪里调用哪里传实参* onmouseover="changeBGC('#AFC')"* 字符串 '字符串'* 数字 123* 布尔值 true/false* */function changeBGC(myColor,myObj){//console.log(myColor,myObj);myObj.style.backgroundColor = myColor;//document.getElementById("myDiv").style.backgroundColor = myColor;}// this//1默认指向 当前窗口//console.log(this);//2实参传this 指向发生事件的元素//针对需要对发生事件的元素进行操作 可以使用this简化代码// function changeBGC2(){// document.getElementById("myDiv").style.backgroundColor = "white";// }</script>
</head>
<body><div id="myDiv" class="myDiv" onmouseover="changeBGC('#AFC',this)" onmouseout="changeBGC('white',this)"></div>
</body>
</html>3 onfocus 获得焦点 onblur 失去焦点 焦点事件
1.获取元素这里 有可以传参document.getElementById(id).style.color="red"; 2.实参传this 在有批量元素做类似操作时 比较方便
<!DOCTYPE html>
<html>
<head><meta charset="UTF-8" /><title>title</title><script>/*获取元素这里 有可以传参document.getElementById(id).style.color="red";*/ // function hightLight(id){// document.getElementById(id).style.color="red";// document.getElementById(id).style.border="5px solid lightblue";// }// function resetHightLight(id){// document.getElementById(id).style.color="black";// document.getElementById(id).style.border="1px solid black";// }function hightLight(myObj){myObj.style.color="red";myObj.style.border="5px solid lightblue";}function resetHightLight(myObj){myObj.style.color="black";myObj.style.border="1px solid black";}</script>
</head>
<body><input type="text" id="txt1" onfocus="hightLight(this)" onblur="resetHightLight(this)" /><br><input type="text" id="txt2" onfocus="hightLight(this)" onblur="resetHightLight(this)" /><br><input type="text" id="txt3" onfocus="hightLight(this)" onblur="resetHightLight(this)"/><br><input type="text" id="txt4" onfocus="hightLight(this)" onblur="resetHightLight(this)"/><br>
</body>
</html>4 onchange 内容改变
onchange 内容改变1 用在输入框 内容改变后 直接触发效果2 用在select 选项改变后 直接触发效果
传值时 1.主动传值 2.借助元素传值
<!DOCTYPE html>
<html>
<head><meta charset="UTF-8" /><title>title</title><style>.myDiv{width: 200px;height: 200px;border: 1px solid black;}</style><script>/*onchange 内容改变1 用在输入框 内容改变后 直接触发效果2 用在select 选项改变后 直接触发效果*/ function myChange(myObj){console.log("触发了.....");document.getElementById("text2").value = myObj.value}
/*
传值时
1.主动传值
2.借助元素传值
*/ function changeBGC(){//console.log();document.getElementById("myDiv").style.backgroundColor = document.getElementById("mySelect").value}</script></head>
<body><!-- onchange内容改变 --><input type="text" onchange="myChange(this)" /><input id="text2" type="text" /><hr><div id="myDiv" class="myDiv"></div><select id="mySelect" onchange="changeBGC()"><option selected disabled>----请选择------</option><option value="green">青青草原</option><option value="blue">蔚蓝大海</option><option value="yellow">黄金传说</option></select></body>
</html>5onload 加载结束事件
注意:script标签 尽量放在body标签后边 保证页面元素加载完毕 再做js处理
<!DOCTYPE html>
<html>
<head><meta charset="UTF-8" /><title>title</title><!-- html加载顺序 从上到下 从左到右 js执行 尽量放到页面底部 保证页面元素加载完毕--></head>
<body onload="myInit()"><input id="myText" type="text">
</body>
<script>
// debuggerfunction myInit(){document.getElementById("myText").value = "hello!!!!!"}
</script>
</html>作业:
1计算器
取值传值
2切换图片
当在第一张时 禁用上一张和第一张按钮 当在最后一张 禁用下一张和最后一张按钮