JavaScript学习笔记
JavaScript是web开发中强大的脚本语言
- 无需编译，直接被浏览器解析并运行
- 不能单独运行，必须嵌入HTML代码中
- 由上到下依次执行
- 没有访问系统文件的权限，较安全
脚本语言：嵌入在其他语言中结合使用，无法独立执行，直接被浏览器解析执行
作用：控制页面特效展示
- 对HTML元素进行动态控制
- 对表单项进行校验
- 控制CSS样式
JavaScript的组成
- ECMAScript(核心)：规定了JS的语法和基本对象
- DOM 文档对象模型：处理网页内容的方法和接口(控制HTML元素)
- BOM 浏览器对象模型：与浏览器交互的方法和接口(浏览器状态属性)
一个测试
将在运行的网页弹出对话框，再到界面输出
<script type="text/javascript">
window.alert("Hello JS")
//prompt("input") 弹出输入框，默认为字符串类型，可传递给变量
//console.log("调试日志")
document.write("Hello JS
")
</script>
由上可知：JavaScript可以在html的任意位置编写（一般建议在head下），一般在其调用前编写，可以控制html的元素输出
一般开发中，会将js单独为文件，然后在html中做一个链接（一般会有多个js文件导入）
<script type="text/javascript" src="路径/文件名.js"></script>
变量
JavaScript的变量定义没有非常严格的语法要求，可使用var关键字定义变量（常用于定义全局变量，其他变量一般直接定义和赋值）
var a; //未声明类型
b = 5; //number整形
c = 5.2; //number浮点型
d = "abc"; //string
e = true; //boolean
f = null; //不含有值，undefined
g = []; //空数组
h = new Array(3)
i = [1,2,3]; //Array类型
j = { //对象object
first: 1,
last: 2
};
注：
NaN也是number类型，Date为object类型，未定义的函数为undefined
Undefined 与 null 的值相等，但类型不相等，即
typeof undefined // undefined
typeof null // object
null === undefined // false
null == undefined // true
变量类型转换
转换为字符串类型
num=1
alert(num.toString())
alert(String(num)) //强制转换
alert("String"+num) //字符串拼接，最常用（隐式转换）
转换为数字类型
str="10"
alert(parseInt(str))
alert(parseFloat(str))
alert(Number(str)) //强制转换
alert(str-0) //字符串做数值操作，隐式转换
注：“+”用于字符串拼接，“-”，“*”，“/”都可以字符串转为数字
布尔类型转换，使用Boolean()函数
除0，NaN，null，undefined会转为false，其余都为true
流程控制
JavaScript中的分支和循环语句与Java几乎无区别，不再赘述
函数
格式：
function 函数名(参数){
函数体
[返回值]
}
不需要考虑是否有返回值或其类型，如需返回直接写return即可
如
function add(x,y){
return x+y;
}
document.write(add(1,2));
arguments参数，里面存储了所有函数传入的参数
function fun(){
console.log(arguments) //输出参数,若有多个参数将以列表形式
}
fun("123")
fun(1,2,3)
参数不足会用undefined代替
事件处理
html事件是发生在html元素上的事情，可以是浏览器或用户的行为，如页面加载，按钮点击，输入字段等，在事件触发时可以执行JavaScript的代码
如页面打开事件：onload
页面关闭事件：onunload
可以在指定的html标签中添加事件
<body onload="loadFun()" onunload="unLoadFun()">
如果需要在一个事件中执行多个函数可用分号“ ; ”隔开
<body onload="loadFun();unLoadFun()">
然后在js文件中实现这两个函数
function loadFun(){
alert("Welcome")
}
function unLoadFun(){
alert("Goodbye")
}
就可以实现在页面打开或关闭时执行函数操作
给按钮绑定点击事件，获取当前时间
<button onclick="displayDate()">获取时间button>
<script>
function displayDate(){
document.getElementById("getTime").innerHTML=Date();
}
script>
<p id="getTime">p>
注：事件基本都以“ on ”开头
动态事件绑定
JavaScript开发中，使用动态事件绑定可以满足更多开发需要，也是目前最常用的事件绑定方法
需要标注组件id
<button id="bt">bottombutton>
点击按钮后弹出“click”窗口
function fun(){
alert("click")
}
window.onload=function (){
obj=document.getElementById("bt") //获取该id的对象
if(obj!=undefined){
obj.addEventListener("click",function (){
fun()
},false) //动态绑定
}
}
总结动态事件绑定的格式
window.onload=function (){
document.getElementById("组件ID").addEventListener("事件名称",function (){
绑定的函数操作
},false)
}
鼠标事件
- mousedown：点击后触发
- mouseup：点击松开后触发
- mouseout：移出目标时触发
- mouseover：移入目标时触发
- mousemove：在目标内移动会触发
可设置个图片测试
<img src="img/1.png" id="pic">
js中的代码，触发鼠标事件时弹出提示
window.onload=function (){
document.getElementById("pic").addEventListener("mousemove",function (){
alert("mouse")
},false)
}
表单操作
表单主要用于检查用户提交的信息如登陆
先写一个登陆界面和登陆成功的界面
form的action属性用于提交后跳转的页面，onsubmit属性用于是否拦截表单提交，选否可以直接拦截
<form id="loginFrom" action="test.html" onsubmit="return false" >
<div>
<span>账号：span>
<input type="text" id="account">
div>
<div>
<span>密码：span>
<input type="password" id="password">
div>
<button type="submit">提交button>
form>
效果如图
编写js代码，需要的是表单的id，设置其提交事件
window.onload=function (){
document.getElementById("loginFrom").addEventListener("submit",function (){
account=document.getElementById("account") //获取用户名和密码
password=document.getElementById("password")
if(account.value==""||password.value==""){ //判断是否为空
alert("未输入用户名或密码")
}else {
//alert(account.value+" "+password.value)
this.submit() //手动提交表单
}
},false)
}
由此可以完成一个简单表单验证，若用户名或密码未输入则不能跳转，输入完整即可跳转到登录成功页面