JavaScript个人学习笔记-仅供参考

简介

• 认知

  JavaScript就是一种轻量级的脚本语言

• 作用

  通过JavaScript可以进行事件处理、读写元素内容、设置动态、动画效果、表单数据校验、校验浏览器的信息等…

• 组成部分

  • ECMAScript

    js的基础语法，包含了基本的语句结构、变量、运算符、数组、事件、对象等

  • DOM文档对象模型

    它的存在让我们可以灵活的操作页面中的内容，操作文档中的标签及内容，就是所谓的增删改查

  • BOM浏览器对象模型

    操作浏览器对象

• 引入方式

  • 行间引入

    直接在标签的行间书写js代码(弊端：代码复用性差)

  • 内部引入

    在head标签内部或body内部的最下面或者body外部的下面，想要操作标签，必须得保证在js代码执行前，要有标签，所以建议内部引入js时，script标签写在body内部最下面或者body同级以下

  • 外部引入

    在head标签内部或body内部的最下面或者body外部的下面，不要在引入外界js文件的script标签内部再去写js代码了，如果想要书写新的js代码，要么重新创建一个js文件书写，要么使用内部引入在新的script标签中书写

基础语法

• 变量声明

  所有变量的声明在js中都是用var关键字，格式： var 变量名 = 变量值;

• 数据类型：

  在js中使用函数typeOf(变量名)查看对应数据类型

  • string字符串类型

  • number数值类型

  • boolean布尔类型

  • undefined未定义类型，一个变量没有给初值，那就是为定义类型

  • null空类型

    注：undefined与null在做判断时，返回值为true

  • function方法、函数类型

  • object引用数据类型(对象数据类型)

  • parseInt(变量/数据)获取变量或者数据的整数部分或将字符串类型转化为整数类型

• 程序组成部分

  • 运算符：

    • 赋值运算符=

    • 算术运算符+ - * / % ++ --

      注：在js中除法运算的结果该是多少就是多少，%只能是整数取余

    • 关系运算符> < >= <= == ===

      注：==比较的是值而===比较的是值与类型

    • 逻辑运算符&& || !

    • 三元运算符?:

  • 分支语句if-else，switch-case

  • 循环语句for、while、增强for-in

  • 数组

    • 声明：

    var arr = new Array();//空数组，容量为零
    var arr = new Array(5);//容量为5的数组，每个元素都是undefined
    var arr = [1,2,3,4,5];//具有初值的数组
    

    • 赋值与取值：通过下标、索引完成

    • 说明：js是数组都是动态数组，容量可变

    • 方法：push()末尾添加

    • 遍历：

      • 法一：

      for(var i = 0;i < arr.length;i++){ 
          console.log(arr[i]); 
      }
      

      • 法二：

      for(var i in arr){ 
          console.log(arr[i]); 
      }
      

  • 函数、方法

    • Java方法定义语法格式：

    访问修饰符 返回值类型 方法名(参数列表){
        方法体
    }
    

  • Javascript方法定义语法格式：

    function 方法体(参数列表){
        方法体
    }
  

  • 什么时候需要参数：需求中有不明确的值、数据就要声明参数

  • 什么时候需要返回结果：需求中需要得到一个运算结果，就需要设置返回结果

    • 无参无返
    • 无参有返
    • 有参无返
    • 有参有返

  • 事件

    • 分类
      • 鼠标事件：点击事件onclick、移入事件onmouseover、移出事件onmouseout
      • 键盘事件：按下事件onkeydown、抬起事件onkeyup
      • 表单事件：失焦事件onblur、获焦事件onfocus、值改变事件onchange
    • 语法格式：

    标签对象.事件名称 = function(){
        事件行为
    }
    

DOM操作

• 获取元素
  • getElementById(“id属性值”)：通过id名称获取标签，得到的是唯一一个，可以直接操作
  • getElementsByName(“name属性值”)：专门获取表单元素的name属性值，获取得到的是一个数组，因此必须通过下标取出单个标签，才能操作
  • getElementsByTagName(“标签名”)：获取指定的标签名的所有标签，得到的是一个数组，因此必须通过下标取出单个标签，才能操作
  • getElementsByClassName(“类属性值”)：通过class值获取标签，得到的是一个数组，因此必须通过下标取出单个标签，才能操作
• 修改元素
  • 第一类：修改、获取普通标签的内容、值
    • innerText只能处理纯文本
    • innerHTML可以解析HTML结构
  • 第二类：修改、获取表单元素的内容、值
    • value
  • 修改行间标签属性
    • 标签对象.行间属性名 = “值”;
    • 标签对象.setAttribute(“行间属性名” , ”行间属性值”);

BOM操作

• 作用：

  浏览器页面被加载、初始化时，会在内存中创建一个全局对象，来描述当前窗口的属性或者行为，这个对象称为浏览器对象模型

• BOM中最核心的对象window

  window代表浏览器的窗口，而这个窗口分为了6个大的子模块：

  • document 文档对象
  • frames HTML页面的框架对象
  • screen 屏幕对象
  • history 浏览器历史对象
  • location 窗口位置对象
  • navigator 导航对象，获取到浏览器的相关信息
  • 所有的浏览器都支持window对象，而我们在使用window子模块时，可以省略window的书写，程序中声明的全局变量就是窗口属性，程序中声明的方法就是窗口的行为

• window对象的定时器

  • 单次定时器：

    setTimeout(function(){},delay);
    

    • 参数解析：参数1function，代表绑定的方法；参数2delay，代表延时的时间(毫秒)

    • 作用：实现方法的延迟执行，而且只执行一次

  • 循环定时器：

    开启定时器

    var 定时器对象 = setInterval(function(){},time);
    

    关闭定时器

    clearInterval(定时器对象);
    

    • 参数解析：参数1function，代表绑定的方法；参数2time，指的是方法执行的间隔时间(毫秒)

    • 作用：可以让一个方法反复执行

• window对象的弹框

  • alert()：警告框
  • confirm(“提示文本”)：确认框，有返回值(boolean类型)，点击确定返回true，点击取消返回false
  • prompt(“提示输入的文本”, “默认输入的文本”)：提示输入框，有返回值，点击确定返回的是输入的内容，取消不做任何操作，一般情况下第二个参数不写或者为空字符串

• window.location对象

  • location.href当前页面的url
  • location.pathname当前页面路径文件名
  • location.hostname返回web主机的名称
  • location.port返回web主机的端口号
  • location.protocal返回web协议
  • window.location = “新路径”：跳转新页面

• window.history对象

  想要出现前进或后退的效果，必须存在路径的跳转

  • history.back回退页面
  • history.forword前进页面

• window.screen对象

  • screen.availWidth获取屏幕可用宽度
  • screen.availHeight获取屏幕可用高度(不包含最下面的任务栏的高度)

• body的可用宽度和高度(网页内容区域的宽高)

  • document.body.offsetWidth网页可见区域的宽度
  • document.body.offsetHeight网页可见区域的高度