目标:
js的一些简单使用
大纲:
1、 js的数据类型,关系运算符,逻辑运算符2、 js的函数、对象
3、 数组
4、 事件
内容:
一、js的基本数据类型、关系运算符、逻辑运算符
定义类型时不管是什么类型都使用 var ,具体和const的区别不深入探究a)、基本数据类型:数字(number)、字符串(String)、布尔类型(boolean)、函数(function)
b)、关系运算符:比较特殊的
- 等于==:粗略比较值
- 全等于===:不仅比较值,类型也进行比较
var a1=12;
var a2='12';
alert(a1==a2)//返回true
alert(a1===a2)//返回false
c)、逻辑运算:单独的值可以为true或者假,0,null,undefined,空串为假
- &&运算:全部为真,返回最后一个值,存在假返回第一个假值
- ||运算:全部为假时,返回最后一个值,存在真返回第一个真值
var a = true;
var b = "abc";
var c = false;
var d = null;
alert(a&&b);//abc
alert(b&&a);
alert(a && c);//false
alert(d && c);//null
alert(a||b)//true
alert(c || d)//null
二、js的函数和对象
1、函数的定义
a)方式一:function 函数名(形参列表){ 内容}
b)方式二:var 函数名=function(形参列表){ 内容}
c)隐含参数:argument类似java的不定项参数
function fun1() {
alert("无参调用")
}
var fun4=function(a,b) {
return a+b;
}
/**
* 隐含参数的使用
*/
var fun5=function (a,b) {
var result=0;
for(var i=0;i<arguments.length;i++){
result+=arguments[i];
}
return result;
}
/**
*函数调用
*/
fun1();
alert(fun4(34,12));
alert(fun5(12,12,13,13))//返回50
2、对象的定义和使用
a)、方式一:
var 对象名=new Object();
对象名.属性=值;
对象名.函数名=function(){
}
b)方式二:
var 对象名={
属性:值
函数名:function(){
}
}
c)在对象内部可以使用this.属性名进行调用
var ob1={
name:'张三',
age:13,
f1:function (){
alert('姓名'+this.name+'\t年龄'+this.age);
}
};
alert(ob1.age);
ob1.f1();
/* var ob2=new Object();
ob2.name='张三';
ob2.age=13;
ob2.f1=function () {
alert('姓名'+this.name+'\t年龄'+this.age);
};
alert(ob2.name);
ob2.f1();*/
三、数组
a)数组格式:
var 数组名=[] 空数组
var 数组名=[1,true,'afs']
b)数组调用:
var arr = [1, 212, 2213];
for(var i=0;i<arr.length;i++){
alert(arr[i])
}
四、事件
a)事件:执行某些指定方法时需要执行的代码块
b)事件的注册方式
- 静态注册:通过标签进行动态绑定,如< button οnclick=“调用的函数名()”>
- 动态注册:在页面加载之后通过dom获取标签的id,然后进行注册
c)常用事件:
* onload:页面加载完成之后,用于做页面js代码的初始化操作
* onclick:按钮的点击事件
* onblur:常用用于输入框失去焦点后验证输入内容是否合法
* onchange:常用用于下拉列表和输入框内容发生改变后的操作
* onsubmit:用于表单提交前,验证所有表单项是否合法
d)
<button onclick="onclickFun()">按钮1</button>
<button id="bt1">按钮2</button>
<br>
姓名:<input type="text" onblur="onblurFun()"><br>
年龄:<input type="text" id="ipt1"><br>
function onclickFun() {
alert('这是静态按钮点击事件')
}
function onblurFun(){
console.log('失去焦点')
}
window.onload = function () {
// alert('这是动态事件的注册')
var bt1 = document.getElementById('bt1');
bt1.onclick = function () {
alert('这是动态点击事件')
}
var ipt1=document.getElementById('ipt1')
ipt1.onblur=function () {
console.log('动态失去焦点')
}