JavaScript
JavaScript与Java的关系类似于雷锋与雷峰塔的关系,没有什么关系。。。。。。
在html页面中写js代码的方式
- 直接写在script标签内
<script type="text/javascript">内容</script>
- 单独写一个js文件,在html中引入这个js文件,通过script的src属性引入
<script type="text/javascript" src="js文件相对路径">(空内容)</script>
变量
- 变量类型
- 数值类型:number
- 字符串类型:string
- 对象类型: object
- 布尔类型: boolean
- 函数类型: function
- 特殊的值的含义
- undefined----->未定义
- null---------->空值
- NAN----------->not a number 非数值
- 变量的定义格式
var 变量名;
几个函数
- alert();------>弹出一个警示弹窗
- typeof();----->返回参数的类型
特殊的关系(比较运算)
- 等于 : ==
- 全等于:===
等于是简单的字面值相等,全等于不仅字面值相等,数据类型也要相等
逻辑运算
js中,所有的变量都可以作为一个boolean类型使用
所以在进行逻辑运算时,只有0、null、undefined、""(空串)才是false
- 与&&运算
- 当表达式全为真时,返回最后一个表达式的值
- 当表达式的值为假时,返回第一个为假的表达式的值
- 或||运算
- 当表达式全为假时,返回最后一个表达式的值
- 只要有一个表达式为真,就会返回第一个为真的表达式的值
数组
- 数组定义
var 数组名 = [];
var 数组名 = [1,"abc"];
js中,只要通过数组下标赋值(只是赋值会,读不会),最大的下标就会给数组扩容,不存在越界
函数
-
通过function定义
function 函数名(形参列表){函数体};
形参不需要类型,之直接写变量名---function fun(a,b){} -
第二种定义
var 函数名 = function(形参列表) -
js中函数不支持重载,否则会覆盖之前的函数
js函数的参数列表,实际上是一个arguments数组,参数都传进了这个数组里面,我们称arguments为隐形参数,可以通过arguments来操作这个参数数组,例如arguments[1],arguments.length
对象
- 创建方式
-
var 对象名 = new object();
对象名.属性名=赋值;
对象名.函数名=function(){} -
var 对象名={
属性名:赋值,
函数名:function(){}
}
js事件
- 常用的事件
-
onload 加载完成事件
页面加载完成后,常用于做页面js代码初始化 -
onclick单击事件
常用于按钮的点击响应操作 -
onblur失去焦点事件
常用于输入框失去焦点后验证其输入内容是否合法 -
onchange内容发生改变事件
常用于下拉列表和输入框内容发生改变后操作 -
onsubmit表单提交事件
常用于表单提交前,验证所有表单项是否合法
- 事件注册
事件使用前需要先注册绑定
-
静态注册
通过html标签的事件属性直接赋予事件响应后的代码 -
动态注册
先通过js代码得到标签的dom对象,再通过dom对象.事件名=function(){}赋予事件响应后的代码
固定写法:window.onload = function(){ 事件响应代码 }
window.onload表示页面加载完毕后执行的代码
dom对象
document是js提供的一个对象,表示整个html页面文档
document.getElementById("id名")可以获取到某个控件的id
<script>
window.onload=function(){
var objName = documents.getEm=lementById("btn");
objName.onclick=function(){
alert("onclick事件动态注册成功!!!");
}
}
</script>
<body>
<button id="btn">按钮</button>
</body>
-
onload事件
加载页面是就会触发的事件。(测试发现,写在body中的alert弹窗相比于其他script标签中的alert,总是最后一个弹出执行)
<body onload="alert('原来要写到body属性里面!!!')">
-
onclick事件
- 静态注册
<button onclick="函数名"></button>
- 动态注册与上面例子一样
- onblur事件
- 静态注册
<script>
function fun1(){
console.log("onblur静态注册");
}
</script>
<input onblur="fun1" />
console.log()可以实现在网页控制台打印信息
-
onchange事件
与其他事件类似 -
onsubmit事件
- 静态注册
<script>
function fun(){
alert("表单错误!");
return false; //这里return false,阻止错误表单的提交
}
</script>
<body>
<form action="http://www.baidu.com" method="get" onsubmit="return fun()"> //一定要return 才能阻止成功,函数返回的是false
<input type="submit" value="静态注册"/>
</form>
</body>
- 动态注册类似