关键字
简介
示例代码
+
基本算数运算符
示例代码
++
自增，自减运算符
示例代码
=
赋值运算符
示例代码
+
+运算符的多态
示例代码
示例
1
:
基本算数运算符
示例
2
:
自增，自减运算符
示例
3
:
赋值运算符
示例
4
:
+运算符的多态
基本算数运算符和小学中学习的没有任何区别
");
window.frames["iframe_show1099"].document.write(decodeHtml($("textarea#stepcodeTextarea1099").val()));
window.frames["iframe_show1099"].document.close();
$(window.frames["iframe_show1099"]).load(function(){
$("#iframe_show1099").height($("#iframe_show1099").contents().find("body").height()+showittryitheight);
});
$("#iframe_show1099").height($("#iframe_show1099").contents().find("body").height()+showittryitheight);
setTimeout(function(){
},500);
});
运行效果
代码比较
复制代码
<script>
function p(s){
document.write(s);
document.write("<br>");
}
p("1+2="+ (1+2));
p("5-3="+ (5-3));
p("3*2="+ (3*2));
p("9/3="+ (9/3));
p("10%3="+ (10%3));
</script>
<script>
function p(s){
document.write(s);
document.write("<br>");
}
p("1+2="+ (1+2));
p("5-3="+ (5-3));
p("3*2="+ (3*2));
p("9/3="+ (9/3));
p("10%3="+ (10%3));
</script>
");
window.frames["iframe1099"].document.write(decodeHtml(code1099));
window.frames["iframe1099"].document.close();
//load和下面的非load必需并存，因为如果代码用到了jquery就必须使用load的方式
$(window.frames["iframe1099"]).load(function(){
$("#iframe1099").height($("#iframe1099").contents().find("body").height()+showittryitheight);
});
$("#iframe1099").height($("#iframe1099").contents().find("body").height()+showittryitheight);
alreadyWriteCode1099 = code1099;
$("#rendering1099").hide();
$("#rendered1099").show();
}
var tRereshRetry2DemoPanel1099 = setInterval(rereshRetry2DemoPanel1099,1000);
var binded1099 = false;
$("textarea#stepcodeTextarea1099").keyup(function(){
if(!binded1099){
$(window).bind('beforeunload',function(){
binded1099 = true;
return "xxxx";
});
}
var newCode = $(this).val()
code1099 = newCode;
/*below code is replaced by function rereshRetry2DemoPanel()*/
// if(code1099!=newCode){
// window.frames["iframe1099"].document.write("
");
// window.frames["iframe1099"].document.write(decodeHtml($("textarea#stepcodeTextarea1099").val()));
// window.frames["iframe1099"].document.close();
// $(window.frames["iframe1099"]).load(function(){
// $("#iframe1099").height($("#iframe1099").contents().find("body").height()+showittryitheight);
// });
// code1099 = newCode;
// }
});
$(".tryButton1099").click(function(){
$("#tryDiv1099").show();
$("#stepcodeTextarea1099").focus();
$("#stepcodeTextarea1099").height(200);
$("#iframe1099").height(0);
window.frames["iframe1099"].document.write("
");
window.frames["iframe1099"].document.write(decodeHtml($("textarea#stepcodeTextarea1099").val()));
window.frames["iframe1099"].document.close();
//load和下面的非load必需并存，因为如果代码用到了jquery就必须使用load的方式
$(window.frames["iframe1099"]).load(function(){
$("#iframe1099").height($("#iframe1099").contents().find("body").height()+showittryitheight);
});
$("#iframe1099").height($("#iframe1099").contents().find("body").height()+showittryitheight);
this.scrollIntoView(true);
editor1099.focus();
editor1099.setSize(null, "250");
$("#rendering1099").hide();
$("#rendered1099").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 editor1099 = CodeMirror.fromTextArea(document.getElementById("stepcodeTextarea1099"), {
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);
}
}
});
editor1099.on("change",function(doc){
if(!binded1099){
$(window).bind('beforeunload',function(){
binded1099 = true;
return "xxxx";
});
}
var newCode = doc.getValue();
code1099 = newCode;
$("textarea#stepcodeTextarea1099").val(newCode);
if(alreadyWriteCode1099!=code1099){
lastModifedTime1099 = new Date().getTime();
$("#rendering1099").show();
$("#rendered1099").hide();
}
// alert(doc.getValue());
});
$(".CodeMirror").addClass("form-control");
// var editor1099 = CodeMirror.fromTextArea(, {
// lineNumbers: true,
// styleActiveLine: true,
// matchBrackets: true,
// theme:"eclipse",
// });
editor1099.on("change",function(doc){
// alert(doc.getValue());
});
$("#tryDiv1099").hide();
});
$("div.codemirrorTips span").addClass("glyphicon glyphicon-asterisk");
试一下
1. 双击选中单词
2. 三击选中整行
3. CTRL+F 查找
4. F8 全屏编辑，再次点击恢复
渲染中
渲染完成
自增++在原来的基础上 ，增加 1.
前面 ，就是 先运算，后取值 。
后面 ，就是 先取值，后运算 。
");
window.frames["iframe_show1101"].document.write(decodeHtml($("textarea#stepcodeTextarea1101").val()));
window.frames["iframe_show1101"].document.close();
$(window.frames["iframe_show1101"]).load(function(){
$("#iframe_show1101").height($("#iframe_show1101").contents().find("body").height()+showittryitheight);
});
$("#iframe_show1101").height($("#iframe_show1101").contents().find("body").height()+showittryitheight);
setTimeout(function(){
},500);
});
运行效果
代码比较
复制代码
<script>
var a = 5;
document.write('a++ 是先取值，再运算，所以打印出来是：'+a++); //先取值 ，即5
document.write("<br>");
var b = 5;
document.write('++b 是先运算，再取值，所以打印出来是：'+ ++b); //先运算，再取值，即6
</script>
<script>
var a = 5;
document.write('a++ 是先取值，再运算，所以打印出来是：'+a++); //先取值 ，即5
document.write("<br>");
var b = 5;
document.write('++b 是先运算，再取值，所以打印出来是：'+ ++b); //先运算，再取值，即6
</script>
");
window.frames["iframe1101"].document.write(decodeHtml(code1101));
window.frames["iframe1101"].document.close();
//load和下面的非load必需并存，因为如果代码用到了jquery就必须使用load的方式
$(window.frames["iframe1101"]).load(function(){
$("#iframe1101").height($("#iframe1101").contents().find("body").height()+showittryitheight);
});
$("#iframe1101").height($("#iframe1101").contents().find("body").height()+showittryitheight);
alreadyWriteCode1101 = code1101;
$("#rendering1101").hide();
$("#rendered1101").show();
}
var tRereshRetry2DemoPanel1101 = setInterval(rereshRetry2DemoPanel1101,1000);
var binded1101 = false;
$("textarea#stepcodeTextarea1101").keyup(function(){
if(!binded1101){
$(window).bind('beforeunload',function(){
binded1101 = true;
return "xxxx";
});
}
var newCode = $(this).val()
code1101 = newCode;
/*below code is replaced by function rereshRetry2DemoPanel()*/
// if(code1101!=newCode){
// window.frames["iframe1101"].document.write("
");
// window.frames["iframe1101"].document.write(decodeHtml($("textarea#stepcodeTextarea1101").val()));
// window.frames["iframe1101"].document.close();
// $(window.frames["iframe1101"]).load(function(){
// $("#iframe1101").height($("#iframe1101").contents().find("body").height()+showittryitheight);
// });
// code1101 = newCode;
// }
});
$(".tryButton1101").click(function(){
$("#tryDiv1101").show();
$("#stepcodeTextarea1101").focus();
$("#stepcodeTextarea1101").height(200);
$("#iframe1101").height(0);
window.frames["iframe1101"].document.write("
");
window.frames["iframe1101"].document.write(decodeHtml($("textarea#stepcodeTextarea1101").val()));
window.frames["iframe1101"].document.close();
//load和下面的非load必需并存，因为如果代码用到了jquery就必须使用load的方式
$(window.frames["iframe1101"]).load(function(){
$("#iframe1101").height($("#iframe1101").contents().find("body").height()+showittryitheight);
});
$("#iframe1101").height($("#iframe1101").contents().find("body").height()+showittryitheight);
this.scrollIntoView(true);
editor1101.focus();
editor1101.setSize(null, "250");
$("#rendering1101").hide();
$("#rendered1101").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 editor1101 = CodeMirror.fromTextArea(document.getElementById("stepcodeTextarea1101"), {
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);
}
}
});
editor1101.on("change",function(doc){
if(!binded1101){
$(window).bind('beforeunload',function(){
binded1101 = true;
return "xxxx";
});
}
var newCode = doc.getValue();
code1101 = newCode;
$("textarea#stepcodeTextarea1101").val(newCode);
if(alreadyWriteCode1101!=code1101){
lastModifedTime1101 = new Date().getTime();
$("#rendering1101").show();
$("#rendered1101").hide();
}
// alert(doc.getValue());
});
$(".CodeMirror").addClass("form-control");
// var editor1101 = CodeMirror.fromTextArea(, {
// lineNumbers: true,
// styleActiveLine: true,
// matchBrackets: true,
// theme:"eclipse",
// });
editor1101.on("change",function(doc){
// alert(doc.getValue());
});
$("#tryDiv1101").hide();
});
$("div.codemirrorTips span").addClass("glyphicon glyphicon-asterisk");
试一下
1. 双击选中单词
2. 三击选中整行
3. CTRL+F 查找
4. F8 全屏编辑，再次点击恢复
渲染中
渲染完成
=，+=，-=，*=，/=，%=
");
window.frames["iframe_show1100"].document.write(decodeHtml($("textarea#stepcodeTextarea1100").val()));
window.frames["iframe_show1100"].document.close();
$(window.frames["iframe_show1100"]).load(function(){
$("#iframe_show1100").height($("#iframe_show1100").contents().find("body").height()+showittryitheight);
});
$("#iframe_show1100").height($("#iframe_show1100").contents().find("body").height()+showittryitheight);
setTimeout(function(){
},500);
});
运行效果
代码比较
复制代码
<script>
x = 5;
x+= 6;
document.write('x+=6就是 x=x+6的意思，所以最后的值就等于: '+x);
</script>
<script>
x = 5;
x+= 6;
document.write('x+=6就是 x=x+6的意思，所以最后的值就等于: '+x);
</script>
");
window.frames["iframe1100"].document.write(decodeHtml(code1100));
window.frames["iframe1100"].document.close();
//load和下面的非load必需并存，因为如果代码用到了jquery就必须使用load的方式
$(window.frames["iframe1100"]).load(function(){
$("#iframe1100").height($("#iframe1100").contents().find("body").height()+showittryitheight);
});
$("#iframe1100").height($("#iframe1100").contents().find("body").height()+showittryitheight);
alreadyWriteCode1100 = code1100;
$("#rendering1100").hide();
$("#rendered1100").show();
}
var tRereshRetry2DemoPanel1100 = setInterval(rereshRetry2DemoPanel1100,1000);
var binded1100 = false;
$("textarea#stepcodeTextarea1100").keyup(function(){
if(!binded1100){
$(window).bind('beforeunload',function(){
binded1100 = true;
return "xxxx";
});
}
var newCode = $(this).val()
code1100 = newCode;
/*below code is replaced by function rereshRetry2DemoPanel()*/
// if(code1100!=newCode){
// window.frames["iframe1100"].document.write("
");
// window.frames["iframe1100"].document.write(decodeHtml($("textarea#stepcodeTextarea1100").val()));
// window.frames["iframe1100"].document.close();
// $(window.frames["iframe1100"]).load(function(){
// $("#iframe1100").height($("#iframe1100").contents().find("body").height()+showittryitheight);
// });
// code1100 = newCode;
// }
});
$(".tryButton1100").click(function(){
$("#tryDiv1100").show();
$("#stepcodeTextarea1100").focus();
$("#stepcodeTextarea1100").height(200);
$("#iframe1100").height(0);
window.frames["iframe1100"].document.write("
");
window.frames["iframe1100"].document.write(decodeHtml($("textarea#stepcodeTextarea1100").val()));
window.frames["iframe1100"].document.close();
//load和下面的非load必需并存，因为如果代码用到了jquery就必须使用load的方式
$(window.frames["iframe1100"]).load(function(){
$("#iframe1100").height($("#iframe1100").contents().find("body").height()+showittryitheight);
});
$("#iframe1100").height($("#iframe1100").contents().find("body").height()+showittryitheight);
this.scrollIntoView(true);
editor1100.focus();
editor1100.setSize(null, "250");
$("#rendering1100").hide();
$("#rendered1100").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 editor1100 = CodeMirror.fromTextArea(document.getElementById("stepcodeTextarea1100"), {
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);
}
}
});
editor1100.on("change",function(doc){
if(!binded1100){
$(window).bind('beforeunload',function(){
binded1100 = true;
return "xxxx";
});
}
var newCode = doc.getValue();
code1100 = newCode;
$("textarea#stepcodeTextarea1100").val(newCode);
if(alreadyWriteCode1100!=code1100){
lastModifedTime1100 = new Date().getTime();
$("#rendering1100").show();
$("#rendered1100").hide();
}
// alert(doc.getValue());
});
$(".CodeMirror").addClass("form-control");
// var editor1100 = CodeMirror.fromTextArea(, {
// lineNumbers: true,
// styleActiveLine: true,
// matchBrackets: true,
// theme:"eclipse",
// });
editor1100.on("change",function(doc){
// alert(doc.getValue());
});
$("#tryDiv1100").hide();
});
$("div.codemirrorTips span").addClass("glyphicon glyphicon-asterisk");
试一下
1. 双击选中单词
2. 三击选中整行
3. CTRL+F 查找
4. F8 全屏编辑，再次点击恢复
渲染中
渲染完成
+ 具备多态 特征
");
window.frames["iframe_show1102"].document.write(decodeHtml($("textarea#stepcodeTextarea1102").val()));
window.frames["iframe_show1102"].document.close();
$(window.frames["iframe_show1102"]).load(function(){
$("#iframe_show1102").height($("#iframe_show1102").contents().find("body").height()+showittryitheight);
});
$("#iframe_show1102").height($("#iframe_show1102").contents().find("body").height()+showittryitheight);
setTimeout(function(){
},500);
});
运行效果
代码比较
复制代码
<script>
document.write('当+两边都是数字的时候，+就是加法运算符，所以1+2='+(1+2));
document.write("<br>");
document.write('当+任意一边是字符串的时候，+就是字符串连接符，所以1+\"2\"='+ (1+"2"));
</script>
<script>
document.write('当+两边都是数字的时候，+就是加法运算符，所以1+2='+(1+2));
document.write("<br>");
document.write('当+任意一边是字符串的时候，+就是字符串连接符，所以1+\"2\"='+ (1+"2"));
</script>
");
window.frames["iframe1102"].document.write(decodeHtml(code1102));
window.frames["iframe1102"].document.close();
//load和下面的非load必需并存，因为如果代码用到了jquery就必须使用load的方式
$(window.frames["iframe1102"]).load(function(){
$("#iframe1102").height($("#iframe1102").contents().find("body").height()+showittryitheight);
});
$("#iframe1102").height($("#iframe1102").contents().find("body").height()+showittryitheight);
alreadyWriteCode1102 = code1102;
$("#rendering1102").hide();
$("#rendered1102").show();
}
var tRereshRetry2DemoPanel1102 = setInterval(rereshRetry2DemoPanel1102,1000);
var binded1102 = false;
$("textarea#stepcodeTextarea1102").keyup(function(){
if(!binded1102){
$(window).bind('beforeunload',function(){
binded1102 = true;
return "xxxx";
});
}
var newCode = $(this).val()
code1102 = newCode;
/*below code is replaced by function rereshRetry2DemoPanel()*/
// if(code1102!=newCode){
// window.frames["iframe1102"].document.write("
");
// window.frames["iframe1102"].document.write(decodeHtml($("textarea#stepcodeTextarea1102").val()));
// window.frames["iframe1102"].document.close();
// $(window.frames["iframe1102"]).load(function(){
// $("#iframe1102").height($("#iframe1102").contents().find("body").height()+showittryitheight);
// });
// code1102 = newCode;
// }
});
$(".tryButton1102").click(function(){
$("#tryDiv1102").show();
$("#stepcodeTextarea1102").focus();
$("#stepcodeTextarea1102").height(200);
$("#iframe1102").height(0);
window.frames["iframe1102"].document.write("
");
window.frames["iframe1102"].document.write(decodeHtml($("textarea#stepcodeTextarea1102").val()));
window.frames["iframe1102"].document.close();
//load和下面的非load必需并存，因为如果代码用到了jquery就必须使用load的方式
$(window.frames["iframe1102"]).load(function(){
$("#iframe1102").height($("#iframe1102").contents().find("body").height()+showittryitheight);
});
$("#iframe1102").height($("#iframe1102").contents().find("body").height()+showittryitheight);
this.scrollIntoView(true);
editor1102.focus();
editor1102.setSize(null, "250");
$("#rendering1102").hide();
$("#rendered1102").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 editor1102 = CodeMirror.fromTextArea(document.getElementById("stepcodeTextarea1102"), {
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);
}
}
});
editor1102.on("change",function(doc){
if(!binded1102){
$(window).bind('beforeunload',function(){
binded1102 = true;
return "xxxx";
});
}
var newCode = doc.getValue();
code1102 = newCode;
$("textarea#stepcodeTextarea1102").val(newCode);
if(alreadyWriteCode1102!=code1102){
lastModifedTime1102 = new Date().getTime();
$("#rendering1102").show();
$("#rendered1102").hide();
}
// alert(doc.getValue());
});
$(".CodeMirror").addClass("form-control");
// var editor1102 = CodeMirror.fromTextArea(, {
// lineNumbers: true,
// styleActiveLine: true,
// matchBrackets: true,
// theme:"eclipse",
// });
editor1102.on("change",function(doc){
// alert(doc.getValue());
});
$("#tryDiv1102").hide();
});
$("div.codemirrorTips span").addClass("glyphicon glyphicon-asterisk");
试一下
1. 双击选中单词
2. 三击选中整行
3. CTRL+F 查找
4. F8 全屏编辑，再次点击恢复
渲染中
渲染完成
代码高亮插件双击即可选中，不过部分同学反应，通过代码高亮插件复制的代码无法在IDEA里正常显示，这里提供TEXTAREA的方式，方便复制，谢谢
1. 自行完成练习
根据练习目标尽量自己实现代码效果，期间会碰到疑问，难题，和自己不懂的地方，这些都是必要的过程
2. 带着疑问查看答案
完成过程中，碰到无法解决的问题，带着疑问，查看答案，分析答案的解决思路
3. 查看答案讲解视频
依然有不明白的地方，点开视频讲解，带着疑问，听视频讲解有问题的部分
4. 再做一遍
理解后，再从头做一遍，把有疑问的地方都捋清楚
5. 总结
最后再总结一遍，总结思路，总结解决办法，以后遇到类似的问题，怎么处理
HOW2J公众号，关注后实时获知布最新的教程和优惠活动，谢谢。
提问之前请登陆
