JavaScript历史
原名LiveScript,美国网景公司开发，是一种脚本语言，在网页中使用，运行在浏览器，前段语言。
脚本语言：不需要编译的语言 sql python html css JavaScript 直接有某种解释器（引擎）解释执行，逐行从上到下解释执行。
JavaScript基本语法：
JavaScript代码写在名为：script标签里。
变量，数据类型
<script>
/*
java是强语言，声明变量：数据类型 值
JavaScript是弱语言,变量没有类型，赋值什么，就是什么类型。
使用var关键字声明
*/
/* var a;
a=10;//数值
alert(a);
a="abc";//字符串
alert(a);
var b=10;
b= true;//布尔值
alert(b); */
/*
数据类型
*/
//1.数值类型[number] 包含整数和浮点数
// typeof()返回（）中变量的数据类型。
var a=10;
var b=10.50;
//alert(typeof(b));
//2.布尔类型
var c=true;
//alert(a==b);
//3.字符串 ""和''都表示字符串.
var d="abcde";
//alert(typeof(d));
var e='abcde';
//alert(typeof(e));
//4.undefined 类型(声明了变量，却没赋值)
var g;
//alert(g==undefined);//弹窗提示true
//对象类型
var date = new Date();//创建一个date类型对象。
alert(date.getFullYear());//返回年份。
alert(date.getMonth()+1);//返回今天第几个月份（12月份为第一个月）。
alert(date.getDate());//返回今天本月第几天。
</script>运算符
算数运算符 + - * / % ++ --
<script>
//1.+ 加法运算 字符串连接功能。
var a="10";
var b=5;
var c=10;
var d="a";
//alert(a+b);//字符串连接
//alert(b+c);//加法运算
//2.- 减法运算
//alert(c-b);// 5 减法
//alert(a-b);// 5 "(数字)字符串"-数值=数值 会把表达式里的数字字符串尝试进行类型转换。
//alert(c-d);//NaN(not a number)无法计算。 如果字符串不能转换为数字，返回NaN。
//3.除去+运算，其他运算都有转换数字字符串为数值的功能。
//比较:
//alert(a==c);//只比较值是否相等
//alert(a===c);//全等，比较值和类型
/*
if(a>b){
alert(d);
}
for(i=0;i<5;i++){//for(int i;i<5;i++)【int】会报错。
alert(i);
}
*/
</script>定义函数
<script>
/*
定义函数：
*/
/* function test(){
alert("你好");
} */
//因为变量接受所有类型的数值，所以给参数类型没必要。
/* function test(a,b,c){
alert(a+":"+b+":"+c);
} */
/*
function test(a,b){
return a+b;
}
*/
//函数调用
//test();
//test(true,10,new Date());
/*
var b=5;
var c=test(10,b);
alert(c);
*/
var a=10.5;
var b="10.5a";
var c=5;
//系统中的全局函数 在系统中已经定义好的，可直接调用的函数。
//alert(输出内容); 弹框显示。
//parseInt(内容); 把括号中的内容转换成整数类型
//如果转换内容为字符串，字母不能开头，而且只将开头的数字部分转化。
/* alert(parseInt(a));//浮点数转为整数，
alert(parseInt(b)+c);//字符串数字转为整数。 */
//parseFloat(); 把括号中的内容转换成浮点数类型
//alert(parseFloat(b)); //作用原理同parseInt。
//typeof(内容) //获取括号中变量的数据类型。
//typeof(a);
//eval(传入字符串); //把传入的字符串可以当做js脚本执行。
var s = "alert(2+3*2)";
eval(s);
</script>事件：
onclick: 点击标签时事件触发
onblur: 标签失去鼠标焦点时触发
onfocus: 标签刚得到鼠标焦点时触发，触发一次
onmouseover: 鼠标移入到标签上时触发
onmouseout: 鼠标移出到标签时触发
onload: 网页内容加载完毕后触发
onchange: 当内容改变且失去鼠标焦点时触发
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script>
function test(){
console.log("事件被触发");
}
function test2(){
alert(a+b);
}
</script>
</head>
<body onload="test()">
<!--
onclick: 点击标签时事件触发
onblur: 标签失去鼠标焦点时触发
onfocus: 标签刚得到鼠标焦点时触发，触发一次
onmouseover: 鼠标移入到标签上时触发
onmouseout: 鼠标移出到标签时触发
onload: 网页加载完毕后触发
onchange: 当内容改变且失去鼠标焦点时触发
-->
<input type="button" value="单击" onclick="test()"/><br />
<!-- 点击按钮时事件触发 -->
<div onclick="test()">单击事件</div><br />
<!-- 点击标签时事件触发 -->
<input onblur="test()"/> <br /><br />
<input onfocus="test()"/>
<div style="background-color: red;" onmouseover="test()" onmouseout="test()">
aaa
</div>
<input onchange="test()"/>
</body>
</html>HTML_DOM对象
DOM 我们现在通过html标签事件触发JavaScript函数了，需要在JavaScript函数对网页的标签进行操作。 JavaScript认为网页中的每个标签都是一个对象，在js中把这一类标签对象称为html dom对象
如何在JavaScript中获取网页中的标签对象？ 在网页加载完毕后，在js中生成一个document对象（表示整个html文档，里面提供了一个方法getlementById();
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script>
/*
DOM
我们现在通过html标签事件触发JavaScript函数了
需要在JavaScript函数对网页的标签进行操作。
JavaScript认为网页中的每个标签都是一个对象，在js中把这一类标签对象称为html dom对象
如何在JavaScript中获取网页中的标签对象？
在网页加载完毕后，在js中生成一个document对象（表示整个html文档）
里面提供了一个方法getlementById();
*/
function test(){
var tobj1 = document.getElementById("txt1");//通过标签id获取网页中的标签对象
var tobj2 = document.getElementById("txt2");
tobj2.value =tobj1.value;
tobj1.value="";
}
</script>
</head>
<body>
<input type="text" id="txt1" value=""/>
<input type="text" id="txt2" value=""/>
<input type="button" onclick="test()" value="测试"/>
</body>
</html><!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script>
function test(){
var divobj1=document.getElementById("p1");
var divobj2=document.getElementById("box1");
//innerText 获取标签体中的文本内容
//innerHTML 获取标签体中的所有内容(包括子标题和文本)
//divobj2.innerText=divobj1.innerText;
divobj2.innerHTML=divobj1.innerHTML;
}
</script>
</head>
<body>
<p id="p1">qqqq</p>
<div id="box1">
<b>html dom对象</b>
</div>
<div>
<input type="button" onclick="test()" value="测试"/>
</div>
</body>
</html><!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script>
function test(){
var divobj =document.getElementById("box1");
//通过dom对象操作标签的css属性
divobj.style.backgroundColor='green';
divobj.style.width='200px';
divobj.style.height='200px';
}
</script>
</head>
<body>
<p>pppp</p>
<div id="box1">
<b>html dom对象</b>
</div>
<div>
<input type="button" onclick="test()" value="测试"/>
</div>
</body>
</html>
889
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
