webgis入门之JavaScript（1）

李佩锦peijin

已于 2024-03-02 12:55:22 修改

阅读量558

点赞数 15

分类专栏： webgis开发文章标签： javascript 开发语言 ecmascript 前端 jquery chrome

于 2024-02-26 13:48:03 首次发布

本文链接：https://blog.csdn.net/weixin_67679364/article/details/136297085

版权

webgis开发专栏收录该内容

17 篇文章 3 订阅

订阅专栏

WEBGIS开发

01、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>
    <!-- html ---- 结构层 -->
    <!-- css  ---- 样式层 -->
    <!-- js   ---- 逻辑层 -->

    <!-- js写在标签中 -->
    <script>
        //弹出框
        alert('hello js')
    </script>
</body>
</html>

02、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>
    <link rel="stylesheet" href="./02、js入门外联式.js">
</head>
<body>
    <!-- html ---- 结构层 -->
    <!-- css  ---- 样式层 -->
    <!-- js   ---- 逻辑层 -->

    <!-- js写在标签中 -->
    <script>
        //弹出框
        // alert('hello js')
    </script>
</body>
</html>

.js文件内容

alert('hello js')

03、声明变量

<!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>
    <script>
        // 变量相当于一个盒子 盒子里面装着我们需要的数据

        // 1、先声明   再赋值
        let a
        a = 2

        // 2、声明并赋值
        let b = 3

        // 声明了变量 但是没有赋值
        let c

        console.log(a)

        // 变量取名要求：语义化 ---> 尽量使用英文简写
        // 1、不能使用数字开头
        // 2、不能用算数符开头（ + - * / = %）
        // 3、不能用中划线 -

    </script>
</body>

</html>

04、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>
    <script>
        // 弹出框输入
        let age = prompt('请输入你的年龄')

        // 弹窗输出（给用户看的）
        alert(age)

        // 输出到控制台
        console.log(age)
    </script>
</body>
</html>

05、is基础数据类型

<!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>
    <script>
        // 字符串类型 string
        let str = '字符串'  // 可以用单引号 '' 也可以用 ""
        console.log(str,typeof str)

        // 数字类型 number
        let num = 10
        console.log(num,typeof num)

        // 布尔类型 false true 
        let a = false
        console.log(a,typeof a)

        // undefined 也是一种数据类型
        let b
        console.log(b,typeof b)
    </script>
</body>
</html>

06、强制转换

<!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>
    <script>
        // number string boolean

        // string ----> number 
        let str = '3'
        let num = Number(str) // Number只能识别数字字符串，其他输出NaN
        console.log(num, typeof num)
        console.log(Number('3.00'))
        console.log(Number('3.0'))
        console.log('------------------------------------------')


        // boolean ------> number
        let a = true
        let b = false
        console.log(Number(a))
        console.log(Number(b))
        console.log('-------------------------------------------')

        // string -----> boolean 
        // 除了''空字符串以外都是true
        let aaa='aaa'
        console.log(Boolean(aaa))
        console.log('-------------------------------------------')

        // number -----> boolean 
        // 除了0以外都是true
        let bbb= 11
        console.log(Boolean(bbb))
        // 特殊情况
        let z
        console.log(Boolean(z))
        console.log(Boolean(NaN))
        console.log('-------------------------------------------')

        // number、boolean -----> String
        let cc = 10
        let dd=true
        console.log(String(cc))
        console.log(String(dd))
        console.log(cc.toString())
        console.log(dd.toString())
    </script>
</body>

</html>

07、运算符

<!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>
    <script>
        // 运算符（+ - * / %）
        let num = 100
        console.log(num + 10)
        console.log(num - 10)
        console.log(num * 10)
        console.log(num / 10)
        console.log(num % 10)   //取余数
    </script>
</body>

</html>

08、自增自减

<!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>
    <script>
        let count = 0
        count++
        
        // a++ 先运算 后自增(等运算全部结束之后才自增)
        // let a = 10
        // let b = a++ + 20
        // console.log(a)
        // console.log(b)

        // ++a 先自增 后运算
        // let a = 10
        // let b = ++a + 20
        // console.log(a)
        // console.log(b)

        let a = 10
        let b = a++ + 20 + ++a

        // a++ + 20 = 10 + 20 = 30    b=20 a=11
        // 30 + ++a = 30 + 12 = 42    b=20 a=12
        console.log(a)
        console.log(b)
    </script>
</body>
</html>

09、比较符

