This browser does not support inline PDFs. Please download the PDF to view it: Download PDF
",C.innerHTML=j.replace(/\[url\]/g,e)),l("This browser does not support embedded PDFs",T))):l("Target element cannot be determined",T)};return{embed:function(e,t,o){return u(e,t,o)},pdfobjectversion:"2.2.3",supportsPDFs:p}})?n.apply(t,i):n)||(e.exports=r)},500:function(e,t,o){"use strict";var n=o(452);o.n(n).a},525:function(e,t,o){"use strict";o.r(t);var n=o(499),i=o.n(n),r={name:"PDF",props:{src:String},mounted:function(){i.a.embed(this.src,this.$refs.pdf)}},s=(o(500),o(1)),d=Object(s.a)(r,(function(){var e=this.$createElement;return(this._self._c||e)("div",{ref:"pdf"})}),[],!1,null,null,null);t.default=d.exports}}]);
\ No newline at end of file
diff --git a/assets/js/13.2868427c.js b/assets/js/13.2868427c.js
new file mode 100644
index 00000000..ec0aaa86
--- /dev/null
+++ b/assets/js/13.2868427c.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[13],{451:function(n,t,i){},498:function(n,t,i){"use strict";var a=i(451);i.n(a).a},524:function(n,t,i){"use strict";i.r(t);var a=i(496),s=i.n(a),e=(i(497),{name:"Mindmap",props:{mindData:Object},mounted:function(){new s.a(this.mindData.options).show(this.mindData.mind)}}),o=(i(498),i(1)),c=Object(o.a)(e,(function(){var n=this.$createElement;return(this._self._c||n)("div",{staticClass:"mindmap",attrs:{id:this.mindData.options.container}})}),[],!1,null,null,null);t.default=c.exports}}]);
\ No newline at end of file
diff --git a/assets/js/14.3d306795.js b/assets/js/14.3d306795.js
new file mode 100644
index 00000000..e500c643
--- /dev/null
+++ b/assets/js/14.3d306795.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[14],{453:function(t,e,n){},502:function(t,e,n){"use strict";var i=n(453);n.n(i).a},526:function(t,e,n){"use strict";n.r(e);n(62);var i=n(501),r={name:"tree",props:{tree:Object},mounted:function(){i.create({htmlId:this.tree.id,idKey:"id",hasFlatData:!0,relationnalField:"father",nodeWidth:100,nodeHeight:50,mainAxisNodeSpacing:1,isHorizontal:!1,hasPan:!0,renderNode:function(t){return"
\n
\n \n ").concat(t.data.text_1,"\n \n
\n
")},linkWidth:function(t){return 5},linkShape:"curve",linkColor:function(t){return"#B0BEC5"}}).refresh(this.tree.data)}},a=(n(502),n(1)),o=Object(a.a)(r,(function(){var t=this.$createElement;return(this._self._c||t)("div",{staticClass:"tree",style:{height:this.tree.height},attrs:{id:this.tree.id}})}),[],!1,null,null,null);e.default=o.exports}}]);
\ No newline at end of file
diff --git a/assets/js/15.2753a099.js b/assets/js/15.2753a099.js
new file mode 100644
index 00000000..16c1b44d
--- /dev/null
+++ b/assets/js/15.2753a099.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[15],{454:function(t,e,n){},503:function(t,e,n){"use strict";var i=n(454);n.n(i).a},559:function(t,e,n){"use strict";n.r(e);var i={functional:!0,props:{type:{type:String,default:"tip"},text:String,vertical:{type:String,default:"top"}},render:function(t,e){var n=e.props,i=e.slots;return t("span",{class:["badge",n.type],style:{verticalAlign:n.vertical}},n.text||i().default)}},r=(n(503),n(1)),a=Object(r.a)(i,void 0,void 0,!1,null,"18bf9ef6",null);e.default=a.exports}}]);
\ No newline at end of file
diff --git a/assets/js/16.84676d42.js b/assets/js/16.84676d42.js
new file mode 100644
index 00000000..220273bb
--- /dev/null
+++ b/assets/js/16.84676d42.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[16],{450:function(t,e,a){},495:function(t,e,a){"use strict";var r=a(450);a.n(r).a},519:function(t,e,a){"use strict";a.r(e);a(62),a(489),a(493),a(32),a(215),a(38),a(60),a(494);var r=a(424),n={mixins:[a(415).a],name:"TimeLine",components:{Common:r.a},data:function(){return{pages:[],tags:[],currentTag:"",currentPage:1,formatPages:{},formatPagesArr:[]}},props:{tag:{type:String,default:""}},computed:{trueCurrentTag:function(){return this.currentTag}},created:function(){this.getPages()},methods:{getPages:function(t){var e=this.$site.pages;e=this._filterPostData(e),this.pages=0==e.length?[]:e;for(var a=0,r=e.length;a=0&&n>=0?i-n:-1==i&&-1==n?0:-1==i?1:-1==n?-1:0},l.node.inherited=function(e,t){if(e&&t){if(e.id===t.id)return!0;if(e.isroot)return!0;for(var i=e.id,n=t;!n.isroot;)if((n=n.parent).id===i)return!0}return!1},l.node.prototype={get_location:function(){var e=this._data.view;return{x:e.abs_x,y:e.abs_y}},get_size:function(){var e=this._data.view;return{w:e.width,h:e.height}}},l.mind=function(){this.name=null,this.author=null,this.version=null,this.root=null,this.selected=null,this.nodes={}},l.mind.prototype={get_node:function(e){return e in this.nodes?this.nodes[e]:(n.warn("the node[id="+e+"] can not be found"),null)},set_root:function(e,t,i){null==this.root?(this.root=new l.node(e,0,t,i,!0),this._put_node(this.root)):n.error("root node is already exist")},add_node:function(e,t,i,o,r,d,a){if(!l.util.is_node(e)){var s=this.get_node(e);return s?this.add_node(s,t,i,o,r,d,a):(n.error("the parent_node[id="+e+"] can not be found."),null)}var h=r||-1,_=null;if(e.isroot){var u=l.direction.right;if(isNaN(d)){for(var c=e.children,f=c.length,v=0,p=0;p1&&v>0?l.direction.left:l.direction.right}else u=d!=l.direction.left?l.direction.right:l.direction.left;_=new l.node(t,h,i,o,!1,e,u,a)}else _=new l.node(t,h,i,o,!1,e,e.direction,a);return this._put_node(_)?(e.children.push(_),this._reindex(e)):(n.error("fail, the nodeid '"+_.id+"' has been already exist."),_=null),_},insert_node_before:function(e,t,i,o){if(!l.util.is_node(e)){var r=this.get_node(e);return r?this.insert_node_before(r,t,i,o):(n.error("the node_before[id="+e+"] can not be found."),null)}var d=e.index-.5;return this.add_node(e.parent,t,i,o,d)},get_node_before:function(e){if(!l.util.is_node(e)){var t=this.get_node(e);return t?this.get_node_before(t):(n.error("the node[id="+e+"] can not be found."),null)}if(e.isroot)return null;var i=e.index-2;return i>=0?e.parent.children[i]:null},insert_node_after:function(e,t,i,o){if(!l.util.is_node(e)){var r=this.get_node(node_before);return r?this.insert_node_after(r,t,i,o):(n.error("the node_after[id="+e+"] can not be found."),null)}var d=e.index+.5;return this.add_node(e.parent,t,i,o,d)},get_node_after:function(e){if(!l.util.is_node(e)){var t=this.get_node(e);return t?this.get_node_after(t):(n.error("the node[id="+e+"] can not be found."),null)}if(e.isroot)return null;var i=e.index;return e.parent.children.length>=i?e.parent.children[i]:null},move_node:function(e,t,i,o){if(!l.util.is_node(e)){var r=this.get_node(e);return r?this.move_node(r,t,i,o):(n.error("the node[id="+e+"] can not be found."),null)}return i||(i=e.parent.id),this._move_node(e,t,i,o)},_flow_node_direction:function(e,t){void 0===t?t=e.direction:e.direction=t;for(var i=e.children.length;i--;)this._flow_node_direction(e.children[i],t)},_move_node_internal:function(e,t){if(e&&t)if("_last_"==t)e.index=-1,this._reindex(e.parent);else if("_first_"==t)e.index=0,this._reindex(e.parent);else{var i=t?this.get_node(t):null;null!=i&&null!=i.parent&&i.parent.id==e.parent.id&&(e.index=i.index-.5,this._reindex(e.parent))}return e},_move_node:function(e,t,i,n){if(e&&i){if(e.parent.id!=i){for(var o=e.parent.children,r=o.length;r--;)if(o[r].id==e.id){o.splice(r,1);break}e.parent=this.get_node(i),e.parent.children.push(e)}e.parent.isroot?n==jsMind.direction.left?e.direction=n:e.direction=l.direction.right:e.direction=e.parent.direction,this._move_node_internal(e,t),this._flow_node_direction(e)}return e},remove_node:function(e){if(!l.util.is_node(e)){var t=this.get_node(e);return t?this.remove_node(t):(n.error("the node[id="+e+"] can not be found."),!1)}if(!e)return n.error("fail, the node can not be found"),!1;if(e.isroot)return n.error("fail, can not remove root node"),!1;null!=this.selected&&this.selected.id==e.id&&(this.selected=null);for(var i=e.children,o=i.length;o--;)this.remove_node(i[o]);i.length=0;for(var r=e.parent.children,d=r.length;d--;)if(r[d].id==e.id){r.splice(d,1);break}for(var a in delete this.nodes[e.id],e)delete e[a];return e=null,!0},_put_node:function(e){return e.id in this.nodes?(n.warn("the nodeid '"+e.id+"' has been already exist."),!1):(this.nodes[e.id]=e,!0)},_reindex:function(e){if(e instanceof l.node){e.children.sort(l.node.compare);for(var t=0;t0){i.children=[];for(var d=0;d0&&(o=i.length,a+=_)}return a},_extract_data:function(e){var t={};for(var i in e)"id"!=i&&"topic"!=i&&"parentid"!=i&&"isroot"!=i&&"direction"!=i&&"expanded"!=i&&(t[i]=e[i]);return t},_array:function(e,t){l.format.node_array._array_node(e.root,t)},_array_node:function(e,t){var i=l.format.node_array;if(e instanceof l.node){var n={id:e.id,topic:e.topic,expanded:e.expanded};if(e.parent&&(n.parentid=e.parent.id),e.isroot&&(n.isroot=!0),e.parent&&e.parent.isroot&&(n.direction=e.direction==l.direction.left?"left":"right"),null!=e.data){var o=e.data;for(var r in o)n[r]=o[r]}t.push(n);for(var d=e.children.length,a=0;a'},get_mind:function(e){var t=l.format.freemind,i=new l.mind;i.name=e.meta.name,i.author=e.meta.author,i.version=e.meta.version;var n=e.data,o=t._parse_xml(n),r=t._find_root(o);return t._load_node(i,null,r),i},get_data:function(e){var t=l.format.freemind,i={};i.meta={name:e.name,author:e.author,version:e.version},i.format="freemind";var n=[];return n.push('"),i.data=n.join(" "),i},_parse_xml:function(e){var t=null;window.DOMParser?t=(new DOMParser).parseFromString(e,"text/xml"):((t=new ActiveXObject("Microsoft.XMLDOM")).async=!1,t.loadXML(e));return t},_find_root:function(e){for(var t=e.childNodes,i=null,n=null,o=0;o'),t.push('');var o=e.data;if(null!=o)for(var r in o)t.push('');for(var d=e.children,a=0;a")}}},l.util={is_node:function(e){return!!e&&e instanceof l.node},ajax:{_xhr:function(){var e=null;if(window.XMLHttpRequest)e=new XMLHttpRequest;else try{e=new ActiveXObject("Microsoft.XMLHTTP")}catch(e){}return e},_eurl:function(e){return encodeURIComponent(e)},request:function(e,t,i,o,r){var d=l.util.ajax,a=null,s=[];for(var h in t)s.push(d._eurl(h)+"="+d._eurl(t[h]));s.length>0&&(a=s.join("&"));var _=d._xhr();_&&(_.onreadystatechange=function(){if(4==_.readyState)if(200==_.status||0==_.status){if("function"==typeof o){var e=l.util.json.string2json(_.responseText);o(null!=e?e:_.responseText)}}else"function"==typeof r?r(_):n.error("xhr request failed.",_)},i=i||"GET",_.open(i,e,!0),_.setRequestHeader("If-Modified-Since","0"),"POST"==i?(_.setRequestHeader("Content-Type","application/x-www-form-urlencoded;charset=utf-8"),_.send(a)):_.send())},get:function(e,t){return l.util.ajax.request(e,{},"GET",t)},post:function(e,t,i){return l.util.ajax.request(e,t,"POST",i)}},dom:{add_event:function(e,t,i){e.addEventListener?e.addEventListener(t,i,!1):e.attachEvent("on"+t,i)}},canvas:{bezierto:function(e,t,i,n,o){e.beginPath(),e.moveTo(t,i),e.bezierCurveTo(t+2*(n-t)/3,i,t,o,n,o),e.stroke()},lineto:function(e,t,i,n,o){e.beginPath(),e.moveTo(t,i),e.lineTo(n,o),e.stroke()},clear:function(e,t,i,n,o){e.clearRect(t,i,n,o)}},file:{read:function(e,t){var i=new FileReader;i.onload=function(){"function"==typeof t&&t(this.result,e.name)},i.readAsText(e)},save:function(e,i,n){var d;if("function"==typeof t.Blob)d=new Blob([e],{type:i});else{var a=new(t.BlobBuilder||t.MozBlobBuilder||t.WebKitBlobBuilder||t.MSBlobBuilder);a.append(e),d=a.getBlob(i)}if(navigator.msSaveBlob)navigator.msSaveBlob(d,n);else{var s=(t.URL||t.webkitURL).createObjectURL(d),l=r("a");if("download"in l){l.style.visibility="hidden",l.href=s,l.download=n,o.body.appendChild(l);var h=o.createEvent("MouseEvents");h.initEvent("click",!0,!0),l.dispatchEvent(h),o.body.removeChild(l)}else location.href=s}}},json:{json2string:function(e){if(JSON)try{return JSON.stringify(e)}catch(e){return n.warn(e),n.warn("can not convert to string"),null}},string2json:function(e){if(JSON)try{return JSON.parse(e)}catch(e){return n.warn(e),n.warn("can not parse to json"),null}},merge:function(e,t){for(var i in t)i in e?"object"!=typeof e[i]||"[object object]"!=Object.prototype.toString.call(e[i]).toLowerCase()||e[i].length?e[i]=t[i]:l.util.json.merge(e[i],t[i]):e[i]=t[i];return e}},uuid:{newid:function(){return((new Date).getTime().toString(16)+Math.random().toString(16).substr(2)).substr(2,16)}},text:{is_empty:function(e){return!e||0==e.replace(/\s*/,"").length}}},l.prototype={init:function(){if(!this.inited){this.inited=!0;var e=this.options,t={mode:e.mode,hspace:e.layout.hspace,vspace:e.layout.vspace,pspace:e.layout.pspace},i={container:e.container,support_html:e.support_html,hmargin:e.view.hmargin,vmargin:e.view.vmargin,line_width:e.view.line_width,line_color:e.view.line_color};this.data=new l.data_provider(this),this.layout=new l.layout_provider(this,t),this.view=new l.view_provider(this,i),this.shortcut=new l.shortcut_provider(this,e.shortcut),this.data.init(),this.layout.init(),this.view.init(),this.shortcut.init(),this._event_bind(),l.init_plugins(this)}},enable_edit:function(){this.options.editable=!0},disable_edit:function(){this.options.editable=!1},enable_event_handle:function(e){this.options.default_event_handle["enable_"+e+"_handle"]=!0},disable_event_handle:function(e){this.options.default_event_handle["enable_"+e+"_handle"]=!1},get_editable:function(){return this.options.editable},set_theme:function(e){var t=this.options.theme;this.options.theme=e||null,t!=this.options.theme&&(this.view.reset_theme(),this.view.reset_custom_style())},_event_bind:function(){this.view.add_event(this,"mousedown",this.mousedown_handle),this.view.add_event(this,"click",this.click_handle),this.view.add_event(this,"dblclick",this.dblclick_handle)},mousedown_handle:function(e){if(this.options.default_event_handle.enable_mousedown_handle){var t=e.target||event.srcElement,i=this.view.get_binded_nodeid(t);i?this.select_node(i):this.select_clear()}},click_handle:function(e){if(this.options.default_event_handle.enable_click_handle){var t=e.target||event.srcElement;if(this.view.is_expander(t)){var i=this.view.get_binded_nodeid(t);i&&this.toggle_node(i)}}},dblclick_handle:function(e){if(this.options.default_event_handle.enable_dblclick_handle&&this.get_editable()){var t=e.target||event.srcElement,i=this.view.get_binded_nodeid(t);i&&this.begin_edit(i)}},begin_edit:function(e){if(!l.util.is_node(e)){var t=this.get_node(e);return t?this.begin_edit(t):(n.error("the node[id="+e+"] can not be found."),!1)}this.get_editable()?this.view.edit_node_begin(e):n.error("fail, this mind map is not editable.")},end_edit:function(){this.view.edit_node_end()},toggle_node:function(e){if(!l.util.is_node(e)){var t=this.get_node(e);return t?this.toggle_node(t):void n.error("the node[id="+e+"] can not be found.")}e.isroot||(this.view.save_location(e),this.layout.toggle_node(e),this.view.relayout(),this.view.restore_location(e))},expand_node:function(e){if(!l.util.is_node(e)){var t=this.get_node(e);return t?this.expand_node(t):void n.error("the node[id="+e+"] can not be found.")}e.isroot||(this.view.save_location(e),this.layout.expand_node(e),this.view.relayout(),this.view.restore_location(e))},collapse_node:function(e){if(!l.util.is_node(e)){var t=this.get_node(e);return t?this.collapse_node(t):void n.error("the node[id="+e+"] can not be found.")}e.isroot||(this.view.save_location(e),this.layout.collapse_node(e),this.view.relayout(),this.view.restore_location(e))},expand_all:function(){this.layout.expand_all(),this.view.relayout()},collapse_all:function(){this.layout.collapse_all(),this.view.relayout()},expand_to_depth:function(e){this.layout.expand_to_depth(e),this.view.relayout()},_reset:function(){this.view.reset(),this.layout.reset(),this.data.reset()},_show:function(e){var t=e||l.format.node_array.example;this.mind=this.data.load(t),this.mind?(n.debug("data.load ok"),this.view.load(),n.debug("view.load ok"),this.layout.layout(),n.debug("layout.layout ok"),this.view.show(!0),n.debug("view.show ok"),this.invoke_event_handle(l.event_type.show,{data:[e]})):n.error("data.load error")},show:function(e){this._reset(),this._show(e)},get_meta:function(){return{name:this.mind.name,author:this.mind.author,version:this.mind.version}},get_data:function(e){var t=e||"node_tree";return this.data.get_data(t)},get_root:function(){return this.mind.root},get_node:function(e){return this.mind.get_node(e)},add_node:function(e,t,i,o){if(this.get_editable()){var r=this.mind.add_node(e,t,i,o);return r&&(this.view.add_node(r),this.layout.layout(),this.view.show(!1),this.view.reset_node_custom_style(r),this.expand_node(e),this.invoke_event_handle(l.event_type.edit,{evt:"add_node",data:[e.id,t,i,o],node:t})),r}return n.error("fail, this mind map is not editable"),null},insert_node_before:function(e,t,i,o){if(this.get_editable()){var r=l.util.is_node(e)?e.id:e,d=this.mind.insert_node_before(e,t,i,o);return d&&(this.view.add_node(d),this.layout.layout(),this.view.show(!1),this.invoke_event_handle(l.event_type.edit,{evt:"insert_node_before",data:[r,t,i,o],node:t})),d}return n.error("fail, this mind map is not editable"),null},insert_node_after:function(e,t,i,o){if(this.get_editable()){var r=l.util.is_node(e)?e.id:e,d=this.mind.insert_node_after(e,t,i,o);return d&&(this.view.add_node(d),this.layout.layout(),this.view.show(!1),this.invoke_event_handle(l.event_type.edit,{evt:"insert_node_after",data:[r,t,i,o],node:t})),d}return n.error("fail, this mind map is not editable"),null},remove_node:function(e){if(!l.util.is_node(e)){var t=this.get_node(e);return t?this.remove_node(t):(n.error("the node[id="+e+"] can not be found."),!1)}if(this.get_editable()){if(e.isroot)return n.error("fail, can not remove root node"),!1;var i=e.id,o=e.parent.id,r=this.get_node(o);return this.view.save_location(r),this.view.remove_node(e),this.mind.remove_node(e),this.layout.layout(),this.view.show(!1),this.view.restore_location(r),this.invoke_event_handle(l.event_type.edit,{evt:"remove_node",data:[i],node:o}),!0}return n.error("fail, this mind map is not editable"),!1},update_node:function(e,t){if(this.get_editable())if(l.util.text.is_empty(t))n.warn("fail, topic can not be empty");else{var i=this.get_node(e);if(i){if(i.topic===t)return n.info("nothing changed"),void this.view.update_node(i);i.topic=t,this.view.update_node(i),this.layout.layout(),this.view.show(!1),this.invoke_event_handle(l.event_type.edit,{evt:"update_node",data:[e,t],node:e})}}else n.error("fail, this mind map is not editable")},move_node:function(e,t,i,o){if(this.get_editable()){var r=this.mind.move_node(e,t,i,o);r&&(this.view.update_node(r),this.layout.layout(),this.view.show(!1),this.invoke_event_handle(l.event_type.edit,{evt:"move_node",data:[e,t,i,o],node:e}))}else n.error("fail, this mind map is not editable")},select_node:function(e){if(!l.util.is_node(e)){var t=this.get_node(e);return t?this.select_node(t):void n.error("the node[id="+e+"] can not be found.")}this.layout.is_visible(e)&&(this.mind.selected=e,this.view.select_node(e))},get_selected_node:function(){return this.mind?this.mind.selected:null},select_clear:function(){this.mind&&(this.mind.selected=null,this.view.select_clear())},is_node_visible:function(e){return this.layout.is_visible(e)},find_node_before:function(e){if(!l.util.is_node(e)){var t=this.get_node(e);return t?this.find_node_before(t):void n.error("the node[id="+e+"] can not be found.")}if(e.isroot)return null;var i=null;if(e.parent.isroot)for(var o=e.parent.children,r=null,d=null,a=0;a1&&(t+=this.opts.vspace*(i-1)),n=i;for(var l=t/2;n--;)(o=e[n])._data.layout.offset_y+=l;return t},_layout_offset_subnodes_height:function(e){for(var t=0,i=e.length,n=i,o=null,r=0,d=null,a=0,s=null;n--;)d=(o=e[n])._data.layout,null==s&&(s=o.parent._data),r=this._layout_offset_subnodes_height(o.children),o.expanded||(r=0),r=Math.max(o._data.view.height,r),d.outer_height=r,d.offset_y=a-r/2,a=a-r-this.opts.vspace,t+=r;i>1&&(t+=this.opts.vspace*(i-1)),n=i;for(var l=t/2;n--;)(o=e[n])._data.layout.offset_y+=l;return t},get_node_offset:function(e){var t=e._data.layout,i=null;if("_offset_"in t&&this.cache_valid?i=t._offset_:(i={x:-1,y:-1},t._offset_=i),-1==i.x||-1==i.y){var n=t.offset_x,o=t.offset_y;if(!e.isroot){var r=this.get_node_offset(e.parent);n+=r.x,o+=r.y}i.x=n,i.y=o}return i},get_node_point:function(e){var t=e._data.view,i=this.get_node_offset(e),n={};return n.x=i.x+t.width*(e._data.layout.direction-1)/2,n.y=i.y-t.height/2,n},get_node_point_in:function(e){return this.get_node_offset(e)},get_node_point_out:function(e){var t=e._data.layout,i=null;if("_pout_"in t&&this.cache_valid?i=t._pout_:(i={x:-1,y:-1},t._pout_=i),-1==i.x||-1==i.y)if(e.isroot)i.x=0,i.y=0;else{var n=e._data.view,o=this.get_node_offset(e);i.x=o.x+(n.width+this.opts.pspace)*e._data.layout.direction,i.y=o.y}return i},get_expander_point:function(e){var t=this.get_node_point_out(e),i={};return e._data.layout.direction==l.direction.right?i.x=t.x-this.opts.pspace:i.x=t.x,i.y=t.y-Math.ceil(this.opts.pspace/2),i},get_min_size:function(){var e=this.jm.mind.nodes,t=null,i=null;for(var n in e)t=e[n],(i=this.get_node_point_out(t)).x>this.bounds.e&&(this.bounds.e=i.x),i.x0){var o=this.jm.mind.root;this.part_layout(o),this.set_visible(o.children,!0)}},collapse_all:function(){var e,t=this.jm.mind.nodes,i=0;for(var n in t)(e=t[n]).expanded&&!e.isroot&&(e.expanded=!1,i++);if(i>0){var o=this.jm.mind.root;this.part_layout(o),this.set_visible(o.children,!0)}},expand_to_depth:function(e,t,i){if(!(e<1))for(var n=t||this.jm.mind.root.children,o=i||1,r=n.length,d=null;r--;)d=n[r],othis.maxZoom)return!1;this.actualZoom=e;for(var t=0;te){var i=this.get_view_offset();this.e_panel.scrollLeft=i.x-e/2}this.size.h>t&&(this.e_panel.scrollTop=(this.size.h-t)/2)},show:function(e){n.debug("view.show"),this.expand_size(),this._show(),e&&this._center_root()},relayout:function(){this.expand_size(),this._show()},save_location:function(e){var t=e._data.view;t._saved_location={x:parseInt(t.element.style.left)-this.e_panel.scrollLeft,y:parseInt(t.element.style.top)-this.e_panel.scrollTop}},restore_location:function(e){var t=e._data.view;this.e_panel.scrollLeft=parseInt(t.element.style.left)-t._saved_location.x,this.e_panel.scrollTop=parseInt(t.element.style.top)-t._saved_location.y},clear_nodes:function(){var e=this.jm.mind;if(null!=e){var t=e.nodes,i=null;for(var n in t)(i=t[n])._data.view.element=null,i._data.view.expander=null;this.e_nodes.innerHTML=""}},show_nodes:function(){var e=this.jm.mind.nodes,t=null,i=null,n=null,o=null,r=null,a="-",s=null,l=this.get_view_offset();for(var h in e)i=(s=(t=e[h])._data.view).element,n=s.expander,this.layout.is_visible(t)?(this.reset_node_custom_style(t),o=this.layout.get_node_point(t),s.abs_x=l.x+o.x,s.abs_y=l.y+o.y,i.style.left=l.x+o.x+"px",i.style.top=l.y+o.y+"px",i.style.display="",i.style.visibility="visible",!t.isroot&&t.children.length>0&&(a=t.expanded?"-":"+",r=this.layout.get_expander_point(t),n.style.left=l.x+r.x+"px",n.style.top=l.y+r.y+"px",n.style.display="",n.style.visibility="visible",d(n,a)),t.isroot||0!=t.children.length||(n.style.display="none",n.style.visibility="hidden")):(i.style.display="none",n.style.display="none")},reset_node_custom_style:function(e){this._reset_node_custom_style(e._data.view.element,e.data)},_reset_node_custom_style:function(e,t){if("background-color"in t&&(e.style.backgroundColor=t["background-color"]),"foreground-color"in t&&(e.style.color=t["foreground-color"]),"width"in t&&(e.style.width=t.width+"px"),"height"in t&&(e.style.height=t.height+"px"),"font-size"in t&&(e.style.fontSize=t["font-size"]+"px"),"font-weight"in t&&(e.style.fontWeight=t["font-weight"]),"font-style"in t&&(e.style.fontStyle=t["font-style"]),"background-image"in t){var i=t["background-image"];if(i.startsWith("data")&&t.width&&t.height){var n=new Image;n.onload=function(){var t=r("canvas");t.width=e.clientWidth,t.height=e.clientHeight;if(t.getContext){t.getContext("2d").drawImage(this,2,2,e.clientWidth,e.clientHeight);var i=t.toDataURL();e.style.backgroundImage="url("+i+")"}},n.src=i}else e.style.backgroundImage="url("+i+")";e.style.backgroundSize="99%","background-rotation"in t&&(e.style.transform="rotate("+t["background-rotation"]+"deg)")}},clear_node_custom_style:function(e){var t=e._data.view.element;t.style.backgroundColor="",t.style.color=""},clear_lines:function(e){var t=e||this.canvas_ctx;l.util.canvas.clear(t,0,0,this.size.w,this.size.h)},show_lines:function(e){this.clear_lines(e);var t=this.jm.mind.nodes,i=null,n=null,o=null,r=this.get_view_offset();for(var d in t)(i=t[d]).isroot||"visible"in i._data.layout&&!i._data.layout.visible||(n=this.layout.get_node_point_in(i),o=this.layout.get_node_point_out(i.parent),this.draw_line(o,n,r,e))},draw_line:function(e,t,i,n){var o=n||this.canvas_ctx;o.strokeStyle=this.opts.line_color,o.lineWidth=this.opts.line_width,o.lineCap="round",l.util.canvas.bezierto(o,e.x+i.x,e.y+i.y,t.x+i.x,t.y+i.y)}},l.shortcut_provider=function(e,t){this.jm=e,this.opts=t,this.mapping=t.mapping,this.handles=t.handles,this._mapping={}},l.shortcut_provider.prototype={init:function(){for(var e in l.util.dom.add_event(o,"keydown",this.handler.bind(this)),this.handles.addchild=this.handle_addchild,this.handles.addbrother=this.handle_addbrother,this.handles.editnode=this.handle_editnode,this.handles.delnode=this.handle_delnode,this.handles.toggle=this.handle_toggle,this.handles.up=this.handle_up,this.handles.down=this.handle_down,this.handles.left=this.handle_left,this.handles.right=this.handle_right,this.mapping)this.mapping[e]&&e in this.handles&&(this._mapping[this.mapping[e]]=this.handles[e])},enable_shortcut:function(){this.opts.enable=!0},disable_shortcut:function(){this.opts.enable=!1},handler:function(e){if(!this.jm.view.is_editing()){var t=e||event;if(!this.opts.enable)return!0;var i=t.keyCode;i in this._mapping&&this._mapping[i].call(this,this.jm,e)}},handle_addchild:function(e,t){var i=e.get_selected_node();if(i){var n=l.util.uuid.newid();e.add_node(i,n,"New Node")&&(e.select_node(n),e.begin_edit(n))}},handle_addbrother:function(e,t){var i=e.get_selected_node();if(i&&!i.isroot){var n=l.util.uuid.newid();e.insert_node_after(i,n,"New Node")&&(e.select_node(n),e.begin_edit(n))}},handle_editnode:function(e,t){var i=e.get_selected_node();i&&e.begin_edit(i)},handle_delnode:function(e,t){var i=e.get_selected_node();i&&!i.isroot&&(e.select_node(i.parent),e.remove_node(i))},handle_toggle:function(e,t){var i=t||event,n=e.get_selected_node();n&&(e.toggle_node(n.id),i.stopPropagation(),i.preventDefault())},handle_up:function(e,t){var i=t||event,n=e.get_selected_node();if(n){var o=e.find_node_before(n);if(!o){var r=e.find_node_before(n.parent);r&&r.children.length>0&&(o=r.children[r.children.length-1])}o&&e.select_node(o),i.stopPropagation(),i.preventDefault()}},handle_down:function(e,t){var i=t||event,n=e.get_selected_node();if(n){var o=e.find_node_after(n);if(!o){var r=e.find_node_after(n.parent);r&&r.children.length>0&&(o=r.children[0])}o&&e.select_node(o),i.stopPropagation(),i.preventDefault()}},handle_left:function(e,t){this._handle_direction(e,t,l.direction.left)},handle_right:function(e,t){this._handle_direction(e,t,l.direction.right)},_handle_direction:function(e,t,i){var n=t||event,o=e.get_selected_node(),r=null;if(o){if(o.isroot){for(var d=o.children,a=[],s=0;s0&&(r=a[Math.floor((l-1)/2)])}else r=o.parent;r&&e.select_node(r),n.stopPropagation(),n.preventDefault()}}},l.plugin=function(e,t){this.name=e,this.init=t},l.plugins=[],l.register_plugin=function(e){e instanceof l.plugin&&l.plugins.push(e)},l.init_plugins=function(e){t.setTimeout((function(){l._init_plugins(e)}),0)},l._init_plugins=function(e){for(var t=l.plugins.length,i=null,n=0;n2)if(43===(t=(c=m(c)).charCodeAt(0))||45===t){if(88===(n=c.charCodeAt(2))||120===n)return NaN}else if(48===t){switch(c.charCodeAt(1)){case 66:case 98:o=2,i=49;break;case 79:case 111:o=8,i=55;break;default:return+c}for(s=(r=c.slice(2)).length,a=0;ai)return NaN;return parseInt(r,o)}return+c};if(r("Number",!v(" 0o1")||!v("0b1")||v("+0x1"))){for(var k,b=function(e){var t=arguments.length<1?0:e,n=this;return n instanceof b&&(I?l((function(){y.valueOf.call(n)})):"Number"!=u(n))?c(new v(_(t)),n,b):_(t)},x=o?h(v):"MAX_VALUE,MIN_VALUE,NaN,NEGATIVE_INFINITY,POSITIVE_INFINITY,EPSILON,isFinite,isInteger,isNaN,isSafeInteger,MAX_SAFE_INTEGER,MIN_SAFE_INTEGER,parseFloat,parseInt,isInteger".split(","),w=0;x.length>w;w++)a(v,k=x[w])&&!a(b,k)&&p(b,k,g(v,k));b.prototype=y,y.constructor=b,s(i,"Number",b)}},402:function(e,t,n){var o=n(5),i=n(131);e.exports=function(e,t,n){var r,s;return i&&"function"==typeof(r=t.constructor)&&r!==n&&o(s=r.prototype)&&s!==n.prototype&&i(e,s),e}},413:function(e,t,n){var o=n(6),i=n(3),r=n(130),s=n(402),a=n(10).f,u=n(92).f,c=n(134),f=n(136),l=n(219),d=n(14),h=n(2),g=n(45).set,p=n(217),m=n(4)("match"),v=i.RegExp,y=v.prototype,I=/a/g,_=/a/g,k=new v(I)!==I,b=l.UNSUPPORTED_Y;if(o&&r("RegExp",!k||b||h((function(){return _[m]=!1,v(I)!=I||v(_)==_||"/a/i"!=v(I,"i")})))){for(var x=function(e,t){var n,o=this instanceof x,i=c(e),r=void 0===t;if(!o&&i&&e.constructor===x&&r)return e;k?i&&!r&&(e=e.source):e instanceof x&&(r&&(t=f.call(e)),e=e.source),b&&(n=!!t&&t.indexOf("y")>-1)&&(t=t.replace(/y/g,""));var a=s(k?new v(e,t):v(e,t),o?this:y,x);return b&&n&&g(a,{sticky:n}),a},w=function(e){e in x||a(x,e,{configurable:!0,get:function(){return v[e]},set:function(t){v[e]=t}})},E=u(v),C=0;E.length>C;)w(E[C++]);y.constructor=x,x.prototype=y,d(i,"RegExp",x)}p("RegExp")},414:function(e,t,n){var o=n(0),i=n(422);o({target:"Array",proto:!0,forced:i!==[].lastIndexOf},{lastIndexOf:i})},417:function(e,t,n){"use strict";var o,i=n(0),r=n(33).f,s=n(9),a=n(133),u=n(19),c=n(135),f=n(34),l="".endsWith,d=Math.min,h=c("endsWith");i({target:"String",proto:!0,forced:!!(f||h||(o=r(String.prototype,"endsWith"),!o||o.writable))&&!h},{endsWith:function(e){var t=String(u(this));a(e);var n=arguments.length>1?arguments[1]:void 0,o=s(t.length),i=void 0===n?o:d(s(n),o),r=String(e);return l?l.call(t,r,i):t.slice(i-r.length,i)===r}})},418:function(e,t,n){"use strict";var o=n(400);n.n(o).a},419:function(e,t,n){var o=n(19),i=/"/g;e.exports=function(e,t,n,r){var s=String(o(e)),a="<"+t;return""!==n&&(a+=" "+n+'="'+String(r).replace(i,""")+'"'),a+">"+s+""+t+">"}},420:function(e,t,n){var o=n(2);e.exports=function(e){return o((function(){var t=""[e]('"');return t!==t.toLowerCase()||t.split('"').length>3}))}},421:function(e,t){!function(e,t){"use strict";if(!e.setImmediate){var n,o,i,r,s,a=1,u={},c=!1,f=e.document,l=Object.getPrototypeOf&&Object.getPrototypeOf(e);l=l&&l.setTimeout?l:e,"[object process]"==={}.toString.call(e.process)?n=function(e){process.nextTick((function(){h(e)}))}:!function(){if(e.postMessage&&!e.importScripts){var t=!0,n=e.onmessage;return e.onmessage=function(){t=!1},e.postMessage("","*"),e.onmessage=n,t}}()?e.MessageChannel?((i=new MessageChannel).port1.onmessage=function(e){h(e.data)},n=function(e){i.port2.postMessage(e)}):f&&"onreadystatechange"in f.createElement("script")?(o=f.documentElement,n=function(e){var t=f.createElement("script");t.onreadystatechange=function(){h(e),t.onreadystatechange=null,o.removeChild(t),t=null},o.appendChild(t)}):n=function(e){setTimeout(h,0,e)}:(r="setImmediate$"+Math.random()+"$",s=function(t){t.source===e&&"string"==typeof t.data&&0===t.data.indexOf(r)&&h(+t.data.slice(r.length))},e.addEventListener?e.addEventListener("message",s,!1):e.attachEvent("onmessage",s),n=function(t){e.postMessage(r+t,"*")}),l.setImmediate=function(e){"function"!=typeof e&&(e=new Function(""+e));for(var t=new Array(arguments.length-1),o=0;o1&&(s=u(s,i(arguments[1]))),s<0&&(s=n+s);s>=0;s--)if(s in t&&t[s]===e)return s||0;return-1}:c},423:function(e,t,n){"use strict";var o=n(0),i=n(419);o({target:"String",proto:!0,forced:n(420)("link")},{link:function(e){return i(this,"a","href",e)}})},430:function(e,t){function n(e){return"function"==typeof e.value||(console.warn("[Vue-click-outside:] provided expression",e.expression,"is not a function."),!1)}function o(e){return void 0!==e.componentInstance&&e.componentInstance.$isServer}e.exports={bind:function(e,t,i){function r(t){if(i.context){var n=t.path||t.composedPath&&t.composedPath();n&&n.length>0&&n.unshift(t.target),e.contains(t.target)||function(e,t){if(!e||!t)return!1;for(var n=0,o=t.length;n=0&&(e._idleTimeoutId=setTimeout((function(){e._onTimeout&&e._onTimeout()}),t))},n(421),t.setImmediate="undefined"!=typeof self&&self.setImmediate||"undefined"!=typeof global&&global.setImmediate||this&&this.setImmediate,t.clearImmediate="undefined"!=typeof self&&self.clearImmediate||"undefined"!=typeof global&&global.clearImmediate||this&&this.clearImmediate},456:function(e,t,n){"use strict";n(23),n(218),n(128),n(93),n(38),n(220),n(213),n(214),n(132),n(61),n(129),n(413),n(94),n(417),n(60),n(216);var o=n(221),i=n.n(o),r=function(e,t){var n=arguments.length>2&&void 0!==arguments[2]?arguments[2]:null,o=i()(t,"title","");return i()(t,"frontmatter.tags")&&(o+=" ".concat(t.frontmatter.tags.join(" "))),n&&(o+=" ".concat(n)),s(e,o)},s=function(e,t){var n=function(e){return e.replace(/[-/\\^$*+?.()|[\]{}]/g,"\\$&")},o=new RegExp("[^\0-]"),i=e.split(/\s+/g).map((function(e){return e.trim()})).filter((function(e){return!!e}));if(o.test(e))return i.some((function(e){return t.toLowerCase().indexOf(e)>-1}));var r=e.endsWith(" ");return new RegExp(i.map((function(e,t){return i.length!==t+1||r?"(?=.*\\b".concat(n(e),"\\b)"):"(?=.*\\b".concat(n(e),")")})).join("")+".+","gi").test(t)},a={name:"SearchBox",data:function(){return{query:"",focused:!1,focusIndex:0,placeholder:void 0}},computed:{showSuggestions:function(){return this.focused&&this.suggestions&&this.suggestions.length},suggestions:function(){var e=this.query.trim().toLowerCase();if(e){for(var t=this.$site.pages,n=this.$site.themeConfig.searchMaxSuggestions||5,o=this.$localePath,i=[],s=0;s=n);s++){var a=t[s];if(this.getPageLocalePath(a)===o&&this.isSearchable(a))if(r(e,a))i.push(a);else if(a.headers)for(var u=0;u=n);u++){var c=a.headers[u];c.title&&r(e,a,c.title)&&i.push(Object.assign({},a,{path:a.path+"#"+c.slug,header:c}))}}return i}},alignRight:function(){return(this.$site.themeConfig.nav||[]).length+(this.$site.repo?1:0)<=2}},mounted:function(){this.placeholder=this.$site.themeConfig.searchPlaceholder||"",document.addEventListener("keydown",this.onHotkey)},beforeDestroy:function(){document.removeEventListener("keydown",this.onHotkey)},methods:{getPageLocalePath:function(e){for(var t in this.$site.locales||{})if("/"!==t&&0===e.path.indexOf(t))return t;return"/"},isSearchable:function(e){var t=null;return null===t||(t=Array.isArray(t)?t:new Array(t)).filter((function(t){return e.path.match(t)})).length>0},onHotkey:function(e){e.srcElement===document.body&&["s","/"].includes(e.key)&&(this.$refs.input.focus(),e.preventDefault())},onUp:function(){this.showSuggestions&&(this.focusIndex>0?this.focusIndex--:this.focusIndex=this.suggestions.length-1)},onDown:function(){this.showSuggestions&&(this.focusIndex "+e._s(t.header.title))]):e._e()])])})),0):e._e()])}),[],!1,null,null,null);t.a=c.exports}}]);
\ No newline at end of file
diff --git a/assets/js/20.883a6ff5.js b/assets/js/20.883a6ff5.js
new file mode 100644
index 00000000..953fce26
--- /dev/null
+++ b/assets/js/20.883a6ff5.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[20],{529:function(t,s,a){"use strict";a.r(s);var n=a(1),e=Object(n.a)({},(function(){var t=this,s=t.$createElement,a=t._self._c||s;return a("ContentSlotsDistributor",{attrs:{"slot-key":t.$parent.slotKey}},[a("p",[t._v("JavaScript 是網頁開發者必學的三種語言之一,也是最流行的腳本語言")]),t._v(" "),a("h2",{attrs:{id:"javascript-的用途"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#javascript-的用途"}},[t._v("#")]),t._v(" JavaScript 的用途")]),t._v(" "),a("p",[t._v("網頁開發者必學的三種語言,分別是 "),a("code",[t._v("HTML")]),t._v(" 、 "),a("code",[t._v("CSS")]),t._v(" 和 "),a("code",[t._v("JavaScript")])]),t._v(" "),a("ul",[a("li",[a("code",[t._v("HTML")]),t._v(" 定義網頁的內容,網頁包含了什麼文字、什麼表格、什麼圖片等等")]),t._v(" "),a("li",[a("code",[t._v("CSS")]),t._v(" 規定網頁的樣式,文字應該是什麼顏色、圖片應該要多大、版面的排列等等")]),t._v(" "),a("li",[a("code",[t._v("JavaScript")]),t._v(" 運用在網頁上可以對使用者行為進行程式設計,或製作動畫效果等等")])]),t._v(" "),a("p",[a("code",[t._v("JavaScript")]),t._v(" 也可以運行在 "),a("code",[t._v("Node.js")]),t._v(" 的伺服器環境,進行後端資料處理等功能。")]),t._v(" "),a("h3",{attrs:{id:"網頁前端"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#網頁前端"}},[t._v("#")]),t._v(" 網頁前端")]),t._v(" "),a("ul",[a("li",[t._v("能夠改變 HTML 內容")])]),t._v(" "),a("div",{staticClass:"vuepress-plugin-demo-block__wrapper",staticStyle:{display:"none"},attrs:{"data-config":"","data-type":"vanilla","data-code":"%3Chtml%3E%0A%20%20%3Ch1%20id%3D%22example1-h1%22%3E%E6%88%91%E6%98%AF%E4%B8%80%E6%AE%B5%E6%96%87%E5%AD%97%3C%2Fh1%3E%0A%20%20%3Cinput%20type%3D%22button%22%20id%3D%22example1-btn%22%20value%3D%22%E9%BB%9E%E6%88%91%E4%BF%AE%E6%94%B9%E6%96%87%E5%AD%97%22%3E%0A%3C%2Fhtml%3E%0A%3Cscript%3E%0A%20%20let%20h1%20%3D%20document.getElementById(%22example1-h1%22)%3B%0A%20%20let%20btn%20%3D%20document.getElementById(%22example1-btn%22)%3B%0A%20%20btn.onclick%20%3D%20()%20%3D%3E%20%7B%0A%20%20%20%20%20%20h1.innerText%20%3D%20%22%E6%96%87%E5%AD%97%E8%A2%AB%E4%BF%AE%E6%94%B9%E5%9B%89%22%3B%0A%20%20%7D%0A%3C%2Fscript%3E%0A"}},[a("div",{staticClass:"vuepress-plugin-demo-block__display"},[a("div",{staticClass:"vuepress-plugin-demo-block__app"})]),t._v(" "),a("div",{staticClass:"vuepress-plugin-demo-block__code"},[a("div",{staticClass:"language-html line-numbers-mode"},[a("pre",{pre:!0,attrs:{class:"language-html"}},[a("code",[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("html")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("h1")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("id")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("example1-h1"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("我是一段文字"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")]),t._v("h1")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("input")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("type")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("button"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("id")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("example1-btn"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("value")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("點我修改文字"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")]),t._v("html")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("script")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),a("span",{pre:!0,attrs:{class:"token script"}},[a("span",{pre:!0,attrs:{class:"token language-javascript"}},[t._v("\n "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" h1 "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" document"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("getElementById")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v('"example1-h1"')]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" btn "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" document"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("getElementById")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v('"example1-btn"')]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n btn"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function-variable function"}},[t._v("onclick")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n h1"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("innerText "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v('"文字被修改囉"')]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])]),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")]),t._v("script")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n")])]),t._v(" "),a("div",{staticClass:"line-numbers-wrapper"},[a("span",{staticClass:"line-number"},[t._v("1")]),a("br"),a("span",{staticClass:"line-number"},[t._v("2")]),a("br"),a("span",{staticClass:"line-number"},[t._v("3")]),a("br"),a("span",{staticClass:"line-number"},[t._v("4")]),a("br"),a("span",{staticClass:"line-number"},[t._v("5")]),a("br"),a("span",{staticClass:"line-number"},[t._v("6")]),a("br"),a("span",{staticClass:"line-number"},[t._v("7")]),a("br"),a("span",{staticClass:"line-number"},[t._v("8")]),a("br"),a("span",{staticClass:"line-number"},[t._v("9")]),a("br"),a("span",{staticClass:"line-number"},[t._v("10")]),a("br"),a("span",{staticClass:"line-number"},[t._v("11")]),a("br")])])]),t._v(" "),a("div",{staticClass:"vuepress-plugin-demo-block__footer"})]),t._v(" "),a("ul",[a("li",[t._v("能夠改變 HTML 屬性")])]),t._v(" "),a("div",{staticClass:"vuepress-plugin-demo-block__wrapper",staticStyle:{display:"none"},attrs:{"data-config":"","data-type":"vanilla","data-code":"%3Chtml%3E%0A%20%20%3Ca%20href%3D%22https%3A%2F%2Fgoogle.com%22%20id%3D%22example2-a%22%20target%3D%22_blank%22%3E%E9%BB%9E%E6%88%91%E5%8E%BB%20Google%3C%2Fa%3E%3Cbr%3E%3Cbr%3E%0A%20%20%3Cinput%20type%3D%22button%22%20id%3D%22example2-btn%22%20value%3D%22%E9%BB%9E%E6%88%91%E6%94%B9%E8%AE%8A%E9%80%A3%E7%B5%90%E7%B6%B2%E5%9D%80%22%3E%0A%3C%2Fhtml%3E%0A%3Cscript%3E%0A%20%20let%20link%20%3D%20document.getElementById(%22example2-a%22)%3B%0A%20%20let%20btn%20%3D%20document.getElementById(%22example2-btn%22)%3B%0A%20%20btn.onclick%20%3D%20()%20%3D%3E%20%7B%0A%20%20%20%20%20%20link.setAttribute(%22href%22%2C%20%22https%3A%2F%2Ffb.com%22)%3B%0A%20%20%20%20%20%20link.innerText%20%3D%20%22%E9%BB%9E%E6%88%91%E5%8E%BB%20Facebook%22%3B%0A%20%20%7D%0A%3C%2Fscript%3E%0A"}},[a("div",{staticClass:"vuepress-plugin-demo-block__display"},[a("div",{staticClass:"vuepress-plugin-demo-block__app"})]),t._v(" "),a("div",{staticClass:"vuepress-plugin-demo-block__code"},[a("div",{staticClass:"language-html line-numbers-mode"},[a("pre",{pre:!0,attrs:{class:"language-html"}},[a("code",[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("html")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("a")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("href")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("https://google.com"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("id")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("example2-a"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("target")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("_blank"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("點我去 Google"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")]),t._v("a")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("br")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("br")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("input")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("type")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("button"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("id")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("example2-btn"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("value")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("點我改變連結網址"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")]),t._v("html")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("script")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),a("span",{pre:!0,attrs:{class:"token script"}},[a("span",{pre:!0,attrs:{class:"token language-javascript"}},[t._v("\n "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" link "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" document"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("getElementById")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v('"example2-a"')]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" btn "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" document"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("getElementById")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v('"example2-btn"')]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n btn"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function-variable function"}},[t._v("onclick")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n link"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("setAttribute")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v('"href"')]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v('"https://fb.com"')]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n link"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("innerText "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v('"點我去 Facebook"')]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])]),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")]),t._v("script")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n")])]),t._v(" "),a("div",{staticClass:"line-numbers-wrapper"},[a("span",{staticClass:"line-number"},[t._v("1")]),a("br"),a("span",{staticClass:"line-number"},[t._v("2")]),a("br"),a("span",{staticClass:"line-number"},[t._v("3")]),a("br"),a("span",{staticClass:"line-number"},[t._v("4")]),a("br"),a("span",{staticClass:"line-number"},[t._v("5")]),a("br"),a("span",{staticClass:"line-number"},[t._v("6")]),a("br"),a("span",{staticClass:"line-number"},[t._v("7")]),a("br"),a("span",{staticClass:"line-number"},[t._v("8")]),a("br"),a("span",{staticClass:"line-number"},[t._v("9")]),a("br"),a("span",{staticClass:"line-number"},[t._v("10")]),a("br"),a("span",{staticClass:"line-number"},[t._v("11")]),a("br"),a("span",{staticClass:"line-number"},[t._v("12")]),a("br")])])]),t._v(" "),a("div",{staticClass:"vuepress-plugin-demo-block__footer"})]),t._v(" "),a("ul",[a("li",[t._v("能夠改變 HTML 樣式 (CSS)")])]),t._v(" "),a("div",{staticClass:"vuepress-plugin-demo-block__wrapper",staticStyle:{display:"none"},attrs:{"data-config":"","data-type":"vanilla","data-code":"%3Chtml%3E%0A%20%20%3Ch1%20id%3D%22example3-h1%22%3E%E6%88%91%E6%98%AF%E4%B8%80%E6%AE%B5%E6%96%87%E5%AD%97%3C%2Fh1%3E%0A%20%20%3Cinput%20type%3D%22button%22%20id%3D%22example3-btn%22%20value%3D%22%E9%BB%9E%E6%88%91%E6%94%B9%E8%AE%8A%E6%96%87%E5%AD%97%E9%A1%8F%E8%89%B2%22%3E%0A%3C%2Fhtml%3E%0A%3Cscript%3E%0A%20%20let%20h1%20%3D%20document.getElementById(%22example3-h1%22)%3B%0A%20%20let%20btn%20%3D%20document.getElementById(%22example3-btn%22)%3B%0A%20%20btn.onclick%20%3D%20()%20%3D%3E%20%7B%0A%20%20%20%20%20%20h1.style.color%20%3D%20%22red%22%3B%0A%20%20%7D%0A%3C%2Fscript%3E%0A"}},[a("div",{staticClass:"vuepress-plugin-demo-block__display"},[a("div",{staticClass:"vuepress-plugin-demo-block__app"})]),t._v(" "),a("div",{staticClass:"vuepress-plugin-demo-block__code"},[a("div",{staticClass:"language-html line-numbers-mode"},[a("pre",{pre:!0,attrs:{class:"language-html"}},[a("code",[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("html")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("h1")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("id")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("example3-h1"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("我是一段文字"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")]),t._v("h1")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("input")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("type")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("button"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("id")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("example3-btn"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("value")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("點我改變文字顏色"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")]),t._v("html")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("script")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),a("span",{pre:!0,attrs:{class:"token script"}},[a("span",{pre:!0,attrs:{class:"token language-javascript"}},[t._v("\n "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" h1 "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" document"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("getElementById")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v('"example3-h1"')]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" btn "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" document"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("getElementById")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v('"example3-btn"')]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n btn"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function-variable function"}},[t._v("onclick")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n h1"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("style"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("color "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v('"red"')]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])]),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")]),t._v("script")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n")])]),t._v(" "),a("div",{staticClass:"line-numbers-wrapper"},[a("span",{staticClass:"line-number"},[t._v("1")]),a("br"),a("span",{staticClass:"line-number"},[t._v("2")]),a("br"),a("span",{staticClass:"line-number"},[t._v("3")]),a("br"),a("span",{staticClass:"line-number"},[t._v("4")]),a("br"),a("span",{staticClass:"line-number"},[t._v("5")]),a("br"),a("span",{staticClass:"line-number"},[t._v("6")]),a("br"),a("span",{staticClass:"line-number"},[t._v("7")]),a("br"),a("span",{staticClass:"line-number"},[t._v("8")]),a("br"),a("span",{staticClass:"line-number"},[t._v("9")]),a("br"),a("span",{staticClass:"line-number"},[t._v("10")]),a("br"),a("span",{staticClass:"line-number"},[t._v("11")]),a("br")])])]),t._v(" "),a("div",{staticClass:"vuepress-plugin-demo-block__footer"})]),t._v(" "),a("ul",[a("li",[t._v("能夠偵測使用者對網頁的操作 (滑鼠點擊、鍵盤按鍵等)")])]),t._v(" "),a("div",{staticClass:"vuepress-plugin-demo-block__wrapper",staticStyle:{display:"none"},attrs:{"data-config":"","data-type":"vanilla","data-code":"%3Chtml%3E%0A%20%20%3Cimg%20id%3D%22example4-img%22%20src%3D%22%2FF2E-book%2Fimages%2Fch1%2Flight_off.gif%22%20width%3D%22100%22%20height%3D%22180%22%3E%0A%20%20%E9%BB%9E%E6%93%8A%E7%87%88%E6%B3%A1%E4%BE%86%E9%96%8B%E9%97%9C%E9%80%99%E7%9B%9E%E7%87%88%0A%3C%2Fhtml%3E%0A%3Cscript%3E%0A%20%20let%20img%20%3D%20document.getElementById(%22example4-img%22)%3B%0A%20%20img.onclick%20%3D%20()%20%3D%3E%20%7B%0A%20%20%20%20%20%20if(img.src.match(%22on%22))%20img.src%20%3D%20%22%2FF2E-book%2Fimages%2Fch1%2Flight_off.gif%22%3B%0A%20%20%20%20%20%20else%20img.src%20%3D%20%22%2FF2E-book%2Fimages%2Fch1%2Flight_on.gif%22%3B%0A%20%20%7D%0A%3C%2Fscript%3E%0A"}},[a("div",{staticClass:"vuepress-plugin-demo-block__display"},[a("div",{staticClass:"vuepress-plugin-demo-block__app"})]),t._v(" "),a("div",{staticClass:"vuepress-plugin-demo-block__code"},[a("div",{staticClass:"language-html line-numbers-mode"},[a("pre",{pre:!0,attrs:{class:"language-html"}},[a("code",[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("html")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("img")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("id")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("example4-img"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("src")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("/F2E-book/images/ch1/light_off.gif"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("width")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("100"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("height")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("180"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n 點擊燈泡來開關這盞燈\n"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")]),t._v("html")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("script")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),a("span",{pre:!0,attrs:{class:"token script"}},[a("span",{pre:!0,attrs:{class:"token language-javascript"}},[t._v("\n "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" img "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" document"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("getElementById")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v('"example4-img"')]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n img"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function-variable function"}},[t._v("onclick")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("if")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("img"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("src"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("match")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v('"on"')]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" img"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("src "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v('"/F2E-book/images/ch1/light_off.gif"')]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("else")]),t._v(" img"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("src "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v('"/F2E-book/images/ch1/light_on.gif"')]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])]),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")]),t._v("script")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n")])]),t._v(" "),a("div",{staticClass:"line-numbers-wrapper"},[a("span",{staticClass:"line-number"},[t._v("1")]),a("br"),a("span",{staticClass:"line-number"},[t._v("2")]),a("br"),a("span",{staticClass:"line-number"},[t._v("3")]),a("br"),a("span",{staticClass:"line-number"},[t._v("4")]),a("br"),a("span",{staticClass:"line-number"},[t._v("5")]),a("br"),a("span",{staticClass:"line-number"},[t._v("6")]),a("br"),a("span",{staticClass:"line-number"},[t._v("7")]),a("br"),a("span",{staticClass:"line-number"},[t._v("8")]),a("br"),a("span",{staticClass:"line-number"},[t._v("9")]),a("br"),a("span",{staticClass:"line-number"},[t._v("10")]),a("br"),a("span",{staticClass:"line-number"},[t._v("11")]),a("br")])])]),t._v(" "),a("div",{staticClass:"vuepress-plugin-demo-block__footer"})]),t._v(" "),a("h3",{attrs:{id:"網頁後端"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#網頁後端"}},[t._v("#")]),t._v(" 網頁後端")]),t._v(" "),a("ul",[a("li",[t._v("能以 Node.js 開發網頁後端")]),t._v(" "),a("li",[t._v("能使用和前端一樣的語言進行開發")]),t._v(" "),a("li",[t._v("Node.js 以 Google 的 V8 引擎打造,非常快速")]),t._v(" "),a("li",[t._v("有相當多的套件可以使用,擴充性高")])]),t._v(" "),a("h3",{attrs:{id:"其他"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#其他"}},[t._v("#")]),t._v(" 其他")]),t._v(" "),a("ul",[a("li",[t._v("能以 "),a("a",{attrs:{href:"https://electronjs.org/",target:"_blank",rel:"noopener noreferrer"}},[t._v("Electron"),a("OutboundLink")],1),t._v(" 開發跨平台應用程式")]),t._v(" "),a("li",[t._v("能以 "),a("a",{attrs:{href:"https://greasyfork.org/zh-TW",target:"_blank",rel:"noopener noreferrer"}},[t._v("UserScript"),a("OutboundLink")],1),t._v(" 修改網頁,改善瀏覽體驗,"),a("s",[t._v("或做壞壞的事")])])]),t._v(" "),a("h2",{attrs:{id:"javascript-的缺點"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#javascript-的缺點"}},[t._v("#")]),t._v(" JavaScript 的缺點")]),t._v(" "),a("ul",[a("li",[t._v("在網頁前端以明碼顯示,安全性不高")]),t._v(" "),a("li",[t._v("規範標準不一,有 "),a("code",[t._v("CommonJS")]),t._v(" 和 "),a("code",[t._v("ECMAScript")]),t._v(" 等")]),t._v(" "),a("li",[t._v("JavaScript 程式結尾可以不加 "),a("code",[t._v(";")]),t._v(",程式在執行時會自動補上,但是會發生補錯位置的情況")]),t._v(" "),a("li",[a("code",[t._v("+")]),t._v(" 號不只可以做數學運算,還可以連接文字"),a("br"),t._v(" "),a("img",{staticStyle:{margin:"10px 0"},attrs:{src:"/F2E-book/images/ch1/meme_js.jpeg",height:"400"}})]),t._v(" "),a("li",[t._v("以 Node.js 開發的專案套件佔了空間一大半"),a("br"),t._v(" "),a("img",{staticStyle:{margin:"10px 0"},attrs:{src:"/F2E-book/images/ch1/meme_node1.png",height:"300"}}),a("br"),t._v(" "),a("img",{staticStyle:{margin:"10px 0"},attrs:{src:"/F2E-book/images/ch1/meme_node2.png",height:"300"}})])]),t._v(" "),a("h2",{attrs:{id:"第一個-javascript-程式"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#第一個-javascript-程式"}},[t._v("#")]),t._v(" 第一個 JavaScript 程式")]),t._v(" "),a("p",[t._v("JavaScript 需要用 "),a("code",[t._v("
+
+
+
+
+
+
+