24.11.11 JavaScript1

JavaScript（简称js）是⼀种描述语⾔，基于对象和事件驱动的脚本语⾔
JavaScript特点:脚本语⾔（⼀种轻量级的编程语⾔）
⼀种解释性语⾔（⽆需预编译）
被设计为向HTML⻚⾯添加交互⾏为
运⾏于客户端（浏览器)

注意:js是多种语言语法组合而成所以形成了自己的独特语法

2.js组成

ECMAScript (简称为ES) ,由ECMA组织定期维护更新.ES6之后添加了很多实用的新语法结构.

DOM (文档对象模型). js中把hmtl文档描述为DOM树,通过js对文档中的元素和属性进行修改,从而达到动态的效果.是js交互效果非常重要的部分

BOM(浏览器对象模型).通过JS对浏览器本身的功能进行操作例如刷新页面,控制历史记录,打开关闭窗口等

3.js引入方式

在html中编写js的方式:

js引入方式
1.使用script标签 编写js代码                                       调试代码使用
<script>// script 脚本console.log("hello javascript!!!!!")
</script>

2.使用script标签带src属性 引入js文件                               上线使用
<script src="./js/myjs.js"> 这里写代码无效 </script>注意 如果script标签带src属性 则标签体无效

3.在元素上直接编写js代码  特例javascript:void(0) 禁止元素默认行为    用不到  例如a标签当中###哪里都不会跳转，此处javascript:void(0)在网址处不会传值###
了解即可

注意:

html文档是从上到下加载运行

4.js变量规则

变量  声明
js变量是弱类型声明不需要指明变量类型  赋值时 根据值的类型来决定类型使用统一的关键字来声明var       老的变量关键字let       新的变量关键字const     新的常量关键字变量名   使用多单词+驼峰不要与关键字保留字冲突 示例:
let myStr;

5.js数据类型

js设计的初衷是容易上手(好学)(易学难精)

1 数字类型 number 整型浮点型

let myNum = 10;
let myNum = 10.1;
console.log(myNum);
console.log(typeof myNum);

2 布尔型 boolean true/false

let myBol = true;
console.log(myNum);
console.log(typeof myNum);let myBol = false;
console.log(myBol);
console.log(typeof myBol);

3 字符串 string '' "" 都是字符串

`` 模板字符串通过${变量} 可以拼接变量

let myStr = 'a'
let myStr = "a"
let myStr = `a`拼接:
let tempNum = 10;
//let myStr = 'a'+tempNum+'a';
//模板字符串 通过${变量} 可以拼接变量
let myStr =`a${tempNum}a`;

4 未定义 undefined 未定义 /未初始化(未赋值)

如果是未赋值值是undefined 类型是undefined

如果是未定义(没有声明直接使用) 会报错类型是undefined

let myVal;console.log(myVal);
console.log(typeof myVal);不定义直接用
console.log(myVal);        报错
console.log(typeof myVal); 打印类型 undefined

5 Object 其他各种对象都属于object

let myDate = new Date();
console.log(myDate);
console.log(typeof myDate);let myArr = [1,2,3];
console.log(myArr);
console.log(typeof myArr);

6 function 函数函数对象

let myFun = function(){console.log(1111);
}myFun()console.log(typeof myFun);

6.数据类型转化

注意: 从页面取出来数据都是字符串类型

let textVal = document.getElementById("mySpan").innerHTML;

console.log(textVal);

所以js中需要数据计算时经常使用类型转换

1.主动类型转换函数

parseInt   转整型数据let myStr = '110';let newNum = parseInt(myStr);console.log(typeof newNum);注意:let myStr = 'A110';let newNum = parseInt(myStr);转完得到结果NaN(not a number) 数字类型的特殊值 不是数字

parseFloat 转浮点数据let myStr = '110.1';let newNum = parseFloat(myStr);console.log(typeof newNum);注意:let myStr = 'A110.1';let newNum = parseFloat(myStr);转完得到结果NaN(not a number) 数字类型的特殊值 不是数字

2.内置类型转换(了解)

    //内置类型转换//可以转成数字的字符串  与   数字之间     等同的//bol值 true/false    与   数字之间1/0  等同的//为了保险 尽量少用内置类型转换

    let tempStr = '10';let tempNum = 10;console.log(tempStr == tempNum);let tempBol = false;let tempNum2 = 0;console.log(tempBol == tempNum2);console.log(!0);//true的简化写法

