• day-54前端


    javaSript

    什么是js:

      前台脚本编程弱语言,完成页面业务逻辑及页面交互

    js作用:

    1、可以自己生成页面数据
    2、可以请求后台数据
    3、可以接受用户数据 - 可以渲染给页面的其他位置;提交给后台
    4、修改页面标签的 内容、样式、属性、事件(页面通过js可以完成与电脑的输入输出设备的交互)

    学习方向:js代码书写位置、js基础语法、js选择器、js页面操作来学习

    学习目的:完成页面标签与用户的人机交互以及前台数据处理的业务逻辑

    书写位置

    1.行间式: 写在标签的 事件属性 中

    <div id="dd" onclick="alert('hello js')"></div>

    2.内联式:写在script标签中,script标签应该出现在body的最下方(可以将其放在body结束后)

    <script>

    dd.onclick = function () {
    alert('hello js')
    }
    </script>

    3.外联式:通过script标签的src属性,链接外部js文件

    <script src="js/js导入.js">                             一个script标签拥有src引入外部js文件后,就相当于单标签,所以内部的代码会被自动屏蔽
    </script>

    三种输出方式

    1. 控制台输出语句
    console.log('你丫真帅')

    2.弹出框提示信息
    alert('你丫确实帅')

    3.将内容书写到页面
    document.write('<h2 style="color: red">你丫帅掉渣</h2>')

    变量与常量

    let num = 123;   关键字变量赋值
    num++;

    const str = '123';
    str = '456';      常量声明时必须赋初值,且一旦赋值,不可改变

    数据类型

     值类型
    1) 数字类型(只有整数)
    let a = 123;
    console.log(a, typeof(a));
    a = 3.14;
    console.log(a, typeof(a));

    2) 布尔类型
    let b = false;
    console.log(typeof(b), b);


     3) 字符串类型:''    ""    ``
    let c = `123
    456
    789`;
    console.log(c, typeof(c));

     4) 未定义类型:未初始化的变量
    let d;
    console.log(d, typeof(d));

    引用类型
     5) 数组(相当于list):
    let arr = [1, 2, 3];
    console.log(arr, typeof(arr));

    6) 对象(相当于dict):      所有的key必须是字符串
    let sex = '男';
    let dic = {
    name: 'Owen',
    age: 17.5,
    sex,              value如果是变量,变量名与key同名,可以简写
    };
    console.log(dic, typeof(dic));

    7) 函数类型
    function fn() { }
    console.log(fn, typeof(fn));

    8) null类型
    let x = null;
    console.log(x, typeof(x));

    弱语言类型

    let aaa = 123;
    let bbb = '123';

    console.log(aaa == bbb);          == 只做数据比较
    console.log(aaa === bbb);          === 做数据与类型比较

     弱语言类型:会自己根据环境决定如何选择类型存储数据
    console.log(1 + 2);     // 3
    console.log('1' + '2');     // 12
    console.log(1 + '2');     // 12
    console.log(1 - '2');     // -1

    js运算符

    算数运算符:

    +(加法)、-(减法)、*(乘法)、/(除法,得到浮点型)、%取模(除完没除尽的整数)、++(自增)、--(自减) 

      js没有整数浮点数之分,所以要想浮点数转整数,通过 res = parseInt(任何数字开头,只拿整数数字);

                                res=parseFloat(任何数字开头,只拿到浮点型数字);


      res = n1++;    先将n1的值赋值给res,自己再自增1
      res = ++n1;    先自己自增1, 再将n1的值赋值给res

      ++在前优先级最高,++在后优先级最低(比赋值符,还低)

    赋值运算符:


    前提:x=5,y=5

    | 运算符 | 例子 | 等同于 | 运算结果 |
    | :----- | :--- | ------ | -------- |
    | =   | x=y | | 5 |
    | +=    | x+=y | x=x+y | 10 |
    | -=     | x-=y | x=x-y | 0 |
    | *=     | x*=y | x=x*y | 25 |
    | /=     | x/=y | x=x/y | 1 |
    | %     | x%=y | x=x%y | 0 |

    比较运算符:

    前提:x=5

    | 运算符 | 描述 | 比较 | 结果 |
    | ------ | ---------- | ------- | ----- |
    | ==   | 等于 | x=="5" | true |
    | === | 绝对等于 | x==="5" | false |
    | !=    | 不等于 | x!="5" | fales |
    | !==  | 不绝对等于 | x!=="5" | true |
    | >     | 大于 | x>5 | false |
    | <     | 小于 | x<5 | false |
    | >=   | 大于等于 | x>=5 | true |
    | <=   | 小于等于 | x<=5 | true |

    逻辑运算符:

    前提:n=5

    | 运算符 | 描述 | 例子 | 结果 |
    | ------ | ---- | ------------- | ------------------- |
    | &&   | 与 | x=n>10&&++n | x=false,n=5(短路) |
    | ||    | 或 | x=n<10||n-- | x=true,n=5(短路) |
    | !       | 非 | x=!n | x=false,x=5 |

    与短路:有一个为假,就短路

    或短路:有一个为真,就短路 

     如果 !    为真,!!就为假

    三目运算符:

    条件 ? 结果1 : 结果2(表达式成力取前面,不成立取后面)
    res = 10 == '10' ? '相等' : '不等';

    console.log(res);

    js流程控制

    if判断:

    if (条件表达式) {
      代码块;
    }

    ==================================

    if (表达式1) {
      代码块1;
    } else {
      代码块2;
    }

    ==================================

    if (表达式1) {

    } else if (表达式2) {

    }
    ...
    else if (表达式2) {

    } else {

    }

    =================================

    if (表达式1) {
      if (表达式2) {

      }
    }

    ================================

    while、for循环:

    for (循环变量①; 条件表达式②; 循环变量增量③) {
      代码块④;
    }
    for循环执行的顺序:①   ②④③ ... ②④③    ②,入口为①,出口为②,②④③就是循环过程

     案例:
    for (var i = 0; i < 5; i++) {
      console.log(i);
    }

    ==================================

    while (条件表达式) {
      代码块;
    }

    ================================

    do {  代码块;

    } while (条件);

    先执行代码块,在执行条件

    ===============================

    for…in迭代器:

     得到的是索引

    var arr = [1, 2, 3, 4, 5]
    for (num in arr) {
      console.log(num);
    }

    结果:0,1,2,3,4,

    随机数推导过程:

      Math.random()的随机数是  [0, 1) 

     
      [0, 1) * 11 => [0, 11)  parseInt() => [0, 10] + 5 => [5, 15]
      [0, 1) * (n - m + 1) => [0, n - m + 1) parseInt() => [0, n - m] + m => [m, n]


         公式:parseInt(Math.random() * (max - min + 1)) + min


      案例:let num = parseInt(Math.random() * (40 - 10 + 1)) + 10;
           console.log(num);

      

    函数

    函数的关键字:

      function

    函数的函数名:

      fn 

      是使用函数的依据,就是一个变量,可以赋值给其他变量,也可以存储在容器中,也可以作为函数的参数与返回值

    函数的参数:

      都是按位置传(没有关键字传参),形参与实参个数不需要统一,但是一定是按位赋值 (你传你的,我收我的)

    通过...语法接收多个值

    function fn (a, ...b) {       //...变量必须出现在参数列表最后
      console.log(a, b)        // 100 [200 300]
    }
    fn(100, 200, 300)      
     

    函数的返回值:

    function fn () {
      return 返回值;
    }

      1.可以空return操作,用来结束函数
      2.返回值可以为任意js类型数据
      3.函数最多只能拥有一个返回值,如果多个,取最后一个,所以返回值用[]包裹,返回出来

    函数之匿名函数

    没有名字的函数就是匿名函数

    function () {
            
    }

    使用场景:

    1.需求需要一个函数地址,就可以传入一个匿名函数

    function fn100(fn) {
      fn()
    }

    fn100( function () { console.log('传进去的匿名函数') } )

    2.用变量接收匿名函数(第二种声明函数的方式)

    let f = function (a, b) {
      console.log('ffffffffff')
    };
    f();

    3.为事件提供方法体

    hhh.onclick = function () {                  / hhh是标签id,所以可以直接引用
      console.log('hhh 被点击了')
    };

    4.匿名函数自调用:一次性使用,并且产生了一个局部作用域,里面的属性外面无法访问

    (function (a, b) {
      console.log('匿名函数自调用:', a, b)
    })(10, 20, 30);

    四种变量

    if (true) {         // 块级作用域
        let a = 10;
       const b = 20;
         var c = 30;
        d = 40;
     }

     console.log(a);       有{}就不能被外界访问(推荐使用)
     console.log(b);     let和const有块级作用域,不允许重复定义
     console.log(c);       var没有块级作用域, 但有局部作用域,不能被外界访问,可以重复定义
     console.log(d);      没有关键字声明的变量是全局变量,在函数内部声明的外部也可以用

    数据类型的运用

    字符串的运用:

    1)定义:
      let ss = '123abc呵呵';

     2)索引
      res = ss[0];
     3)切片
      res = ss.slice(3, 6);
     4)替换
    res = ss.replace('abc', 'ABC');
     5)拆分:     字符串 => 列表
    res = ss.split('');  按空格/指定的拆
     6) 拼接
    res = ss + ss;
     7) 迭代
    for (s of ss) {
    console.log(s);
    }

    数组的运用:

    1)拼接

    let arr = [3, 1, 2, 4, 5];          列表转字符串
    res = arr.join('');             默认按,拼/按‘’拼一起/自定义拼

    2)迭代

    for (a of arr) {
      console.log(a);
    }

    3)排序

     arr.sort();
     arr.reverse();

     console.log(arr[4]);

    增删改

      开始操作的索引 操作的长度 操作后的结果(不定长0~n个)
      arr.splice(2, 1, 222);    或者(2,1)删除

    字典的运用:

    增删改查

    dic = {};



    dic.age = 18;


     改
    dic.age = 20;


     对象的删除
    delete dic.age;

     查
    console.log(dic.name);

    字典的迭代用 for in
    for (k in dic) {
      console.log(k);
    }

    js选择器

    querySelect系列

    1.通过id名获取唯一满足条件的页面元素

      document.getElementById('id名');

     2、通过class名获取所有满足条件的页面元素

      document.getElementsByClassName('class名');

      返回值是一个类数组结果的对象,使用方式同数组

     3.通过tag名获取所有满足条件的页面元素

      document.getElementsByTagName('tag名');

      返回值是一个类数组结果的对象,使用方式同数组

     querySelect系列

    1.获取第一个匹配到的页面元素

      document.querySelector('css3语法选择器');

     2.获取所有匹配到的页面元素

      document.querySelectorAll('css3语法选择器');

      返回值是一个类数组结果的对象,使用方式同数组

    事件的绑定

     获取标签样式、内容、属性

     let h1 = document.querySelector('h1');

    只能获取行间式样式

      标签.style.属性名 

        let fontSize = h1.style.fontSize;

    getComputedStyle(ele_name, 伪类选择器通常用null填充) 能获取所有方式的样式(内联与外联叫计算后样式)

       let bgColor = getComputedStyle(h1, null).backgroundColor;

    获取标签的内容

      console.log(h1.innerText);
      console.log(h1.innerHTML);

    获取标签的属性

      console.log(h1.getAttribute('id'));

    修改样式、内容、属性

    修改样式

      可以直接修改样式 - 修改的是行间式

       h1.style.color = 'red';  

      css的 - 链接语法对应 js的 小驼峰命名法

       h1.style.borderRadius = '50%';  

    修改内容 

      h1.innerText = '修改过后的内容';
      h1.innerHTML = '<i>修改过后的内容</i>';

    修改属性

        h1.setAttribute('owen', 'oooooooooooooooo');

    表单内容的查、改

      let inp = document.querySelector('input');
      console.log(inp.value);        查
      inp.value = 67890;          改

      // console.log(inp.getAttribute('value'));
      // inp.setAttribute('value', '0000000000000');

    鼠标事件

     onclick、ondblclick、onmouseover、onmouseleave、onmousemove、onmousedown、onmouseup

       单击    双击           悬浮                   离开悬浮             鼠标在里面移动    鼠标按下          鼠标松开

    let h1 = document.querySelector('h1');

    h1.onclick = function (ev) {
      console.log(ev);            // 包含着鼠标的相关信息

      console.log(ev.clientX, ev.clientY);  // 鼠标点击点

      console.log(ev.altKey, ev.ctrlKey, ev.shiftKey);  // 特殊按键
    };

    案例:

    h2 = document.querySelector('h2');


    h2.onmouseover = function () {
      h1.innerText = 'h2被悬浮了';
      h1.style.color = 'green';
    };


    h2.onmouseleave = function () {
      h1.innerText = 'h2被放开了';
      h1.style.color = 'red';
    };


    let count = 1;
    h2.onmousemove = function () {
      ++count;
      h1.innerText = '鼠标在h2身上游走' + count + '下';
      this.innerText = '鼠标在h2身上游走' + count + '下';    为某个标签绑定事件,去控制页面中任何一个标签(绑定事件中的this就代表自身)
    };

    键盘事件

      只要在窗口下,按下键盘就可以触发

       onkeydown、onkeyup、onkeypress

      let inp = document.querySelector('input');
      inp.onkeydown = function (ev) {
         console.log(ev.keyCode)
    }

    案例:

    document.onkeydown = function (ev) {
      console.log(ev.keyCode);
      if (ev.keyCode == 37) {
        console.log('你按了左键');
      } else if (ev.keyCode == 38) {
        console.log('你按了上键');
    }
    console.log(ev.altKey);
    if (ev.ctrlKey && ev.keyCode == 13) {
    console.log('留言');
    }

    表单事件

    let inp = document.querySelector('input');
    let h22 = document.querySelector('h2:nth-of-type(2)');

    inp.oninput = function () {        // onchange当input失去焦点才会触发    oninput 内容改变时触发
      h22.innerText = this.value;
    };

  • 相关阅读:
    Windows自动更新所需要连接的网站列表
    DFX 9.303 for QQMusic 2010
    在VPC 2007 SP1中安装Ubuntu 10.04 desktop (完成)
    穷人把钱存入银行,实际上是补贴富人。
    清理Windows右下角图标
    阿里镜像pull 加速器
    k8s 安装flannel网络插件
    k8s pull.sh
    kubeadm1.10.00 安装k8s集群
    虚拟机vmware centos7 扩展磁盘空间
  • 原文地址:https://www.cnblogs.com/klw1/p/11134768.html
Copyright © 2020-2023  润新知