侧边栏壁纸
博主头像
海绵

正向的根基决定逆向的上限

  • 累计撰写 30 篇文章
  • 累计创建 28 个标签
  • 累计收到 19 条评论

js基础用法(代码示例)

海绵
2022-02-21 / 0 评论 / 0 点赞 / 232 阅读 / 12,347 字
  • javaScript又叫做js它是一门轻量级的编程语言,虽然名字中有java但是实际上它跟java没有任何的关系!

  • js也是一门独立的编程语言,主要是用来向HTML页面进行动态效果的设置,是一门脚本语言,浏览器中有自己带的js的解释器!

  • 它可以支持面向对象,支持面向过程等

  • javascropt中的东西很乱,有一些东西是没有太多的合理性的,经不起推敲,如下图,所以有一些原理层的问题就记住用法就可以了!

    1.jpg

js的引入方式

  • js引入的关键词是script,它的样式跟引入用的都是这一个来控制

  • js的引入也是有三种方式

    • 外部引入方式

    • <head>
          <meta charset="UTF-8">
          <title>Title</title>
          <script src="te.js"></script>
      </head>
      
      <!--在引入js的方式跟引入css的用的关键词跟是不一样的!
      应该是src
      -->
      
    • 写到head标签中

    • <head>
          <meta charset="UTF-8">
          <title>Title</title>
          <script>alert('你满18岁了吗???');</script>
      </head>
      

      1575437159214.png

    • 写到body中

    • <body>
          <script>alert('你满18岁了吗???');</script>
      </body>
      
      <!--效果都是一样的!-->
      
    • 总结:

      • 在js中每一句话写完都要加一个分号, 表示这是一个整体,跟mysql一样
      • 如果引入方式不是文件引入,那么写到那里都是一样的,不过建议写到body的底部,因为js的特效不需要先加载,如果都写在head中也会拖慢加载的速度

js语言基础

  • 编程语言大体上都是相通的,在学会了python之后再来了解js就显得很简单了,js中的很多东西跟Python大体上是一样的,但是细节上又有区分!

  • 变量

    • 在js中要声明一个变里要用var(只用于声明变量)

    • 下面的代码可以用浏览器的开发者工具进行实验

    • 打开谷歌, F12 选定 Console

    • var a=100;  /var的意思是声一个变量,它的值是100,/
      a = 100;    /这样也是声明了变量,但是它们是不一样的!/
      
      /* 区别: 
      在全局中两种定义方式是没有区别的,但是在函数内的时候用var来声明的就只是局部变量,直接赋值的只能是全局变量
      
      变量声明,但没有赋值的时候,变量的值为undefined
      
      */
      
  • 注释

    • js中的注释用//来表示,当中写的就是内容
    • 多行注释用/**/表示

