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);//类比减法，字符串乘以数字先对字符串进行转换如果无法转成数字则返回NaN
alert(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>
2697
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
