html相关知识点

javaScript:

js历史:(了解)

网景公司:

做浏览器: 网景导航者

给页面增加动态效果,提高用户体验度.

仿造java语言编写了一门新的语言 --- liveScript

liveScript语言只需要解释就可以执行,用来解释liveScript语言的解释器被称之为引擎.

将引擎内置到网景导航者中.

微软:

做系统: IE浏览器

ECMA:

js概述:

JavaScript一种直译式脚本语言，是一种动态类型、弱类型、基于原型的语言

js作用:

给页面添加动态效果,校验用户信息等.

js和html的整合:

方式1:内联式

直接通过 <script></script>标签实现,在标签体中编写js代码即可

方式2:外联式

1.编写外部的js文件 (*.js)

2.在页面引入.

通过 script标签的 src属性引入

注意事项:

加载顺序: 从上到下,从左到右

1.一个页面中可以有多个script标签

2.script标签可以放在任何位置,注意正确嵌套

3.script标签一旦引入了外部的js文件,那么标签体失效

js组成:

ECMAScript: 核心语法

变量声明:

var 变量名称 = 值;

注意: 在声明变量时,如果省去了var关键字,那么这个变量为全局变量

末尾的分号和var关键字都可以省去不写,但是 不建议.

数据类型:

原始类型: 5种

Number: 一切数字

String: 一切被引号引起来的字符串

Boolean: true false

Null: null

Undefined: undefined

引用类型:

运算符:

等性运算符

== != 判断数值

= ! 判断数值和类型

关系运算符

> < >= <=

逻辑运算符

&& || !

非空对象 非0数字 非空字符串 都为true 其他为false

三元运算符

3>2?是 : 不是

语句2:

if .. else{}

for(){}

while(){}

do.. while()

switch break continue

函数: 实现了执行功能的代码片段

方式1:普通函数

function 函数名称(){}

方式2:匿名函数

function(){}

可变参数:arguments数组

事件: 具体的一件事情

单击事件: onclick ​ 单击鼠标时触发

表单提交事件: onsubmit ​ 提交form表单时触发

页面加载成功事件: onload ​ 当页面加载完毕后触发

焦点事件:(掌握):

获取焦点 ​ onfocus

失去焦点 ​ onblur

常见事件:

表单事件(了解)

ondblclick 双击事件

onreset; 重置

onchange; 改变(熟练使用)

鼠标事件:(了解)

onmouseover 悬停

onmouseout 移出

onmousedown 按下

onmouseup 弹起

onmousemove 移动

键盘事件:(了解)

onkeydown 按下

onkeyup 弹起

onkeypress 按下并弹起

事件和事件源绑定(注册):

方式1: 绑定事件 通过标签的事件属性进行绑定

<xxx οnclick="函数名称()"></xxx>

方式2:派发事件

1.获取事件源

var obj = document.getElementById("id");

2.派发事件

obj.事件名称 = function(){}

BOM:浏览器对象模型 (操作和控制浏览器)

window:窗口对象

定时器:

周期执行定时器:

格式:

var interId = setInterval(函数名称,毫秒值); 每隔多少毫秒调用一次指定函数

var interId = setInterval("函数名称()",毫秒值); 每隔多少毫秒调用一次指定函数

清除定时器:

clearInterval(interId);

单次执行定时器:

DOM:文档对象模型(操作(文档)html页面中的所有标签)

案例1-乘法表:

需求分析:

使用javaScript实现乘法表

案例2-简单的表单校验

需求分析:

表单提交时,校验用户名和密码是否为空,如果用户名为空,则提示"用户名不可为空"且不允许表单提交,

如果密码为空,则提示"密码不可为空"且不允许表单提交,如果用户名和密码均不为空,则允许表单提交.

技术分析:

js事件: 表单提交事件 onsubmit

只有表单提交时才会触发.

步骤分析:

1.给表单绑定表单提交事件

  <!-- return : 通知表单是否提交 -->
  <form οnsubmit="return checkForm()">
    
  </form>

2.编写checkForm函数

  // 表单提交事件所调用的函数必须要有返回值,返回值的类型为 boolean
  function checkForm(){
      //a.获取用户名和密码的值
    
      //b.判断用户名和密码是否为空
    
      //c.返回结果
      return false;
  }

案例3-轮播图

需求分析:

页面加载成功后,每隔2秒切换一张图片.

技术分析:

js: 页面加载成功事件

定时器

步骤分析:

1.在页面中添加页面加载成功事件

  οnlοad=function(){
    // 设置周期执行定时器
    setInterval("changeImg()",2000);
  }
  function changeImg(){
    //a.获取标签对象
    var imgObj = document.getElementById("imgId");
    //b.更改src属性的值
    imgObj.src;  // 获取属性的值
    imgObj.src = 值; // 设置属性值
    
  }