day3_javascript1
1js引入方式
三种引入方式1 使用script标签 写js代码2 使用script标签 带src属性 引入js文件 此标签体失效3 在元素上直接写js代码 javascript:console.log(333) 建议少用
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script>console.log("hello javascript!!!!")</script><script src="./js/myjs.js"></script></head>
<body><!-- script 脚本style 样式三种引入方式1 使用script标签 写js代码2 使用script标签 带src属性 引入js文件 此标签体失效3 在元素上直接写js代码 javascript:console.log(333) 建议少用--><button onclick="javascript:console.log(333)">测试按钮</button></body>
</html>
2js变量声明
//js 弱类型变量
// 声明时不需要指定类型 赋值时根据值的类型决定变量类型
// 声明变量时 有统一的关键字
//es6之前 变量 var
//es6之后 变量 let 常量const
// 变量名
// 多单词+驼峰
// 避免与关键字 保留字冲突
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body></body><script>//js 弱类型变量 // 声明时不需要指定类型 赋值时根据值的类型决定变量类型// 声明变量时 有统一的关键字//es6之前 变量 var//es6之后 变量 let 常量const// 变量名// 多单词+驼峰// 避免与关键字 保留字冲突 // undefined类型 let gameTime;</script></html>
3js数据类型
js常见数据类型1.number 数字类型 整型 浮点型10 10.1 js中number容易丢失精度 不要做精密数学计算2.boolean 布尔类型 true/falsetrue false 对 和 错3.string 字符串类型 js不分字符 字符串"" '' `` 都是字符串``模板字符串 方便拼接变量 `a${myNum}a`4.undefined 未定义或未赋值 未定义未赋值 两种情况5.Object 其他都是对象类型
注意:
typeof 检测变量数据类型
js中 变量可以通过赋值变换类型
不要随便变换类型 容易给自己挖坑
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body></body><script>/*js常见数据类型1.number 数字类型 整型 浮点型10 10.1 js中number容易丢失精度 不要做精密数学计算2.boolean 布尔类型 true/falsetrue false 对 和 错3.string 字符串类型 js不分字符 字符串"" '' `` 都是字符串``模板字符串 方便拼接变量 `a${myNum}a`4.undefined 未定义或未赋值 未定义未赋值 两种情况5.Object 其他都是对象类型typeof 检测变量数据类型注意 js中 变量可以通过赋值变换类型 不要随便变换类型 容易给自己挖坑*/ let myNum = 10;console.log(myNum);console.log(typeof myNum);// myNum = true;// console.log(myNum);// console.log(typeof myNum);let newString = `'"a${myNum}a${myNum}"'`;console.log(newString);console.log(typeof newString);let newVal;console.log(newVal);console.log(typeof newVal);//console.log(newVal2);console.log(typeof newVal2);let myDate = new Date()console.log(myDate);console.log(typeof myDate);let myArr = []console.log(myArr);console.log(typeof myArr);</script></html>
注意:
1函数是特殊类型 特指函数
2函数名是一种特殊变量 函数名不要跟其他变量重复 会产生覆盖 导致失效
4运算符
算数运算符+ 数字相加 或者字符串拼接注意 浮点数容易丢失精度 可以保留指定位数 (muNum1+muNum2).toFixed(1)- 带内置类型转换2-'1' = 1搭配使用parseInt 强制转为数字* / 数学运算% 取余数带小数点 会丢失精度++ --i++ 先取值再运算++i 先运算再取值赋值运算符= 赋值运算 赋值有返回值比较运算符== ===的区别要说明自动类型转换规则== 比较值 包含自动类型转换=== 比较值和类型逻辑运算符&& 有一个false 结果false|| 有一个true 结果true ! 取反 !0 表示true<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body></body>
<script>/*算数运算符+ 数字相加 或者字符串拼接注意 浮点数容易丢失精度 可以保留指定位数 (muNum1+muNum2).toFixed(1)- 带内置类型转换2-'1' = 1搭配使用parseInt 强制转为数字* / 数学运算% 取余数带小数点 会丢失精度++ --i++ 先取值再运算++i 先运算再取值赋值运算符= 赋值运算 赋值有返回值比较运算符== ===的区别要说明自动类型转换规则== 比较值 包含自动类型转换=== 比较值和类型逻辑运算符&& 有一个false 结果false|| 有一个true 结果true ! 取反 !0 表示true*/ // let muNum1 = 0.1;// let muNum2 = 0.2;// console.log((muNum1+muNum2).toFixed(1));//自动类型转换 有的运算带 有的运算不带// 搭配使用parseInt 强制转为数字// let muNum1 = 2;// let muNum2 = parseInt(1);// console.log(muNum1+muNum2);let muNum1 = 3.91;let muNum2 = 2;console.log(muNum1%muNum2);console.log((muNum1%muNum2).toFixed(2));console.log(parseInt(muNum1%muNum2) );let i = 1;console.log(++i);i=3;console.log(i=3);//自动类型转换 //可以转成数字的字符串 与数字之间let myStr = '1';let myNum = 1;console.log(myStr===myNum);//bol与数字0/1 false/truelet testBol = true;let testNum = 1;console.log(testBol == testNum);//代码压缩console.log(!0);</script></html>
数字 1549
把每个位数的数字都抽出来 1 5 4 9 在分别相加 得到19
取余数的方式 得到每个数字
let tempNum = 1549let temp1 = tempNum%10let temp2 = parseInt(tempNum/10%10) let temp3 = parseInt(tempNum/100%10) let temp4 = parseInt(tempNum/1000) console.log(temp1);console.log(temp2);console.log(temp3);console.log(temp4);console.log(temp1+temp2+temp3+temp4);
5条件语句
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body></body>
<script>let myScore = 99;//通用性强 可以精确匹配 可以范围匹配if(myScore<60){console.log("奖励与女装小gege共进晚餐");}else if(myScore<80){console.log("奖励与壮汉小gege共进晚餐");}else{console.log("奖励与壮汉胡子小gege共进晚餐 再发给肥皂");}//switch 用在精确匹配let myGrade = 'SSR';switch(myGrade){case 'A':console.log("5090显卡");break;case 'B':console.log("5070显卡");break;case 'C':console.log("5060显卡");break;default:console.log("750ti显卡")}</script>
</html>
6循环语句
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body></body><script>
//for结构
//var 缺少块作用域
//for 用在已知次数的循环for(let i = 0; i < 10 ; i++){console.log(i);}// console.log(i);let myArr = [3,2,1];for(let i = 0; i < myArr.length ; i++){console.log(myArr[i]);}//for(let x in myArr) x 是索引console.log("---------------------");for(let x in myArr){console.log(myArr[x]);}//for(let x of myArr) x 是数据for(let x of myArr){console.log(x);}//while结构
//while 未知次数的循环//先判断条件 再执行{}// while(flag){// console.log('xxx');// if(xxxx){// 结束循环// }// }//先执行一次 在判断条件// do{// //dosomething// }while(flag)</script></html>
输出乘法口诀表
//输出乘法口诀表// 1x1=1// 2x1=2 2x2=4// for(let x = 1;x<=9;x++){// for(let y = 1; y<=x;y++){// document.write(`${y}x${x}=${x*y}`)// document.write(` `)// if(x*y<10){// document.write(` `)// }// }// document.write(`<br>`)// }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>`)}document.write(`</tr>`)}document.write(`</table>`)
7函数
7.1系统函数：
系统函数
系统中预设好的函数 有指定的返回规则
需要使用是 可以在任何地方调用 得到返回的结果
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body></body>
<script>/*控制台 黑色 类型字符串蓝色 数字 number 字母 特殊值 bol值灰色 undefined系统函数系统中预设好的函数 有指定的返回规则需要使用是 可以在任何地方调用 得到返回的结果*///parseInt() //NaN not a number 不是数字//把可以转成数字的内容 转成数字//数字取整//parseFloat()//把可以转成数字的内容 转成数字 带小数点let myNum = 10.9;console.log(myNum);console.log(parseInt(myNum));console.log(parseFloat(myNum));//检测是否不是数字//纯数字 才不是NAN 带其他是NANconsole.log(isNaN("10a"));//把可运算的字符串 转成运行结果console.log(eval("1+2*3") );</script>
</html>
注意控制台颜色: 用来快速识别数据类型
控制台 黑色 类型字符串蓝色 数字 number 字母 特殊值 bol值灰色 undefined
7.2自定义函数：
类似java中的自定义方法封装代码给自己使用 通过()调用两套语法规则//声明式函数function 函数名(参数列表,参数,参数){//执行的js代码return xxx;}//匿名函数给变量赋值let newFun = function (num1,num2){return num1+num2;}
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body></body>
<script>/*类似java中的自定义方法封装代码给自己使用 通过()调用两套语法规则//声明式函数function 函数名(参数列表,参数,参数){//执行的js代码return xxx;}//匿名函数给变量赋值let newFun = function (num1,num2){return num1+num2;}*///注意 函数名是一种特殊变量 注意不要与其他变量重复// function 函数名(参数列表,参数,参数){// //执行的js代码// return xxx;// }function myTest(){console.log("test......");}myTest()//js中没有重载 只有覆盖 function getResult(num1){//debuggerlet myRes = num1;console.log(myRes);}//形参和实参可以不对应//尽量对应使用//参数类型没有限定 根据执行的逻辑 不同的参数可能有不同的结果function getResult(num1,num2){console.log(1111)//debuggerlet myRes = num1+num2;//console.log(myRes);return myRes;console.log(2222);}let newNum = getResult(1,'a')console.log(newNum);let newFun = function (num1,num2){return num1+num2;}console.log(newFun(2,3));</script>
</html>
注意:
1js中不存在重载 只有覆盖 后加载的覆盖先加载的
2形参与实参可以不对应 使用时尽量对应
3函数名是一种特殊变量 要注意函数名不要与变量名重复 会覆盖
7.3变量关键字和作用域
let1.全局变量2.函数内3.循环块内const 修饰常量不能通过=重新赋值var (老版本使用)1.全局变量2.函数内
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body></body>
<script>/*let1.全局变量2.函数内3.循环块内const 修饰常量不能通过=重新赋值var (老版本使用)1.全局变量2.函数内*///全局变量 当前页面 任何地方都可以生效 注意加载顺序let myNum = 10;//let myNum2;let myFun = function(){//函数内作用域//不要用这种写法 浏览器会追加定义全局变量//myNum2 = 20console.log(myNum);console.log(myNum2);}//myFun();// console.log("--------------");// console.log(myNum);// console.log(myNum2);let myStr = "aaa";myStr = "bbb";myStr = 110;console.log(myStr);const myStr2 = "aaa";//如果通过=重新赋值 会报错//不能通过=重新赋值//myStr2 = "bbb";</script>
</html>
8事件
8.1 页面元素 函数 与事件的搭配关系
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><button onclick="myTest()">点我</button>
</body>
<script>/*在页面元素中定义事件 触发自定义函数*/function myTest(){console.log(1111);}</script>
</html>
8.2常用事件
onclick 鼠标单击
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.cls1{width: 80px;height: 80px;font-size: 30px;background-color: lightblue;color: blueviolet;}</style>
</head>
<body><span id="myTitle">特朗普</span><button onclick="myBiu()">biubiubiu</button><hr><input id="myText" type="text"/><button onclick="myChange()">改内容</button></body>
<script>/*1 确立 元素 函数 事件的对应关系2 通过dom树 找到元素 再修改特定的属性 达到改变的效果找元素 document.getElementById("myTitle")操作属性 写 元素.属性 = 新值;读 元素.属性有哪些常见的属性 做页面效果的改变innerHTML 双标签的内容html元素常见属性value 单标签的内容type 表单元素类型sytle 样式className 样式类别.....html元素的属性都可以替换和修改*/function myBiu(){console.log(1111);//js中Element html 标签console.log(document.getElementById("myTitle"));//通过js指定要修改元素的哪些属性console.log(document.getElementById("myTitle").innerHTML);document.getElementById("myTitle").innerHTML = "耳朵受伤了...." }function myChange(){console.log(document.getElementById("myText"));document.getElementById("myText").value = "jack"document.getElementById("myText").type ="button"//document.getElementById("myText").style.color = "#FF0000"document.getElementById("myText").className = "cls1"}</script>
</html>
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style></style>
</head>
<body><input id="text1" type="text"/><button ondblclick="myCopy()">复制</button><input id="text2" type="text"/>
</body>
<script>/*点击事件 鼠标单击 onclick鼠标双击 ondblclick*/function myCopy(){//console.log(1111);/*1找元素2改属性*/let text1Val = document.getElementById("text1").valueconsole.log(text1Val);document.getElementById("text2").value = text1Val}/*1 确立 元素 函数 事件的对应关系2 通过dom树 找到元素 再修改特定的属性 达到改变的效果找元素 document.getElementById("myTitle")操作属性 写 元素.属性 = 新值;读 元素.属性有哪些常见的属性 做页面效果的改变innerHTML 双标签的内容html元素常见属性value 单标签的内容type 表单元素类型sytle 样式className 样式类别.....html元素的属性都可以替换和修改*/</script>
</html>
onmouseover 鼠标移入 onmouseout 鼠标移出
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.mydiv{width: 200px;height: 200px;border: 1px solid black;}</style>
</head>
<body><div id="mydiv" class="mydiv" onmouseover="changeBGC('blue',this)" onmouseout="changeBGC('white',this)"></div><button onclick="changeBGC('blue',this)">换背景颜色</button></body>
<script>/*onmouseover 鼠标移入onmouseout 鼠标移出如果赋值是字符串 注意 带引号 ''数字 11 22bol值 true false关键字this直接使用this 默认指向 当前窗口 事件调用函数时 实参传this可以获取到当前发生事件的元素可以简化元素的获取过程*/function changeBGC(myColor,myObj){console.log(myObj);myObj.style.backgroundColor = myColor}// function changeBGC(){// document.getElementById("mydiv").style.backgroundColor = "#F00"// }// function changeBGC2(){// document.getElementById("mydiv").style.backgroundColor = "white"// }</script>
</html>
onfocus 获得焦点 onblur 失去焦点
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><!-- <input id="text1" type="text" onfocus="changeColor('#F0A','text1')" onblur="changeColor('black','text1')"/><br><input id="text2" type="text" onfocus="changeColor('#F0A','text2')" onblur="changeColor('black','text2')"/><br> --><input type="text" onfocus="changeColor('#0FA',this)" onblur="changeColor('black',this)"/><br><input type="text" onfocus="changeColor('#0FA',this)" onblur="changeColor('black',this)"/><br><input type="text" onfocus="changeColor('#0FA',this)" onblur="changeColor('black',this)"/><br><input type="text" onfocus="changeColor('#0FA',this)" onblur="changeColor('black',this)"/><br><input type="text" onfocus="changeColor('#0FA',this)" onblur="changeColor('black',this)"/><br>
</body>
<script>/*onfocus 获得焦点onblur 失去焦点*/function changeColor(myColor,myObj){myObj.style.color=myColor}// function changeColor(myColor,testId){// document.getElementById(testId).style.color=myColor// }// function changeColor2(){// document.getElementById("text1").style.color="black"// }</script>
</html>
onchange 内容改变
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><input type="text" onchange="myTest(this)"/><hr><select onchange="changeTitle(this)"><option disabled selected>-----请选择-----</option><option value="您好">中国</option><option value="hello">美国</option><option value="八嘎呀路">日本</option></select><h1 id="myTitle"></h1>
</body>
<script>/*onchange 文本框使用 失去焦点 内容改变下拉列表 点击选项 内容改变*/function changeTitle(myObj){document.getElementById("myTitle").innerHTML = myObj.value}// function changeTitle(myObj){// console.log(myObj.value);// let helloText = "";// switch(myObj.value){// case '001':helloText = "您好";break;// case '002':helloText = "hello";break;// case '003':helloText = "八嘎";break;// }// document.getElementById("myTitle").innerHTML = helloText// }function myTest(myObj){console.log( myObj.value);}</script>
</html>