首页 > 代码库 > JavaScript 知识点01

JavaScript 知识点01

2024-10-20 20:58:39   212人阅读

JS基础

  • 页面由三部分组成：
    • html：超文本标记语言，负责页面结构
    • css：层叠样式表，负责页面样式
    • js：轻量级的脚本语言，负责页面的动效和数据交互
      小总结：结构，样式和行为，三者相分离
    • 在html页面中写结构
    • 通过 link标签的href属性，引入css样式
    • 通过script标签的src属性，引入js脚本
  • css引入页面的方式有三种
    • 行内<div style="width:200px;height:300px;"></div>
    • 内嵌:在header里面写一个<style>选择器{key:value}</style>
    • 外链：在header里面写一个<link rel="stylesheet" href="http://www.mamicode.com/css/index.css"/>
  • JS引入页面的方式，同CSS相似

    • 内嵌：在开发过程中，建议把script放在body底部；如果非要把script标签对，放在head里面的话；需要加window.onload

      window.onload=function(){
document.body.innerHTML=‘XXXXXX‘;
}
    • 行内：<div onclick="xxxx" onm ouseover="xxxx"></div>
    • 外链：<script src="http://www.mamicode.com/01.js"></script>
      注意：如果script作为JS的外链，一定不要在两个script标签中写代码，写了也没用
  • 属性和方法的区别：属性没括号，方法有括号
  • 字符串和变量的区别：字符串有引号，变量没引号
    • 字符串一般用单引号；为了元素身跟上的属性值区分开来；属性值一般是""
    • 变量，就是别名；var str； 告诉浏览器，定义了str这么一个变量
    • 如果没有定义变量，xxx is not defined
  • JS常见的输出方式7种
    • alert(‘‘) ;
    • confirm(‘确定要删除？‘); 他有两个返回值：true 真， false假
    • console.log(‘‘); 可以在控制台打印出我们想要打印的内容
    • console.dir(); 打印出对象身上的属性和方法
    • document.write()
      如果遇到window.onload会清空页面
    • 元素.innerHTML=xxxx
    • console.table();可以把数组和对象，以表格的形式打印出来
      ```
      var ary2=[
      {
      name:‘a‘,
      age:1,
      sex:‘gril‘
      },
      {
      name:‘王b‘,
      age:2,
      sex:‘boy‘
      }];
      console.table(ary2);
    ```
  • chrome控制台
    • Elements:用来调试html+css的
    • console:用来调试JS的
    • sources:可以拿到该网站相关的资源：images ,html ,css, js

体验JS编程思想

    • 需求：鼠标移入div1的时候，div2显示；鼠标移出div1的时候，div2隐藏
    • 实现思路：
      1. 高度：div2的高度为0； 移入div1后高度为100;移出div1时div2高度0；
      2. display:block显示，none，隐藏；
      3. 透明度：rgba(); opacity();
      4. 定位：left和top;
      5. margin:margin-left和 margin-top;
      6. overflow:hidden和visible;
    • JS获取元素的方式：
      • document.getElementById(‘id名字‘)；
        因为id是唯一的，所有拿到的是一个元素
      • document.getElementsByTagName(‘标签名‘);
        标签名拿到的是一个元素集合；即使只有一个元素，也是个集合
        想要取到其中的一个：aDiv[0] aDiv[2]
    • JS中的数据类型
      • 基本数据类型：
        1. 字符串string
        2. 数字 number
        3. 布尔值 boolean
        4. undefined 现在没有，以后也没有
        5. null 空对象，现在没有，以后会有
      • 引用数据类型
        1. 对象数据类型
          • 数组
          • 正则
          • 对象{}
        2. 函数数据类型
          function 函数名(){};
    • 数据类型检测的方式
      1. typeof 可以检测基本数据类型（所有经过typeof的都是字符串），但是对于对象数据类型，检测出来的都是object，无法知道具体属于哪种对象
      2. 对象 instanceof 类； 比如ary instanceof Array 判断这个实例是否属于某个类
      3. 对象.constructor: 比如ary.constructor可以打印出对象所属的类
      4. Object.prototype.toString.call(ary); 出来的结果 ‘[object Array]‘
    • 基本数据类型和引用数据类型的区别：
      • 基本数据类型：是对值的操作
      • 引用数据类型：是对地址的操作
    • 操作属性用的是"." oDiv.style.display=‘block‘
    • 其他数据类型转为number数据类型
      • 强制转换
      • Number()
      • parseInt()
      • parseFloat()
      • 一个严格转换
      • Number()
      • 两个非严格转化
      • parseInt() 只能转化为整数
      • parseFloat() 可以保留小数
      如果转换失败的话，返回的结果是NaN:not a number 不是数字；但是NaN是number数据类型
    • 关于NaN：
      • NaN是number数据类型
      • isNaN() 判断是否为非有效数字； 非有效数字：true; 有效数字：false

JavaScript 知识点01


联系
我们