了解
作用:产生交互
命名规范:(参考Java)
数据类型:只有一个 var 类型,是弱语言类型。
数据内容:数值型(整数型、浮点型)、字符串型(""\'')、布尔型(true\false)、null、underdi
类型转换:
运算符号:(参考java)注意整型除法
控制结构:(参考java)
条件表达式:在逻辑判断中,任何变量类型的空值代表false,非空代表true。
内部调用:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv='content-type' content="text/html; charset=utf-8">
<title>JS测试</title>
<style></style>
<script type="text/javascript" charset="utf-8">
alert("你好");
</script>
</head>
<body>
</body>
</html>
外部引用:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv='content-type' content="text/html; charset=utf-8">
<title>JS测试</title>
<style></style>
<script language="JavaScript" src="js.js"></script>
</head>
<body>
</body>
</html>
外部文件[ js.js ]:
alert("你好");
打印金子塔
<!DOCTYPE html>
<html>
<head>
<meta http-equiv='content-type' content="text/html; charset=utf-8">
<title>JS测试</title>
<style></style>
<script type="text/javascript" charset="utf-8">
document.write("<h2 align='center'>HA");
document.write("<h2 align='center'>▲");
for(var i=2;i<100;i++){
document.write("<hr align='center' width='"+i+"%'>");
}
</script>
</head>
<body>
</body>
</html>
运算与自动类型转换
<!DOCTYPE html>
<html>
<head>
<meta http-equiv='content-type' content="text/html; charset=utf-8">
<title>JS测试</title>
<style></style>
<script type="text/javascript" charset="utf-8">
var a="abc";
var b=123;
var c=false;
var d=true;
alert("abc+123="+(a+b));
alert("abc+false="+(a+c));
alert("abc+true="+(a+d));
alert("123+false="+(b+c));
alert("123+true="+(b+d));
alert("false+true="+(c+d));
</script>
</head>
<body>
</body>
</html>
类型转换
<!DOCTYPE html>
<html>
<head>
<meta http-equiv='content-type' content="text/html; charset=utf-8">
<title>JS测试</title>
<style></style>
<script type="text/javascript" charset="utf-8">
var n=1;
alert(typeof(n));
alert(n.toString());
var a='123';
alert(typeof(parseInt(a)));
alert(parseInt(a));
var b='123.5';
alert(parseInt(b));
alert(parseFloat(b));
var c='abc';
alert(parseInt(c));
// NaN(Not a Number,非数)
alert(isNaN(1));
</script>
</head>
<body>
</body>
</html>
函数
<!DOCTYPE html>
<html>
<head>
<meta http-equiv='content-type' content="text/html; charset=utf-8">
<title>JS测试</title>
<style>
input{
height: 40px;
width: 200px;
}
</style>
<script type="text/javascript" charset="utf-8">
function clicks(a)
{
alert("让你点,你就点,你的面子往哪搁"+a);
}
function click1()
{
alert(click2(1,1));
}
function click2(a,b)
{
return a+b;
}
</script>
</head>
<body>
<div align="center">
<input type="button" name="" id="" value="点我啊" onclick="clicks(666)"/>
<input type="button" name="" id="" value="别点我" onclick="click1()"/>
</div>
</body>
</html>
数组的处理
创建方式:2种
特性:js数组中元素可以越界、类型可以不
属性:length
方法:join()、reverse()、sort()
<!DOCTYPE html>
<html>
<head>
<meta http-equiv='content-type' content="text/html; charset=utf-8">
<title>JS测试</title>
<style></style>
<script type="text/javascript" charset="utf-8">
var a = new Array();
a[0]=1;
a[1]=1.2;
a[2]='ab';
a[3]=true;
console.log(a);
console.log(a.length);
var b = new Array("AA","BB","CC");
console.log(b);
console.log(b.length);
console.log(b.reverse());
console.log(b.join("abc"));
var c = new Array(5,4,8,4,1,9);
console.log(c);
console.log(c.sort());
</script>
</head>
<body></body>
</html>
字符串处理
属性:length、
方法:toUpperCase()、substring()、charAt()、split()
日期Date
创建方式: var day=new Date();
方法:
Math对象
属性:E、PI、
方法:random()、round()、
注:产生0-10的整数,Math.round(Math.random()*10);
BOM(浏览器对象模型)
DOM(文档对象模型)
图中红框部分属于BOM,绿框部分属于DOM
<!DOCTYPE html>
<html>
<head>
<meta http-equiv='content-type' content="text/html; charset=utf-8">
<title>JS测试</title>
<style>
</style>
<script type="text/javascript" charset="utf-8">
function reloads()
{
location.reload();
}
// window.alert("你好");
// var s = window.confirm("1");
// console.log(s);
// window.prompt("2");
// window.alert(window.status);
// function b()
// {
// window.open("reg.html");
// }
// function forwards()
// {
// history.forward();
// }
// function backs()
// {
// history.back();
// }
// function changelabel()
// {
// var mylabels = document.getElementById("mylabels");
// alert(mylabel.innerText);
// mylabels.innerText="456789";
// }
// function changelabels()
// {
// var mylabel = document.getElementsByName("mylabel");
// console.log(mylabel.innerText);
// mylabel[0].innerText="世界真好";
// mylabel[1].style.background="yellow";
// }
//***********************************************************
// window.setTimeout(alert("三秒之后"),3000);
// window.setInterval(alert("每秒一次"),1000);
// function a()
// {
// window.close();
// //https://blog.csdn.net/Liu_Jun_Tao/article/details/88537515
// }
// function d()
// {
// cleartimeout(di);
// }
// function test()
// {
// document.bgColor = "green";
// document.titel = "test"; ?????
// document.writeln("<div>添加</div>")????????
// }
//***********************************************************
</script>
</head>
<body>
<input type="button" name="" id="" value="页面重载" onclick="reloads()"/>
<!--<input type="button" name="" id="" value="关闭" onclick="a()"/>-->
<!--<input type="button" name="" id="" value="打开" onclick="b()"/>-->
<!--<input type="button" name="" id="" value="取消" onclick="d()"/>-->
<!--<input type="button" name="" id="" value="页面前进" onclick="forwards()"/>-->
<!--<input type="button" name="" id="" value="页面后退" onclick="backs()"/>-->
<!--<input type="button" name="" id="" value="页面更改" onclick="test()"/>-->
<!--<label id="mylabels">你好</label>-->
<!--<label name="mylabel">欢迎光临</label>-->
<!--<label name="mylabel">项目一部</label>-->
<!--<input type="button" name="" id="" value="标签更改" onclick="changelabel()"/>-->
<!--<input type="button" name="" id="" value="标签更改" onclick="changelabels()"/>-->
</body>
</html>