基础数据类型

  • number(整形和浮点型)

    • 包含整形和浮点型

    • typeof(查看数据类型)

    • var a=1.1;
      
      typeof a;
      
      "number"
      
  • string(字符串)

    • var a = "adfaf"
      
      a
      
      "adfaf"
      
      /* 可以看到a之前被定义过number类型了现在又可以定义为string类型,说明js也是支持多态的!*/
      
    • 字符串的操作
      1. 索引取值

        var a = "adfaf";
        undefined
        a;
        "adfaf"
        a[1];
        "d"
        

        索引取值直接用[]当中写要取的位置!

        也可以切片,但是要用另一种方法,在后面写

      2. 获取长度

        length

        /length 可以测字符串的长度/
        
        var haimian="我就是我颜色不一样的烟火";
        
        undefined
        
        haimian.length;
        
        12
        
        /*用字符串的名字点出length*/
        
      3. 移除两端空格

        trimLeft()

        var a=" a "
        
        a.trim();
        
        
        "a"
        
        /*注意trim是一个函数要执行得加括号
        
        可选:s.trimLeft();移除字符串左边的空白
        
        s.trimRight();移除字符串右边的空白
        */
        
      4. 根据索引获取字符

        charAt()

        var haimian="我就是我颜色不一样的烟火";
        
        var b=haimian.charAt(3);
        
        b
        
        "我"
        
        /*定义一个字符串叫做haimian,拿到索引为3的值存到b中,然后打印b*/
        
      5. 根据索引获取子序列(切片)

        substring()

        var haimian="我就是我颜色不一样的烟火";
        
        haimian.substring(1,4)
        
        "就是我"
        
  • 布尔类型

    • true 跟 fales 跟python中的一样,不过是首字母不大写!

    • 1>10
      false
      
      
      1<10
      true
      
  • undefined和null类型

    • undefined是声明了变量但是没有赋值就是一个undefined,不只是声明了但是没有赋值会出现,如索引超出范围也会是一个undefined,js很难让它报错!

    • var a
      undefined
      a
      undefined
      
      /*声明但没有赋值*/
      
    • null类型只有一个值,即null。null用来表示尚未存在的对象,常用来表示函数企图返回一个不存在的对象。一个变量不用了就可以赋值为null

    • a = null
      null
      a
      null
      
  • 数组(列表)

    • 数组类型于python中的列表,叫法不一样而已

      /*定义一个数组*/
      
      haimian=["放不下的是什么","我也不知道",1,2];
      
      (4) ["放不下的是什么", "我也不知道", 1, 2]
      
    • 数组常用的方法

      • 数组[索引] 索引取值
        haimian[0]
        "放不下的是什么"
        
      • 数组.push() 尾部添加元素
        haimian.push("如果这就是爱情")
        5
        haimian
        (5) ["放不下的是什么", "我也不知道", 1, 2, "如果这就是爱情"]
        
        /*括号中的5表示的是数组中有5个元素*/
        
      • 数组.pop() 尾部移除一个元素
        haimian
        (5) ["放不下的是什么", "我也不知道", 1, 2, "如果这就是爱情"]
        
        haimian.pop()
        "如果这就是爱情"
        
        haimian
        (4) ["放不下的是什么", "我也不知道", 1, 2]
        
        
      • 数组.unshift() 头部插入元素
        haimian.unshift("先生可否买我几斤仁义道德")
        5
        haimian
        (5) ["先生可否买我几斤仁义道德", "放不下的是什么", "我也不知道", 1, 2]
        
      • 数组.shift() 头部移除一个元素
        haimian.shift()
        "先生可否买我几斤仁义道德"
        
        haimian
        (4) ["放不下的是什么", "我也不知道", 1, 2]
        
      • 数组.splice(a,0,c) 在指定位置插入元素
        haimian.splice(1,0,"11111")
        /*上面这句话的意思是在索引为1的位置删除0个值,替换为"11111"*/
        []
        
        haimian
        (5) ["放不下的是什么", "11111", "我也不知道", 1, 2]
        
        
      • 数组.splice(a,1,c) 在指定位置替换元素
        haimian.splice(1,1,"我是替换过的值")
        /*在索引为1的位置,删除一个值,替换为"我是替换过的值"*/
        
        ["11111"]
        
        haimian
        (5) ["放不下的是什么", "我是替换过的值", "我也不知道", 1, 2]
        
      • 数组.splice(a,b) 在指定位置删除元素
        haimian.splice(1,1)
        /*在索引为1的位置删除一个值*/
        
        ["我是替换过的值"]
        haimian
        (4) ["放不下的是什么", "我也不知道", 1, 2]
        
        
        
      • 数组.slice() 切片
        (4) ["放不下的是什么", "我也不知道", 1, 2]
        haimian.slice(1,3)
        
        (2) ["我也不知道", 1]
        
        /*从第索引1个值取到第三个值,不包含第三个值*/
        
      • 数组.reverse() 反转数组
        haimian.reverse()
        
        (4) [2, 1, "我也不知道", "放不下的是什么"]
        
        
      • 数组.join() 吧数组中的内容拼接成一个字符串
        var c=["我","就","是","我"]
        undefined
        
        c.join("****")
        "我****就****是****我"
        /*如果join的括号只写一个字符串就是吧它们拼成了一整个字符串,如果join的括号中写内容就是以括号中的内容拼接*/
        
      • 数组.concat() 连接数组
        var a=["不听不听"]
        undefined
        
        var b=["王八念经"]
        undefined
        
        a.concat(b)
        (2) ["不听不听", "王八念经"]
        
      • 数组.sort() 对数组进行排序
        haimian=[1,541,56,1563,186,416,,135,4186,1,5641,861,56,16,156]
        
        haimian.sort()
        (15) [1, 1, 135, 156, 1563, 16, 186, 416, 4186, 541, 56, 56, 5641, 861,]
        
        /*事实证明这个玩意一点也不好使,因为它是按的第一位数进行排序的!*/
        
    • 解决数组中的排序问题
      • 冒泡排序
      • 百度官方:它重复地走访过要排序的元素列,依次比较两个相邻的元素,如果顺序(如从大到小、首字母从从Z到A)错误就把他们交换过来。走访元素的工作是重复地进行直到没有相邻元素需要交换,也就是说该元素列已经排序完成。
      • 个人理解:冒泡排序的意思是每次比较两个值的大小,然后吧大的值排到后面,小的值放到前面,这样经过完整的一轮之后就是一个我们想要的结果了!
      • 实现方法:需要用到函数,算是固定写法,背下来就好了!
      /*定义一个函数,传入两个值每次进行减数运算,如果第一个可以减第二个就返回一个正的值*/
      
      function com(a,b){return a-b};
      
      haimian.sort(com)
      (15) [1, 1, 16, 56, 56, 135, 156, 186, 416, 541, 861, 1563, 4186, 5641, empty]
      
      /*具体的内部过程不详*/
      
  • 字典(js中没有字典,是用object强行自定义出来的)

    • info = {a:"1",b:"2"}
      {a: "1", b: "2"}
      info["a"]
      "1"
      
    • 注意:字典在定义的时候键加不加引号都可以,但是在值的时候,如果是字符 串类型一定要加引号,在用字典名中的键找值的时候也要加上引号

