方式1:在head中书写 JS 代码
格式:HTML 中使用 <script> 编写JS代码 </script>
方式2:将JS代码封装进一个单独的文件,然后再 HTML 引入该文件
格式:A、创建一个外部的 JS 文件
B、<script src="JS文件路径"></script>
变量声明语法
Java: 数据类型 变量名 = 变量值;
JS: var 变量名 = 变量值;
JS中,一个变量的变量值可以赋值任意类型
数据类型
基本数据类型
数字类型 --- number (整型 浮点)
字符串 ---- 使用 "" /'' 包起来的内容
布尔类型 --- true false
null
| ---- undefined(未定义的)
变量没有赋值时的默认初始化值
引用类型
object
运算符
JS 特殊运算符:
== 与 ===
== 是忽略数据类型只比较值
=== 既比较数据类型又比较值
JS的流程控制 和 Java 基本一致
以后用到什么流程,直接按照Java语法使用即可
JS中布尔运算不如Java严格,比较灵活
undefined->false; unll->false ;boolean->boolean ; number(除0和Nan)->true;
String(除空字符串)->true; object->ture;
特殊值:
NaN ----- Not a Number
* JS声明方法:
* function 函数名(参数名,....){
* 函数实现
* }
* JS函数调用(正常):
* var 变量 = 函数名(参数);
*
* 非正常调用:
* var 变量 = 函数名(参数胡写);
* 结果:能调用的
* 但是,不建议,最好按照标准语法调用函数
在JS中,函数没有重载的概念,如果函数名重复,那么后面的函数后覆盖前面的
window 对象是浏览器内置的,我们要做的,直接获取该对象,然后调用方法,要是调用 window 对象的方法,那么 window可以不加
window.alert() ---- 弹出警告框
window.confirm("确定吗?");确定框会返回一个 boolean 值:
window.prompt("请您输入一个文本:");输入框可以读取客户录入的数据
var txt = window.prompt("请您输入一个文本:");
alert("您输入的数据是:" + txt);
* window对象内置的计时器实现
* 两种实现:
* A、往复计时器
* 1、语法:window.setInterval(参数1,参数2);
* 参数1:函数
* 参数2:时间间隔,单位是毫秒
* 3、清除计时器
* 计时器创建时,生成一个ID,window对象可以根据 id 清除这个计时器
* window.clearInteval("ID");
*
* B、一次性计时器 window.setTimeOut(函数名,时间) window.clearTimeOut(函数名,时间)
* (语法与往复计时器使用一样)
location 对象可以将一个按钮转换成一个超链接
function toAnother(){
//进行页面跳转
location.href = "../../index.html";
}
history.forward()/history.go(1)前进;history.back()/history.go(-1)后退
onload = "函数名()" 页面加载完成,会调用这个函数
window.parseInt()只会解析特殊字符前面的数字字符,特殊字符以及以后被舍弃,浮点型数据解析,规则和整型解析一样
window.eval("var num = 1;");//将字符串转换成JS代码,处理对象时,前后加半括号
window.encodeURI();编码,该方法不会对 ASCII 字母和数字进行编码,也不会对这些 ASCII 标点符号进行编码: - _ . ! ~ * ' ( )
window.decodeURI();解码
DOM对象:
var 标签对象 = document.getElementById("id");
document.getElementByTagName("") 标签名 返回数组;
document.getElementByClassName("") 类名 返回数组;
document.getElementByName("") 名字 返回数组;
数组定义:
var arr =new Array();
var arr=new Array(length);
var arr=new Array(元素);
var arr=[元素];
获取长度:数组名.length 获取元素:数组名[索引] 赋值:数组名[索引] =值 不存在数组越界
JS如何控制表单提交(固定格式):
* 1、form 标签中,使用属性 onsubmit = "return 函数()"
* 2、函数实现,返回一个 boolean 值
* 如果 true,那么就提交
* 否则,就不提交
使用正则表达式
* 1、怎么写正则表达式
* JS中 /^ 开始,以 $/ 结束,中间存储正则
* 2、怎么校验
* 数据.match(正则);
* 正则.test(数据);
案例
页面打开,隔3秒钟弹出一个广告,再隔3秒钟广告消失
<script>
window.onload = function(){
//一次性
var gg = document.getElementById("gg");
window.setTimeout(function(){
//设置显示
gg.style.display = "block";
//显示3秒后隐藏
window.setTimeout(function(){
gg.style.display = "none";
},3000);
},3000);
}
</script>
轮播
<script>
window.onload = function(){
//设置往复计时器,隔3秒钟调用一次函数
var count = 1;
window.setInterval(function(){
//获取轮播图 img 标签对象
var lunbo = document.getElementById("lunbo");
//设置轮播图的 src 属性
/*
* 设置图片的算法
*/
count++;
if(count == 4){
count = 1;
}
lunbo.src = "../../img/img/" + count + ".jpg";
},1000);
}
</script>