<!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>
    <script>
        // 比较符 ( < > == != )   返回的是一个布尔值 
        let num = 20
        console.log(num < 100)
        console.log(num > 100)
        console.log(num == 100)
        console.log(num != 100)
    </script>
</body>
</html>

10、逻辑符

<!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>
    <script>
        //逻辑符 &&逻辑与  ||逻辑或  !逻辑非

        // 逻辑与  两边都是真 返回真 两边只要由一边是假 则返回假
        console.log(10>5 && 10>9)
        console.log(10>5 && 10<9)
        console.log('--------------------------------')
        
        // 逻辑或  只要有一边是真 返回真 两边都是假 返回假 
        console.log(10<5 || 1>0)
        console.log(10<5 || 1<0)
        console.log('--------------------------------')

        // 逻辑非 取反
        console.log(!(10<5))
        console.log('--------------------------------')

        // && || 返回值问题
        // && 结果为假 返回第一个假 结果为真 返回第二个真
        console.log(0 && 4)
        console.log(3 && 4)
        console.log(3 && false)
        console.log(0 && false)
        console.log('--------------------------------')

        // || 结果是真 返回第一个真 结果是假 返回第二个假
        console.log(3 || 4)
        console.log(0 || false)
        console.log(0 || NaN)
        console.log('--------------------------------')

        let b=100
        let a = b || '目前没有值'
        console.log(a)
    </script>
</body>
</html>

11、赋值运算

<!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>
    <script>
        // 赋值运算（ += -= *= /= %=）
        let a=10
        console.log(a+=10)  //a=a+10
        console.log(a-=10)
        console.log(a*=10)
        console.log(a/=10)
        console.log(a%=10)
    </script>
</body>
</html>

12、二元运算符

<!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>
    <script>
        // 三元运算符 code?=a:b code是真 返回a 否则返回b
        let isTkun = false
        let a = isTkun ? 'respect' : '纯路人'
        console.log(a)

        let b = 10 > 6 ? '对的' : '错的'
        console.log(b)
    </script>
</body>

</html>

13、算数符的隐式转换

<!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>
    <script>
        // 隐式转换
        // 在算术计算中（除了加法），先将数据Number，再计算
        let x ='10'
        let y =true
        console.log(x-y)
        console.log('true'-1)  // NaN 跟任何数字做计算 返回都是NaN
        console.log('------------------------------')

        // 加法   只要一边有字符串 +起到拼接作用
        console.log('111'+111)
        console.log('111'+false)
        console.log('11'+1-true)  // '111'-true==110
        console.log('------------------------------')

        //测试
        let a ='10'
        let b =1
        let c =true
        console.log(a+b-c)        //'101'-true = 100
        console.log(a+b+c)        //'101'+true = '101true'
        console.log(a-b+c)        //9 +true = 10
        console.log(a+c-b)        //'10NaN' - 1 = NaN
    </script>
</body>
</html>

14、比较符的隐式转换

<!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>
    <script>
        // 两边Number() 一下 再来比较
        console.log(true > 0)//true
        console.log(10 > true)//true
        console.log(10 > 'hello')//false
        console.log(Boolean(NaN))
        console.log(3 == '3.0')//true

        console.log(3==='3.0')//强等于 两边数据相等 数据类型也相等
    </script>
</body>

</html>

15、流程控制制if

<!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>
    <script>
        // 作用 判断一个条件
        // 语法
        // if(表达式){
        //     语句
        // }
        
        //请输入你同学的钱包数据 又没哟100 有的请吃饭 （alert（‘请吃饭’）） 没有算了
        if(prompt('你有多少钱？')>=100){
            alert('请吃饭')
        }
    </script>
</body>
</html>

16、流程控制if-else

<!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>
    <script>
        // 作用 判断一个条件
        // 语法
        // if(表达式){
        //     语句
        // }else{
        //     语句
        // }
        
        //请输入你同学的钱包数据 又没哟100 有的请吃饭 （alert（‘请吃饭’）） 没有算了
        if(prompt('你有多少钱？')>=100){
            alert('请吃饭')
        }else{
            alert('放学别走！')
        }
    </script>
</body>
</html>

17、流程控制if-else-elif

<!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>
    <script>
     // 作用 判断一个条件
    // 语法
    // if(表达式){
    //     语句
    // }else if{
    //     语句
    // }else if{
    //     语句
    // }else{
    //     语句
    // }

    /*
        如果有500   吃大餐
            400     中餐
            300     快餐
            200     小餐
            100     外卖
            <100    下次一定
    */
   let money =prompt('你有多少钱？')
   if(money>=500){
        alert('大餐')
   }else if(money<500){
        alert('中餐')
   }else if(money<400){
        alert('小餐')
   }else if(money<300){
        alert('外面')
   }else if(money<200){
        alert('快餐')
   }else if(money<100){
        alert('下次一定！')
   }
    </script>

