• JavaScript（JS）的简单了解

    目录

    一、JS 的简单介绍

     二、JS的基础语法

    1、JS是不需要main函数的

    2、变量的作用域  

    3、打印

     3、JS 中的数据类型

    4、JS 的基础语句使用

    if 语句 

    输入和输出 

    数组 

     两种简单的遍历方式​编辑

    5、函数(function)

    匿名函数 

    作用域

    作用域链 

     6、JS 的对象

     定义对象的方法1

    value的类型不固定，可以任意赋值

     7、JS 完成对DOM树中元素的检索

    小练习

    setTimeout和setInterval 

    一、JS 的简单介绍

          Javascript简称js，js是一种脚本语言，是不需要进行编译的，也是浏览器中的一部分，经常用在web客户端脚本语言，主要是用来给html增加动态功能。、

    JS在实际应用中是挂靠在HTML上运行的

       

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <title>运行JStitle>
    6. head>
    7. <body>
    8. <script>
    9.     alert('我是内联的 js ')
    10. script>
    11. <script src="../JS/run-js.js">script>
    12. body>
    13. html>
    alert('我是外联的 js ')

    页面会跳出两个弹窗

    学习内容在浏览器的控制台可以写简单的js代码是实现

     二、JS的基础语法

    1、JS是不需要main函数的

        java：①"所有语句"都必须放在一个主方法中，并且只有当这个方法被调用时，这些语句才会执行

                  ② java的语句必须用分号结尾

                  ③ java的数据和变量都是有类型的

        JS：  ①如果语句放在函数中，则语句在函数被调用时才会使用，如果语句放在外侧，则JS加载完成就会执行语句。

                  ② js语句可以用分号也可以不用，如果一行有多个语句，就要用分号隔开

                  ③ js中的数据是有类型的，但是js的变量是没有数据类型的

    2、变量的作用域  

    大体上来看就是作用在{}中,出了这个括号就用不了了

    3、打印

    不能打印到网页上，只能打印到控制台上(console)

    下面的 undefined 是cnsole.log(...)的返回值，由于没有返回值，所以是 undefined

     

     

     3、JS 中的数据类型

    数字类型：不严格区分整型、非整型，统一认为是数字类型(Number类型)

     1     13     5.3    4.5

    布尔类型：   true/false   对比java，JS的类型检查并不严格

    字符串类型：对比java，JS中没有字符类型，单引号和双引号是一样的

     模板字符串：使用反引号(`)

    var world = ..;      var s = 'Hello ${world}`
    对比Java中
    String world = ..;      String s = String.format("hello %s", world);      var s = "Hello " + world;

     小结

     关于相等判断，对比Java:
    ①在JS中，就是对象的值的比较，而不像Java 中，如果要比较对象的值，应该使用equals(..)方法JS的== <=> Java的equals(..)
    var s = "..";     var b = "..."     s == b
    String s = "...";    String b = "...";      s.equals(b)

    ②JS中的==对比===
         ==︰自带类型转换的比较

         ===:不带类型转换的比较

         0== "0":结果是true;

        1)两个要比较的数据类型不等，所以先对其中一个做类型提升（这里把O ->"0")0
        2) "O" =="O”的结果是true
    0 === “0":结果是false; 1)两个要比较的数据类型不同，所以结果就是false

    一般建议使用===以及!==去做比较
    否则就可能出现刚才演示的JS的内在逻辑错误"0"== 0&&0==[]但是“O”!=[]

    JS 中对boolean类型的处理和Java中不一样
    null / undefined 都视为false
    Java中 1不是 true，2不是 true，0不是false
    但是JS中，1看作就是 true，2也是 true，0是false。非О 就是true(继承C语言的习惯了)跟进一步:""也可以看作false

    4、JS 的基础语句使用

    if 语句 

    输入和输出 

    while语句以及continue,break

    数组 

    JS 中的数组=数组+顺序表的合集，数组的长度时可变的

     JS中的数组的现象类似Java 中数组和顺序表结合的现象

    ①初始化方式var a = []
    ②数组的长度(含义:内部的元素个数)  a.length

    ③合法下标: index >= 0 && index < a.length
    ④访问非法下标不会报错:
    如果是get，得到undefined
    如果是set，正常赋值，会产生空洞【一般别这么干】
    ⑤和变量一样，数组中的元素也是无类型的(其实是一个引用类型)，所以，一个数组中可以保存任意类型的元素，甚至元素之间的类型可以不一致。

     对于上图来说，a和b都是引用，所以b=a就是让b引用指向了a引用当前所指的对象，因此在修改a数组的时候，b数组也进行了修改。

     两种简单的遍历方式

     push()方法将一个或多个元素添加到数组的末尾，并返回该数组的新长度。

    pop()方法从数组中删除最后一个元素，并返回该元素的值。此方法会更改数组的长度。空数组也可以进行pop()操作，但是结果是 undefined

    unshift()方法将一个或多个元素添加到数组的开头，并返回该数组的新长度（该方法修改原有数组)。


     shift()方法从数组中删除第一个元素，并返回该元素的值。此方法更改数组的长度。

     还有好多数组的方法，用的时候去(mdn)了解即可

    5、函数(function)

    在js中不严格区分函数和方法，通过function定义

     JS 是无类型的，在函数中，并没有函数的形参约束类型，意味着任何类型的参数都可以自由传递

    JS是天生自带重载的，就非常的方便  function add(x,y){...}

    JS 无返回值时，视为返回 undefined

    function func(){}    <=>   function func(){return;}   <=>  function func(){return undefined；}

    在JS中函数是第一公民：函数也是一种数据类型，可以正常的进行赋值操作,包括显示和隐式赋值

    隐式赋值 

    匿名函数 

    此处由于add函数没有被调用，所以就不会打印x和y

    作用域

    作用域链 

    背景:   函数可以定义在函数内部
           内层函数可以访问外层函数的局部变量.
           内部函数可以访问外部函数的变量.采取的是链式查找的方式.从内到外依次进行查找.

     6、JS 的对象

    原则上，JS 的所有数据都是对象

    对象，其实就是一种key-value（类似于java的map）

     在Java这种强类型语言下，对象只是有约束的key-value。Map是没有约束的key-value。逻辑结构其实是一体的。

     定义对象的方法1

     对象是一个key-value，就可以通过key获取value值

     key可以任意增加或者删除

    value的类型不固定，可以任意赋值

    JS 过于灵活出现的问题 

    对象中this的简单使用

    JS中的this还是比较麻烦的，尤其是在回调函数中，这里只做简单介绍

    由于JS 的对象没有key-value约束，所以只需要有构造方法就够了，在这种情况下，JS就没有提供类（在ES6中，为了程序员的习惯，引入了class），只提供构造方法，使用普通方法当做构造方法，只是调用的时候不一样

     7、JS 完成对DOM树中元素的检索

    首先认识两个对象：

     window  前端自带的一个对象，代表我们看到的整个浏览器窗口，实际上是前端圆形JS的一全局

    window对象的属性和方法可以直接进行使用  window.xxx=...    xxx=...      

    window.document   一般写为document   

    文档：浏览器上的内容部分(真正的HTML生成的部分)   代表的就是DOM对象

    在DOM中检索某元素/在文档中找到某个HTML标签

    document.querySelector(...)     就是在文档中根据选择器进行检索

    选择器，字符串类型，具体和CSS的选择器差不多

    元素选择器：找到body元素，document.querySelector('body') 

    ID 选择器：找到id是hello的元素，document.querySelector('#hello')

    类选择器：找到class中包含active的元素，document。querySelector('.active')

    其它的复合选择器

    元素的遍历方法，结果是深度优先遍历

    小结

    小练习

    红绿灯

    https://gitee.com/ren-xiaoxiong/web1/tree/master/src/main/resources/static/JStest/redgreenhttps://gitee.com/ren-xiaoxiong/web1/tree/master/src/main/resources/static/JStest/redgreen实现轮播图片 

    web1: web应用的简单使用和练习 - Gitee.comhttps://gitee.com/ren-xiaoxiong/web1/tree/master/src/main/resources/static/JStest/carouselImages

    setTimeout和setInterval 

    1. <head>
    2.     <meta charset="UTF-8">
    3.     <title>Datetitle>
    4. head>
    5. <body>
    6. <div>div>
    7. <script>
    8.     let oDiv=document.querySelector('div')
    9.     //使用匿名函数
    10.     setInterval(function (){
    11.         let now=new Date();
    12.         
    13.         oDiv.innerHTML=`
      ${now}
      `         //原地更新
    14.         
    15.         oDiv.innerHTML +=`
      ${now}
      `         //不断新增
    16.         
    17.     },1000)
    18. script>
    19. body>
    20. html>
    1. <html lang="en">
    2. <head>
    3.     <meta charset="UTF-8">
    4.     <title>Dateplustitle>
    5. head>
    6. <body>
    7. <div>div>
    8.  
    9. <script>
    10.     let oDiv = document.querySelector('div')
    11.  
    12.     // 直接传入匿名函数（隐式赋值）
    13.     setInterval(function() {
    14.         let now = new Date()
    15.  
    16.         let nowDiv = document.createElement('div')
    17.         nowDiv.textContent = now
    18.  
    19.         // oDiv.innerHTML = ''     // 这行如果保留，就是原地更新；否则就是追加
    20.         oDiv.appendChild(nowDiv)
    21.     }, 1000)
    22. script>
    23. body>
    24. html>

    1. DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <title>查看当前时间title>
    6. head>
    7. <body>
    8.    <button>点击我显示时间button>
    9.    <div class="显示时间区域">div>
    10.    
    29. <script>
    30.     let oDiv=document.querySelector('.显示时间区域')
    31.     function eventHandle() {
    32.         let now=new Date()
    33.         //对元素进行事件的绑定
    34.         let nowDiv=document.createElement('div')
    35.         nowDiv.textContent=now
    36.         //为nowDiv绑定点击事件
    37.         nowDiv.onclick=function (){
    38.             //将nowDiv从父元素中删除
    39.             oDiv.removeChild(nowDiv)
    40.         }
    41.         oDiv.appendChild(nowDiv)
    42.     }
    43.     let oButton=document.querySelector('button')
    44.     oButton.onclick=eventHandle
    45. script>
    46. body>
    47. html>

    相关代码

    web1: web应用的简单使用和练习 - Gitee.comhttps://gitee.com/ren-xiaoxiong/web1/tree/master/src/main/resources/static/

  • 相关阅读:
    【图像处理】小波编码图像中伪影和纹理的检测(Matlab代码实现）
    Android Framework——进程间通讯学习，从Binder使用看起
    ASP.NET Core 6框架揭秘实例演示[14]：日志的进阶用法
    一百九十二、Flume——Flume数据流监控工具Ganglia单机版安装
    相控阵天线（二）：非规则直线阵列天线（稀布阵列、稀疏阵列、平方率分布阵列、含python代码）
    Kubernetes学习笔记-StatefulSet：部署有状态的多副本应用(1)20220624
    第五天：前端页面展示不出来
    鉴源实验室 | 系统逻辑漏洞挖掘实践
    Visual Studio 错误CS0006:未能找到元数据文件踩坑记录
    人体姿态估计和手部姿态估计任务中神经网络的选择
  • 原文地址：https://blog.csdn.net/m0_68989458/article/details/126186068