js代码经常需要做代码压缩代码压缩时会出现简化写法

代码压缩通过特定工具完成不需要编码时自己写

7.运算符

   /*算数运算符   + 加法运算  拼接字符串- 减法运算* 乘法运算/ 除法运算  Infinity(无限)   NaN 不是数字% 取模运算 ++  自增--  自减 赋值运算符  +=        数字加 或 字符串拼接-=        运算完赋值*=/=%=比较运算符  ===      比较值 和 类型 有一个不同返回false==       比较值因为js有内置类型转换逻辑运算符 &&       有一个是false 总结果是fasle||       有一个是true  总结果是true!        bol值取反*/

注意:

js中number计算非常容易丢精度 toFixed(位数) 保留指定位数
示例:
let myNum =0.1+0.2;
console.log(parseFloat(myNum.toFixed(1)) +0.1);转数字        保留位数

    let myNum =0.1+0.2;console.log(parseFloat(myNum.toFixed(1)) +0.1);let myNum2 = 1;myNum2 +='1';console.log(myNum2);let num1 = 1;let num2 = 2;console.log(num1!=num2);let tempStr = '10';let tempNum = 10;console.log(tempStr == tempNum);   //trueconsole.log(tempStr === tempNum);  //false

8条件循环语句

条件语句:

if 结构体 (通用性强)
范围条件判断精确条件判断

    if(bol值)   单分支if(bol值)   双分支elseif(bol值)            多分支else if(myScore<80)else

示例:

    let myScore = 96;if(myScore<60){console.log("去跟壮汉小gege吃饭....");}else if(myScore<80){console.log("去跟小(姐姐)吃饭吃饭....");}else{console.log("去跟乔碧萝...吃饭吃饭....");}

switch 结构体

精确判断条件

多分支时语法结构更清晰

 switch(myScore){case 'A': console.log("ps5 pro!!");break;case 'B': console.log("华为手机");break;case 'C': console.log("红米手机");break;case 'D': console.log("发一个肥皂");break;default:console.log("律师函警告");}

    let myScore = 'SSR';switch(myScore){case 'A': console.log("ps5 pro!!");break;case 'B': console.log("华为手机");break;case 'C': console.log("红米手机");break;case 'D': console.log("发一个肥皂");break;default:console.log("律师函警告");}

循环语句:

for 结构体 (一般用在已知次数的循环)

    基础for循环for(let i = 0; i < 10; i++){console.log(i);}其他for结构体for...in  for(let x in myArr){   x是索引console.log(myArr[x]);}for...of               x是遍历的数据for(let x of myArr){console.log(x);}

示例:

    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 x in myArr){console.log(myArr[x]);}for(let x of myArr){console.log(x);}