</body>

</html>

18、流程控制switch

<!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>
    <script>
        /*
            switch(表达式){
                case 1:
                    语句
                    break
                case 2:
                    语句
                    break
                default:
                    语句
                    break
            }
        */
        // 判断一个数是奇数还是偶数 如果都不是 打印输入的不是一个整数
        let a = prompt('请输入一个数')
        switch (a % 2) {
            case 0:
                console.log('是偶数')
                break
            case 1:
                console.log('是奇数')
                break
            default:
                console.log('输入的不是一个整数')
                break
        }
    </script>
</body>

</html>

19、for循环

<!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>
    <script>
        // for循环        
        for(let i=1;i<=50;i++){
            console.log(i)
        }
    </script>
</body>
</html>

20、循环联系

<!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>
    <script>
        // for循环求和(1-10)
        let num = 0
        for(i=1;i<=10;i++){
            num+=i
        }
        //循环之后打印
        console.log(num+'\n-----------------------')

        // for循环 打印1-200之间3的倍数
        for(i=1;i<201;i++){
            if(i%3==0){
                console.log(i)
            }
        }
    </script>
</body>
</html>

21、for循环中的关键字

<!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>
    <script>
        // 模拟一个人上班 20随开始上班 活到85岁 65岁退休 打印xx岁还在上班
        // for(i=20;i<=85;i++){
        //     if(i==65){
        //         break  // 终止循环
        //     }
        //     console.log(i+'岁还在上班')
        // }

        for(i=20;i<=85;i++){
            if(i==65){
                continue  // 跳过本次循环
            }
            console.log(i+'岁还在上班')
        }
    </script>
</body>
</html>

22、函数入门

<!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>
    <script>
        /*
            使用方便
            封装一段具有特定功能的代码块，方便我们操作以及代码维护
        */

        function go(){
            console.log(123)
        }

        go()
    </script>
</body>
</html>

23、函数求和封装

<!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>
    <script>
        //封装一个函数 功能是求1-50的和
        function sum50() {
            let sum=0
            for (i = 1; i <= 50; i++) {
                sum += i
            }
            return sum
        }

        console.log(sum50())
    </script>
</body>

</html>

24、函数的参数以及作用

<!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>
    <script>
        // 上一个案例的弊端   函数内部吧数据写死了  只能求和1-50  通用性差

        // 参数的意义
        // 充当了一个媒介
        // 提高程序的通用性
        // 写在()，用,隔开

        function getSum(min,max){
            // min，max通常称之为形参，可以理解为一个占位符
            let sum=0
            for(i=min;i<=max;i++){
                sum+=i
            }
            console.log(sum)
        }

        getSum(1,50)    // 1，50传的是一个具体的之   通常称之为实参
    </script>
</body>
</html>

25、函数的返回值

<!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>
    <script>
        // 上一个的弊端 拿不到返回结果
        // 解决方法 通过关键字return 返回给调用者
        function getSum(min,max){
            // min，max通常称之为形参，可以理解为一个占位符
            let sum=0
            for(i=min;i<=max;i++){
                sum+=i
            }
            return sum
        }

        let total = getSum(1,50)
        console.log(total)
    </script>
</body>

</html>

26、函数判断闺年

<!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>
    <script>
        function judgmentYear(y){
            if(y%4==0 && y%100!=0){
                return true
            }else if(y%400==0){
                return true
            }else{
                return false
            }
        }

        y=prompt('请输入年份：')
        if(judgmentYear(y)){
            console.log('是闰年')
        }else{
            console.log('不是闰年')
        }
    </script>
</body>
</html>

李佩锦peijin

关注

15
点赞
踩
10

收藏

觉得还不错? 一键收藏
1
评论
webgis入门之JavaScript（1）

包括了JavaScript入门的基本语法和概念，以及一些实用的例子。从内嵌式和外联式的JavaScript开始，介绍了变量声明、输入输出、基础数据类型、强制转换、运算符、自增自减、比较符、逻辑符、赋值运算、二元运算符等基础知识。接着介绍了流程控制中的if、if-else、if-else-elif和switch语句，以及for循环的运用。最后涉及了函数的定义、参数、返回值以及如何利用函数判断闰年等实用例子。这些内容涵盖了JavaScript入门的基础知识和常见应用场景。
复制链接

扫一扫