day3_javascript1
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/false
true 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/false
true 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/true
let testBol = true;
let testNum = 1;
console.log(testBol == testNum);
//代码压缩
console.log(!0);
</script>
</html>
数字 1549
把每个位数的数字都抽出来 1 5 4 9 在分别相加 得到19
取余数的方式 得到每个数字
let tempNum = 1549
let temp1 = tempNum%10
let 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 带其他是NAN
console.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){
//debugger
let myRes = num1;
console.log(myRes);
}
//形参和实参可以不对应
//尽量对应使用
//参数类型没有限定 根据执行的逻辑 不同的参数可能有不同的结果
function getResult(num1,num2){
console.log(1111)
//debugger
let 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变量关键字和作用域
let
1.全局变量
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>
/*
let
1.全局变量
2.函数内
3.循环块内
const 修饰常量
不能通过=重新赋值
var (老版本使用)
1.全局变量
2.函数内
*/
//全局变量 当前页面 任何地方都可以生效 注意加载顺序
let myNum = 10;
//let myNum2;
let myFun = function(){
//函数内作用域
//不要用这种写法 浏览器会追加定义全局变量
//myNum2 = 20
console.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").value
console.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 22
bol值 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>
浙公网安备 33010602011771号