while结构体 (用在未知次数的循环上)

    let bol = true;while(bol){//dosomething.....//if(xxx) 结束循环 bol = false}

示例:

输出乘法口诀表到页面

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>")

9函数

系统函数

    parseInt    转整型parseFloat  转浮点型isNaN      !isNaN("10") 检测是否纯数字eval       把字符串转成算式并计算

    // console.log(!isNaN("10"));// console.log(eval('2+3/0'));

自定义函数

自己封装函数给自己使用

两种函数格式:

1声明式函数

    声明式函数对象:function 函数名(参数列表 ...){doSomething.......//如果需要返回值 直接加returnreturn 返回的数据;}

     function myFun(num1,num2){//     //debugger//    // console.log(num1+num2);let newNum = num1+num2;return newNum;}myFun(1,2)
结果是3

2匿名函数

    匿名函数定义:let 变量名(函数名) = function(参数列表...){//console.log(a+b);return a+b}

    let myFun = function(a,b){//console.log(a+b);return a+b}myFun(1,2)结果是3

变量作用域:

    变量作用域全局变量  整个页面都可以使用 可以在多个函数内共享  let num=10;局部变量  函数内可以使用函数内如果没声明直接使用的变量 会被js解析器补全为全局变量(不要用这个特性)

注意点:

1.js中如果函数名重复会发生覆盖(注意函数名不要重复不要跟变量重复)

2.实参与形参可以不对应执行结果与预期会不符(使用时形参与实参个数对应)

打断点(慢慢习惯) 沉下心仔细看代码:

debugger; 如果触发代码时会进断点

F11 一行一行看

F8 跳过断点

10事件

js中触发函数的机制定义出了用户交互的常用事件来触发自定义函数

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><input type="button" value="点我" onclick="myTest()">
</body><script>/*html元素  --- >  事件   --- >  函数  <input type="button" value="点我" onclick="myTest()">function myTest(){console.log("运行了......");}*/ function myTest(){console.log("运行了......");}</script></html>

2.js中常用事件

onclick 点击事件鼠标点击

注意:

编写js交互效果的流程(套路)

    考虑流程1 在哪个元素上 加 哪个事件  触发哪个函数DOM中的内容2.获取哪个元素  操作哪个属性 属性改成什么值获取元素doucument.getElementById("id值")  可以获取页面中所有元素 需要搭配ID使用操作属性元素.属性  DOM通用操作写操作  元素.属性 = xxxx读操作  元素.属性html元素的属性都可以操作常用属性: 属性值 参考属性本身的规则value  表单元素的值type   表单元素类型id     元素idstyle  style中还有其他的子样式 参考csscolor 文字颜色         backgroundColor 背景颜色 innerHTML 标签体中的内容 适用于所有的双标签

示例:

<!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>.mycls{width: 100px;height: 100px;border: 1px solid black;}</style></head><body><input id="myText" type="text" value="拜登" ><input type="button" value="换总统" onclick="changeP(this)" ><hr/><div id="mydiv" class="mycls"></div><input type="button" value="换颜色" onclick="changeColor()" ><hr/><h1 id="myTitle">总统选举进行中........</h1><input type="button" value="选举结束" onclick="changeTitle()">
</body><script>function changeP(myOjb){console.log(myOjb);console.log(1111);let myEle = document.getElementById("myText");myEle.value = "特朗普";myEle.type = "button";console.log( myEle.id);}function changeColor(){let myDiv = document.getElementById("mydiv");console.log(myDiv);myDiv.style.backgroundColor = "#FF0000"}function changeTitle(){console.log(111);let myTitle =  document.getElementById("myTitle");console.log(myTitle);myTitle.innerHTML = "biubiubiu.....特朗普...."}</script></html>

onmouseover 鼠标移入

onmouserout 鼠标移出

    js中 经常有效果切换的场景(执行的代码相同 赋值不同)函数中加上形参调用时 传入实参 onmouseover="changeBGC('green')" 实参数据类型如果是字符串 'green'如果是数字    123如果是bol值   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><style>.mycls{width: 100px;height: 100px;border: 1px solid black;}</style></head><body><!-- <div id="myDiv" class="mycls" onmouseover="changeBGC('green')" onmouseout="changeBGC('white')" ></div> --><div class="mycls" onmouseover="changeBGC('green',this)" onmouseout="changeBGC('white',this)" ></div></body><script>function changeBGC(currentColor,myObj){//console.log(document.getElementById("myDiv"));console.log(currentColor,myObj);myObj.style.backgroundColor = currentColor;}// function changeBGC(currentColor){//     //console.log(document.getElementById("myDiv"));//     console.log(currentColor); //     document.getElementById("myDiv").style.backgroundColor = currentColor;// }// function changeBGC2(){//     //console.log(document.getElementById("myDiv"));//     document.getElementById("myDiv").style.backgroundColor = "white";// }//changeBGC("green")</script></html>

onfocus 获得焦点

onblur 失去焦点

焦点事件主要用在表单元素上

输入框同一时间只有一个框获得输入提示符获得输入提示符的叫获得焦点

通常用鼠标触发也可以被tab键触发

示例:

<!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"  onfocus="changeTextColor('blue',this)" onblur="changeTextColor('black',this)"><br><input type="text"  onfocus="changeTextColor('blue',this)" onblur="changeTextColor('black',this)"><br><input type="text"  onfocus="changeTextColor('blue',this)" onblur="changeTextColor('black',this)"><br>
</body><script>/* 焦点事件 主要用在表单元素上输入框 同一时间  只有一个框获得输入提示符 获得输入提示符的叫获得焦点onfocus  获得焦点onblur   失去焦点函数合并通过this 让多个元素复用函数*/function changeTextColor(myColor,myObj){myObj.style.color = myColor;}</script></html>

注意:

实参传this

可以表示当前发生事件的元素

    如果修改的元素 与触发的元素是同一个 (了解)此时可以传this this发生事件的元素实参传this  表示的是发生事件的元素