1.语言基础
javascript代码必须放在script标签中
<script></script>
script标签可以放在html的任何地方,一般建议放在head标签里
如果有多段script代码,会按照从上到下,顺序执行
引用外部js文件
<html>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-1.11.3.min.js" ></script>
</html>
变量
声明变量,var可有可无
<script>
var x = 10;
document.write("变量x的值:"+x);
</script>
数据类型
数据类型是动态变化的,可以使用typeof来查看变量类型
类型转换
无论是Number,Boolean还是String都有一个toString方法,用于转换为字符串。
数字转字符串,toString(2),toString(8),toString(16),
parseInt()和parseFloat(),转换为数字
如果被转换的字符串,同时由数字和字符构成,那么parseInt会一直定位数字,直到出现非字符。
使用内置函数Boolean() 转换为Boolean值
当转换字符串时:
非空即为true
当转换数字时:
非0即为true
当转换对象时:
非null即为true
Number()和parseInt()一样,都可以用来进行数字的转换
区别在于,当转换的内容包含非数字的时候,Number() 会返回NaN(Not a Number)
parseInt() 要看情况,如果以数字开头,就会返回开头的合法数字部分,如果以非数字开头,则返回NaN
String()和toString()一样都会返回字符串,区别在于对null的处理
String()会返回字符串"null"
toString() 就会报错,无法执行
作用域
一个参数的作用域就在这个函数内部,超出函数就看不见该参数了
全局变量的作用域是整个script脚本
事件
鼠标点击事件
<script>
function showHello(){
alert("Hello JavaScript");
}
</script>
<button onclick="showHello()">点击一下</button>
运算符
+ 具备多态特征
当两边都是数字的时候 ,表现为算数运算符
当任意一边是字符串的时候,表现为字符串连接符
2.对象
数字
保留小数位
<script>
function p(s){
document.write(s);
document.write("<br>");
}
var a = new Number("123");
p("数字对象123通过toFixed(2) 保留两位小数:"+a.toFixed(2)); //保留两位小数点
var b = new Number("3.1415926");
p("PI 通过toFixed(3) 保留三位小数:"+b.toFixed(3));//保留三位小数点
</script>
返回科学计数法
<script>
function p(s){
document.write(s);
document.write("<br>");
}
var a = new Number("123");
p("数字对象123通过toExponential 返回计数法表达 "+a.toExponential ());
var b = new Number("3.1415926");
p("数字对象3.1415926通过toExponential 返回计数法表达 "+b.toExponential ());
</script>
字符串
var y = new String("Hello JavaScript");
s.length 返回字符串长度
s.charAt(0) 返回下标为0的字符
s.concat(y) 拼接字符串
s.indexof(“a”) 返回字符位置
s.lastindexof("a") 返回最后一个字符的位置
a.localeCompare(b) 0 表示相等 1 表示字母顺序靠后 -1 表示字母顺序靠前
x.substring (0,3) 截取字符串,左闭右开
x.replace("a","o") 替换字符串
x.replace(/a/g, "o"); 替换所有字符串
数组
日期
3.BOM
window
Navigator
提供浏览器相关的信息
Screen
屏幕相关信息
History
用于记录访问历史
<script>
function goBack()
{
history.back(); //默认上次 -1表示上次 -2表示上上次
}
</script>
<button onclick="goBack()">返回</button>
Location
刷新页面
<span>当前时间:</span>
<script>
function refresh(){
location.reload();
}
</script>
<br>
<button onclick="refresh()">刷新当前页面</button>
跳转页面
<script>
function jump(){
//方法1
//location="/";
//方法2
location.assign("/");
}
</script>
<button onclick="jump()">跳转到首页</button>
弹出框
<script>
function del(){
var d = confirm("是否要删除");
alert(typeof d + " " + d); //返回true or false
}
</script>
<br>
<button onclick="del()">删除</button>
<script>
function register(){
alert("注册成功");
}
</script>
<br>
<button onclick="register()">注册</button>
计时器
只执行一次
<script>
function printTime(){
var d = new Date();
var h= d.getHours();
var m= d.getMinutes();
var s= d.getSeconds();
document.getElementById("time").innerHTML= h+":"+m+":"+s;
}
function showTimeIn3Seconds(){
setTimeout(printTime,3000);
}
</script>
<div id="time"></div>
<button onclick="showTimeIn3Seconds()">点击后3秒钟后显示当前时间,并且只显示一次</button>
不停的重复
<p>每隔1秒钟,打印当前时间</p>
<div id="time"></div>
<script>
function printTime(){
var d = new Date();
var h= d.getHours();
var m= d.getMinutes();
var s= d.getSeconds();
document.getElementById("time").innerHTML= h+":"+m+":"+s;
}
var t = setInterval(printTime,1000);
</script>
终止重复
<p>每隔1秒钟,打印当前时间,当秒数是5的倍数时候终止</p>
<div id="time"></div>
<script>
var t = setInterval(printTime,1000);
function printTime(){
var d = new Date();
var h= d.getHours();
var m= d.getMinutes();
var s= d.getSeconds();
document.getElementById("time").innerHTML= h+":"+m+":"+s;
if(s%5==0)
clearInterval(t);
}
</script>