JavaScript

White66Hang

已于 2022-08-22 11:12:21 修改

阅读量400

点赞数 1

文章标签： javascript 前端开发语言

于 2022-07-12 08:37:02 首次发布

本文链接：https://blog.csdn.net/weixin_59337864/article/details/125714554

版权

JavaSrcipt是什么(js)?

编程语言，脚本语言，依赖于某种容器运行，浏览器来解释执行。
编辑语言分类
1.解释型:JS Python
2.编译型:C++ C#
3.半解释半翻译:Java
JS是运行在浏览器上的可以控制页面
vue.js react.js jquery.js angular.js
node.js前端服务器语言

Js解释器：

火狐：spider
Chrom node:v8
Safari:Javascriptore

不成文规定JS放在body后边写

<body>
    <!-- 引入外部的标签 ，不管是写还是引入都得在body里面-->
    <script src="js/my.js"></script>
</body>

js数据简单类型：
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声明的常量就是一个常量

js复杂数据类型
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>

循环

一.for 循环
循环
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循环

执行流程
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

// 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.innerHTML="";
                qu.innerHTML=html1;
                html1="";
            }
            
            if(shi.value=="shy"){
                
                html1="";
                html1+="<option value='pq'>--请选择区--</option>";
                html1+= "<option value='hp'>和平</option>";
                html1+="<option value='sh'>沈河</option>";
                qu.innerHTML="";
                qu.innerHTML=html1;
            }
            if(shi.value=="dl"){
                qu.innerHTML="";
                html1="";
                html1+="<option value='pq'>--请选择区--</option>";
                html1+= "<option value='xg'>西岗</option>";
                html1+="<option value='zs'>钟山</option>";
                qu.innerHTML=html1;
            }
            if(shi.value=="ph" ){
                qu.innerHTML="";
                html1="";
                html1+="<option value='pq'>--请选择区--</option>";
                qu.innerHTML=html1;
            }
        }
        
        
    </script>
</body>