• JS快速入门


    目录

    一,JS与Java的区别

    变量定义:

    数据类型:

    比较相等:

    数组

    函数(function):

     匿名函数:

    JS对象

    创建对象1;

    创建对象2:new

    二,

    1,使用JS完成对DOM树中的元素的检索

    两个对象:

     方法:

    document修改的时机:


    一,JS与Java的区别

    1,JS不需要main方法,如果语句在函数外部,在JS加载完成时就会执行,如果在函数内部再函数被调用时才会执行

    Java中程序的入口时main方法,必须存在main

    2,JS中的一行一条语句,可以不使用;结尾

    Java中每条语句的结束,必须使用;结尾

    3,JS中数据有类型,但变量没有类型(所有的数据都会被看作成对象类型,所以没有类型),用java的视角,JS的变量就是 Object  a = 1;  a = “str”   a = [1,2,3];等等,所以JS中变量不限制数据类型。

    Java中数据有类型,变量也有类型

    变量定义:

    var  a;   //不赋初始值 

    var a = 100 ; // 赋初始值

    变量的作用域:

    以{}划分作用域

    var b  = 20;

    {

    var a = 100;

    }

    出了{},a就无法使用了,b时全局变量,都可以使用

    数据类型:

    数据类型:NUmber

    布尔类型:true / false

    字符类型:使用“” 或者‘’来定义

    模板字符串:使用反引号``(ESC下面的键)

    var  str = "hello";  var s = "world ${str}"  //输出world hello ,相当于使用str,填充到${}这个占位中,相当于java中的printf("world %s",str),

    不存在的特殊类型:

    undefined:(未定义)

    null:(空值)

    比较相等:

    JS中的 == 相当于java中的equals()方法,

    JS中的== :带类型转换的比较 0 == ‘0’  -》true

    0 === ‘0’  : 不带类型转换的比较 -》false

    JS中,非0为真,0为假

    数组

    JS中数组 = 数组 + 顺序表的合集

    JS的数组长度可变,可以利用下标操作,允许不连续,允许下标错误。

    1. let arr = new Array();//let定义数组
    2. let arr = [];
    3. var arr = [];
    4. //这两种方法和new array()一样的效果,可以不指定数组的长度,遍历可以使用下标,及数组和顺序表
    5. arr[0] = 1;//此时的arr[1]为undefined状态,可以不连续
    6. arr[2] = 3;
    7. for(var i = 0 ; i < 3 ;i ++){
    8. console.log(arr[i])
    9. }
    10. arr.push(4);//尾插到数组中,此时数组中的长度为4,arr[3]的值为4

     JS中的数组现象跟java中的数组+顺序表方式相同。

    数组中元素也是没有元素类型,可以是一个任意组合类型组合的数组(JS中所有变量就相当于java中Object对象)

    1. var a = []
    2. a = [1,2,'a',"bc",true,[],undefined];

     1,定义数组:var a = [];

    2,数组长度:a.length;

    3,访问数据:a[0]

    4,遍历数组:for(var i = 0;i < a.length ; i++){ ....} / for(var i in a){....}

    5,顺序表的操作:

            5.1尾插:a.push(12) //返回数组的长度

            5.2尾删:a.pop() //删除最后一个元素,返回删除元素的值

            5.3头插:a.unshift(1,2,3)//连续头插三个元素,连续插入的一组数是顺序插入的

            5.4头删:a.shift()//删除头部元素,返回删除的值

    函数(function):

    function add(x,y){ return x + y}

    function是关键字,定义函数必须存在,没有返回值类型和参数类型,并且可以传递和参数列表个数不同的形参

    调用函数:add(1,2)     (add;这种不是调用add方法)

    1. function sub (x,y){ return x-y; }//定义函数
    2. sub(1,2)//调用函数

    所以JS中不存在重载 

    函数再JS中也是一种数据类型,可以正常的被进行赋值操作

     匿名函数:

    1. var fff = function sum(f,a,b){//将函数赋值变量,就是匿名函数
    2. return f(a,b)
    3. }

    JS对象

    所有数据类型都是”对象“(数字,布尔,字符,函数,异常,数组)

    创建对象1;

    1. var person = {
    2. name:'lisa',
    3. age:'20',
    4. fun: function(params) {
    5. console.log(this.name)
    6. }
    7. }

     

    创建对象2:new

    JS中,使用new关键字,则返回的是一个已定义的对象,如果不加new ,对象是函数的返回值

    this的使用:当前对象的本身

    二,

    1,使用JS完成对DOM树中的元素的检索

    两个对象:

    window:前端页面自带一个window对象,代表浏览器的窗口,在页面中定义的属性,函数都一个通过   window.属性名获取,this指代的也是window这个对象

    document:浏览器上的内容部分,页面的文档对象模型

    学会使用在DOM对象对文件进行检索:document.querySelector(.....)//只找到符合条件的第一个元素(页面中第一次出现该选择器的标签),document.selectorAll(....)//检索全部符合条件的元素

    使用document.querySelector()和document.querySelectorAll(),都会获取指定的标签

    例如:搜索百度一下按钮

    document.querySelector("#su")

     方法:

    1,更新标签

    element.innerHTML = " .... ";//获取element标签的内容,对element的内容进行修改,添加,删除,可以修改里面的标签内容,也可以修改文本

    2,构造标签

    document.createElement('div') //构造一个div标签

    document.createElement('img') //构造一个img标签

    document修改的时机:

    1,页面加载完成时立即执行

    2,和时间进行绑定,一段时间后执行一次

    setTimeout(函数名,毫秒数) 一段时间之后执行一次

    setInterval(函数名,毫秒数),每隔一段时间就执行一次

    3,当发生在某个事件(可能事件源来自于用户的动作)后,执行

    1),事件源:用户点击了某一按钮,这个按钮就是事件源

    2),事件类型:点击事件:onClick(),获取焦点事件:focus,鼠标滑过事件:hover

    3),事件处理流程:

    当事件触发时,浏览器将事件源,绑定事件源(事件源.事件类型 = 函数名称(只是函数名,不是函数的调用) 或   ) 

    1. DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4. <meta charset="UTF-8" xmlns:th="http://www.thymeleaf.org">
    5. <title>Titletitle>
    6. head>
    7. <body>
    8. <button>点我添加时间button>
    9. <div class="时间div">div>
    10. <script>
    11. //1,获取事件源
    12. var but = document.querySelector("button")
    13. var timediv = document.querySelector(".时间div");
    14. function gettime(){
    15. var now = new Date();
    16. timediv.innerHTML += `
      ${now}
      `
      ;
    17. }
    18. //绑定事件源,鼠标点击添加一行
    19. but.onclick = gettime;
    20. //鼠标离开清空
    21. but.onmouseleave = function () {
    22. timediv.innerHTML = ''
    23. }
    24. script>
    25. body>
    26. html>

  • 相关阅读:
    QSS属性大全
    PEG包裹上转换荧光纳米颗粒
    Java-基于SSM的学生综合考评管理系统
    任务调度框架 Quartz 一文读懂
    IDL学习——外部方法调用IDL.pro文件
    23-Vue之事件修饰符
    我的作文题目是——《我的区长父亲》
    谁能撑起植发企业的“第二曲线”?
    二层环路的产生与危害(真实环境感受)
    想做扫码看图效果,你需要学会这一招
  • 原文地址:https://blog.csdn.net/qq_52655865/article/details/126242934