js编写
js代码
一般放在<script></script>中间
<script></script>
一般放在<head></head>之间
有时候考虑到页面加载的效果,也会直接放在<body></body>中某个dom元素之后
js操作
一般都要结合html元素,及css样式
一般可以为html元素定义一些属性,比如id,name,class等,便于在js中拿到
比如
getElementById("");给目标元素id属性
getElementsByName("");给目标元素name属性
内置对象
window
属性
document
location 当前窗口的url
parent 父窗体
self 当前窗体
top 浏览器的顶层窗体
方法
alert alert(message)
confirm confirm(message,function(){})
prompt prompt(message, inputDefault)
setInterval,clearInterval
setTimeout,clearTimeout
setInterval(expression, msec)
setInterval(function, msec, arg1, ..., argN)
setTimeout(expression, msec)
setTimeout(function, msec, arg1, ..., argN)
e.g.
var timerID = setTimeout("showtime()",1000)
clearTimeout(timeoutID)
open,close 打开,关闭窗体
document
属性
body
forms 表单
方法
write,writeln ->write("<div><span></span></div>");
createElement(Tag) ->createElement("div"),createElement("input"),
getElementById(ID)
通过id属性获得元素
getElementsByName(Name)
通过name属性获得元素
getElementsByTagName(tag)
通过标签名称获得元素
document.body.innerText //设置body>…/body>之间的文本
document.body.innerHTML //设置body>…/body>之间的HTML代码
document.body.appendChild(dom);//其他的dom元素比如div,span,table等都有这个方法
例如:
var div = document.createElement("div");
div.innerHTML="HAHAsdfasfsdfsdfasdfsdf";
document.body.appendChild(div);
js的语法
数据类型
string,number,boolean,
object
null
数组
Date
function
字符串
常量字符串
首尾使用引号-->可以使用单引号,双引号,
引号里面再使用引号,必须使用不同于外层的引号
建议:
在js中使用常量字符串,
最外面使用单引号,
字符串中的引号使用双引号,
双引号里面再使用引号,就是用单引号\'
var html = '<input type="button" value="检查用户名" οnclick="checkUsername(\'xiaoming\')"/>';
字符串拼接
使用+号,
多次换行拼接 +=
a += b --> a = a+b;
var str='123';
str = str + 'abc';//str=123abc
str += 'abc'; //str=123abcabc
常量字符串中 拼接js变量
在拼接处,先输入两个引号,在引号里面输入两个加号,在加号中间拼接变量
function tdHtml(id){
//var html ='<td><input type="checkbox" value="9" name="ids"></td>';
//在value="9"的处拼接一个id的js变量
var html ='<td><input type="checkbox" value="'+id+'" name="ids"></td>';
return html;
}
注意:两个加号中间,要么是 常量字符串,要么是变量(或者表达式),不能两者都有
var html ='<td><input type="checkbox" value="'+id+'" name="ids"></td>';
字符串后面 可以拼接 数字
拼接多行html代码的字符串
1.复制html的代码,粘贴到js代码中,调整缩进,对齐格式
2.复制一个 加在前面的字符串 变量 += ' (比如:ul_html += ')
3.使用快捷键 Alt + Shift + A 在行首划线, 然后ctrl + v 粘贴
4.使用快捷键 Alt + Shift + A 在行尾划线, 然后键盘输入 ';
5.修改字符串,可以使用jstl的标签,也可以在其中加入js变量
var ul_html = "";
ul_html += '<table class="gridtable"> ';
ul_html += ' <thead> ';
ul_html += ' <tr> ';
ul_html += ' <!-- 批量删除 2.表头增加全选/取消全选的 多选框,点击函数 --> ';
ul_html += ' <th><input type="checkbox" id="select_all" οnclick="select_all();"/></th> ';
ul_html += ' <th>id</th> ';
ul_html += ' <th>会员类型</th> ';
ul_html += ' <th>姓名</th> ';
ul_html += ' <th>性别</th> ';
ul_html += ' <th>年龄</th> ';
ul_html += ' <th>兴趣</th> ';
ul_html += ' <th>加入日期</th> ';
ul_html += ' <th>数据创建时间</th> ';
ul_html += ' <th>数据修改时间</th> ';
ul_html += ' <th>操作</th> ';
ul_html += ' </tr> ';
ul_html += ' </thead> ';
<c:forEach items="${members}" var="member" varStatus="stat" >
ul_html += ' ';
ul_html += ' <tr <c:if test="${stat.index%2==1}">bgColor="gray"</c:if>> ';
ul_html += ' <!-- 批量删除 2.每行增加一个 多选框 --> ';
ul_html += ' <td><input type="checkbox" name="ids" value="${member.id}"/></td> ';
ul_html += ' <td>${member.id}</td> ';
ul_html += ' <td> ';
ul_html += ' <c:if test="${member.memberType==1}">铜牌会员</c:if> ';
ul_html += ' <c:if test="${member.memberType==2}">银牌会员</c:if> ';
ul_html += ' <c:if test="${member.memberType==3}">金牌会员</c:if> ';
ul_html += ' </td> ';
ul_html += ' <td>${member.ename}</td> ';
ul_html += ' <td> ';
ul_html += ' <c:if test="${member.gender==1}">男</c:if> ';
ul_html += ' <c:if test="${member.gender==0}">女</c:if> ';
ul_html += ' </td> ';
ul_html += ' <td>${member.age}</td> ';
ul_html += ' <!-- id,member_type,ename,gender,age,hobby,enter_date,create_time,modify_time ';
ul_html += ' 类型,1-铜牌会员,2-银牌会员,3-金牌会员 ';
ul_html += ' 性别,1-男,0-女 ';
ul_html += ' 兴趣,1-java,2-.net,3-php,4-ruby,5-python ';
ul_html += ' --> ';
ul_html += ' <td> ';
ul_html += ' <c:if test="${fn:contains(member.hobby,'1')}">java,</c:if> ';
ul_html += ' <c:if test="${fn:contains(member.hobby,'2')}">.net,</c:if> ';
ul_html += ' <c:if test="${fn:contains(member.hobby,'3')}">php,</c:if> ';
ul_html += ' <c:if test="${fn:contains(member.hobby,'4')}">ruby,</c:if> ';
ul_html += ' <c:if test="${fn:contains(member.hobby,'5')}">python,</c:if> ';
ul_html += ' </td> ';
ul_html += ' <td><fmt:formatDate value="${ member.enterDate}" pattern="yyyy-MM-dd"/></td> ';
ul_html += ' <td><fmt:formatDate value="${ member.createTime}" pattern="yyyy-MM-dd HH:mm:ss"/></td> ';
ul_html += ' <td><fmt:formatDate value="${ member.modifyTime}" pattern="yyyy-MM-dd HH:mm:ss"/></td> ';
ul_html += ' <td> ';
ul_html += ' <a href="${ctx}/member/edit?id=${member.id}">修改</a> ';
ul_html += ' <a href="#" οnclick="btn_remove(${member.id});">删除</a> ';
ul_html += ' </td> ';
ul_html += ' </tr> ';
</c:forEach>
ul_html += '</table> ';
数字
+,-,*,/,%
parseInt
将数字字符串转换成整数
isNaN
判断是否是数字
除法:
var i;
i= 10/3;
console.log(i);//3.3333333333333335
i= parseInt(10/3);
console.log(i);//3
乘法:
浮点数问题
当有小数的时候,会出现浮点数的问题
var i ;
i = 33 * 12.22;
console.log(i);//403.26000000000005
i = 100 * 12.222;
console.log(i);//1222.2
i = 1100 * 12.222;
console.log(i);//13444.199999999999
数组
定义
[], new Array()
比如:
var arr = [];
var arr = new Array();
操作
长度
.length
增加一个元素
.push(ele)
比如:
var arr = [];
arr.push(1);
[key] = value;//可以把数组当做java里面的map
比如:
var arr = [];
arr[1] = 'a'; //key为数字
arr['1'] = 'a'; //key为字符串
拼接为字符串
.join(分隔符)
比如:
var arr = [1,2,3];
arr = arr.join(',');//arr = '1,2,3';
变量
定义
js中的变量,没有类型,都用var
变量可以指向 任意类型
var a =1; //将变量a 指向一个数字
a = '1'; //将变量a 指向一个字符串
a = []; //将变量a 指向一个数组
a = function log(){}; //将变量a 指向一个函数
js的变量也可以当做一个引用理解,引用只能指向对象,不能指向引用
var a ='123'; //变量a指向字符串123
var b = a; //变量b指向 (变量a指向的字符串) 123
a='abc'; //变量a指向字符串abc
console.log(b); //变量b仍然指向字符串123
window的变量(或者说是window的属性)
一般也指全局变量
只要不在函数内部定义的变量,都是window的变量
比如:
var a = 1; //a是window的变量
b = 2; //b是window的变量
console.log(a);
console.log(window.a);
console.log(window['a']);
console.log(window.b);
console.log(window['b']);
函数中的变量
临时变量
window的变量
function fun(){
var c = 3; //c是函数fun中的临时变量
d = 4; //当函数fun()运行之后,d成为是window的变量
}
console.log('函数fun()运行之前');
console.log('测试变量d');
try{
console.log(c); //此时c未定义
}catch(e){
console.log(e);
}
try{
console.log(d); //此时d未定义
}catch(e){
console.log(e);
}
try{
console.log(window.d); //此时d未定义
}catch(e){
console.log(e);
}
fun();//运行fun函数
console.log('函数fun()运行之后');
console.log('测试变量c');
try{
console.log(c); //此时c未定义
}catch(e){
console.log(e);
}
console.log('测试变量d');
console.log("d:"+d);
console.log("window.d:"+window.d);
console.log("window['d']:"+window['d']);
表达式
常量,变量, 或者 常量/变量 和运算符 组成的 代码片段
1, a+b, a+1, a && b, a || b, !a
条件表达式
当表达式作为判断条件,就称为条件表达式
一般用在if()中,或者三目运算符 条件表达式?表达式1 : 表达式2
如何判断条件表达式为true|false
(false,0,"",undefined,null都为假,其他都为真)
看表达式的值
表达式的值为boolean类型
1 > 0 ->true, 1==0 ->false
"0" === 0 ->false, "0"!==0 ->true
表达式的值为数字
值为非0 -> true
值为0 ->false
if(0){//数字0为假
console.log("数字0");
}
if(1){//非0数字为真
console.log("数字1");
}
表达式的值为字符串
值为非空字符串 ->true
值为空字符串 ->false
if(""){//空字符串为假
console.log("空字符串");
}
if("1"){//非空字符串为真
console.log("非空字符串");
}
表达式的值为对象
值不为undefinded,null -> true
值为undefinded,null -> false
if(undefined){//undefined为假
console.log("undefined");
}
if(null){//null为假
console.log("null");
}
if(new Object()){//非undefined/null的对象为真
console.log("对象");
}
if(new Date()){//非undefined/null的对象为真
console.log("日期");
}
if([]){//非undefined/null的对象为真
console.log("数组");
}
表达式的值为函数
if(function(){}){//函数为真
console.log("function(){}");
}
运算符
算术运算符
+ - * / %
比较运算符
>,<,>=,<=,==,!=,===,!==
==,!=是比较值
==,!=比较的时候
空字符串,0 都为假(这时候值是false)
undefined,null(这时候是没有值)
console.log(''==0);//true
console.log(''==false);//true
console.log(false==0);//true
console.log(undefined==null);//true
console.log(false==null);//false
===,!==是比较值和类型是否都相等
console.log(''===0);//false
console.log(null===undefined);//false
console.log(null!==undefined);//true
逻辑运算符
&& || !
&&
都为真,结果才为真
一个为假,结果就为假,并且不再进行后面的运算
||
一个为真,结果就为真,并且不再进行后面的运算
都为假,结果才为假
!
取反
三目运算符
条件表达式?表达式1 : 表达式2
var b = (a==undefined)? "a未定义":"a已经定义";
console.log(b);//a未定义
var a=1;
var c = (a==undefined)? "a未定义":"a已经定义";
console.log(c);//a已经定义
判断
if(条件表达式){
}
循环
for(var i=0;i<10;i++){
}
var arr = [1,2,3];
for(var i in arr){
var ele = arr[i];
}
函数
定义
js的函数 使用关键字function,不声明返回值类型, 也不声明 参数类型
function 函数名(参数名){
}
函数参数
js函数 定义了参数, 但是调用的时候, 可以不传入参数
比如:
//定义一个函数log,有一个参数id
function log(id){
console.log(id);
}
//调用时,可以不传入参数
log(); //控制台输出undefined
log(1);
自定义类型
js本身是弱类型,
js自有一些类型
但是js不能定义类型
定义
像java一样定义类型,是使用js的函数来定义类型
Stu = function(id,name){
this.id=id;
this.name=name;
this.getId = function(){
return this.id;
}
this.getName = function(){
return this.name;
}
}
对象: 使用new关键字
var stu = new Stu(1,'xiaoming');
console.log(stu.getId());
console.log(stu.getName());
js对象
{
属性名1 :属性值1,
属性名2 :属性值2,
//...
属性名n :属性值n
}
属性值可以是各种类型,字符串,数字,boolean类型,对象,函数
使用{}这种方式定义的对象,不需要显示的声明类型(new 类型()这种方式)
html页面的内容是顺序加载的,html的代码从上到下加载(或者说运行)
当使用js代码获得一个html的元素,这个元素必须在js的代码之前
比如:
------------------------------------------------------------------------
<script>
var div1 = document.getElementById("div");//div1是undefined
</script>
<div id="div"></div>
<script>
var div2 = document.getElementById("div");//div2是[<div id="div"></div>]的js的dom对象
</script>
html元素的属性,dom对象的属性
比如:
------------------------------------------------------------------------
<input type="text" style="display:none;min-width:50px" id="username" name="username" value="aa"/>
<script>
var input = document.getElementById('username');//input是一个dom对象
var input_id = input.id; //得到字符串'username'
var input_name = input.name; //得到字符串'username'
var input_value = input.value; //得到字符串'aa'
var input_display = input.style.display; //得到字符串'none'
var input_min_width = input.style.minWidth; //得到字符串'none'
</script>
html的onclick等属性中使用的this
<img src="" οnclick="this.src=''"/> 这里的this指的是<img>元素
事件
onclick,
点击事件
onblur,
输入框失去鼠标焦点
onfocus,
输入框获得鼠标焦点
onmouseover,
鼠标移动到元素的区域之内
onmouseout,
鼠标移出元素的区域之外
js代码
一般放在<script></script>中间
<script></script>
一般放在<head></head>之间
有时候考虑到页面加载的效果,也会直接放在<body></body>中某个dom元素之后
js操作
一般都要结合html元素,及css样式
一般可以为html元素定义一些属性,比如id,name,class等,便于在js中拿到
比如
getElementById("");给目标元素id属性
getElementsByName("");给目标元素name属性
内置对象
window
属性
document
location 当前窗口的url
parent 父窗体
self 当前窗体
top 浏览器的顶层窗体
方法
alert alert(message)
confirm confirm(message,function(){})
prompt prompt(message, inputDefault)
setInterval,clearInterval
setTimeout,clearTimeout
setInterval(expression, msec)
setInterval(function, msec, arg1, ..., argN)
setTimeout(expression, msec)
setTimeout(function, msec, arg1, ..., argN)
e.g.
var timerID = setTimeout("showtime()",1000)
clearTimeout(timeoutID)
open,close 打开,关闭窗体
document
属性
body
forms 表单
方法
write,writeln ->write("<div><span></span></div>");
createElement(Tag) ->createElement("div"),createElement("input"),
getElementById(ID)
通过id属性获得元素
getElementsByName(Name)
通过name属性获得元素
getElementsByTagName(tag)
通过标签名称获得元素
document.body.innerText //设置body>…/body>之间的文本
document.body.innerHTML //设置body>…/body>之间的HTML代码
document.body.appendChild(dom);//其他的dom元素比如div,span,table等都有这个方法
例如:
var div = document.createElement("div");
div.innerHTML="HAHAsdfasfsdfsdfasdfsdf";
document.body.appendChild(div);
js的语法
数据类型
string,number,boolean,
object
null
数组
Date
function
字符串
常量字符串
首尾使用引号-->可以使用单引号,双引号,
引号里面再使用引号,必须使用不同于外层的引号
建议:
在js中使用常量字符串,
最外面使用单引号,
字符串中的引号使用双引号,
双引号里面再使用引号,就是用单引号\'
var html = '<input type="button" value="检查用户名" οnclick="checkUsername(\'xiaoming\')"/>';
字符串拼接
使用+号,
多次换行拼接 +=
a += b --> a = a+b;
var str='123';
str = str + 'abc';//str=123abc
str += 'abc'; //str=123abcabc
常量字符串中 拼接js变量
在拼接处,先输入两个引号,在引号里面输入两个加号,在加号中间拼接变量
function tdHtml(id){
//var html ='<td><input type="checkbox" value="9" name="ids"></td>';
//在value="9"的处拼接一个id的js变量
var html ='<td><input type="checkbox" value="'+id+'" name="ids"></td>';
return html;
}
注意:两个加号中间,要么是 常量字符串,要么是变量(或者表达式),不能两者都有
var html ='<td><input type="checkbox" value="'+id+'" name="ids"></td>';
字符串后面 可以拼接 数字
拼接多行html代码的字符串
1.复制html的代码,粘贴到js代码中,调整缩进,对齐格式
2.复制一个 加在前面的字符串 变量 += ' (比如:ul_html += ')
3.使用快捷键 Alt + Shift + A 在行首划线, 然后ctrl + v 粘贴
4.使用快捷键 Alt + Shift + A 在行尾划线, 然后键盘输入 ';
5.修改字符串,可以使用jstl的标签,也可以在其中加入js变量
var ul_html = "";
ul_html += '<table class="gridtable"> ';
ul_html += ' <thead> ';
ul_html += ' <tr> ';
ul_html += ' <!-- 批量删除 2.表头增加全选/取消全选的 多选框,点击函数 --> ';
ul_html += ' <th><input type="checkbox" id="select_all" οnclick="select_all();"/></th> ';
ul_html += ' <th>id</th> ';
ul_html += ' <th>会员类型</th> ';
ul_html += ' <th>姓名</th> ';
ul_html += ' <th>性别</th> ';
ul_html += ' <th>年龄</th> ';
ul_html += ' <th>兴趣</th> ';
ul_html += ' <th>加入日期</th> ';
ul_html += ' <th>数据创建时间</th> ';
ul_html += ' <th>数据修改时间</th> ';
ul_html += ' <th>操作</th> ';
ul_html += ' </tr> ';
ul_html += ' </thead> ';
<c:forEach items="${members}" var="member" varStatus="stat" >
ul_html += ' ';
ul_html += ' <tr <c:if test="${stat.index%2==1}">bgColor="gray"</c:if>> ';
ul_html += ' <!-- 批量删除 2.每行增加一个 多选框 --> ';
ul_html += ' <td><input type="checkbox" name="ids" value="${member.id}"/></td> ';
ul_html += ' <td>${member.id}</td> ';
ul_html += ' <td> ';
ul_html += ' <c:if test="${member.memberType==1}">铜牌会员</c:if> ';
ul_html += ' <c:if test="${member.memberType==2}">银牌会员</c:if> ';
ul_html += ' <c:if test="${member.memberType==3}">金牌会员</c:if> ';
ul_html += ' </td> ';
ul_html += ' <td>${member.ename}</td> ';
ul_html += ' <td> ';
ul_html += ' <c:if test="${member.gender==1}">男</c:if> ';
ul_html += ' <c:if test="${member.gender==0}">女</c:if> ';
ul_html += ' </td> ';
ul_html += ' <td>${member.age}</td> ';
ul_html += ' <!-- id,member_type,ename,gender,age,hobby,enter_date,create_time,modify_time ';
ul_html += ' 类型,1-铜牌会员,2-银牌会员,3-金牌会员 ';
ul_html += ' 性别,1-男,0-女 ';
ul_html += ' 兴趣,1-java,2-.net,3-php,4-ruby,5-python ';
ul_html += ' --> ';
ul_html += ' <td> ';
ul_html += ' <c:if test="${fn:contains(member.hobby,'1')}">java,</c:if> ';
ul_html += ' <c:if test="${fn:contains(member.hobby,'2')}">.net,</c:if> ';
ul_html += ' <c:if test="${fn:contains(member.hobby,'3')}">php,</c:if> ';
ul_html += ' <c:if test="${fn:contains(member.hobby,'4')}">ruby,</c:if> ';
ul_html += ' <c:if test="${fn:contains(member.hobby,'5')}">python,</c:if> ';
ul_html += ' </td> ';
ul_html += ' <td><fmt:formatDate value="${ member.enterDate}" pattern="yyyy-MM-dd"/></td> ';
ul_html += ' <td><fmt:formatDate value="${ member.createTime}" pattern="yyyy-MM-dd HH:mm:ss"/></td> ';
ul_html += ' <td><fmt:formatDate value="${ member.modifyTime}" pattern="yyyy-MM-dd HH:mm:ss"/></td> ';
ul_html += ' <td> ';
ul_html += ' <a href="${ctx}/member/edit?id=${member.id}">修改</a> ';
ul_html += ' <a href="#" οnclick="btn_remove(${member.id});">删除</a> ';
ul_html += ' </td> ';
ul_html += ' </tr> ';
</c:forEach>
ul_html += '</table> ';
数字
+,-,*,/,%
parseInt
将数字字符串转换成整数
isNaN
判断是否是数字
除法:
var i;
i= 10/3;
console.log(i);//3.3333333333333335
i= parseInt(10/3);
console.log(i);//3
乘法:
浮点数问题
当有小数的时候,会出现浮点数的问题
var i ;
i = 33 * 12.22;
console.log(i);//403.26000000000005
i = 100 * 12.222;
console.log(i);//1222.2
i = 1100 * 12.222;
console.log(i);//13444.199999999999
数组
定义
[], new Array()
比如:
var arr = [];
var arr = new Array();
操作
长度
.length
增加一个元素
.push(ele)
比如:
var arr = [];
arr.push(1);
[key] = value;//可以把数组当做java里面的map
比如:
var arr = [];
arr[1] = 'a'; //key为数字
arr['1'] = 'a'; //key为字符串
拼接为字符串
.join(分隔符)
比如:
var arr = [1,2,3];
arr = arr.join(',');//arr = '1,2,3';
变量
定义
js中的变量,没有类型,都用var
变量可以指向 任意类型
var a =1; //将变量a 指向一个数字
a = '1'; //将变量a 指向一个字符串
a = []; //将变量a 指向一个数组
a = function log(){}; //将变量a 指向一个函数
js的变量也可以当做一个引用理解,引用只能指向对象,不能指向引用
var a ='123'; //变量a指向字符串123
var b = a; //变量b指向 (变量a指向的字符串) 123
a='abc'; //变量a指向字符串abc
console.log(b); //变量b仍然指向字符串123
window的变量(或者说是window的属性)
一般也指全局变量
只要不在函数内部定义的变量,都是window的变量
比如:
var a = 1; //a是window的变量
b = 2; //b是window的变量
console.log(a);
console.log(window.a);
console.log(window['a']);
console.log(window.b);
console.log(window['b']);
函数中的变量
临时变量
window的变量
function fun(){
var c = 3; //c是函数fun中的临时变量
d = 4; //当函数fun()运行之后,d成为是window的变量
}
console.log('函数fun()运行之前');
console.log('测试变量d');
try{
console.log(c); //此时c未定义
}catch(e){
console.log(e);
}
try{
console.log(d); //此时d未定义
}catch(e){
console.log(e);
}
try{
console.log(window.d); //此时d未定义
}catch(e){
console.log(e);
}
fun();//运行fun函数
console.log('函数fun()运行之后');
console.log('测试变量c');
try{
console.log(c); //此时c未定义
}catch(e){
console.log(e);
}
console.log('测试变量d');
console.log("d:"+d);
console.log("window.d:"+window.d);
console.log("window['d']:"+window['d']);
表达式
常量,变量, 或者 常量/变量 和运算符 组成的 代码片段
1, a+b, a+1, a && b, a || b, !a
条件表达式
当表达式作为判断条件,就称为条件表达式
一般用在if()中,或者三目运算符 条件表达式?表达式1 : 表达式2
如何判断条件表达式为true|false
(false,0,"",undefined,null都为假,其他都为真)
看表达式的值
表达式的值为boolean类型
1 > 0 ->true, 1==0 ->false
"0" === 0 ->false, "0"!==0 ->true
表达式的值为数字
值为非0 -> true
值为0 ->false
if(0){//数字0为假
console.log("数字0");
}
if(1){//非0数字为真
console.log("数字1");
}
表达式的值为字符串
值为非空字符串 ->true
值为空字符串 ->false
if(""){//空字符串为假
console.log("空字符串");
}
if("1"){//非空字符串为真
console.log("非空字符串");
}
表达式的值为对象
值不为undefinded,null -> true
值为undefinded,null -> false
if(undefined){//undefined为假
console.log("undefined");
}
if(null){//null为假
console.log("null");
}
if(new Object()){//非undefined/null的对象为真
console.log("对象");
}
if(new Date()){//非undefined/null的对象为真
console.log("日期");
}
if([]){//非undefined/null的对象为真
console.log("数组");
}
表达式的值为函数
if(function(){}){//函数为真
console.log("function(){}");
}
运算符
算术运算符
+ - * / %
比较运算符
>,<,>=,<=,==,!=,===,!==
==,!=是比较值
==,!=比较的时候
空字符串,0 都为假(这时候值是false)
undefined,null(这时候是没有值)
console.log(''==0);//true
console.log(''==false);//true
console.log(false==0);//true
console.log(undefined==null);//true
console.log(false==null);//false
===,!==是比较值和类型是否都相等
console.log(''===0);//false
console.log(null===undefined);//false
console.log(null!==undefined);//true
逻辑运算符
&& || !
&&
都为真,结果才为真
一个为假,结果就为假,并且不再进行后面的运算
||
一个为真,结果就为真,并且不再进行后面的运算
都为假,结果才为假
!
取反
三目运算符
条件表达式?表达式1 : 表达式2
var b = (a==undefined)? "a未定义":"a已经定义";
console.log(b);//a未定义
var a=1;
var c = (a==undefined)? "a未定义":"a已经定义";
console.log(c);//a已经定义
判断
if(条件表达式){
}
循环
for(var i=0;i<10;i++){
}
var arr = [1,2,3];
for(var i in arr){
var ele = arr[i];
}
函数
定义
js的函数 使用关键字function,不声明返回值类型, 也不声明 参数类型
function 函数名(参数名){
}
函数参数
js函数 定义了参数, 但是调用的时候, 可以不传入参数
比如:
//定义一个函数log,有一个参数id
function log(id){
console.log(id);
}
//调用时,可以不传入参数
log(); //控制台输出undefined
log(1);
自定义类型
js本身是弱类型,
js自有一些类型
但是js不能定义类型
定义
像java一样定义类型,是使用js的函数来定义类型
Stu = function(id,name){
this.id=id;
this.name=name;
this.getId = function(){
return this.id;
}
this.getName = function(){
return this.name;
}
}
对象: 使用new关键字
var stu = new Stu(1,'xiaoming');
console.log(stu.getId());
console.log(stu.getName());
js对象
{
属性名1 :属性值1,
属性名2 :属性值2,
//...
属性名n :属性值n
}
属性值可以是各种类型,字符串,数字,boolean类型,对象,函数
使用{}这种方式定义的对象,不需要显示的声明类型(new 类型()这种方式)
html页面的内容是顺序加载的,html的代码从上到下加载(或者说运行)
当使用js代码获得一个html的元素,这个元素必须在js的代码之前
比如:
------------------------------------------------------------------------
<script>
var div1 = document.getElementById("div");//div1是undefined
</script>
<div id="div"></div>
<script>
var div2 = document.getElementById("div");//div2是[<div id="div"></div>]的js的dom对象
</script>
html元素的属性,dom对象的属性
比如:
------------------------------------------------------------------------
<input type="text" style="display:none;min-width:50px" id="username" name="username" value="aa"/>
<script>
var input = document.getElementById('username');//input是一个dom对象
var input_id = input.id; //得到字符串'username'
var input_name = input.name; //得到字符串'username'
var input_value = input.value; //得到字符串'aa'
var input_display = input.style.display; //得到字符串'none'
var input_min_width = input.style.minWidth; //得到字符串'none'
</script>
html的onclick等属性中使用的this
<img src="" οnclick="this.src=''"/> 这里的this指的是<img>元素
事件
onclick,
点击事件
onblur,
输入框失去鼠标焦点
onfocus,
输入框获得鼠标焦点
onmouseover,
鼠标移动到元素的区域之内
onmouseout,
鼠标移出元素的区域之外