工具版本兼容问题
所谓的常用场景指的是工作中会经常用到的javascript结合HTML DOM运用。
示例
1
:
示例
2
:
示例
3
:
示例
4
:
示例
5
:
示例
6
:
示例
7
:
示例
8
:
示例
9
:
示例
10
:
示例
11
:
示例
12
:
示例
13
:
示例
14
:
");
window.frames["iframe_show1199"].document.write(decodeHtml($("textarea#stepcodeTextarea1199").val()));
window.frames["iframe_show1199"].document.close();
$(window.frames["iframe_show1199"]).load(function(){
$("#iframe_show1199").height($("#iframe_show1199").contents().find("body").height()+showittryitheight);
});
$("#iframe_show1199").height($("#iframe_show1199").contents().find("body").height()+showittryitheight);
setTimeout(function(){
},500);
});
代码比较
复制代码
<script>
function deleteRow(link){
var b = confirm("确定删除？")
if(!b)
return;
var table = document.getElementById("heroTable");
var td = link.parentNode;
var tr = td.parentNode;
var index=tr.rowIndex;
table.deleteRow(index);
}
</script>
<table width="100%" border = "1" cellspacing="0" id="heroTable">
<tr >
<td width="50%">英雄名称</td>
<td>
操作
</td>
</tr>
<tr >
<td>盖伦</td>
<td>
<a href="#" onclick="deleteRow(this)">删除</a>
</td>
</tr>
<tr >
<td>提莫</td>
<td>
<a href="#" onclick="deleteRow(this)">删除</a>
</td>
</tr>
<tr >
<td>祈求者</td>
<td>
<a href="#" onclick="deleteRow(this)">删除</a>
</td>
</tr>
</table>
<script>
function deleteRow(link){
var b = confirm("确定删除？")
if(!b)
return;
var table = document.getElementById("heroTable");
var td = link.parentNode;
var tr = td.parentNode;
var index=tr.rowIndex;
table.deleteRow(index);
}
</script>
<table width="100%" border = "1" cellspacing="0" id="heroTable">
<tr >
<td width="50%">英雄名称</td>
<td>
操作
</td>
</tr>
<tr >
<td>盖伦</td>
<td>
<a href="#" onclick="deleteRow(this)">删除</a>
</td>
</tr>
<tr >
<td>提莫</td>
<td>
<a href="#" onclick="deleteRow(this)">删除</a>
</td>
</tr>
<tr >
<td>祈求者</td>
<td>
<a href="#" onclick="deleteRow(this)">删除</a>
</td>
</tr>
</table>
");
window.frames["iframe1199"].document.write(decodeHtml(code1199));
window.frames["iframe1199"].document.close();
//load和下面的非load必需并存，因为如果代码用到了jquery就必须使用load的方式
$(window.frames["iframe1199"]).load(function(){
$("#iframe1199").height($("#iframe1199").contents().find("body").height()+showittryitheight);
});
$("#iframe1199").height($("#iframe1199").contents().find("body").height()+showittryitheight);
alreadyWriteCode1199 = code1199;
$("#rendering1199").hide();
$("#rendered1199").show();
}
var tRereshRetry2DemoPanel1199 = setInterval(rereshRetry2DemoPanel1199,1000);
var binded1199 = false;
$("textarea#stepcodeTextarea1199").keyup(function(){
if(!binded1199){
$(window).bind('beforeunload',function(){
binded1199 = true;
return "xxxx";
});
}
var newCode = $(this).val()
code1199 = newCode;
/*below code is replaced by function rereshRetry2DemoPanel()*/
// if(code1199!=newCode){
// window.frames["iframe1199"].document.write("
");
// window.frames["iframe1199"].document.write(decodeHtml($("textarea#stepcodeTextarea1199").val()));
// window.frames["iframe1199"].document.close();
// $(window.frames["iframe1199"]).load(function(){
// $("#iframe1199").height($("#iframe1199").contents().find("body").height()+showittryitheight);
// });
// code1199 = newCode;
// }
});
$(".tryButton1199").click(function(){
$("#tryDiv1199").show();
$("#stepcodeTextarea1199").focus();
$("#stepcodeTextarea1199").height(200);
$("#iframe1199").height(0);
window.frames["iframe1199"].document.write("
");
window.frames["iframe1199"].document.write(decodeHtml($("textarea#stepcodeTextarea1199").val()));
window.frames["iframe1199"].document.close();
//load和下面的非load必需并存，因为如果代码用到了jquery就必须使用load的方式
$(window.frames["iframe1199"]).load(function(){
$("#iframe1199").height($("#iframe1199").contents().find("body").height()+showittryitheight);
});
$("#iframe1199").height($("#iframe1199").contents().find("body").height()+showittryitheight);
this.scrollIntoView(true);
editor1199.focus();
editor1199.setSize(null, "250");
$("#rendering1199").hide();
$("#rendered1199").hide();
});
var mixedMode = {
name: "htmlmixed",
scriptTypes: [{matches: /\/x-handlebars-template|\/x-mustache/i,
mode: null},
{matches: /(text|application)\/(x-)?vb(a|script)/i,
mode: "vbscript"}]
};
var editor1199 = CodeMirror.fromTextArea(document.getElementById("stepcodeTextarea1199"), {
lineNumbers: true,
styleActiveLine: true,
matchBrackets: true,
mode:"text/html",
theme:"eclipse",
selectionPointer: true,
lineWrapping: true,
extraKeys: {
"Alt-/": "autocomplete",
"Ctrl-F": "findPersistent",
"F8": function(cm) {
cm.setOption("fullScreen", !cm.getOption("fullScreen"));
},
"Esc": function(cm) {
if (cm.getOption("fullScreen")) cm.setOption("fullScreen", false);
}
}
});
editor1199.on("change",function(doc){
if(!binded1199){
$(window).bind('beforeunload',function(){
binded1199 = true;
return "xxxx";
});
}
var newCode = doc.getValue();
code1199 = newCode;
$("textarea#stepcodeTextarea1199").val(newCode);
if(alreadyWriteCode1199!=code1199){
lastModifedTime1199 = new Date().getTime();
$("#rendering1199").show();
$("#rendered1199").hide();
}
// alert(doc.getValue());
});
$(".CodeMirror").addClass("form-control");
// var editor1199 = CodeMirror.fromTextArea(, {
// lineNumbers: true,
// styleActiveLine: true,
// matchBrackets: true,
// theme:"eclipse",
// });
editor1199.on("change",function(doc){
// alert(doc.getValue());
});
$("#tryDiv1199").hide();
});
$("div.codemirrorTips span").addClass("glyphicon glyphicon-asterisk");
试一下
1. 双击选中单词
2. 三击选中整行
3. CTRL+F 查找
4. F8 全屏编辑，再次点击恢复
渲染中
渲染完成
查看答案
请先登录
在查看答案前，尽量先自己完成，碰到问题再来查看答案，收获会更多
示例
3
:
练习-登陆时候，验证账号密码是否为空
练习难度
0
1
2
3
4
5
顶
折
点击查看做练习的正确姿势
比如在登陆的时候，如果账号或者密码为空，弹出提示，并且不提交
");
window.frames["iframe_show1200"].document.write(decodeHtml($("textarea#stepcodeTextarea1200").val()));
window.frames["iframe_show1200"].document.close();
$(window.frames["iframe_show1200"]).load(function(){
$("#iframe_show1200").height($("#iframe_show1200").contents().find("body").height()+showittryitheight);
});
$("#iframe_show1200").height($("#iframe_show1200").contents().find("body").height()+showittryitheight);
setTimeout(function(){
},500);
});
代码比较
复制代码
<form method="post" action="/study/login.jsp" onsubmit="return login()">
账号：<input id="name" type="text" name="name"> <br/>
密码：<input id="password" type="password" name="password" > <br/>
<input type="submit" value="登陆">
</form>
<script>
function login(){
var name = document.getElementById("name");
if(name.value.length==0){
alert("用户名不能为空");
return false;
}
var password = document.getElementById("password");
if(password.value.length==0){
alert("密码不能为空");
return false;
}
return true;
}
</script>
<form method="post" action="/study/login.jsp" onsubmit="return login()">
账号：<input id="name" type="text" name="name"> <br/>
密码：<input id="password" type="password" name="password" > <br/>
<input type="submit" value="登陆">
</form>
<script>
function login(){
var name = document.getElementById("name");
if(name.value.length==0){
alert("用户名不能为空");
return false;
}
var password = document.getElementById("password");
if(password.value.length==0){
alert("密码不能为空");
return false;
}
return true;
}
</script>
");
window.frames["iframe1200"].document.write(decodeHtml(code1200));
window.frames["iframe1200"].document.close();
//load和下面的非load必需并存，因为如果代码用到了jquery就必须使用load的方式
$(window.frames["iframe1200"]).load(function(){
$("#iframe1200").height($("#iframe1200").contents().find("body").height()+showittryitheight);
});
$("#iframe1200").height($("#iframe1200").contents().find("body").height()+showittryitheight);
alreadyWriteCode1200 = code1200;
$("#rendering1200").hide();
$("#rendered1200").show();
}
var tRereshRetry2DemoPanel1200 = setInterval(rereshRetry2DemoPanel1200,1000);
var binded1200 = false;
$("textarea#stepcodeTextarea1200").keyup(function(){
if(!binded1200){
$(window).bind('beforeunload',function(){
binded1200 = true;
return "xxxx";
});
}
var newCode = $(this).val()
code1200 = newCode;
/*below code is replaced by function rereshRetry2DemoPanel()*/
// if(code1200!=newCode){
// window.frames["iframe1200"].document.write("
");
// window.frames["iframe1200"].document.write(decodeHtml($("textarea#stepcodeTextarea1200").val()));
// window.frames["iframe1200"].document.close();
// $(window.frames["iframe1200"]).load(function(){
// $("#iframe1200").height($("#iframe1200").contents().find("body").height()+showittryitheight);
// });
// code1200 = newCode;
// }
});
$(".tryButton1200").click(function(){
$("#tryDiv1200").show();
$("#stepcodeTextarea1200").focus();
$("#stepcodeTextarea1200").height(200);
$("#iframe1200").height(0);
window.frames["iframe1200"].document.write("
");
window.frames["iframe1200"].document.write(decodeHtml($("textarea#stepcodeTextarea1200").val()));
window.frames["iframe1200"].document.close();
//load和下面的非load必需并存，因为如果代码用到了jquery就必须使用load的方式
$(window.frames["iframe1200"]).load(function(){
$("#iframe1200").height($("#iframe1200").contents().find("body").height()+showittryitheight);
});
$("#iframe1200").height($("#iframe1200").contents().find("body").height()+showittryitheight);
this.scrollIntoView(true);
editor1200.focus();
editor1200.setSize(null, "250");
$("#rendering1200").hide();
$("#rendered1200").hide();
});
var mixedMode = {
name: "htmlmixed",
scriptTypes: [{matches: /\/x-handlebars-template|\/x-mustache/i,
mode: null},
{matches: /(text|application)\/(x-)?vb(a|script)/i,
mode: "vbscript"}]
};
var editor1200 = CodeMirror.fromTextArea(document.getElementById("stepcodeTextarea1200"), {
lineNumbers: true,
styleActiveLine: true,
matchBrackets: true,
mode:"text/html",
theme:"eclipse",
selectionPointer: true,
lineWrapping: true,
extraKeys: {
"Alt-/": "autocomplete",
"Ctrl-F": "findPersistent",
"F8": function(cm) {
cm.setOption("fullScreen", !cm.getOption("fullScreen"));
},
"Esc": function(cm) {
if (cm.getOption("fullScreen")) cm.setOption("fullScreen", false);
}
}
});
editor1200.on("change",function(doc){
if(!binded1200){
$(window).bind('beforeunload',function(){
binded1200 = true;
return "xxxx";
});
}
var newCode = doc.getValue();
code1200 = newCode;
$("textarea#stepcodeTextarea1200").val(newCode);
if(alreadyWriteCode1200!=code1200){
lastModifedTime1200 = new Date().getTime();
$("#rendering1200").show();
$("#rendered1200").hide();
}
// alert(doc.getValue());
});
$(".CodeMirror").addClass("form-control");
// var editor1200 = CodeMirror.fromTextArea(, {
// lineNumbers: true,
// styleActiveLine: true,
// matchBrackets: true,
// theme:"eclipse",
// });
editor1200.on("change",function(doc){
// alert(doc.getValue());
});
$("#tryDiv1200").hide();
});
$("div.codemirrorTips span").addClass("glyphicon glyphicon-asterisk");
试一下
1. 双击选中单词
2. 三击选中整行
3. CTRL+F 查找
4. F8 全屏编辑，再次点击恢复
渲染中
渲染完成
示例
4
:
答案-登陆时候，验证账号密码是否为空
顶
折
查看答案
请先登录
在查看答案前，尽量先自己完成，碰到问题再来查看答案，收获会更多
");
window.frames["iframe_show1201"].document.write(decodeHtml($("textarea#stepcodeTextarea1201").val()));
window.frames["iframe_show1201"].document.close();
$(window.frames["iframe_show1201"]).load(function(){
$("#iframe_show1201").height($("#iframe_show1201").contents().find("body").height()+showittryitheight);
});
$("#iframe_show1201").height($("#iframe_show1201").contents().find("body").height()+showittryitheight);
setTimeout(function(){
},500);
});
代码比较
复制代码
<form method="post" action="/study/register.jsp" onsubmit="return register()">
账号：<input id="name" type="text" name="name">
<br><br>
<input type="submit" value="注册">
<br>
</form>
<script>
function register(){
var name = document.getElementById("name");
if(name.value.length<3){
alert("用户名至少需要3位长度");
return false;
}
return true;
}
</script>
<form method="post" action="/study/register.jsp" onsubmit="return register()">
账号：<input id="name" type="text" name="name">
<br><br>
<input type="submit" value="注册">
<br>
</form>
<script>
function register(){
var name = document.getElementById("name");
if(name.value.length<3){
alert("用户名至少需要3位长度");
return false;
}
return true;
}
</script>
");
window.frames["iframe1201"].document.write(decodeHtml(code1201));
window.frames["iframe1201"].document.close();
//load和下面的非load必需并存，因为如果代码用到了jquery就必须使用load的方式
$(window.frames["iframe1201"]).load(function(){
$("#iframe1201").height($("#iframe1201").contents().find("body").height()+showittryitheight);
});
$("#iframe1201").height($("#iframe1201").contents().find("body").height()+showittryitheight);
alreadyWriteCode1201 = code1201;
$("#rendering1201").hide();
$("#rendered1201").show();
}
var tRereshRetry2DemoPanel1201 = setInterval(rereshRetry2DemoPanel1201,1000);
var binded1201 = false;
$("textarea#stepcodeTextarea1201").keyup(function(){
if(!binded1201){
$(window).bind('beforeunload',function(){
binded1201 = true;
return "xxxx";
});
}
var newCode = $(this).val()
code1201 = newCode;
/*below code is replaced by function rereshRetry2DemoPanel()*/
// if(code1201!=newCode){
// window.frames["iframe1201"].document.write("
");
// window.frames["iframe1201"].document.write(decodeHtml($("textarea#stepcodeTextarea1201").val()));
// window.frames["iframe1201"].document.close();
// $(window.frames["iframe1201"]).load(function(){
// $("#iframe1201").height($("#iframe1201").contents().find("body").height()+showittryitheight);
// });
// code1201 = newCode;
// }
});
$(".tryButton1201").click(function(){
$("#tryDiv1201").show();
$("#stepcodeTextarea1201").focus();
$("#stepcodeTextarea1201").height(200);
$("#iframe1201").height(0);
window.frames["iframe1201"].document.write("
");
window.frames["iframe1201"].document.write(decodeHtml($("textarea#stepcodeTextarea1201").val()));
window.frames["iframe1201"].document.close();
//load和下面的非load必需并存，因为如果代码用到了jquery就必须使用load的方式
$(window.frames["iframe1201"]).load(function(){
$("#iframe1201").height($("#iframe1201").contents().find("body").height()+showittryitheight);
});
$("#iframe1201").height($("#iframe1201").contents().find("body").height()+showittryitheight);
this.scrollIntoView(true);
editor1201.focus();
editor1201.setSize(null, "250");
$("#rendering1201").hide();
$("#rendered1201").hide();
});
var mixedMode = {
name: "htmlmixed",
scriptTypes: [{matches: /\/x-handlebars-template|\/x-mustache/i,
mode: null},
{matches: /(text|application)\/(x-)?vb(a|script)/i,
mode: "vbscript"}]
};
var editor1201 = CodeMirror.fromTextArea(document.getElementById("stepcodeTextarea1201"), {
lineNumbers: true,
styleActiveLine: true,
matchBrackets: true,
mode:"text/html",
theme:"eclipse",
selectionPointer: true,
lineWrapping: true,
extraKeys: {
"Alt-/": "autocomplete",
"Ctrl-F": "findPersistent",
"F8": function(cm) {
cm.setOption("fullScreen", !cm.getOption("fullScreen"));
},
"Esc": function(cm) {
if (cm.getOption("fullScreen")) cm.setOption("fullScreen", false);
}
}
});
editor1201.on("change",function(doc){
if(!binded1201){
$(window).bind('beforeunload',function(){
binded1201 = true;
return "xxxx";
});
}
var newCode = doc.getValue();
code1201 = newCode;
$("textarea#stepcodeTextarea1201").val(newCode);
if(alreadyWriteCode1201!=code1201){
lastModifedTime1201 = new Date().getTime();
$("#rendering1201").show();
$("#rendered1201").hide();
}
// alert(doc.getValue());
});
$(".CodeMirror").addClass("form-control");
// var editor1201 = CodeMirror.fromTextArea(, {
// lineNumbers: true,
// styleActiveLine: true,
// matchBrackets: true,
// theme:"eclipse",
// });
editor1201.on("change",function(doc){
// alert(doc.getValue());
});
$("#tryDiv1201").hide();
});
$("div.codemirrorTips span").addClass("glyphicon glyphicon-asterisk");
试一下
1. 双击选中单词
2. 三击选中整行
3. CTRL+F 查找
4. F8 全屏编辑，再次点击恢复
渲染中
渲染完成
查看答案
请先登录
在查看答案前，尽量先自己完成，碰到问题再来查看答案，收获会更多
示例
7
:
练习-提交数据，验证年龄是否为数字
练习难度
0
1
2
3
4
5
顶
折
点击查看做练习的正确姿势
比如注册的时候，需要提交年龄信息，用户输入的年龄信息必须是数字的。
");
window.frames["iframe_show1202"].document.write(decodeHtml($("textarea#stepcodeTextarea1202").val()));
window.frames["iframe_show1202"].document.close();
$(window.frames["iframe_show1202"]).load(function(){
$("#iframe_show1202").height($("#iframe_show1202").contents().find("body").height()+showittryitheight);
});
$("#iframe_show1202").height($("#iframe_show1202").contents().find("body").height()+showittryitheight);
setTimeout(function(){
},500);
});
代码比较
复制代码
<form method="post" action="/study/register.jsp" onsubmit="return register()">
账号：<input id="name" type="text" name="name">
<br><br>
年龄：<input id="age" type="text" name="age">
<br><br>
<input type="submit" value="注册">
<br>
</form>
<script>
function register(){
var name = document.getElementById("name");
if(name.value.length<3){
alert("用户名至少需要3位长度");
return false;
}
var age = document.getElementById("age");
if(isNaN(age.value)){
alert("年龄必须是数字");
return false;
}
return true;
}
</script>
<form method="post" action="/study/register.jsp" onsubmit="return register()">
账号：<input id="name" type="text" name="name">
<br><br>
年龄：<input id="age" type="text" name="age">
<br><br>
<input type="submit" value="注册">
<br>
</form>
<script>
function register(){
var name = document.getElementById("name");
if(name.value.length<3){
alert("用户名至少需要3位长度");
return false;
}
var age = document.getElementById("age");
if(isNaN(age.value)){
alert("年龄必须是数字");
return false;
}
return true;
}
</script>
");
window.frames["iframe1202"].document.write(decodeHtml(code1202));
window.frames["iframe1202"].document.close();
//load和下面的非load必需并存，因为如果代码用到了jquery就必须使用load的方式
$(window.frames["iframe1202"]).load(function(){
$("#iframe1202").height($("#iframe1202").contents().find("body").height()+showittryitheight);
});
$("#iframe1202").height($("#iframe1202").contents().find("body").height()+showittryitheight);
alreadyWriteCode1202 = code1202;
$("#rendering1202").hide();
$("#rendered1202").show();
}
var tRereshRetry2DemoPanel1202 = setInterval(rereshRetry2DemoPanel1202,1000);
var binded1202 = false;
$("textarea#stepcodeTextarea1202").keyup(function(){
if(!binded1202){
$(window).bind('beforeunload',function(){
binded1202 = true;
return "xxxx";
});
}
var newCode = $(this).val()
code1202 = newCode;
/*below code is replaced by function rereshRetry2DemoPanel()*/
// if(code1202!=newCode){
// window.frames["iframe1202"].document.write("
");
// window.frames["iframe1202"].document.write(decodeHtml($("textarea#stepcodeTextarea1202").val()));
// window.frames["iframe1202"].document.close();
// $(window.frames["iframe1202"]).load(function(){
// $("#iframe1202").height($("#iframe1202").contents().find("body").height()+showittryitheight);
// });
// code1202 = newCode;
// }
});
$(".tryButton1202").click(function(){
$("#tryDiv1202").show();
$("#stepcodeTextarea1202").focus();
$("#stepcodeTextarea1202").height(200);
$("#iframe1202").height(0);
window.frames["iframe1202"].document.write("
");
window.frames["iframe1202"].document.write(decodeHtml($("textarea#stepcodeTextarea1202").val()));
window.frames["iframe1202"].document.close();
//load和下面的非load必需并存，因为如果代码用到了jquery就必须使用load的方式
$(window.frames["iframe1202"]).load(function(){
$("#iframe1202").height($("#iframe1202").contents().find("body").height()+showittryitheight);
});
$("#iframe1202").height($("#iframe1202").contents().find("body").height()+showittryitheight);
this.scrollIntoView(true);
editor1202.focus();
editor1202.setSize(null, "250");
$("#rendering1202").hide();
$("#rendered1202").hide();
});
var mixedMode = {
name: "htmlmixed",
scriptTypes: [{matches: /\/x-handlebars-template|\/x-mustache/i,
mode: null},
{matches: /(text|application)\/(x-)?vb(a|script)/i,
mode: "vbscript"}]
};
var editor1202 = CodeMirror.fromTextArea(document.getElementById("stepcodeTextarea1202"), {
lineNumbers: true,
styleActiveLine: true,
matchBrackets: true,
mode:"text/html",
theme:"eclipse",
selectionPointer: true,
lineWrapping: true,
extraKeys: {
"Alt-/": "autocomplete",
"Ctrl-F": "findPersistent",
"F8": function(cm) {
cm.setOption("fullScreen", !cm.getOption("fullScreen"));
},
"Esc": function(cm) {
if (cm.getOption("fullScreen")) cm.setOption("fullScreen", false);
}
}
});
editor1202.on("change",function(doc){
if(!binded1202){
$(window).bind('beforeunload',function(){
binded1202 = true;
return "xxxx";
});
}
var newCode = doc.getValue();
code1202 = newCode;
$("textarea#stepcodeTextarea1202").val(newCode);
if(alreadyWriteCode1202!=code1202){
lastModifedTime1202 = new Date().getTime();
$("#rendering1202").show();
$("#rendered1202").hide();
}
// alert(doc.getValue());
});
$(".CodeMirror").addClass("form-control");
// var editor1202 = CodeMirror.fromTextArea(, {
// lineNumbers: true,
// styleActiveLine: true,
// matchBrackets: true,
// theme:"eclipse",
// });
editor1202.on("change",function(doc){
// alert(doc.getValue());
});
$("#tryDiv1202").hide();
});
$("div.codemirrorTips span").addClass("glyphicon glyphicon-asterisk");
试一下
1. 双击选中单词
2. 三击选中整行
3. CTRL+F 查找
4. F8 全屏编辑，再次点击恢复
渲染中
渲染完成
示例
8
:
答案-提交数据，验证年龄是否为数字
顶
折
查看答案
请先登录
在查看答案前，尽量先自己完成，碰到问题再来查看答案，收获会更多
示例
9
:
练习-提交数据，验证年龄是否为整数
练习难度
0
1
2
3
4
5
顶
折
点击查看做练习的正确姿势
上一个练习有个缺陷，即当年龄输入是小数的时候，也能够通过判断。
");
window.frames["iframe_show3099"].document.write(decodeHtml($("textarea#stepcodeTextarea3099").val()));
window.frames["iframe_show3099"].document.close();
$(window.frames["iframe_show3099"]).load(function(){
$("#iframe_show3099").height($("#iframe_show3099").contents().find("body").height()+showittryitheight);
});
$("#iframe_show3099").height($("#iframe_show3099").contents().find("body").height()+showittryitheight);
setTimeout(function(){
},500);
});
代码比较
复制代码
<form method="post" action="/study/register.jsp" onsubmit="return register()">
账号：<input id="name" type="text" name="name">
<br><br>
年龄：<input id="age" type="text" name="age">
<br><br>
<input type="submit" value="注册">
<br>
</form>
<script>
function register(){
var name = document.getElementById("name");
if(name.value.length<3){
alert("用户名至少需要3位长度");
return false;
}
var age = document.getElementById("age");
if(parseInt(age.value)!=age.value){
alert("年龄必须是整数");
return false;
}
return true;
}
</script>
<form method="post" action="/study/register.jsp" onsubmit="return register()">
账号：<input id="name" type="text" name="name">
<br><br>
年龄：<input id="age" type="text" name="age">
<br><br>
<input type="submit" value="注册">
<br>
</form>
<script>
function register(){
var name = document.getElementById("name");
if(name.value.length<3){
alert("用户名至少需要3位长度");
return false;
}
var age = document.getElementById("age");
if(parseInt(age.value)!=age.value){
alert("年龄必须是整数");
return false;
}
return true;
}
</script>
");
window.frames["iframe3099"].document.write(decodeHtml(code3099));
window.frames["iframe3099"].document.close();
//load和下面的非load必需并存，因为如果代码用到了jquery就必须使用load的方式
$(window.frames["iframe3099"]).load(function(){
$("#iframe3099").height($("#iframe3099").contents().find("body").height()+showittryitheight);
});
$("#iframe3099").height($("#iframe3099").contents().find("body").height()+showittryitheight);
alreadyWriteCode3099 = code3099;
$("#rendering3099").hide();
$("#rendered3099").show();
}
var tRereshRetry2DemoPanel3099 = setInterval(rereshRetry2DemoPanel3099,1000);
var binded3099 = false;
$("textarea#stepcodeTextarea3099").keyup(function(){
if(!binded3099){
$(window).bind('beforeunload',function(){
binded3099 = true;
return "xxxx";
});
}
var newCode = $(this).val()
code3099 = newCode;
/*below code is replaced by function rereshRetry2DemoPanel()*/
// if(code3099!=newCode){
// window.frames["iframe3099"].document.write("
");
// window.frames["iframe3099"].document.write(decodeHtml($("textarea#stepcodeTextarea3099").val()));
// window.frames["iframe3099"].document.close();
// $(window.frames["iframe3099"]).load(function(){
// $("#iframe3099").height($("#iframe3099").contents().find("body").height()+showittryitheight);
// });
// code3099 = newCode;
// }
});
$(".tryButton3099").click(function(){
$("#tryDiv3099").show();
$("#stepcodeTextarea3099").focus();
$("#stepcodeTextarea3099").height(200);
$("#iframe3099").height(0);
window.frames["iframe3099"].document.write("
");
window.frames["iframe3099"].document.write(decodeHtml($("textarea#stepcodeTextarea3099").val()));
window.frames["iframe3099"].document.close();
//load和下面的非load必需并存，因为如果代码用到了jquery就必须使用load的方式
$(window.frames["iframe3099"]).load(function(){
$("#iframe3099").height($("#iframe3099").contents().find("body").height()+showittryitheight);
});
$("#iframe3099").height($("#iframe3099").contents().find("body").height()+showittryitheight);
this.scrollIntoView(true);
editor3099.focus();
editor3099.setSize(null, "250");
$("#rendering3099").hide();
$("#rendered3099").hide();
});
var mixedMode = {
name: "htmlmixed",
scriptTypes: [{matches: /\/x-handlebars-template|\/x-mustache/i,
mode: null},
{matches: /(text|application)\/(x-)?vb(a|script)/i,
mode: "vbscript"}]
};
var editor3099 = CodeMirror.fromTextArea(document.getElementById("stepcodeTextarea3099"), {
lineNumbers: true,
styleActiveLine: true,
matchBrackets: true,
mode:"text/html",
theme:"eclipse",
selectionPointer: true,
lineWrapping: true,
extraKeys: {
"Alt-/": "autocomplete",
"Ctrl-F": "findPersistent",
"F8": function(cm) {
cm.setOption("fullScreen", !cm.getOption("fullScreen"));
},
"Esc": function(cm) {
if (cm.getOption("fullScreen")) cm.setOption("fullScreen", false);
}
}
});
editor3099.on("change",function(doc){
if(!binded3099){
$(window).bind('beforeunload',function(){
binded3099 = true;
return "xxxx";
});
}
var newCode = doc.getValue();
code3099 = newCode;
$("textarea#stepcodeTextarea3099").val(newCode);
if(alreadyWriteCode3099!=code3099){
lastModifedTime3099 = new Date().getTime();
$("#rendering3099").show();
$("#rendered3099").hide();
}
// alert(doc.getValue());
});
$(".CodeMirror").addClass("form-control");
// var editor3099 = CodeMirror.fromTextArea(, {
// lineNumbers: true,
// styleActiveLine: true,
// matchBrackets: true,
// theme:"eclipse",
// });
editor3099.on("change",function(doc){
// alert(doc.getValue());
});
$("#tryDiv3099").hide();
});
$("div.codemirrorTips span").addClass("glyphicon glyphicon-asterisk");
试一下
1. 双击选中单词
2. 三击选中整行
3. CTRL+F 查找
4. F8 全屏编辑，再次点击恢复
渲染中
渲染完成
示例
10
:
答案-提交数据，验证年龄是否为整数
顶
折
查看答案
请先登录
在查看答案前，尽量先自己完成，碰到问题再来查看答案，收获会更多
示例
11
:
练习-提交数据，验证email格式是否正确
练习难度
0
1
2
3
4
5
顶
折
点击查看做练习的正确姿势
比如注册的时候，需要提交email信息，用户输入的email信息必须是电子邮箱格式的。
");
window.frames["iframe_show1203"].document.write(decodeHtml($("textarea#stepcodeTextarea1203").val()));
window.frames["iframe_show1203"].document.close();
$(window.frames["iframe_show1203"]).load(function(){
$("#iframe_show1203").height($("#iframe_show1203").contents().find("body").height()+showittryitheight);
});
$("#iframe_show1203").height($("#iframe_show1203").contents().find("body").height()+showittryitheight);
setTimeout(function(){
},500);
});
代码比较
复制代码
<form method="post" action="/study/register.jsp" onsubmit="return register()">
账号：<input id="name" type="text" name="name">
<br><br>
年龄：<input id="age" type="text" name="age">
<br><br>
EMail：<input id="email" type="text" name="email">
<br><br>
<input type="submit" value="注册">
<br>
</form>
<script>
function register(){
var name = document.getElementById("name");
if(name.value.length<3){
alert("用户名至少需要3位长度");
return false;
}
var age = document.getElementById("age");
if(isNaN(age.value)){
alert("年龄必须是数字");
return false;
}
var email = document.getElementById("email");
if(0==email.value.length){
alert("email不能为空");
return false;
}
var Regex = /^(?:\w+\.?)*\w+@(?:\w+\.)*\w+$/;
if (!Regex.test(email.value)){
alert("email格式不正确");
return false;
}
return true;
}
</script>
<form method="post" action="/study/register.jsp" onsubmit="return register()">
账号：<input id="name" type="text" name="name">
<br><br>
年龄：<input id="age" type="text" name="age">
<br><br>
EMail：<input id="email" type="text" name="email">
<br><br>
<input type="submit" value="注册">
<br>
</form>
<script>
function register(){
var name = document.getElementById("name");
if(name.value.length<3){
alert("用户名至少需要3位长度");
return false;
}
var age = document.getElementById("age");
if(isNaN(age.value)){
alert("年龄必须是数字");
return false;
}
var email = document.getElementById("email");
if(0==email.value.length){
alert("email不能为空");
return false;
}
var Regex = /^(?:\w+\.?)*\w+@(?:\w+\.)*\w+$/;
if (!Regex.test(email.value)){
alert("email格式不正确");
return false;
}
return true;
}
</script>
");
window.frames["iframe1203"].document.write(decodeHtml(code1203));
window.frames["iframe1203"].document.close();
//load和下面的非load必需并存，因为如果代码用到了jquery就必须使用load的方式
$(window.frames["iframe1203"]).load(function(){
$("#iframe1203").height($("#iframe1203").contents().find("body").height()+showittryitheight);
});
$("#iframe1203").height($("#iframe1203").contents().find("body").height()+showittryitheight);
alreadyWriteCode1203 = code1203;
$("#rendering1203").hide();
$("#rendered1203").show();
}
var tRereshRetry2DemoPanel1203 = setInterval(rereshRetry2DemoPanel1203,1000);
var binded1203 = false;
$("textarea#stepcodeTextarea1203").keyup(function(){
if(!binded1203){
$(window).bind('beforeunload',function(){
binded1203 = true;
return "xxxx";
});
}
var newCode = $(this).val()
code1203 = newCode;
/*below code is replaced by function rereshRetry2DemoPanel()*/
// if(code1203!=newCode){
// window.frames["iframe1203"].document.write("
");
// window.frames["iframe1203"].document.write(decodeHtml($("textarea#stepcodeTextarea1203").val()));
// window.frames["iframe1203"].document.close();
// $(window.frames["iframe1203"]).load(function(){
// $("#iframe1203").height($("#iframe1203").contents().find("body").height()+showittryitheight);
// });
// code1203 = newCode;
// }
});
$(".tryButton1203").click(function(){
$("#tryDiv1203").show();
$("#stepcodeTextarea1203").focus();
$("#stepcodeTextarea1203").height(200);
$("#iframe1203").height(0);
window.frames["iframe1203"].document.write("
");
window.frames["iframe1203"].document.write(decodeHtml($("textarea#stepcodeTextarea1203").val()));
window.frames["iframe1203"].document.close();
//load和下面的非load必需并存，因为如果代码用到了jquery就必须使用load的方式
$(window.frames["iframe1203"]).load(function(){
$("#iframe1203").height($("#iframe1203").contents().find("body").height()+showittryitheight);
});
$("#iframe1203").height($("#iframe1203").contents().find("body").height()+showittryitheight);
this.scrollIntoView(true);
editor1203.focus();
editor1203.setSize(null, "250");
$("#rendering1203").hide();
$("#rendered1203").hide();
});
var mixedMode = {
name: "htmlmixed",
scriptTypes: [{matches: /\/x-handlebars-template|\/x-mustache/i,
mode: null},
{matches: /(text|application)\/(x-)?vb(a|script)/i,
mode: "vbscript"}]
};
var editor1203 = CodeMirror.fromTextArea(document.getElementById("stepcodeTextarea1203"), {
lineNumbers: true,
styleActiveLine: true,
matchBrackets: true,
mode:"text/html",
theme:"eclipse",
selectionPointer: true,
lineWrapping: true,
extraKeys: {
"Alt-/": "autocomplete",
"Ctrl-F": "findPersistent",
"F8": function(cm) {
cm.setOption("fullScreen", !cm.getOption("fullScreen"));
},
"Esc": function(cm) {
if (cm.getOption("fullScreen")) cm.setOption("fullScreen", false);
}
}
});
editor1203.on("change",function(doc){
if(!binded1203){
$(window).bind('beforeunload',function(){
binded1203 = true;
return "xxxx";
});
}
var newCode = doc.getValue();
code1203 = newCode;
$("textarea#stepcodeTextarea1203").val(newCode);
if(alreadyWriteCode1203!=code1203){
lastModifedTime1203 = new Date().getTime();
$("#rendering1203").show();
$("#rendered1203").hide();
}
// alert(doc.getValue());
});
$(".CodeMirror").addClass("form-control");
// var editor1203 = CodeMirror.fromTextArea(, {
// lineNumbers: true,
// styleActiveLine: true,
// matchBrackets: true,
// theme:"eclipse",
// });
editor1203.on("change",function(doc){
// alert(doc.getValue());
});
$("#tryDiv1203").hide();
});
$("div.codemirrorTips span").addClass("glyphicon glyphicon-asterisk");
试一下
1. 双击选中单词
2. 三击选中整行
3. CTRL+F 查找
4. F8 全屏编辑，再次点击恢复
渲染中
渲染完成
示例
12
:
答案-提交数据，验证email格式是否正确
顶
折
查看答案
请先登录
在查看答案前，尽量先自己完成，碰到问题再来查看答案，收获会更多
首先通过document.getElementById 拿到div对应的节点style.display 的值进行隐藏和显示
");
window.frames["iframe_show1208"].document.write(decodeHtml($("textarea#stepcodeTextarea1208").val()));
window.frames["iframe_show1208"].document.close();
$(window.frames["iframe_show1208"]).load(function(){
$("#iframe_show1208").height($("#iframe_show1208").contents().find("body").height()+showittryitheight);
});
$("#iframe_show1208").height($("#iframe_show1208").contents().find("body").height()+showittryitheight);
setTimeout(function(){
},500);
});
代码比较
复制代码
<button onclick="hide()">隐藏div</button>
<button onclick="show()">显示div</button>
<br>
<br>
<div id="d">
这是一个div
</div>
<script>
function hide(){
var d = document.getElementById("d");
d.style.display="none";
}
function show(){
var d = document.getElementById("d");
d.style.display="block";
}
</script>
<button onclick="hide()">隐藏div</button>
<button onclick="show()">显示div</button>
<br>
<br>
<div id="d">
这是一个div
</div>
<script>
function hide(){
var d = document.getElementById("d");
d.style.display="none";
}
function show(){
var d = document.getElementById("d");
d.style.display="block";
}
</script>
");
window.frames["iframe1208"].document.write(decodeHtml(code1208));
window.frames["iframe1208"].document.close();
//load和下面的非load必需并存，因为如果代码用到了jquery就必须使用load的方式
$(window.frames["iframe1208"]).load(function(){
$("#iframe1208").height($("#iframe1208").contents().find("body").height()+showittryitheight);
});
$("#iframe1208").height($("#iframe1208").contents().find("body").height()+showittryitheight);
alreadyWriteCode1208 = code1208;
$("#rendering1208").hide();
$("#rendered1208").show();
}
var tRereshRetry2DemoPanel1208 = setInterval(rereshRetry2DemoPanel1208,1000);
var binded1208 = false;
$("textarea#stepcodeTextarea1208").keyup(function(){
if(!binded1208){
$(window).bind('beforeunload',function(){
binded1208 = true;
return "xxxx";
});
}
var newCode = $(this).val()
code1208 = newCode;
/*below code is replaced by function rereshRetry2DemoPanel()*/
// if(code1208!=newCode){
// window.frames["iframe1208"].document.write("
");
// window.frames["iframe1208"].document.write(decodeHtml($("textarea#stepcodeTextarea1208").val()));
// window.frames["iframe1208"].document.close();
// $(window.frames["iframe1208"]).load(function(){
// $("#iframe1208").height($("#iframe1208").contents().find("body").height()+showittryitheight);
// });
// code1208 = newCode;
// }
});
$(".tryButton1208").click(function(){
$("#tryDiv1208").show();
$("#stepcodeTextarea1208").focus();
$("#stepcodeTextarea1208").height(200);
$("#iframe1208").height(0);
window.frames["iframe1208"].document.write("
");
window.frames["iframe1208"].document.write(decodeHtml($("textarea#stepcodeTextarea1208").val()));
window.frames["iframe1208"].document.close();
//load和下面的非load必需并存，因为如果代码用到了jquery就必须使用load的方式
$(window.frames["iframe1208"]).load(function(){
$("#iframe1208").height($("#iframe1208").contents().find("body").height()+showittryitheight);
});
$("#iframe1208").height($("#iframe1208").contents().find("body").height()+showittryitheight);
this.scrollIntoView(true);
editor1208.focus();
editor1208.setSize(null, "250");
$("#rendering1208").hide();
$("#rendered1208").hide();
});
var mixedMode = {
name: "htmlmixed",
scriptTypes: [{matches: /\/x-handlebars-template|\/x-mustache/i,
mode: null},
{matches: /(text|application)\/(x-)?vb(a|script)/i,
mode: "vbscript"}]
};
var editor1208 = CodeMirror.fromTextArea(document.getElementById("stepcodeTextarea1208"), {
lineNumbers: true,
styleActiveLine: true,
matchBrackets: true,
mode:"text/html",
theme:"eclipse",
selectionPointer: true,
lineWrapping: true,
extraKeys: {
"Alt-/": "autocomplete",
"Ctrl-F": "findPersistent",
"F8": function(cm) {
cm.setOption("fullScreen", !cm.getOption("fullScreen"));
},
"Esc": function(cm) {
if (cm.getOption("fullScreen")) cm.setOption("fullScreen", false);
}
}
});
editor1208.on("change",function(doc){
if(!binded1208){
$(window).bind('beforeunload',function(){
binded1208 = true;
return "xxxx";
});
}
var newCode = doc.getValue();
code1208 = newCode;
$("textarea#stepcodeTextarea1208").val(newCode);
if(alreadyWriteCode1208!=code1208){
lastModifedTime1208 = new Date().getTime();
$("#rendering1208").show();
$("#rendered1208").hide();
}
// alert(doc.getValue());
});
$(".CodeMirror").addClass("form-control");
// var editor1208 = CodeMirror.fromTextArea(, {
// lineNumbers: true,
// styleActiveLine: true,
// matchBrackets: true,
// theme:"eclipse",
// });
editor1208.on("change",function(doc){
// alert(doc.getValue());
});
$("#tryDiv1208").hide();
});
$("div.codemirrorTips span").addClass("glyphicon glyphicon-asterisk");
试一下
1. 双击选中单词
2. 三击选中整行
3. CTRL+F 查找
4. F8 全屏编辑，再次点击恢复
渲染中
渲染完成
查看答案
请先登录
在查看答案前，尽量先自己完成，碰到问题再来查看答案，收获会更多
代码高亮插件双击即可选中，不过部分同学反应，通过代码高亮插件复制的代码无法在IDEA里正常显示，这里提供TEXTAREA的方式，方便复制，谢谢
1. 自行完成练习
根据练习目标尽量自己实现代码效果，期间会碰到疑问，难题，和自己不懂的地方，这些都是必要的过程
2. 带着疑问查看答案
完成过程中，碰到无法解决的问题，带着疑问，查看答案，分析答案的解决思路
3. 查看答案讲解视频
依然有不明白的地方，点开视频讲解，带着疑问，听视频讲解有问题的部分
4. 再做一遍
理解后，再从头做一遍，把有疑问的地方都捋清楚
5. 总结
最后再总结一遍，总结思路，总结解决办法，以后遇到类似的问题，怎么处理
HOW2J公众号，关注后实时获知布最新的教程和优惠活动，谢谢。
提问之前请登陆
Or
姿势不对,事倍功半!