流程控制

  • If判断

    • if("1"==="1"){
      console.log("您就是个臭弟弟")
      
      }
      
      输入结果:您就是个臭弟弟
      
      /*if的用法的在if后面加一个(里面写的是要判断的条件,后面跟一个 大括号,就是如果满足条件怎么做)*/
      
    • console.log() 的意思就是打印括号中的内容

  • 多条件判断

    • var a=100
      
      
      if(a==100){
      
      console.log("我是100");
      
      }else if(a ==1){
      
      console.log("我是1")
      
      }else{
      
      console.log("没有这个值")
      
      }
      

运算符

  • 比较运算符

    > < == != >= <= === !==

    其中比较恶心的就是这个===,它的意思是类型相等,这个判断才成立

    1=="1"
    true
    
    /*这是两个等号,就是不看它们的类型,只要看起来相等就是相等*/
    
    1==="1"
    false
    
    /*三个等号的意思是必须要类型一样才是等于*/
    
  • 算术运算

    + - * / ++ -- %

    这个当中值得注意的是自增跟减,也就是++ --

    a = 1   /定义一个变量/
    
    console.log(++a)   先执行自增1再打印
    
    2
    
    a=1      /定义一个变量/
    
    console.log(a++)     先执行打印再自增
    
    1
    

    注意++的位置

