javaScript

JavaScript,简称JS，是Web开发中不可缺少的脚本语言的，不需要编译就可以运行（解释性语言）。它“寄生”在HTML体内，随网络传输到客户端在浏览器中运行。js代码可以写到html的任何地方。一般写在 body 结束标签的上方。

作用

  • 可以动态修改HTML和CSS代码（修改的是浏览器内存中的那一份代码）
  • 操作浏览器：浏览器的地址栏信息（获取和修改）、浏览器的历史记录信息（页面的前进和后退）、打开浏览器的新窗口等

组成

  • ECMAScript：基本语法规范
  • BOM：Browser Object Model 浏览器对象模型。可以理解是把浏览器封装成js对象，JS代码可以操作Bom对象的属性和方法，从而操作浏览器。
  • Dom：Document Object Model 文档对象模型，把html文档封装成Js对象。Js代码可以对象的属性和方法，从而操作HTML文档：操作HTML标签，操作属性，操作样式。

js的引入方式

  • 内部JS
  • 外部JS
  • src：Js文件的路径
  • type：引入文件的类型。固定值text/javascript

js代码在HTML页面内的任意位置都可生效，在不影响页面显示效果的情况下，js越晚加载越好。

ECMAScript基本语法

  • 变量定义：js是弱类型语言，js里所有变量定义都使用 var
  • 数据类型：分为原始数据类型 和引用数据类型
  • 原始数据类
  • 基本数据类型(4类八种)
  • null
  • undefined
  • 引用数据类型：js里有9个引用数据类型。js里定义一个对象：var obj=new Data();
  • 运算符
  • ==和===（==比较变量的值，只要值相同，结果是true，=== 比较变量的值和类型 值和类型一样返回true）
  • ||和 &&：js里做boolean类型运算的。没有| 和 &。
  • 加减乘除
  • 逻辑语句 if，if else,for,switch…
  • number：0是false，非0是true
  • string类型：”“是false,非”“是true
  • null类型：false
  • undefined类型：false
  • Object类型：对象存在是true，对象不存在时false

函数

  • 普通函数

关键字 function

function add(a,b){
    return a+b;
}
add(3,3);
  • 匿名函数
var fn=function(a,b){
 return a+b;
}
var result=fn(3,3);
  • 应用场景：将匿名函数作为另一个函数的参数

事件

先要明确是那个标签要发生事件，就给他添加事件的监听，发生了怎样的事件（常用事件），发生了事件后，应该怎么去处理（响应的行为）。


  • 事件相关的概念
  • 事件源：被监听的对象，一般只html标签
  • 事件：事件源上发生的动作：比如单击、双击
  • 响应行为：事件触发后，要执行的一些代码。这些代码通常是封装成函数来调用。
  • 常见的事件（监听事件源）
  • onclick 监听鼠标单击
  • ondblclick 鼠标双击
  • onload 监听加载事件，一般用于监听页面加载完成
  • onsubmit 监听表单提交事件，针对form标签
  • onchange 监听域内容改变事件，一般针对select下拉框的选项发送变化
  • onfocus 监听获取焦点事件
  • onblur 监听失去焦点事件
  • onkeydown 监听键盘按键被按下
  • onkeyup 监听键盘按键被弹起
  • onkeypress 监听键盘被按下或按住
  • onmousedown 监听鼠标按下
  • onmouseup 监听鼠标弹起
  • onmouseover 监听鼠标移入
  • onmouseout 监听鼠标移出
  • onmousemove 监听鼠标移动
  • 事件绑定（三种方式）






    var btn = document.getElementById(“btn3”);
    btn.onclick = function(){
    alert(“动态绑定事件”);
    }

BOM

BOM浏览器对象模型。有5个对象

  • window：浏览器窗口对象，是所有的bom对象的顶级对象
  • location：浏览器地址信息对象。可以用来获取当前网址，或者设置当前网址
  • history：历史记录信息对象。可以用来进行历史记录切换：前进、后退
  • navigator：浏览器信息对象（只读）。可以获取浏览器的内核、版本、操作系统信息
  • screen：浏览器屏幕显示信息对象。可以用来获取/设置浏览器大小，位置，颜色信息等

window对象

  1. 提供了弹窗方法
  1. 普通弹窗：alert（）
  2. 确认弹窗：confirm（）
  3. 输入弹窗：prompt（）
  1. 提供定时器
  1. 执行多长的定时器
  1. 设置定时器：[window].setInterval（函数对象，间隔的毫秒值）
  2. 清除定时器：clearInterval（）；
  1. 执行一次的定时器（延时器）
  1. 设置定时器：setTimeout（）；
  2. 清除定时器：clearTimeout();
  1. 提供一些全局函数
  1. parseInt():转化成整数
  2. parseFloat（）：转化成小数
  3. eval（）：把字符串转化成js代码

location对象

  1. 获取当前网址
  1. var url=location.href;
  1. 设置当期网址
  1. location.href=”XXX”;在当前窗口打开页面
  1. 在新窗口打开
  1. window.open(url);

history对象

  1. 前进一步:history.forward();
  2. 后退一步：history.back();
  3. 后退n步：history.go(-num);