JavaSrcipt是什么(js)?
编程语言，脚本语言，依赖于某个容器操作，浏览器来解释执行。 编辑语言分类 1.解释型:JS Python 2.编译型:C C# 三、半解释半翻译：Java vue.js react.js jquery.js angular.js node.js前端服务器语言
Js解释器：
火狐：spider Chrom node:v8 Safari:Javascriptore
<body> <!-- 引入外部标签 ，无论是写还是引入，都必须在body里面--> <script src="js/my.js"></script> </body>
1.数字（number） 2.字符串（string） 3.布尔型 （boolean） 4.空（null） 5.underfined（未定义）
var num=10; alert(num); // 字符串 // 把变量变成字面量加"" var v1="你好"; alert(v1); // 布尔 var v2 = true; alert(v2); // 空 var v3=null; alert(v3); // underfined var v4; alert(v5); 定义变量： 变量： 尽量减少开发中使用字面量（alert(1)1是字面量)，后期维护困难； 在ES6 （JS新版本)新推出了两个词来代替var: let const 1.let：声明不能重复定义 2.const：有了他的特点，const声明的常量是常量
1.数组：一个变量对应多个值 (1)使用数组函数 函数：定义函数执行一系列代码
<script> // 1.使用数组 let arr = Array(); //警告弹窗 // alert(arr); // 控制台弹窗 console.log(111); console.log(arr); // 2.使用new关键字 let arr2 = new Array(0);
// 3.使用字面量方式
let arr3 = [1,2,3,4];
// 赋值
// 下标(索引)
// 给数组的第一个元素赋值
arr[0] = 100;
arr[1] = 80;
console.log(arr3[0]);
</script>
函数：定义一个函数执行一系列代码 需要手动调用函数：函数+（）+{} 1.无参无返回值 2.无参有返回值 3.有参有返回值 4.有参无返回值 函数内部不可以在声明函数，但是可以调用函数，调用函数方式 return 除了可以返回结果，还可以终止执行 开发中不建议在return后语句写除特殊情况
function hello(){
}
<script>
// 全局变量
// let v1 = 10;
//定义函数体
// 作用域：起作用的区域
function hello(){
// 局部变量
let v1 = 10;
console.log(v1+5);
}
// 调用函数
// hello();
// console.log(v1);
function add(){
let num1=(10);
let num2=(20);
console.log(num1 + num2);
// 带有返回的值
return num1 + num2;
}
// 30
// let result = add();
// console.log(result);
console.log(add());
// 带有参数的函数
// 给参数赋值
function sub(num1,num2){
return num1-num2;
}
let result = sub(200,100);
console.log(result);
</script>
弹窗 1.警告弹窗 alert 2.带有确认和取消的弹窗 confirm（带有返回值是true和false）
let result= confirm("是否退出弹窗");
console.log(result);
3.文本框弹窗 prompt(带有返回值是文本框内容)
let result = prompt("请输入你的内容,例如1942701011")
console.log(result);
逻辑判断，流程控制 夹杂讲运算符 1.算数运算符 + - * / %(取余) 2.赋值运算符 = += -= *= /= 3.比较运算符 > < <= >= != == ===(比较两个值的类型是否一样，输出的值为true false) 4.逻辑运输符 与或非 与 && 或 或者 || （一个错都错） 非！（加！取反结果true false） 5.三元运算符 必须要得到一个布尔运行的结果 a=10,b=20,c=50,d=-1 6.+特殊性： 除了可以进行加法运算，连接符。 如果先入为主的认定+为连接符号+他一直是连接符号；
// // 语法表达式：条件表达1：条件表达2
let a =10;
let b = 20;
let c =50;
let d = -1
function getMax(num1,num2){
return num1>num2?num1:num2;
}
console.log(getMax(getMax(a,b),getMax(d,c)));
let max = ((a>b?a:b)>(c>d?c:d)?(a>b?a:b):(c>d?c:d));
console.log(max);
判断： 1.if…else 语法: if(条件表达式){ 要执行的代码； } else{ 要执行的代码 }
let a = 10;
let b = 20;
if(a>b){
console.log("a>b");
}else{
console.log("a<b");
}
if ,else 和多重if有什么区别 if…else是可以嵌套的，可以无线嵌套，原则上不超过三层 用if语句判断大小
function show(num1,num2){
if(num1>num2){
return (num1);
}
return (num2);
}
console.log(show(show(a,b),show(b,c)));
语法： switch(任何的条件语句){ case(固定的值)： 执行代码 break; case2： 执行代码 break; default 执行代码 } 判断是否闰年
let year = 2004
// 1.
// if(year%400==0){
// console.log("是闰年");
// }else{
// if(year%4==0 && year%100==0){
// console.log("是闰年");
// }else{
// console.log("不是是闰年");
// }
// }
// 2.
// function isRun(year){
// if(year%400==0){
// console.log("是闰年");
// return;
// }
// if(year%4==0 && year%100!==0){
// console.log("是闰年");
// return;
// }
// console.log("不是闰年");
// }
// isRun(2004)
// 3.
switch( year%400 ){
case 0:
console.log("是闰年");
break;
default:
if(year%4 == 0 && year%100 !==0){
console.log("是闰年");
}else{
console.log("不是闰年");
}
}
给出年月日算出过了今年的多少天
<script>
// 给出年月日判断是第几天
// let year = 2022;
// let mouth = 2;
let day = 20;
let count=0;
// function isRun(){
// switch(year%400){
// case 0:
// console
// }
// }
function isMouth(mouth){
let a;
//用函数来选择日期
function isRun(year){
if(year%400 == 0){
console.log(a=29);
return;
}
if(year%4==0 && year%100 !==0){
return;
}
console.log(a=28);
}
isRun(2022);
switch(mouth){
case 12 : count += 30;
case 11 : count += 31;
case 10 : count += 30;
case 9 : count += 31;
case 8 : count += 31;
case 7 : count += 30;
case 6 : count += 31;
case 5 : count += 30;
case 4 : count += 31;
case 3 : count += a;
case 2 : count +=31;
case 1 : count +=day;
break;
}
console.log(count)
}
isMouth(10);
</script>
循环
循环 1.for循环 2.let = 1 时循环开始（初始化条件）;i<10会和初始化配合循环（判断条件）;i++循环条件，每次循环执行完毕i发生变化。 3.i 可以看作一个局部变量；循环条件可以情况更改；修改循环条件时可以向着终点前进
for(let i=1;i<10;i++){
// 循环体
console.log("你好")
}
4.特殊写法
for(;;){
} //死循环
数组属性lenght-长度 最大下标＋1等于长度 取出最后一个元素，不能是underfind console.log(arr.arr.lenght -1)
let arr = [12,23,45,56,78];
for(let i=0;i<5;i++){
console.log(arr[i])
}
练习题 判断数组大小
let arr = [12,23,45,56,78];
let max=arr[0];
for(let i=0;i<arr.length;i++){
if(arr[i]>max){
max=arr[i];
}
}
console.log(max);
//判断一个数组是否存在存在输出下标
let arr = [12,23,45,56,78];
function exists(num,array){
let index= -1;
for(let i =0; i< array.length;i++){
if(array[i]==num){
index=i;
}
return index;
}
}
console.log(exists(100,arr));
for in语句，能做的事情比较小，只能做遍历操作
let arr =[1,2,3,4]
for(let a in arr){
console.log(arr[a])
}
// 把arr 赋值给a
执行流程 while(条件表达式 true false){ 输出 循环体 a++循环条件 }
let a = 10;
while(a<100){
console.log(a)
a++;
//10~99
}
let a = 10;
while(a<100){
a++;
console.log(a)
//11~100
}
for 条件和体分离
while 初始化量不好控制，条件不好控制，写函数方便管理
// do while
let a = 10;
// do 做什么事情（用的少）
//do while 和 while区别先执行一次在判断
// while 不成立一次不走
do{
a++;
console.log(a);
}while(a>100);
//死循环
for(;;){
}
while(true){
}
do{
}while(true);`
// js内置函数
Array:
1.count()连接
2.join()设置分隔符连接数组为一个字符串
3.pop()删除最后一个元素
4.sort()从小到大排序
Global:
1.isNan()判断是不是数字
2.parseFloat()把整数转化为小数
3.parseInt()把小数取整
4.number();把一个值转化为num类型
5.string();把其他转换成字符串
string
1.charAt(1);取出指定字符
2.indexOf('a');判断指定字符串，存在返回下标，不存在返回1
3.lastIndexOf('a');从后往前找
4.replace('a','b')替换字符串
5.split('-')根据-去拆分字符串，得到一个数组
6substring(1,6)；字符串截取
Math:
1.ceil()；向上取整
2.floor()；向下取整
3.round();四舍五入
4.random();随机抽取一个随机数；
5.tan(); sin cos
6.E PI
Date
1.new Data();获取系统时间
2.getDate();返回日期1~31
3.getHours():返回时间中的时0~23
4.getTime();获取系统当前时间
抓取Html元素
// 根据id抓取html元素
let div1 = document.getElementById("div1")
console.log(div1);
//根据class抓取html元素，得到一对元素
let divs = document.getElementsByClassName("div2")
console.log(div[1])
//根据tag抓取html元素，得到一堆元素
let divs = document.getElementsByTagName("div1");
console.log(div[0])
//新方法
//1.根据选择器去抓取一个元素
// let div = document.querySelector('.div2');
// console.log(div);
// 根据选择器去抓取全部元素
let divs = document.querySelectorAll('.div1')
console.log(divs[0]);
练习题
省市区三级联动
思路:select 建造出省区市 用 onchange 来定义 select，抓取下拉菜单 用if判断或者用switch
<body> <select name="" id="sheng" onchange="setSheng()"> <option value="ps">--请选择省--</option> <option value="jl">吉林省</option> <option value="ln">辽宁省</option> </select> <select name="" id="shi" onchange="setShi()" onblur="valid()"> <option value="ph">--请选择市--</option> </select> <select name="pq" id="qu"> <option value="">--请选择区--</option> </select> <script> function setSheng(){ // 思路抓取省下拉菜单 let sheng = document.querySelector("#sheng").value; let shi = document.querySelector("#shi"); let html = shi.innerHTML; if(sheng=="jl"){ html=""; html+="<option value='ph'>--请选择市--</option>"; html+= "<option value='cc'>长春市</option>"; html+="<option value='sp'>四平市</option>"; shi.innerHTML=html; } if(sheng=="ln"){ html=""; html+="<option value='ph'>--请选择市--</option>"; html+="<option value='shy'>沈阳市</option>"; html+= "<option value='dl'>大连市</option>"; shi.innerHTML=""; shi.innerHTML=html; } if(sheng=="ps"){ html=""; html+="<option value='ph'>--请选择市--</option>"; shi.innerHTML=""; shi.innerHTML=html; } if(sheng=="ps" ){ qu.innerHTML=""; html1=""; html1+="<option value='pq'>--请选择区--</option>"; qu.innerHTML=html1; } } function setShi(){ let sheng = document.querySelector("#sheng").value; let qu = document.querySelector("#qu"); let html1=qu.innerHTML; if(shi.value=="cc"){ qu.innerHTML=""; html1=""; html1+="<option value='pq'>--请选择区--</option>"; html1+= "<option value='kc'>宽城</option>"; html1+="<option value='sy'>双阳</option>"; qu.innerHTML=html1; html1=""; } if(shi.value=="sp"){ html1=""; html1+="<option value='pq'>--请选择区--</option>"; html1+= "<option value='tx'>铁西</option>"; html1+="<option value='td'>铁东</option>"; qu 标签：jl14系列连接器