switch

  • 用于判断等于某些值(只能放数字)

  • 关键字:

    switch

    case

    /正常版本/
    
    n = 1
    
    switch(n){
        case 1:
    	console.log("慢慢的来")
    
    }
    
    慢慢的来
    /*给n赋一个值,如果我的n的值等于1它就执行下面的内容*/
    
    /穿透问题/
    
    switch(n){
    
        case 1:
    	console.log("慢慢的来1")
    
    
        case 2:
    	console.log("慢慢的来2")
    
    	case 3:
    	console.log("慢慢的来3")
    
    
    }
    
    慢慢的来1
    慢慢的来2
    慢慢的来3
    
    /*第一个执行成功以后下面的内容全都打印了,因为它认为这整个是一个整体,所以全都打印了!
    
    解决办法:
    加break;
    执行成功后就跳出!
    */
    

异常捕获

  • js这门语言的兼容性还是比较强的,一般情况下是不会报错的,但是也有时候会出现这样的问题,那出现以后,就应该用异常来捕获一下!

  • 结构:

    • try catch(等于python中的except) finally

    • try{console.log(aaaaaaa);}
      
      catch(e){console.log(e);}
      
      finally{console.log('sssss')}
      
      ReferenceError: aaaaaaa is not defined
          at <anonymous>:1:17
      
      /*保存了出错信息,并打印,在结束之前进行打印ssssss,语句最后一行不要写;号不然会报错*/
      
    • 其它语句组合,后续补充

for循环

  • js中的循环跟python中的没有太大的差别

  • 循环三要素

    1. 起始值
    2. 循环条件
    3. 循环变量的增量
    • for(var i=0;i<10;++i ){
      
      console.log(i);
      };
      
      /*伪代码
      
      for(初始值;执行条件;循环变量的增量){
      每次循环要执行的内容
      }
      
      注意分号
      */
      
    • /例二,if 跟 for 一起使用/
      
      if(a===10){
      for(a;a<20;a++){
      
      console.log(a);
      }}
      
      
      10
      11
      12
      13
      14
      15
      16
      17
      18
      19
      
  • 循环数组

    s=[1,2,5,41563,156,3156,156,1,616]
    
    for(var i in s){console.log(i);}
    /意思就是for循环s中的每一个值给用var声明的变量i/
    
    0
    1
    2
    3
    4
    5
    6
    7
    8
    /*
    但是有一个问题,下面打印出的来i都是数组的索引,那么怎么打印每一个的值?
    解决:
    吧打印i改为s[i]
    */
    

while循环

  • var a = 0;
    while(a<5){
    	a++;
    	if (a===2){
          continue;
    	}
    	console.log(a);
    }
    

函数

  • 定义一个函数

  • 关键字:function

    function a1(a,b){return a+b}
    
    a1(3,4)
    
    7
    
    /*不能返回两个值 */
    
    function a2(a,b){return a,b}
    
    
    a2(1,2)
    
    2
    

匿名函数

  • var c = {a:function(a,b){
    return a + b
    }}
    
    c["a"](3,5)
    
    /*吧匿名函数做为字典的值,在通过键调用的时候给它传值*/
    

自执行函数

  • 自动执行的函数

  • (function auto() {
        console.log("我是自执行")
    })()
    

序列化

  • 序列化
  • JSON.stringify(object)
var b=["我","就","是","我"]

var infostr=JSON.stringify(b);

infostr
"["我","就","是","我"]"

  • 反序列化
  • JSON.parse(str)
var s = JSON.parse(infostr)

s
(4) ["我", "就", "是", "我"]

