javascript
javascript概述
J a v a S c r i p t 一 种 直 译 式 脚 本 语 言 ， 用 来 为 网 页 添 加 各 式 各 样 的 动 态 功 能
（j a v a S c r i p t 可 以 操 作 网 页 内 容 ） ， 不 需 要 编 译 可 直 接 通 过 浏 览 器 解 释 运
行 ， 通 常 J a v a S c r i p t 脚 本 是 通 过 嵌 入 在 H T M L 中 来 实 现 自 身 的 功 能 的 。
J a v a S c r i p t 是 一 种 基 于 对 象 和 事 件 驱 动 并 具 有 安 全 性 的 解 释 性 语 言 ， 其 目 的
就 是 增 强 We b 客 户 交 互 。 弥 补 了 H T M L 的 缺 陷 。
脚本写在哪里？
javaScript脚本写在一组<script>标签中，此标签可以放在head中或body中，一般习惯放在
head中，还可以将脚本写在外部的.js文件中，在html页面中导入外部的.js文件
<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title></title><!-- script：src标签里面只可以选取js文件，不可以在里面是脚本，没有作用 --><script src="js/index.js"></script><script>// js脚本写在这里面</script></head><body><!-- HTML是网页骨架css是网页样式js是网页行为--></body>
</html>
变量
● 1 、 数 值 型 ( n u m b e r ) ：
其 中 包 括 整 型 数 和 浮 点 型 数 。
● 2 、 布 尔 型 ( b o o l e a n ) ：
即 逻 辑 值 ， t r u e 或 f l a s e 。
● 3 、 字 符 串 型 ：
由 单 个 或 多 个 文 本 字 符 组 成 。 字 符 串 是 用 单 引 号 或 双 引 号 来 说 明 的 。
（ 使 用 单 引 号 来 输 入 包 含 引 号 的 字 符 串 。 ）
● 4 :
u n d e f i n e d 类 型
● 5 :
O bj e c t 类 型
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><!-- java强力型语言 数据类型 值 js弱类型语言 变量没有类型，你给他赋值是什么他就是什么，使用一个var声名。--><script>// var a;// a=10;// alert(a);// a="avbd";// alert(a);// js数据类型// 1.number 数值类型 包含整数和小数var a=10;var b=10.1;//alert(typeof(a));//返回a是什么数据类型 typeof返回变量数据类型//2.布尔类型//alert(1==1);//3.字符串 ""和''都可以表示字符串var c='a';var d="a";// alert(typeof(c));// alert(typeof(d));//4.undefined 声名了变量没有赋值 var e;// alert(typeof(e));// alert(e==undefined);//5.对象类型 与java中对象的声名类似var date=new Date;alert(date.getDate());</script></head><body></body>
</html>算数运算符
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><script>// 算数运算符//+ 字符串链接 算数运算var a="1";var b=2;var c=3;var d=1;//alert(a+b);字符串连接//alert(b+c);算数计算//-//alert(c-b);//1 减法//alert(a-b);//-1 会尝试对字符串类型进行转换//alert(b-"a");//NaN not a number//*//alert(a*b);//类比减法，字符串乘以数字先对字符串进行转换如果无法转成数字则返回NaNalert(a==d);//只比较数值alert(a===d);//数值和数据类型全比较</script></head><body></body>
</html>函数
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><script>/*定义函数*/ // function test(){// alert("你好");// }// //函数调用// test();// function test(a,b){//与java不同，js函数不需要写参数类型// alert(a+b);// return a+b;// }// test(1,"2");// alert(test(1,2));//有返回值直接加return//系统全局函数 系统定义好的 直接调用的 alert（）弹窗显示 typeof 返回数据类型 eval 把传入进来的字符串当作js脚本进行运行var a = 10.5;var b = "1";var c = 5;alert(parseInt(b)+parseInt(a));//把ab转为整数在进行计算var s="alert(0)";eval(s);</script></head><body></body>
</html>事件
常用事件
onclick 鼠标单机事件
onblur 失去焦点触发事件
onfocus 获得焦点触发事件
onmouseover 鼠标移入触发事件
onload 网页打开后自动执行操作一般写在body内
onchange 内容改变且失去焦点触发
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><script>function test(){alert();}function blur(){console.log("失去焦点");}function fouc(){console.log("获得焦点");}function move(){console.log("鼠标移入");}function out(){console.log("鼠标移除");}function load(){alert("网页加载完成");}function change(){alert("内容改变");}</script></head><body onload="load()"><!-- onclick 鼠标单机事件 --><!-- onblur 失去焦点触发事件onfocus 获得焦点触发事件onmouseover 鼠标移入触发事件onload 网页打开后自动执行操作一般写在body内onchange 内容改变且失去焦点触发--><input type="submit" onclick="test()"/><div style="background-color: black;" onclick="test()">鼠标单机事件</div><input type="text" name="" id="" onfocus="fouc()" onblur="blur()"><br /><input type="text" onfocus="fouc()" onblur="blur()"/><div style="width: 100px; height: 100px; background-color: plum;" onmouseover="move() " onmouseout="out()">移入</div><input type="text" onchange="change()"/></body>
</html>HTML DOM
● D O M 是 D o c u m e n t O bj e c t M o d e l 文 档 对 象 （ 网 页 中 的 标 签 ） 模 型 的
缩 写 .
● 通 过 h t m l d o m ， 可 用j a v a S c r i p t 操 作 h t m l 文 档 的 所 有 标 签 .
● 通 常 ， 通 过 J a v a S c r i p t ， 您 需 要 操 作 H T M L 标 签 。
● 为 了 做 到 这 件 事 情 ， 您 必 须 首 先 找 到 该 标 签 。
● 要 操 作 ， 先 得 到
● 有 四 种 方 法 来 做 这 件 事 ：
通 过 i d 找 到 H T M L 标 签
d o c u m e n t . g e t E l e m e n t B y I d ( “ i d " ) ;
通 过 标 签 名 找 到 H T M L 标 签
d o c u m e n t . g e t E l e m e n t s B y Ta g N a m e ( " p " ) ;
通 过 类 名 找 到 H T M L 标 签
d o c u m e n t . g e t E l e m e n t s B y C l a s s N a m e ( " p " ) ;
通 过 n a m e 找 到 H T M L 标 签
d o c u m e n t . g e t E l e m e n t s B y N a m e ( “ n a m e " ) ;
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><script>function test(){var text1=document.getElementById("p1");var text2=document.getElementById("p2");//标签属性值text1.value=text2.value;text2.value="";} </script></head><body><!-- 如何通过js对网页中的标签进行操作js认为网页中的每一个标签都是一个对象在js中我们把这一类标签称为html dom（文档对象模型）对象如何在js中获得网页中的标签对象？在网页加载完后js会生成一个document对象（表示整个html文档）里面提供了一个getElementByid（）；可以获得对应标签--><input type="text" id="p2" value=""/><br /><input type="text" id="p1" value=""/><br /><input type="button" value="测试" onclick="test()"/></body>
</html><!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><script>function test(){var text1=document.getElementById("p1");var text2=document.getElementById("p2");// innerTextH获得标签内文本内容，innerHTML获得标签内所有内容//标签体内的内容text2.innerHTML=text1.innerHTML;text2.style.backgroundColor='green';//点击改变背景颜色} </script></head><body><!-- 如何通过js对网页中的标签进行操作js认为网页中的每一个标签都是一个对象在js中我们把这一类标签称为html dom（文档对象模型）对象如何在js中获得网页中的标签对象？在网页加载完后js会生成一个document对象（表示整个html文档）里面提供了一个getElementByid（）；可以获得对应标签--><input type="button" value="测试" onclick="test()"/><div id="p1"><b>html dom</b></div><div id="p2"></div></body>
</html>