javaScript
基本语法
书写位置
1.以脚本块的形式书写在页面中
2.以脚本文件的形式书写在脚本文件中,在页面进行引入
变量
用于声明后使用变量名进行指定数据的保存
js是一种弱类型的语言,在进行数据声明时无需指定数据类型,在运行期间会自动根据保存的数据进行类型转换
所以 js中声明变量语法统一为 var 变量名=值;
数据类型
js中提供5中数据类型进行全数据的类型声明
Number类型分为整型和实型
例如: 15 2.9 4E5
String类型
例如 “abc” “jack ” ‘单引号双引号相同’
Null类型只有一个值,即null。Null是一个位符,表示一个变量已经有值,但值为空
Boolean类型
布尔类型只取两个值true或false
Undefined
变量没有定义
typeof操作符
由于javascript是一种泛数据类型的语言,需要有一种方法来检测指定变量的数据类型,返回如下字符串:
“undefined”——如果这个值未定义
“boolean”——如果这个值是布尔值
“string”——字符串值
“number”——数值
“object”——对象或null
“function”——函数
运算符
流程控制语句
注释
html注释:
css注释:/* 注释内容 */
js注释://注释内容 /*注释内容*/
ctrl+/进 快捷注释
弹出框
属于dom对象提供的方法,在当前浏览器窗口进行弹窗,可以省略相应的对象
// 警告对话框
// 将警告内容书写在页面弹窗中进行展示
alert("弹窗");
//提示对话框
//将提示内容与一个可以输入数据的文本框显示在弹窗中,可以为文本框设置默认内容
// 在页面输入的内容返回就是字符串形式
var color = prompt("提示信息", "输入框中的默认信息");
alert(color);
// 确认对话框
//将提示内容进行提示,只提供确认 取消按钮 返回boolean类型数据
var result = confirm("确认要删除吗?");
alert(result)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* 设置body文本居中对齐 */
body {
text-align: center;
}
</style>
<script type="text/javascript">
// 通过提示框获取代表打印行数的字符串
var count = prompt("请输入打印行数", "5");
// 虽然js进行运算时会自动进行类型转换,但尽量进行手动转换后进行操作
var size = parseInt(count);
//外层循环控制行数
for (var i = 1; i <= size; i++) {
//内层循环控制列数
//i=n j=2n-1
for(var j=1;j<=2*i-1;j++){
document.write("*");
}
document.write("<br>");
}
</script>
</head>
<body>
</body>
</html>
BOM对象模型
浏览器对象模型,将当前浏览器当做一个对象,浏览器中各个元素当做对象,不同的元素提供相应的方法进行使用,与java不同的是,这些对象在打开浏览器的时候已经自动创建完毕,无需创建可以直接通过对象名.方法进行使用
浏览器对象模型是用于描述对象与对象之间层次关系的模型,该对象模型提供了独立于内容的、可以与浏览器窗口进行互动的对象结构
history:历史记录对象
用于保存当前页面所访问的全部页面信息,用于历史跳转
location:地址对象
用于保存当前页面url地址
document:文档对象
可以理解保存的是当前页面展示的所有文档,可以看出body标签
一般直接使用相应对象而省略window对象的书写,原因是因为,书写的代码在当前窗口运行
location对象
href 设置或返回完整的URL
reload() 重新加载当前文档
<script type="text/javascript">
//输出当前页面url地址
// alert(location.href);
//也可以通过对象直接赋值的形式修改当前窗口的url
//url被修改 页面也会进行修改
//刷新当前页面
// location.reload();
</script>
</head>
<body>
<!-- a标签的另一种使用方式 -->
<!-- 将a标签跳转页面的功能改为执行js代码 -->
<a href="javascript:location.reload();">刷新</a>
<a href="javascript:location.href='two.html';">two</a>
</body>
history对象
back() 加载history列表中的前一个URL
forward() 加载history列表中的下一个URL
go(int) 加载history列表中的某个具体页面
<!-- 使用a标签点击执行js代码 -->
<a href="javascript:history.back()">返回</a>
<a href="javascript:history.forward();">前进</a>
<!-- 根据指定跳转0代表当前可以根据输入数字进行多级历史跳转 -->
<a href="javascript:history.go(-2)">走你</a>
screen屏幕对象
用于获取当前客户端屏幕分辨率
<script>
var width = screen.availWidth; //返回显示屏幕的宽度(除 Windows 任务栏之外)
var height = screen.availHeight; //返回显示屏幕的高度
var showWidth = screen.width; //返回显示器屏幕的宽度。
var showHeight = screen.height; // 返回显示屏幕的高度。
document.write("width:" + width + "<br/>height:" +
height + "<br/>showWidth:" + showWidth + "<br/>showHeight:" + showHeight);
if (showWidth < 2024 || showHeight < 768) {
alert("为保证你的浏览器效果,\n请调整屏幕分辨率。");
}
</script>
window对象
<script>
//setInterval计时器 直接执行指定时间后重复执行
var i = 1;
// lambda表达式写法
//setInterval(() => { scrollTo(0, i++); }, 1);
//正常语法
// setInterval(function (){scrollTo(0, i++); }, 1);
// setTimeout定时器 指定时间后执行一次
var bbb= setTimeout(() => {alert("已经过了3秒了") }, 3000);
</script>
<style>
div {
height: 1200px;
width: 200px;
background-image: url(../img/cxk.gif);
background-image: url(../img/cxk2.gif);
}
</style>
</head>
<body>
<!-- url,打开样式,打开窗口样式设置 -->
<a href="javascript:window.open('one.html','_blank ','width=400,height=400,left=100,top=300')">打开</a>
<!-- 要关闭的浏览器窗口对象.close() -->
<a href="javascript:window.close()">关闭</a>
<a href=" javascript: var aaa = setInterval(() => { scrollTo(0, i += 100); }, 1000);">开始</a>
<a href="javascript:clearInterval(aaa)">停止</a>
<a href="javascript:clearTimeout(bbb)">停止定时器</a>
DOM对象模型
用于对页面中显示的其他标签对象进行操作
注意:在使用js进行文档对象操作时,要确保文档对象已存在
dom对象代表的标签属性可以直接通过对象名.属性进行赋值与获取
<body>
<input type="text"id="t1" value="asd">
<a href="javascript:alert(t2.value=t1.value)">赋值</a>
<br>
<input type="text" id="t2">
</body>
<script>
//document.bgColor="";//设置背景颜色
document.body;//获取body对象
document.title="标题";//设置页面标题
var t1=document.getElementById("t1");//获取指定id代表的标签对象
var t2=document.getElementById("t2");//获取指定id代表的标签对象
</script>
标签内容属性
innerHtml:两标签中间的内容
outerHtml:包括本身标签内的所有内容
innerText:两标签中间的内容,
outerText:包括本身标签内的所有内容
在进行获取时不会显示标签,只显示多个标签中的内容(只显示当前标签中的所有文本)
在进行赋值时会将传入的字符串直接显示在页面(如果字符串是标签形式也不会书写)
<script>
function inner() {
var f1=document.getElementById("f1");
alert(f1.innerHTML="<a href='#'>修改后的内容</a>");
}
function outer() {
var f1=document.getElementById("f1");
alert(f1.outerHTML="<a href='#'>修改后的内容</a>");
}
function innertext() {
var f1=document.getElementById("f1");
alert(f1.innerText="<a href='#'>修改后的内容</a>");
}
function outerrtext() {
var f1=document.getElementById("f1");
alert(f1.outerText="<a href='#'>修改后的内容</a>");
}
</script>
<body>
<a href="javascript:inner()">innerHtml</a>
<a href="javascript:outer()">outerHtml</a>
<a href="javascript:innertext()">innertext</a>
<a href="javascript:outerrtext()">outertext</a>
</body>
使用js进行css样式修改
使用style属性进行js对css样式的修改(注意有些样式名与css不同)
<style type="text/css">
div {
height: 200px;
width: 200px;
position: absolute;
}
.d1 {
background-color: aquamarine;
z-index: 1;
}
.d2 {
background-color: yellowgreen;
}
</style>
<script type="text/javascript">
function oneShow() {
//第一页对应div显示 第二页对应div隐藏
var i1 = document.getElementById("i1");
var i2 = document.getElementById("i2");
var a1=document.getElementById("a1");
var a2=document.getElementById("a2");
i1.style.display = "block";
i2.style.display = "none";
a1.style.backgroundColor="aquamarine";
a2.style.backgroundColor="white";
}
function twoShow() {
//第二页对应div显示 第一页对应div隐藏
var i1 = document.getElementById("i1");
var i2 = document.getElementById("i2");
var a1=document.getElementById("a1");
var a2=document.getElementById("a2");
i2.style.display = "block";
i1.style.display = "none";
a2.style.backgroundColor="yellowgreen";
a1.style.backgroundColor="white";
}
</script>
</head>
<body>
<!-- tab页切换 -->
<a href="javascript:oneShow()" id="a1">第一页</a>
<a href="javascript:twoShow()" id="a2">第二页</a>
<div class="d1" id="i1"></div>
<div class="d2" id="i2"></div>
</body>
使用js进行样式修改时会出现在js中书写大量的css属性与值,并且没有提示,所以一般我们不会在js中书写css相应的属性与值,一般,我们通过class属性进行样式的修改,在css中设置要相应的样式,通过js对class属性进行修改从而实现样式的修改
<style type="text/css">
div {
height: 200px;
width: 200px;
position: absolute;
}
.d1 {
background-color: aquamarine;
}
.d2 {
background-color: yellowgreen;
}
/* 将修改后的样式定义相应的class 在css中预先书写 */
/*div 的显示隐藏 */
.hidden {
display: none;
}
.zoom{
zoom: 2;
}
.border{
border-left: 2px solid black ;
border-top: 2px solid black ;
border-right: 2px solid black ;
}
</style>
<!-- 使用js进行样式修改正确的书写方式 -->
<script type="text/javascript">
function oneShow() {
//获取需要显示隐藏的元素对象
var i1 = document.getElementById("i1");
var i2 = document.getElementById("i2");
var a1 = document.getElementById("a1");
var a2 = document.getElementById("a2");
//使用class进行样式设置
i1.classList.remove("hidden");
i2.classList.add("hidden");
a1.classList.add("d1")
a2.classList.remove("d2")
a1.classList.add("zoom")
a2.classList.remove("zoom")
a1.classList.add("border")
a2.classList.remove("border")
}
function twoShow() {
//获取需要显示隐藏的元素对象
var i1 = document.getElementById("i1");
var i2 = document.getElementById("i2");
var a1 = document.getElementById("a1");
var a2 = document.getElementById("a2");
//使用class进行样式设置
i2.classList.remove("hidden");
i1.classList.add("hidden");
a2.classList.add("d2")
a1.classList.remove("d1")
a2.classList.add("zoom")
a1.classList.remove("zoom")
a2.classList.add("border")
a1.classList.remove("border")
}
</script>
</head>
<body>
<!-- tab页切换 -->
<a href="javascript:oneShow()" id="a1">第一页</a>
<a href="javascript:twoShow()" id="a2">第二页</a>
<div class="d1" id="i1"></div>
<div class="d2" id="i2"></div>
</body>