JS入门

1. 概述

什么是Java Script?
Java Script 是一门网络脚本语言, 为网页添加各种功能, 嵌入在HTML语言中 和Java 语言没有任何关系, 叫JavaScript 主要是为了蹭 java当年的热度;
历史
早期网页上如注册界面的名字 邮箱 电话 等注册信息格式的校验都是需要服务器端来完成的, 这造成了服务器端资源和网络资源的浪费, 美国的计算机服务公司网景公司为了解决类似问题,将网页的校验功能在客户端完成, 发明了LiveScript语言(只支持网景自己的浏览器) , 微软一看也模仿网景做了JScript语言(只支持IE浏览器), 这给用户和开发者造成了困扰, 用哪种语言开发 , 用户用哪种浏览器. 最后欧洲计算机制造商协会 制定了统一的规范 ECMAScript规范, 要求所有开发以此规范进行开发. 后来微软退出,
网景公司参照ECMAScript规范继续开发LiveScript语言, 当时java已经开始火热起来, 网景公司为了蹭热度, 把名字从LiveScript改为JavaScript.
所以JavaScript和Java完全是两回事, 虽然名字有点像.

用途是什么?

1. 嵌入到动态文本HTML页面( js语言必须嵌入在HTML中).
2. 对浏览器事件做出响应.
3. 读写HTML元素 (增删改HTML中元素) ,
4. 在数据提交到服务器之前做验证.
5. 检测访客的浏览信息.
6. 控制cookies, 包含 创建和修改.
7. ajax异步请求.

2. 主要组成

ECMAScript : js的基本语法和对象
DOM : 文档对象模型
BOM : 浏览器对象模型

2.1 ECMAScript

语法主要几点有点和一般语言不同,说明一下:
(1) 变量声明 统一用 var, 数据类型根据赋值的类型自动决定 ;
var a=1;
var b=“张三”;
var c=“true”;

(2) 有== 和 === ,
“" : 表示只比较值不比较数据类型,
"=” : 表示值和数据类型都进行比较;
举例: 如var a=1; var b=“1” ;
ab 结果为true
a=b 结果为false. 数据类型不同

(3) 正则
定义:
var telephone=“13511112323”;
var regex=/1[3-9][123]{6}/; 正则规则定义格式
方法:
regex.test(telephone); 测试电话号码是否匹配正则规则,匹配为true, 不匹配为false.

(4) 函数 (执行顺序与HTML标签一起从上到下执行)
普通函数:

匿名函数:
function(){函数体}

2.2 DOM

DOM: 文档对象模型, 使用系统默认的对象document ,可以精准的操作html中的标签内容, 如input标签,我们可以document.getElementByTagName(“input”)获取标签对象, 在对标签增删改属性 或者对标签体进行操作, 具体方法如下;

1. 获取标签对象的方法:
   document.getElementById(“id”)
   document.getElementByTagName(“标签名”)
   document.getElementByName(“name的属性名”)
   document.getElementByClass("")

2. 获取标签的属性内容, 如
   获取的标签对象.value; //获取对应标签的value值,对于文本框, 文本框输入的内容就是value的值,
   //像button这种标签, 标签上显示的内容也是value的值.
   获取的标签对象.getAttribute(“属性的键”)
   获取的标签对象.setAttribute(“键”,“值”)

3. 标签体的操作
   获取的标签对象.innerHTML=“

   海马

   ” ; //在对应的标签体中嵌入这段内容, 嵌入的html生效.

2.3 BOM对象

BOM: 浏览器对象模型, 把浏览器想象为一个对象, 对浏览器对象的弹窗和location(地址栏) 对象操作,
主要window和location对象常用, 具体方法如下:

1. window对象, 主要方法两大块: 弹出对话框方法 和定时器方法
   (1) 弹出框方法:
   alert() 一般不用了 ,因为只有确定按钮,
   confirm() 常用 , 因为弹框有确定和取消按钮,一般用于做删除前的提示使用.
   prompt() 弹框可以输入内容, 返回值为输入的内容;

(2) 定时器方法:
setTimeout(“匿名函数”,毫秒数) // 只执行一次定时
setInterval(“匿名函数”,毫秒数) // 反复执行
clearInterval(id); //基于id取消定时器, id为setInterval返回的id值;

2. location对象
   location.href=“http://www.abc.com”; // 设置url地址