DOM对象

  • DOM对象是文档对象模型,通过DOM可以动态的调整文档(html)的内容

  • 在后面的应用中DOM的应用还是很多的!

  • 直接查找选择器:

    • 现有如下代码
    <div class="c1" id="d1"></div>
    <div class="c1"  id="d2"></div>
    
    我想找到当前页面的所有的div标签
    
    document.getElementsByTagName("div")  
    
    结果:
    HTMLCollection(2) [div#d1.c1, div#d2.c1, d1: div#d1.c1, d2: div#d2.c1]
    
    
    • document:代表HTML文档对象

    • document.getElementsBy可以记成固定写法

    • 直接查找选择器的几个参数

    document.getElementBy Id(arg)根据ID获取一个标签对象
    document.getElementsBy ClassName(arg)根据class属性获取标签对象集合
    document.getElementsBy Name(arg)根据name属性值获取标签对象集合
    document.getElementsBy TagName(arg)根据标签名获取标签对象集合
    • 根据ID获取一个标签对象

    • <div class="c1" id="d1"></div>
      <div class="c1"  id="d2"></div>
      
      /*找到id为d1的标签*/
      
      document.getElementById("d1")  # 记得要加""括号中的是一个字符串
      
      <div class=​"c1" id=​"d1">​</div>​
      
      # 因为id属性是不可以重复的所以得到的就是一个准确的值!
      
      
    • 根据class属性获取标签对象集合

    • <div class="c1" id="d1"></div>
      <div class="c1"  id="d2"></div>
      
      # 找到类属性为c1的标签
      
      document.getElementsByClassName("c1")
      
      # ClassName 表示的的类的意思!
      
      HTMLCollection(2) [div#d1.c1, div#d2.c1, d1: div#d1.c1, d2: div#d2.c1]
      
      # 因为类属性可以有多个不是唯一的,所以想拿到那个值就用数组的取值方式
      
    • 根据name属性值获取标签对象集合

    • /html代码/
      
      <div id="d1" name="aa"></div>
      <div  id="d2" name="aa"></div>
      
      /*css代码*/
      
      [name]{
          width: 100px;
          height: 100px;
          background-color: #ff109f;
          border: 2px solid ;
          margin-top: 10px;
      }
      
      #通过js拿到属性为name的标签
      
      document.getElementsByName("aa")
      
      NodeList(2) [div#d1, div#d2]
      
    • 根据标签名获取标签对象集合

    • # html代码
      
      <div id="d1" name="aa"></div>
      <div  id="d2" name="aa"></div>
      
      #css代码
      
      document.getElementsByTagName("div")
      
      HTMLCollection(3) [div#d1, div#d2, div#d3, d1: div#d1, aa: div#d1, d2: div#d2, d3: div#d3]
      
  • 通过DOM改变颜色

    a[0].style.backgroundColor="red"

  • 例题:

    #例题一!
    要求:
    
    创建几个div标签,统一设置为黄色
    然后通过JavaScript代码将所有div标签改为红色
    
    
    问题分析:用for循环可以吧所有的div变色
    
    实现:
    
    #html代码
    
    <div id="d1" name="aa"></div>
    <div  id="d2" name="aa"></div>
    <div  id="d3" name="aa"></div>
    
    #css代码
    div{
        width: 100px;
        height: 100px;
        background-color: #fff544;
        border: 2px solid ;
        margin-top: 10px;
    }
    # 得到下图1
    # 用for循环改变所有标签的颜色
    
    var a = document.getElementsByTagName("div")
    
    a
    
    HTMLCollection(3) [div#d1, div#d2, div#d3, d1: div#d1, aa: div#d1, d2: div#d2, d3: div#d3]
    
    for(var i=0;i<a.length;i++){
    a[i].style.backgroundColor="red"
    }
    
    #结果如下图二
    

1575537345693.png

1575538057796.png

  • 间接查找选择器

    • 通过一个标签间接找的找到其它的标签
    • 查找方式如下
    .nextElementSibling找下一个兄弟
    .previousElementSibling找上一个兄弟
    .firstElementChild;找第一个儿子
    .lastElementChild找最后一个儿子
    .children找所有儿子 是一个数组
    .parentElement找到自己的父级标签
  • 找下一个兄弟
    # html代码
    
    <div>
        <div id="a"></div>
        <div id="b"></div>
    </div>
    
    # js代码
    
    var a=document.getElementById("a")
    
    # 找到id为a的代码,然后赋值给a
    
    a.nextElementSibling # 找a的下一个兄弟
    
    <div id=​"b">​</div>​
    
  • 找上一个兄弟
    # html代码
    
    <div>
        <div id="a"></div>
        <div id="b"></div>
    </div>
    
    # js代码
    
    var b=document.getElementById("b")
    
    b.previousElementSibling
    
    <div id=​"a">​</div>​
    
    
    
  • 找第一个儿子
    #html代码
    
    <div id="666">
        <div id="a"></div>
        <div id="b"></div>
    </div>
    
    #js代码
    
    var a = document.getElementById("666")
    
    a.firstElementChild
    
    <div id=​"a">​</div>​
    
  • 找最后一个儿子
    #html代码
    
    <div id="666">
        <div id="a"></div>
        <div id="b"></div>
    </div>
    
    #js代码
    
    var a = document.getElementById("666")
    
    a.lastElementChild
    
    <div id=​"b">​</div>​
    
  • 找所有儿子
    #html代码
    
    <div id="666">
        <div id="a"></div>
        <div id="b"></div>
    </div>
    
    #js代码
    
    var a = document.getElementById("666")
    
    a.children
    
    HTMLCollection(2) [div#a, div#b, a: div#a, b: div#b]
    
  • #html代码
    
    <div id="666">
        <div id="a"></div>
        <div id="b"></div>
    </div>
    
    #js代码
    
    var c= document.getElementById("a")
    
    c.parentElement
    
    <div id=​"666">​…​</div>​
    
  • 文本操作

    • innerText获取文本内容

    • #html代码
      
      <div id="666">
          <div id="a">如果这就是爱情</div>
          <div id="b">放不下的是什么我也不知道</div>
      </div>
      
      #js代码
      
      var a=document.getElementById("a")
      
      
      a.innerText
      
      "如果这就是爱情"
      
    • 设置文本

    • #js代码
      
      a.innerText = "aaa"
      "aaa" 
      
      # 不能识别标签,单纯的文本内容
      
    • 1575541351647.png

    • innerHTML获取文本内容

    • #html代码 
      
      <div id="666">
          <div id="a">如果这就是爱情</div>
          <div id="b">放不下的是什么我也不知道</div>
      </div>
      
      #js代码
      
      var a = document.getElementById("a")
      
      a.innerHTML
      
      "如果这就是爱情"
      
      a.innerHTML='<a href="">校花</a>'
      
      
    • 1575541799284.png1575541799284

  • 两者区别:

    • inner Text 得到的只是文本文档只能改为字符串
    • inner Html 得到的也是文本文档,但是可以当html代码进去!
  • 值操作

    • 针对与用户交互相关的标签(input)操作其中的值

    • #html代码
      #得到用户输入框中的内容
      
      
      <input type="text" name="username" id="username" >
      
      #js代码
      
      var inp =document.getElementById("username")
      
      <input type=​"text" name=​"username" id=​"username">​
      
      inp.value
      "fdgsdfgsdf"
      
    • 更改用户输入框中的内容

    • inp.value="adf"
      "adf"
      

BOM对象

  • 弹框
    • (alert('未满18不要进')  /在浏览器弹出一个弹窗,只有确定
      confirm('你满18了吗?') / 在浏览器弹出一个弹窗,两个选项,返回true 或者 false /
      
  • location对象
    • location.href获取当前页面的地址(url路径)
      location.href =""跳转到当前网址上
      location.reload()刷新当前页面
  • 计时器
    • 第一种一段时间之后执行某个代码

    • setTimeout("console.log('xxx')",5000);
      # 这句话放在浏览器中5秒以后就打印了"xxx"
      xxx
      
    • 第二种,每隔一段时间执行某个任务

    • setInterval(function(){confirm('弹个框!!')},3000);
      
      
0

评论区