电脑/html5/javascript语言/javascript语言学习基础篇.html

<!DOCTYPE html>
<html>
<head>
<!-- 2016-07-30 六 23:07 -->
<meta  charset="utf-8">
<meta  name="viewport" content="width=device-width, initial-scale=1">
<title>javascript学习基础篇</title>
<meta  name="generator" content="Org-mode">
<meta  name="author" content="万泽(德山书生)">
<meta  name="description" content="制作者邮箱：a358003542@gmail.com"
>
<style type="text/css">
body {
    margin-right: auto;
    margin-left: auto;
}

.title {
    display: block;
    text-align: center;
    padding: 10px;
}

.center-block {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.underline{
    text-decoration: underline;
}
   html, body {
    margin: 0;
    padding: 0;
    font-family:"Microsoft YaHei",Arial,Helvetica,sans-serif,"宋体";
    font-size: 1em;
}

#content {
    display: block;
    margin-left: auto;
    margin-right: auto;
    background:#fcfcfc;
    height:100%;
    margin-left:300px;
    max-width:800px;
    min-height:100%;
    padding:1.618em 3.236em;
}

code {
    padding: 2px 4px;
    color: #c7254e;
    background-color: #f9f2f4;
    border-radius: 4px;
}

pre {
    max-width: 100%;
    display: block;
    padding: 9.5px;
    margin: 0 0 10px;
    font-size: 13px;
    line-height: 1.42857143;
    color: #333;
    background-color: #f5f5f5;
    border: 1px solid #ccc;
    border-radius: 4px;
    overflow : auto;
}


blockquote {
    padding: 10px 20px;
    margin: 0 0 20px;
    font-size: 17.5px;
    border-left: 5px solid #eee;
}

li{
    margin-top: 0.5em;
    margin-bottom: 0.5em;
}

p{
    text-indent:2em;
    line-height:150%;
}

/* dl */
dl {
    margin-top: 0;
    margin-bottom: 20px;
}
dt {
    font-weight: 700;
    line-height: 150%;
    margin-top: 0.5em;
    margin-bottom: 0.5em;
}
dd {
    line-height: 150%;
}

@media (min-width: 768px) {
  dt {
    white-space: nowrap;
  }
}

video{
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
}

figure p{
    text-indent:0em;
}
img{
    max-width: 100%;
}

embed{
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
}

figure{
    text-align: center;
}

/*  class  */
.FRAMED{
    max-width:100%;
    border:1px solid ;
    padding: 1em;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.NOTECARD{
    width: 35%;
    position:relative;
    right: -30%;
    padding: 1em;
    margin:0 auto;
    border: solid 1px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

/*
table
*/
table {
    border-collapse: collapse;
    border-spacing: 0;
    margin: 16px 0;
    empty-cells: show;
    border: 1px solid #ccc;
    width: 100%;
    display: table;
}

table tr {
    border-bottom: 1px solid #ddd;
}
table th,table td{
    padding:8px;
}

table tr:nth-child(even) {
    background-color: #f1f1f1;
}


ul,ol,dl{
    line-height:24px;
    list-style-image:none;
    /* list-style:none; */
    margin:0px 0px 24px 0px;
    padding:0;
}

li{
    margin-left: 24px;
}

dd{
    margin:0;
}

#content .section ul,#content .toctree-wrapper ul,article ul{
    list-style:disc;
    line-height:24px;
    margin-bottom:24px}

#content .section ul li,#content .toctree-wrapper ul li,article ul li{
    list-style:disc;
    margin-left:24px}

#content .section ul li p:last-child,#content .toctree-wrapper ul li p:last-child,article ul li p:last-child{
                                                                                                                                  margin-bottom:0}

#content .section ul li ul,#content .toctree-wrapper ul li ul,article ul li ul{
    margin-bottom:0}

#content .section ul li li,#content .toctree-wrapper ul li li,article ul li li{
    list-style:circle}

#content .section ul li li li,#content .toctree-wrapper ul li li li,article ul li li li{
    list-style:square}

#content .section ul li ol li,#content .toctree-wrapper ul li ol li,article ul li ol li{
    list-style:decimal}

#content .section ol,#content ol,article ol{
    list-style:decimal;
    line-height:24px;
    margin-bottom:24px}

#content .section ol li,#content ol li,article ol li{
    list-style:decimal;
    margin-left:24px}

#content .section ol li p:last-child,#content ol li p:last-child,article ol li p:last-child{
                                                                                                                           margin-bottom:0}

#content .section ol li ul,#content ol li ul,article ol li ul{
    margin-bottom:0}

#content .section ol li ul li,#content ol li ul li,article ol li ul li{
    list-style:disc}

dl dt{
    font-weight:bold;
}

dl p,dl table,dl ul,dl ol{
    margin-bottom:12px !important;
}

dl dd{
    margin:0 0 12px 24px;
}

@media print{
    .codeblock,pre.src{
        white-space:pre.src-wrap}
}

@media print{
    html,body,section{
        background:none !important}

    *{
        box-shadow:none !important;
        text-shadow:none !important;
        filter:none !important;
        -ms-filter:none !important}

    a,a:visited{
          text-decoration:underline}

    pre.src,blockquote{
        page-break-inside:avoid}

    thead{
        display:table-header-group}

    tr,img{
        page-break-inside:avoid}

    img{
        max-width:100% !important}

    @page{
        margin:0.5cm}

    p,h2,h3{
        orphans:3;
        widows:3}

    h2,h3{
        page-break-after:avoid}
}

@media print{
    #postamble{
        display:none}

    #content{
        margin-left:0}
}

@media print{
    #table-of-contents{
        display:none}

    @page{
        size: auto;
        margin: 25mm 25mm 25mm 25mm;}

    body {
        margin: 0px;}
}

@media screen and (max-width: 768px){
}

@media only screen and (max-width: 480px){
}

@media screen and (max-width: 768px){
    .tablet-hide{
        display:none}
}

@media screen and (max-width: 480px){
    .mobile-hide{
        display:none}
}

@media screen and (max-width: 480px){
}

@media screen and (max-width: 768px){
    #content{
        margin-left:0;
        padding: 1em 1em;}

    #content #content{
        padding:1.618em}

    #content.shift{
        position:fixed;
        min-width:100%;
        left:85%;
        top:0;
        height:100%;
        overflow:hidden}
}

@media screen and (min-width: 1400px){
    #content{
        background:rgba(0,0,0,0.05)}

    #content{
        background:#fcfcfc}
}

@media screen and (max-width: 768px){
    #copyright{
        width:85%;
        display:none}

    #copyright.shift{
        display:block}

    img{
        width:100%;
        height:auto}
}

@media screen and (max-width: 480px){
    #content .sidebar{
        width:100%}
}


.figure p{
    color:#000;
    font:italic 85%/1 arial,sans-serif;
    padding:1em 0;
}

.rotate-90{
    -webkit-transform:rotate(90deg);
    -moz-transform:rotate(90deg);
    -ms-transform:rotate(90deg);
    -o-transform:rotate(90deg);
    transform:rotate(90deg);
}

.rotate-270{
    -webkit-transform:rotate(270deg);
    -moz-transform:rotate(270deg);
    -ms-transform:rotate(270deg);
    -o-transform:rotate(270deg);
    transform:rotate(270deg);
}

#toggle-sidebar,
#table-of-contents .close-sidebar {
    display: none;
}

@media screen and (max-width: 768px) {
    #table-of-contents {
        display: none;
        width: 60%;
    }

    #table-of-contents h2 a {
        display: block;
    }

    #table-of-contents:target {
        display: block;
    }

    #copyright, #postamble {
        display: none;
    }

    #toggle-sidebar {
        background-color: #2980B9;
        display: block;
        margin-bottom: 1.6em;
        padding: 0.6em;
        text-align: center;
    }

    #toggle-sidebar h2 {
        color: white;
        font-size: 100%;
        line-height: 50px;
        margin: 0;
        padding: 0;
    }

    #table-of-contents .close-sidebar {
       color: rgba(255, 255, 255, 0.3);
       display: inline-block;
       margin: 0px 10px 0px 45px;
       padding: 10px;
    }
}

*{
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
    box-sizing:border-box;
}

figcaption,figure,footer,header,hgroup,nav{
    display:block}

ins{
    background:#ff9;
    color:#000;
    text-decoration:none}

mark{
    background:#ff0;
    color:#000;
    font-style:italic;
    font-weight:bold}

small{
    font-size:85%}

sub,sup{
    font-size:75%;
    line-height:0;
    position:relative;
    vertical-align:baseline}

sup{
    top:-0.5em}

sub{
    bottom:-0.25em}

img{
    -ms-interpolation-mode:bicubic;
    vertical-align:middle;
    max-width:100%}

svg:not(:root){
    overflow:hidden}

figure{
    margin:0}

label{
    cursor:pointer}

legend{
    border:0;
    margin-left:-7px;
    padding:0;
    white-space:normal}

#content .danger,#content .error{
    background:#fdf3f2}

legend{
    display:block;
    width:100%;
    border:0;
    padding:0;
    white-space:normal;
    margin-bottom:24px;
    font-size:150%;
    *margin-left:-7px}

label{
    display:block;
    margin:0 0 0.3125em 0;
    color:#333;
    font-size:90%}

a{
    color:#2980B9;
    text-decoration:none;
    cursor:pointer}


a:hover,a:active{
    outline:0;
}

a:hover{
    color:#3091d1}

a:visited{
    color:#9B59B6}

.left{
    text-align:left}

.center{
    text-align:center}

.right{
    text-align:right}

hr{
    display:block;
    height:1px;
    border:0;
    border-top:1px solid #e1e4e5;
    margin:24px 0;
    padding:0}

#table-of-contents li{
    list-style:none;
    margin-left: 0px;
}

#table-of-contents header{
    height:32px;
    display:inline-block;
    line-height:32px;
    padding:0 1.618em;
    display:block;
    font-weight:bold;
    text-transform:uppercase;
    font-size:80%;
    color:#2980B9;
    white-space:nowrap}

#table-of-contents ul{
    margin-bottom:0}

#table-of-contents li.divide-top{
    border-top:solid 1px #404040}

#table-of-contents li.divide-bottom{
    border-bottom:solid 1px #404040}

#table-of-contents li.current{
    background:#e3e3e3}

#table-of-contents li.current a{
    color:gray;
    border-right:solid 1px #c9c9c9;
    padding:0.4045em 2.427em}

#table-of-contents li.current a:hover{
    background:#d6d6d6}

#table-of-contents li a{
    /* color:#404040; */
    padding:0.4045em 1.618em;
    position:relative;
    /* background:#fcfcfc; */
    border:none;
    /* border-bottom:solid 1px #c9c9c9; */
    /* border-top:solid 1px #c9c9c9; */
    padding-left:1.618em -4px}

#table-of-contents li.on a:hover,#table-of-contents li.current>a:hover{
    background:#fcfcfc}

#table-of-contents li ul li a{
    /* background:#c9c9c9; */
    padding:0.4045em 2.427em}

#table-of-contents li ul li ul li a{
    padding:0.4045em 3.236em}

#table-of-contents li.current ul{
    display:block}

/* #table-of-contents li ul{ */
/*     margin-bottom:0; */
/*     display:none} */

#table-of-contents .local-toc li ul{
    display:block}

#table-of-contents li ul li a{
    margin-bottom:0;
    color:#b3b3b3;
    font-weight:normal}

#table-of-contents a{
    display:inline-block;
    line-height:18px;
    padding:0.4045em 1.618em;
    display:block;
    position:relative;
    font-size:90%;
    color:#b3b3b3;
    direction: ltr;
}

#table-of-contents a:hover{
    background-color:#4e4a4a;
    cursor:pointer}

/* #text-table-of-contents { */
/*     overflow:scroll; */
/* } */

#table-of-contents{
    position:fixed;
    top:0;
    left:0;
    width:300px;
    overflow-x:hidden;
    overflow-y:scroll;
    height:100%;
    background:#343131;
    z-index:200;
    scrollbar-base-color: #1F1D1D;
    scrollbar-arrow-color: #b3b3b3;
    scrollbar-shadow-color: #1F1D1D;
    scrollbar-track-color : #343131;
}

#table-of-contents h2{
    z-index:200;
    background-color:#2980B9;
    text-align:center;
    padding:0.809em;
    display:block;
    color:#fcfcfc;
    font-size: 100%;
    margin-bottom:0.809em}

ul.nav li ul li {
    display: none;
}

ul.nav li ul li ul li {
    display: none;
}

ul.nav li.active ul li {
    display: inline;
}

ul.nav li.active ul li ul li {
    display: inline;
}

ul.nav li.active ul li a {
    background-color: #E3E3E3;
    color: #8099B0;
    border-right:solid 1px #c9c9c9 !important;
}

ul.nav li.active ul li.active a {
    background-color: #C9C9C9;
    color: black !important;
    font-weight: bold !important;
}

ul.nav li.active ul li.active ul li.active a {
    color: black !important;
    font-weight: bold !important;
    display: block !important;
}

ul.nav li.active ul li.active ul li a {
    color: #808080 !important;
    font-weight: normal !important;
    display: block !important;
}

ul.nav li.active ul li ul li a {
    display: none !important;
}


ul.nav li ul li ul li ul li {
    display: none !important; /* as long as nav is on multiple levels of ul */
    /* display: none; /* as long as nav is on multiple levels of ul *\/ */
}

ul.nav li.active > a {
    border-bottom:solid 1px #c9c9c9 !important; /* XXX Restrict it to 2nd level */
    border-right:solid 1px #c9c9c9 !important;
}

ul.nav li.active a {
    color: gray !important;
    font-weight:bold;
    background-color: white;
    border-right:solid 0px white !important;
}

ul.nav > li.active > a {
    color: black !important;
}

footer{
    color:#999}

footer p{
    margin-bottom:12px}

#copyright, #postamble{
    position:fixed;
    bottom:0;
    left:0;
    width:300px;
    color:#fcfcfc;
    background:#1f1d1d;
    border-top:solid 10px #343131;
    font-family:"Lato","proxima-nova","Helvetica Neue",Arial,sans-serif;
    font-size: 90%;
    z-index:400;
    padding:12px;
}

#postamble .author {
    font-size: 100%;
    margin-bottom: 0px;
}

#postamble .date {
    font-size: 90%;
    margin-bottom: 0px;
    color: #27AE60;
}

#postamble .creator,#postamble .validation {
    display:none;
}

#copyright a{
    color:#2980B9;
    text-decoration:none}

#copyright .rst-current-version{
    padding:12px;
    background-color:#272525;
    display:block;
    text-align:right;
    font-size:90%;
    cursor:pointer;
    color:#27AE60;
    *zoom:1}

#content img{
    max-width:100%;
    height:auto !important}

#content div.figure{
    margin-bottom:24px}

#content div.figure.align-center{
    text-align:center}

#content .section>img,#content .section>a>img{
    margin-bottom:24px}

.verse{
    border-left:5px solid #6AB0DE;
    background-color: #E7F2FA;
    padding: 6px 20px;
    font-style:italic;
}

#content .note .last,#content .attention .last,#content .caution .last,#content .danger .last,#content .error .last,#content .hint .last,#content .important .last,#content .tip .last,#content .warning .last,#content .seealso .last,#content .admonitiontodo .last{
    margin-bottom:0}

#content .admonition-title:before{
    margin-right:4px}

#content .section ol p,#content .section ul p{
    margin-bottom:12px}

#content h1 .headerlink,#content h2 .headerlink,#content h3 .headerlink,#content h4 .headerlink,#content h5 .headerlink,#content h6 .headerlink,#content dl dt .headerlink{
    display:none;
    visibility:hidden;
    font-size:14px}

#content h1 .headerlink:after,#content h2 .headerlink:after,#content h3 .headerlink:after,#content h4 .headerlink:after,#content h5 .headerlink:after,#content h6 .headerlink:after,#content dl dt .headerlink:after{
    visibility:visible;
    content:"";
    font-family:FontAwesome;
    display:inline-block}

#content h1:hover .headerlink,#content h2:hover .headerlink,#content h3:hover .headerlink,#content h4:hover .headerlink,#content h5:hover .headerlink,#content h6:hover .headerlink,#content dl dt:hover .headerlink{
    display:inline-block}

#content .sidebar{
    float:right;
    width:40%;
    display:block;
    margin:0 0 24px 24px;
    padding:24px;
    background:#f3f6f6;
    border:solid 1px #e1e4e5}

#content .sidebar p,#content .sidebar ul,#content .sidebar dl{
    font-size:90%}

#content .sidebar .last{
    margin-bottom:0}

#content .sidebar .sidebar-title{
    display:block;
    font-family:"Roboto Slab","ff-tisa-web-pro","Georgia",Arial,sans-serif;
    font-weight:bold;
    background:#e1e4e5;
    padding:6px 12px;
    margin:-24px;
    margin-bottom:24px;
    font-size:100%}

#content .footnote-reference,#content .citation-reference{
    vertical-align:super;
    font-size:90%}

span[id*='MathJax-Span']{
    color:#404040}

.math{
    text-align:center}

#footnotes{
    border-top:1px solid #e1e4e5;
    padding-top: 36px;
}

h2.footnotes{
    display:none;
}


.footnum:before, .footref:before{
    content:"[";
}

.footnum:after, .footref:after{
    content:"]";
}

.footpara {
    color: #999;
    font-size: 90%;
    font-family:"Lato","proxima-nova","Helvetica Neue",Arial,sans-serif;
    padding-bottom: 8px;
    padding-left: 16px;
    padding-right: 16px;
    padding-top: 8px;
    line-height: 1.25em;
    /* display: inline; */
}
.highlight .hll { background-color: #ffffcc }
.highlight  { background: #f8f8f8; }
.highlight .c { color: #8f5902; font-style: italic } /* Comment */
.highlight .err { color: #a40000; border: 1px solid #ef2929 } /* Error */
.highlight .g { color: #000000 } /* Generic */
.highlight .k { color: #204a87; font-weight: bold } /* Keyword */
.highlight .l { color: #000000 } /* Literal */
.highlight .n { color: #000000 } /* Name */
.highlight .o { color: #ce5c00; font-weight: bold } /* Operator */
.highlight .x { color: #000000 } /* Other */
.highlight .p { color: #000000; font-weight: bold } /* Punctuation */
.highlight .ch { color: #8f5902; font-style: italic } /* Comment.Hashbang */
.highlight .cm { color: #8f5902; font-style: italic } /* Comment.Multiline */
.highlight .cp { color: #8f5902; font-style: italic } /* Comment.Preproc */
.highlight .cpf { color: #8f5902; font-style: italic } /* Comment.PreprocFile */
.highlight .c1 { color: #8f5902; font-style: italic } /* Comment.Single */
.highlight .cs { color: #8f5902; font-style: italic } /* Comment.Special */
.highlight .gd { color: #a40000 } /* Generic.Deleted */
.highlight .ge { color: #000000; font-style: italic } /* Generic.Emph */
.highlight .gr { color: #ef2929 } /* Generic.Error */
.highlight .gh { color: #000080; font-weight: bold } /* Generic.Heading */
.highlight .gi { color: #00A000 } /* Generic.Inserted */
.highlight .go { color: #000000; font-style: italic } /* Generic.Output */
.highlight .gp { color: #8f5902 } /* Generic.Prompt */
.highlight .gs { color: #000000; font-weight: bold } /* Generic.Strong */
.highlight .gu { color: #800080; font-weight: bold } /* Generic.Subheading */
.highlight .gt { color: #a40000; font-weight: bold } /* Generic.Traceback */
.highlight .kc { color: #204a87; font-weight: bold } /* Keyword.Constant */
.highlight .kd { color: #204a87; font-weight: bold } /* Keyword.Declaration */
.highlight .kn { color: #204a87; font-weight: bold } /* Keyword.Namespace */
.highlight .kp { color: #204a87; font-weight: bold } /* Keyword.Pseudo */
.highlight .kr { color: #204a87; font-weight: bold } /* Keyword.Reserved */
.highlight .kt { color: #204a87; font-weight: bold } /* Keyword.Type */
.highlight .ld { color: #000000 } /* Literal.Date */
.highlight .m { color: #0000cf; font-weight: bold } /* Literal.Number */
.highlight .s { color: #4e9a06 } /* Literal.String */
.highlight .na { color: #c4a000 } /* Name.Attribute */
.highlight .nb { color: #204a87 } /* Name.Builtin */
.highlight .nc { color: #000000 } /* Name.Class */
.highlight .no { color: #000000 } /* Name.Constant */
.highlight .nd { color: #5c35cc; font-weight: bold } /* Name.Decorator */
.highlight .ni { color: #ce5c00 } /* Name.Entity */
.highlight .ne { color: #cc0000; font-weight: bold } /* Name.Exception */
.highlight .nf { color: #000000 } /* Name.Function */
.highlight .nl { color: #f57900 } /* Name.Label */
.highlight .nn { color: #000000 } /* Name.Namespace */
.highlight .nx { color: #000000 } /* Name.Other */
.highlight .py { color: #000000 } /* Name.Property */
.highlight .nt { color: #204a87; font-weight: bold } /* Name.Tag */
.highlight .nv { color: #000000 } /* Name.Variable */
.highlight .ow { color: #204a87; font-weight: bold } /* Operator.Word */
.highlight .w { color: #f8f8f8; text-decoration: underline } /* Text.Whitespace */
.highlight .mb { color: #0000cf; font-weight: bold } /* Literal.Number.Bin */
.highlight .mf { color: #0000cf; font-weight: bold } /* Literal.Number.Float */
.highlight .mh { color: #0000cf; font-weight: bold } /* Literal.Number.Hex */
.highlight .mi { color: #0000cf; font-weight: bold } /* Literal.Number.Integer */
.highlight .mo { color: #0000cf; font-weight: bold } /* Literal.Number.Oct */
.highlight .sb { color: #4e9a06 } /* Literal.String.Backtick */
.highlight .sc { color: #4e9a06 } /* Literal.String.Char */
.highlight .sd { color: #8f5902; font-style: italic } /* Literal.String.Doc */
.highlight .s2 { color: #4e9a06 } /* Literal.String.Double */
.highlight .se { color: #4e9a06 } /* Literal.String.Escape */
.highlight .sh { color: #4e9a06 } /* Literal.String.Heredoc */
.highlight .si { color: #4e9a06 } /* Literal.String.Interpol */
.highlight .sx { color: #4e9a06 } /* Literal.String.Other */
.highlight .sr { color: #4e9a06 } /* Literal.String.Regex */
.highlight .s1 { color: #4e9a06 } /* Literal.String.Single */
.highlight .ss { color: #4e9a06 } /* Literal.String.Symbol */
.highlight .bp { color: #3465a4 } /* Name.Builtin.Pseudo */
.highlight .vc { color: #000000 } /* Name.Variable.Class */
.highlight .vg { color: #000000 } /* Name.Variable.Global */
.highlight .vi { color: #000000 } /* Name.Variable.Instance */
.highlight .il { color: #0000cf; font-weight: bold } /* Literal.Number.Integer.Long */
</style>
</head>
<body>
<div id="content">
<header>
<h1 class="title">javascript学习基础篇</h1>
</header><nav id="table-of-contents">
<h2>Table of Contents</h2>
<div id="text-table-of-contents">
<ul>
<li><a href="#orgheadline1">1. 前言</a></li>
<li><a href="#orgheadline33">2. javascript语言简介</a>
<ul>
<li><a href="#orgheadline2">2.1. 注释</a></li>
<li><a href="#orgheadline3">2.2. javascript代码放在那里</a></li>
<li><a href="#orgheadline4">2.3. 严格模式</a></li>
<li><a href="#orgheadline5">2.4. alert函数</a></li>
<li><a href="#orgheadline6">2.5. console.log函数</a></li>
<li><a href="#orgheadline7">2.6. confirm函数</a></li>
<li><a href="#orgheadline8">2.7. prompt函数</a></li>
<li><a href="#orgheadline9">2.8. 数据类型简介</a></li>
<li><a href="#orgheadline10">2.9. 声明变量</a></li>
<li><a href="#orgheadline11">2.10. typeof函数</a></li>
<li><a href="#orgheadline12">2.11. 数值型简介</a></li>
<li><a href="#orgheadline16">2.12. 字符串型简介</a>
<ul>
<li><a href="#orgheadline13">2.12.1. 多行字符串</a></li>
<li><a href="#orgheadline14">2.12.2. 字符串的一些方法清单</a></li>
<li><a href="#orgheadline15">2.12.3. toString方法</a></li>
</ul>
</li>
<li><a href="#orgheadline19">2.13. 数组</a>
<ul>
<li><a href="#orgheadline17">2.13.1. 数组的一些方法清单</a></li>
<li><a href="#orgheadline18">2.13.2. 比较两个数组是否相同</a></li>
</ul>
</li>
<li><a href="#orgheadline23">2.14. 对象类型简介</a>
<ul>
<li><a href="#orgheadline20">2.14.1. in语句</a></li>
<li><a href="#orgheadline21">2.14.2. delete语句</a></li>
<li><a href="#orgheadline22">2.14.3. hasOwnProperty方法</a></li>
</ul>
</li>
<li><a href="#orgheadline24">2.15. 布尔值</a></li>
<li><a href="#orgheadline25">2.16. null</a></li>
<li><a href="#orgheadline26">2.17. 条件判断结构</a></li>
<li><a href="#orgheadline28">2.18. 循环结构</a>
<ul>
<li><a href="#orgheadline27">2.18.1. while语句</a></li>
</ul>
</li>
<li><a href="#orgheadline29">2.19. 定义函数</a></li>
<li><a href="#orgheadline30">2.20. arguments用法</a></li>
<li><a href="#orgheadline31">2.21. rest用法</a></li>
<li><a href="#orgheadline32">2.22. 箭头函数</a></li>
</ul>
</li>
<li><a href="#orgheadline42">3. 面向DOM的操作</a>
<ul>
<li><a href="#orgheadline34">3.1. window</a></li>
<li><a href="#orgheadline35">3.2. navigator</a></li>
<li><a href="#orgheadline36">3.3. screen</a></li>
<li><a href="#orgheadline37">3.4. location</a></li>
<li><a href="#orgheadline41">3.5. document</a>
<ul>
<li><a href="#orgheadline38">3.5.1. getAttribute函数</a></li>
<li><a href="#orgheadline39">3.5.2. setAttribute函数</a></li>
<li><a href="#orgheadline40">3.5.3. 修改节点的文本内容</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#orgheadline43">4. 表单相关</a></li>
<li><a href="#orgheadline44">5. AJAX技术</a></li>
<li><a href="#orgheadline52">6. 附录</a>
<ul>
<li><a href="#orgheadline45">6.1. windows加载事件</a></li>
<li><a href="#orgheadline46">6.2. this关键词</a></li>
<li><a href="#orgheadline47">6.3. hello方法</a></li>
<li><a href="#orgheadline48">6.4. name属性</a></li>
<li><a href="#orgheadline49">6.5. 集合</a></li>
<li><a href="#orgheadline50">6.6. Date对象</a></li>
<li><a href="#orgheadline51">6.7. 参考资料</a></li>
</ul>
</li>
</ul>
</div>
</nav>


<div class="outline-2">
<h2 id="orgheadline1">前言</h2>
<div class="outline-text-2" id="text-1">
<p>
本文主要面向那些已经熟悉一门编程语言的读者，并不十分适合编程初学者来阅读。
</p>
</div>
</div>


<div class="outline-2">
<h2 id="orgheadline33">javascript语言简介</h2>
<div class="outline-text-2" id="text-2">
</div><div class="outline-3">
<h3 id="orgheadline2">注释</h3>
<div class="outline-text-3" id="text-2-1">
<p>
用 <code>//</code> 来标记一行注释。
</p>
<div class="highlight"><pre><span></span><span class="c1">// This is a comment that the computer will ignore. </span>
<span class="c1">// It is for your eyes only!</span>
</pre></div>

<p>
用 <code>/*   */</code> 来标记多行注释，不过用 <code>//</code> 来标记多行注释也是可以的，这个看编辑器方不方便。
</p>
</div>
</div>

<div class="outline-3">
<h3 id="orgheadline3">javascript代码放在那里</h3>
<div class="outline-text-3" id="text-2-2">
<p>
javascript的代码一般推荐是放在 <code>&lt;/body&gt;</code> 之前，这样能够让浏览器更快地加载页面。至于其他倒没有特别的要求，刚开始简单的javascript代码就直接写上去也是可以的:
</p>

<pre>
&lt;script&gt;
your awesome javascript code
&lt;/script&gt;
&lt;/body&gt;
</pre>

<p>
这样更方便早期的调试。如果javascript代码量有一点了那么当然还是推荐另外单独放在一个js文件上，然后如下引入进来:
</p>
<pre>
&lt;script src="where"&gt;&lt;/script&gt;
</pre>

<p>
然后一个网页内如果没有特别的理由的话，那么javascript代码最好就放在一个文件里面，方便网页加载。
</p>
</div>
</div>

<div class="outline-3">
<h3 id="orgheadline4">严格模式</h3>
<div class="outline-text-3" id="text-2-3">
<p>
这个也不是必须的，不写也不能说你错，写上了当然更好。一般推荐编写javascript代码打开严格模式。
</p>
<pre>
"use strict";
</pre>
</div>
</div>


<div class="outline-3">
<h3 id="orgheadline5">alert函数</h3>
<div class="outline-text-3" id="text-2-4">
<p>
弹出一段警告信息
</p>
<pre>
alert("hello")
</pre>
</div>
</div>

<div class="outline-3">
<h3 id="orgheadline6">console.log函数</h3>
<div class="outline-text-3" id="text-2-5">
<p>
不同于alert函数，这个函数是在开发者工具的控制台那里显示。更加方便调试和debug javascript程序。
</p>
<pre>
console.log("hello")
</pre>
</div>
</div>

<div class="outline-3">
<h3 id="orgheadline7">confirm函数</h3>
<div class="outline-text-3" id="text-2-6">
<p>
弹出一个对话框，可以和用户互动点击确定或取消。根据用户的点击返回true或false。
</p>
<pre>
confirm('This is an example of using JS to create some interaction on a website. Click OK to continue!');
</pre>
</div>
</div>

<div class="outline-3">
<h3 id="orgheadline8">prompt函数</h3>
<div class="outline-text-3" id="text-2-7">
<p>
弹出一个对话框，具体是一个输入框，输入的值就是该函数的返回值。
</p>
<pre>
var age = prompt("what's your age");
</pre>
</div>
</div>


<div class="outline-3">
<h3 id="orgheadline9">数据类型简介</h3>
<div class="outline-text-3" id="text-2-8">
<p>
数值型，字符串型（javascript同python一样单引号双引号都可以），布尔型（javascript是 <code>true</code> 和 <code>false</code> ），然后其他常规数值运算和逻辑运算（如 <code>&amp;&amp;</code> <code>||</code> <code>!</code> 之类）和比较运算（这里值得一提的是和python的 <code>==</code> 对应的javascript的比较运算符应该是 <code>===</code> ，三个等号，这算是javascript的一个历史遗留语法瑕疵问题。）等都大体相同。python中的None对应的是javascript的 <code>null</code> 。
</p>

<p>
然后高级数据类型各个编程语言差异就很大了，不过javascript似乎和python在基本高级数据类型上也很接近，比如说javascript的数组就类似于python的列表:
</p>
<pre>
[1, 2, 3.14, 'Hello', null, true];
</pre>

<p>
其索引index编号法则也和python一致。
</p>

<p>
然后javascript还有一个什么对象的概念，其大体可以看作python中的字典类型。
</p>
<pre>
var person = {
    name: 'Bob',
    age: 20,
    tags: ['js', 'web', 'mobile'],
    city: 'Beijing',
    zipcode: null
};
</pre>

<p>
如下所示具体调用各个数值也是类似的:
</p>
<pre>
person['name']
"Bob"
person.name
"Bob"
</pre>
</div>
</div>


<div class="outline-3">
<h3 id="orgheadline10">声明变量</h3>
<div class="outline-text-3" id="text-2-9">
<p>
很多资料都会谈论这个问题，javascript代码声明变量都推荐加上 <code>var</code> 这个关键词，如下所示。
</p>
<div class="highlight"><pre><span></span><span class="kd">var</span> <span class="nx">x</span><span class="p">;</span>
<span class="kd">var</span> <span class="nx">count</span> <span class="o">=</span> <span class="mi">2</span><span class="p">;</span>
</pre></div>
<p>
这样的话变量的作用域就很符合我们在其他编程语言中的常识，比如在函数里面就是局部变量等。
</p>
</div>
</div>

<div class="outline-3">
<h3 id="orgheadline11">typeof函数</h3>
<div class="outline-text-3" id="text-2-10">
<p>
相当于python中的 <code>type</code> 函数，查看某个对象的对象类型。
</p>
</div>
</div>

<div class="outline-3">
<h3 id="orgheadline12">数值型简介</h3>
<div class="outline-text-3" id="text-2-11">
<p>
javascript整数和浮点数都不分了，都统一表示为Number，然后数值型那些运算，比如加减乘除之类的就不用多说了。其中 <code>%</code> 和python一样也是求余操作。在python3中有 <code>5//2</code> 是求商的概念，javascript没有这个概念，我们需要如下来获得类似的效果。
</p>

<pre>
console.log(parseInt(5/2))
</pre>
</div>
</div>


<div class="outline-3">
<h3 id="orgheadline16">字符串型简介</h3>
<div class="outline-text-3" id="text-2-12">
<p>
javascript的字符串类型和python非常类似，比如 <code>string[0]</code> 是支持的。然后不可以这样用string[0:2]，幸运的是javascript提供了类似python中的那种切片概念，就是使用 <code>slice</code> 方法
</p>

<pre>
console.log("hello".slice(0,2))
console.log([1,3,4,5].slice(0,2))
</pre>

<p>
不过javascript的slice方法和python的切片操作还是有点区别的，其只有 <code>(start,end)</code> 两个参数，然后其也有负数从末尾算起的概念，不过其不会倒着来，都是从左到右的那种顺序。具体请参看 <a href="http://www.w3school.com.cn/jsref/jsref_slice_string.asp">这里</a> 。
</p>
</div>

<div class="outline-4">
<h4 id="orgheadline13">多行字符串</h4>
<div class="outline-text-4" id="text-2-12-1">
<p>
这个对应的是python的 ''' 三引号情况。javascript是这样表示的:
</p>

<pre>
`多行
字符串
`
</pre>

<p>
即使用那个反斜点符号包围之。
</p>
</div>
</div>

<div class="outline-4">
<h4 id="orgheadline14">字符串的一些方法清单</h4>
<div class="outline-text-4" id="text-2-12-2">
<dl class="org-dl">
<dt>length</dt><dd>字符串长度</dd>
<dt>toUpperCase</dt><dd>变成大写</dd>
<dt>toLowerCase</dt><dd>变成小写</dd>
<dt>indexOf</dt><dd>返回子字符串出现的索引位置，index索引编号规则和python相同。</dd>
<dt>substring</dt><dd>返回子字符串，如果熟悉python的那种切片规则的话，那么推荐就直接使用 <code>slice</code> 方法。</dd>
</dl>
</div>
</div>


<div class="outline-4">
<h4 id="orgheadline15">toString方法</h4>
<div class="outline-text-4" id="text-2-12-3">
<p>
javascript的数值、布尔值、对象和字符串都有一个 <code>toString</code> 方法，大体类似于python的 <code>str</code> 函数。不过推荐类似的也使用 <code>String</code> 来将某个javascript对象转变成为字符串。
</p>
</div>
</div>
</div>

<div class="outline-3">
<h3 id="orgheadline19">数组</h3>
<div class="outline-text-3" id="text-2-13">
<p>
对应于python中的列表，javascript这里称为数组。如下所示我们看到其也是可变的。
</p>
<pre>
lst
[1, 2, 3, 4, 5]
lst[0] = 2
2
lst
[2, 2, 3, 4, 5]
</pre>
</div>

<div class="outline-4">
<h4 id="orgheadline17">数组的一些方法清单</h4>
<div class="outline-text-4" id="text-2-13-1">
<dl class="org-dl">
<dt>length</dt><dd>数组长度</dd>
<dt>indexOf</dt><dd>返回数组某个子元素的索引位置</dd>
<dt>slice</dt><dd>切片操作，类似于python的 <code>lst[0:2]</code> 那种表达方法。</dd>
<dt>push</dt><dd>末尾添加一个元素</dd>
<dt>pop</dt><dd>最后一个元素删除</dd>
<dt>unshift</dt><dd>数组头部添加一个或多个元素，返回新数组的长度</dd>
<dt>shift</dt><dd>数组头部删除一个元素</dd>
<dt>sort</dt><dd>排序，破坏型。值得一提的是对于数字排序并不是按照从大到小的顺序来的，不太清楚为何:</dd>
</dl>

<pre>
&gt; var lst = [1,5,2,3,51,4,45,545,541,48,77]
undefined
&gt; lst.sort()
[ 1,
  2,
  3,
  4,
  45,
  48,
  5,
  51,
  541,
  545,
  77 ]
</pre>

<p>
在python中最多说字符串就这样，但这里是number类型啊。然后要正常排序，我们需要如下操作（参看 <a href="http://www.w3school.com.cn/jsref/jsref_sort.asp">这个网页</a> ）:
</p>

<pre>
var lst = [1,5,2,3,51,4,45,545,541,48,77]
function sortNumber(a,b){
    return a - b
}
lst.sort(sortNumber)
alert(lst)
</pre>

<p>
这里sort方法接受一个函数参数，这个函数接受两个参量，用来判断a和b的值大小，如果返回值小于0，则a放在前面。如果返回值大于0，则a放在后面。这种排序方法也支持数字字符串的情况。javascript在处理这种 <code>字符串 - 字符串</code> 的情况是会尝试做转换成number类型的才做。 
</p>

<dl class="org-dl">
<dt>reverse</dt><dd>反转，破坏型。</dd>
<dt>splice</dt><dd>从指定的索引删除某些元素，然后在此处添加某些元素，相当于update更新了。</dd>
</dl>
<pre>
&gt; var arr = ['Microsoft', 'Apple', 'Yahoo', 'AOL', 'Excite', 'Oracle'];
undefined
&gt; arr.splice(2, 3, 'Google', 'Facebook'); 
["Yahoo", "AOL", "Excite"]
&gt; arr
["Microsoft", "Apple", "Google", "Facebook", "Oracle"]
</pre>
<p>
参数意思是从索引2开始删除3个元素，然后添加后面的元素。从上面的例子可以看出splice方法是破坏型的方法，然后其返回的是删除了的那是那个元素。
</p>

<p>
splice方法也可以用于只删除不添加也就是纯删除操作，或只添加不删除的纯添加操作。
</p>

<pre>
// 只删除,不添加:
arr.splice(2, 2);
// 只添加,不删除:
arr.splice(2, 0, 'Google', 'Facebook');
</pre>

<dl class="org-dl">
<dt>concat</dt><dd>连接两个数组，非破坏型。</dd>
</dl>
<pre>
&gt; var lst1 = [1,2,3]
undefined
&gt; var lst2 = ['a','b','c']
undefined
&gt; lst1.concat(lst2)
[1, 2, 3, "a", "b", "c"]
</pre>

<dl class="org-dl">
<dt>join</dt><dd>类似于python字符串的join方法，如下所示:</dd>
</dl>
<pre>
var arr = ['A', 'B', 'C', 1, 2, 3];
arr.join('-'); // 'A-B-C-1-2-3'
</pre>
</div>
</div>

<div class="outline-4">
<h4 id="orgheadline18">比较两个数组是否相同</h4>
<div class="outline-text-4" id="text-2-13-2">
<p>
参考了 <a href="http://stackoverflow.com/questions/3115982/how-to-check-if-two-arrays-are-equal-with-javascript">这个网页</a> 。
</p>

<div class="highlight"><pre><span></span><span class="kd">function</span> <span class="nx">arraysEqual</span><span class="p">(</span><span class="nx">a</span><span class="p">,</span> <span class="nx">b</span><span class="p">)</span> <span class="p">{</span>
  <span class="k">if</span> <span class="p">(</span><span class="nx">a</span> <span class="o">===</span> <span class="nx">b</span><span class="p">)</span> <span class="k">return</span> <span class="kc">true</span><span class="p">;</span>
  <span class="k">if</span> <span class="p">(</span><span class="nx">a</span> <span class="o">==</span> <span class="kc">null</span> <span class="o">||</span> <span class="nx">b</span> <span class="o">==</span> <span class="kc">null</span><span class="p">)</span> <span class="k">return</span> <span class="kc">false</span><span class="p">;</span>
  <span class="k">if</span> <span class="p">(</span><span class="nx">a</span><span class="p">.</span><span class="nx">length</span> <span class="o">!=</span> <span class="nx">b</span><span class="p">.</span><span class="nx">length</span><span class="p">)</span> <span class="k">return</span> <span class="kc">false</span><span class="p">;</span>

  <span class="c1">// If you don&#39;t care about the order of the elements inside</span>
  <span class="c1">// the array, you should sort both arrays here.</span>

  <span class="k">for</span> <span class="p">(</span><span class="kd">var</span> <span class="nx">i</span> <span class="o">=</span> <span class="mi">0</span><span class="p">;</span> <span class="nx">i</span> <span class="o">&lt;</span> <span class="nx">a</span><span class="p">.</span><span class="nx">length</span><span class="p">;</span> <span class="o">++</span><span class="nx">i</span><span class="p">)</span> <span class="p">{</span>
    <span class="k">if</span> <span class="p">(</span><span class="nx">a</span><span class="p">[</span><span class="nx">i</span><span class="p">]</span> <span class="o">!==</span> <span class="nx">b</span><span class="p">[</span><span class="nx">i</span><span class="p">])</span> <span class="k">return</span> <span class="kc">false</span><span class="p">;</span>
  <span class="p">}</span>
  <span class="k">return</span> <span class="kc">true</span><span class="p">;</span>
<span class="p">}</span>
</pre></div>
</div>
</div>
</div>

<div class="outline-3">
<h3 id="orgheadline23">对象类型简介</h3>
<div class="outline-text-3" id="text-2-14">
<p>
其大致可以对应到python中的字典的概念。
</p>
<pre>
var person = {
    name: 'Bob',
    age: 20,
    tags: ['js', 'web', 'mobile'],
    city: 'Beijing',
    zipcode: null
};
</pre>

<p>
javascript的对象的value还可以是某个函数，这样的话其实际上就类似于python中的类一样，成了一个方法了。然后类似python的self，其也有一个 <code>this</code> 关键词来表示本对象实例。
</p>
</div>


<div class="outline-4">
<h4 id="orgheadline20">in语句</h4>
<div class="outline-text-4" id="text-2-14-1">
<pre>
'name' in xiaoming;
</pre>
<pre>
&gt; var d = {}
undefined
&gt; d['a'] = 1
1
&gt; d
Object {a: 1}
&gt; 'a' in d
true
&gt; 1 in [1,2,3]
true
</pre>
</div>
</div>

<div class="outline-4">
<h4 id="orgheadline21">delete语句</h4>
<div class="outline-text-4" id="text-2-14-2">
<p>
其对应的就是python的del语句。然后我们看到javascript的 <code>delete</code> 语句删除不存在键也不会报错。
</p>
<pre>
&gt; d
Object {a: 1}
&gt; delete(d.b)
true
&gt; d
Object {a: 1}
&gt; delete(d.a)
true
&gt; d
Object {}
</pre>
</div>
</div>


<div class="outline-4">
<h4 id="orgheadline22">hasOwnProperty方法</h4>
<div class="outline-text-4" id="text-2-14-3">
<p>
对应于python2的has_key方法，不过python2已经移除了，推荐用in语句。
</p>
<pre>
d = {'a':1}
Object {a: 1}
d.hasOwnProperty('a')
true
</pre>
</div>
</div>
</div>


<div class="outline-3">
<h3 id="orgheadline24">布尔值</h3>
<div class="outline-text-3" id="text-2-15">
<p>
javascript的布尔值是 <code>true</code> 和 <code>false</code> 。然后需要额外强调的是，类似python的比较判断（==）符号在javascript中是 <code>===</code> ，三个等号，这不是什么别出心裁，也没有任何实际的好处，就是javascript的历史遗留问题罢了。
</p>
<pre>
=== Equal to
!== Not equal to
</pre>
</div>
</div>

<div class="outline-3">
<h3 id="orgheadline25">null</h3>
<div class="outline-text-3" id="text-2-16">
<p>
javascript的是 <code>null</code> 。其也是一个单独的对象。类似于python的 <code>None</code> ，然后还有一个什么 <code>undefined</code> 。比如函数没有明确return值就会默认返回 <code>undefined</code> ，感兴趣的可能查一下这两个的区别，我看了一下，觉得挺无聊的。上面谈到 <code>==</code> 和 <code>===</code> 的区别，如果用 <code>===</code> ，则 <code>undefined</code> 是不等于 <code>null</code> 的，如果用 <code>==</code> ，则javascript会额外做一些类型转换工作，这两个又会看作相等的。所以一个简单的做法就是:
</p>
<pre>
result == null
</pre>

<p>
那些可能undefined的情况都视作null来处理之。
</p>
</div>
</div>


<div class="outline-3">
<h3 id="orgheadline26">条件判断结构</h3>
<div class="outline-text-3" id="text-2-17">
<p>
条件判断结构，和python大同小异，除了那些圆括号（记住这个圆括号必须加上）和花括号。
</p>
<div class="highlight"><pre><span></span><span class="kd">var</span> <span class="nx">feedback</span> <span class="o">=</span> <span class="mi">10</span>
<span class="k">if</span><span class="p">(</span><span class="nx">feedback</span> <span class="o">&gt;</span> <span class="mi">8</span><span class="p">){</span>
    <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s2">&quot;Thank you! We should race at the next concert!&quot;</span><span class="p">)}</span>
<span class="k">else</span><span class="p">{</span>
    <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s2">&quot;I&#39;ll keep practicing coding and racing.&quot;</span><span class="p">)}</span>
</pre></div>

<p>
虽然javascript不像python那样强制缩进风格，但还是推荐用缩进来增强你的代码可读性和逻辑清晰性，如:
</p>
<div class="highlight"><pre><span></span><span class="nx">age</span> <span class="o">=</span> <span class="mi">20</span>
<span class="k">if</span><span class="p">(</span><span class="nx">age</span> <span class="o">&lt;</span> <span class="mi">6</span><span class="p">){</span>
    <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s1">&#39;kid&#39;</span><span class="p">)}</span>
<span class="k">else</span> <span class="k">if</span><span class="p">(</span><span class="nx">age</span> <span class="o">&gt;=</span> <span class="mi">18</span><span class="p">){</span>
    <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s1">&#39;adult&#39;</span><span class="p">)}</span>
<span class="k">else</span><span class="p">{</span>
    <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s1">&#39;teenager&#39;</span><span class="p">)}</span>
</pre></div>

<p>
这种写法使得代码更加接近python风格，然后我们可以把第一个花括号视作python缩进区块开始的冒号，然后后面的花括号视作某个区块部分语句结束的标识。
</p>

<p>
所以我们下面写一个更加复杂点的例子（具体这些小脚本的试验推荐在ubuntu下安装nodejs，然后执行 <code>nodejs test.js</code> 即可。）。原python脚本如下:
</p>
<div class="highlight"><pre><span></span><span class="n">x</span><span class="o">=-</span><span class="mi">2</span>
<span class="k">if</span> <span class="n">x</span><span class="o">&gt;</span><span class="mi">0</span><span class="p">:</span>
    <span class="k">print</span><span class="p">(</span><span class="s1">&#39;x大于0&#39;</span><span class="p">)</span>
    <span class="k">if</span> <span class="n">x</span><span class="o">&gt;</span><span class="mi">2</span><span class="p">:</span>
        <span class="k">print</span><span class="p">(</span><span class="s1">&#39;x&gt;2&#39;</span><span class="p">)</span>
    <span class="k">elif</span> <span class="n">x</span><span class="o">&lt;</span><span class="mi">2</span><span class="p">:</span>
        <span class="k">print</span><span class="p">(</span><span class="s1">&#39;0&lt;x&lt;2&#39;</span><span class="p">)</span>
    <span class="k">else</span><span class="p">:</span>
        <span class="k">print</span><span class="p">(</span><span class="s1">&#39;x=2&#39;</span><span class="p">)</span>
<span class="k">elif</span> <span class="n">x</span><span class="o">&lt;</span><span class="mi">0</span><span class="p">:</span>
    <span class="k">print</span><span class="p">(</span><span class="s1">&#39;x小于0&#39;</span><span class="p">)</span>
<span class="k">else</span><span class="p">:</span>
    <span class="k">print</span><span class="p">(</span><span class="s1">&#39;x等于0&#39;</span><span class="p">)</span>
</pre></div>

<p>
改写成为:
</p>
<div class="highlight"><pre><span></span><span class="kd">var</span> <span class="nx">x</span> <span class="o">=</span> <span class="o">-</span><span class="mi">1</span>
<span class="k">if</span><span class="p">(</span><span class="nx">x</span><span class="o">&gt;</span><span class="mi">0</span><span class="p">){</span>
    <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s1">&#39;x大于0&#39;</span><span class="p">)</span>
    <span class="k">if</span><span class="p">(</span><span class="nx">x</span><span class="o">&gt;</span><span class="mi">2</span><span class="p">){</span>
        <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s1">&#39;x&gt;2&#39;</span><span class="p">)}</span>
    <span class="k">else</span> <span class="k">if</span><span class="p">(</span><span class="nx">x</span><span class="o">&lt;</span><span class="mi">2</span><span class="p">){</span>
        <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s1">&#39;0&lt;x&lt;2&#39;</span><span class="p">)}</span>
    <span class="k">else</span><span class="p">{</span>
        <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s1">&#39;x=2&#39;</span><span class="p">)}}</span>
<span class="k">else</span> <span class="k">if</span><span class="p">(</span><span class="nx">x</span><span class="o">&lt;</span><span class="mi">0</span><span class="p">){</span>
    <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s1">&#39;x小于0&#39;</span><span class="p">)}</span>
<span class="k">else</span><span class="p">{</span>
    <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s1">&#39;x等于0&#39;</span><span class="p">)}</span>
</pre></div>

<p>
读者可以用不同的x值来测试一下，这里的关键性问题不是区块开始那里，而是区块什么时候结束。然后就是程序结构最好清清晰晰的用 if else 或者 if else if else if else 等这类语句表达出来。关于多个else if语句的组合平行表达，读者可以自己试验一下，我简单写了下面这个例子:
</p>
<div class="highlight"><pre><span></span><span class="nx">age</span> <span class="o">=</span> <span class="mi">5</span>
<span class="k">if</span><span class="p">(</span><span class="nx">age</span> <span class="o">&lt;</span> <span class="mi">6</span><span class="p">){</span>
    <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s1">&#39;age 小于 6&#39;</span><span class="p">)}</span>
<span class="k">else</span> <span class="k">if</span><span class="p">(</span><span class="nx">age</span> <span class="o">&gt;=</span> <span class="mi">25</span><span class="p">){</span>
    <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s1">&#39;age 大于等于 25&#39;</span><span class="p">)}</span>
<span class="k">else</span> <span class="k">if</span><span class="p">(</span><span class="nx">age</span> <span class="o">&gt;=</span> <span class="mi">18</span><span class="p">){</span>
    <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s1">&#39;age 大于等于18且小于25&#39;</span><span class="p">)}</span>
<span class="k">else</span><span class="p">{</span>
    <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s1">&#39;age 大于等于6且小于18&#39;</span><span class="p">)}</span>
</pre></div>

<p>
javascript有switch语句，作为我们pythoner你懂的，用多个else if语句也是可以的。
</p>
</div>
</div>

<div class="outline-3">
<h3 id="orgheadline28">循环结构</h3>
<div class="outline-text-3" id="text-2-18">
<p>
javascript和python都有while语句，但while语句用的较少，更多的是使用for语句。
</p>


<p>
然后递归遍历字典的key也是可以的:
</p>
<div class="highlight"><pre><span></span><span class="k">for</span><span class="p">(</span><span class="kd">var</span> <span class="nx">i</span> <span class="k">in</span> <span class="p">{</span><span class="s1">&#39;a&#39;</span><span class="o">:</span><span class="mi">1</span><span class="p">,</span><span class="s1">&#39;b&#39;</span><span class="o">:</span><span class="mi">2</span><span class="p">}){</span>
    <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">i</span><span class="p">)}</span>
</pre></div>
</div>

<div class="outline-4">
<h4 id="orgheadline27">while语句</h4>
<div class="outline-text-4" id="text-2-18-1">
<p>
while语句简单了解下吧，熟悉c语言的简单看一下就清楚了。
</p>

<div class="highlight"><pre><span></span><span class="kd">var</span> <span class="nx">x</span> <span class="o">=</span> <span class="mi">0</span><span class="p">;</span>
<span class="kd">var</span> <span class="nx">n</span> <span class="o">=</span> <span class="mi">99</span><span class="p">;</span>
<span class="k">while</span> <span class="p">(</span><span class="nx">n</span> <span class="o">&gt;</span> <span class="mi">0</span><span class="p">)</span> <span class="p">{</span>
    <span class="nx">x</span> <span class="o">=</span> <span class="nx">x</span> <span class="o">+</span> <span class="nx">n</span><span class="p">;</span>
    <span class="nx">n</span> <span class="o">=</span> <span class="nx">n</span> <span class="o">-</span> <span class="mi">2</span><span class="p">;</span>
<span class="p">}</span>
</pre></div>

<p>
还有do while 语句
</p>

<div class="highlight"><pre><span></span><span class="kd">var</span> <span class="nx">n</span> <span class="o">=</span> <span class="mi">0</span><span class="p">;</span>
<span class="k">do</span> <span class="p">{</span>
    <span class="nx">n</span> <span class="o">=</span> <span class="nx">n</span> <span class="o">+</span> <span class="mi">1</span><span class="p">;</span>
<span class="p">}</span><span class="k">while</span> <span class="p">(</span><span class="nx">n</span> <span class="o">&lt;</span> <span class="mi">100</span><span class="p">);</span>
</pre></div>
</div>
</div>
</div>


<div class="outline-3">
<h3 id="orgheadline29">定义函数</h3>
<div class="outline-text-3" id="text-2-19">
<p>
一个简单的函数定义和使用如下所示:
</p>
<pre>
var greeting = function(name){
    console.log(name);
}
greeting('hello')
</pre>
<p>
我们看到javascript明确将函数名作为一个变量，这是唯一要值得注意的，不过你也可以采用这种写法，这样更加为我们所熟悉了:
</p>
<div class="highlight"><pre><span></span><span class="kd">function</span> <span class="nx">abs</span><span class="p">(</span><span class="nx">x</span><span class="p">){</span>
    <span class="k">if</span><span class="p">(</span><span class="nx">x</span> <span class="o">&gt;=</span> <span class="mi">0</span><span class="p">){</span>
        <span class="k">return</span> <span class="nx">x</span><span class="p">;}</span> 
    <span class="k">else</span><span class="p">{</span>
        <span class="k">return</span> <span class="o">-</span><span class="nx">x</span><span class="p">;}</span>
<span class="p">}</span>
</pre></div>

<p>
这两种定义风格是完全等价的。这里值得一提的是如果函数没有确定return值，则视作返回的undefined。
</p>
</div>
</div>

<div class="outline-3">
<h3 id="orgheadline30">arguments用法</h3>
<div class="outline-text-3" id="text-2-20">
<p>
javascript的函数内部可以直接使用arguments这个变量，其不是一个Array，但可以如下使用:
</p>
<pre>
arguments[0]
arguments.length
</pre>
<p>
其会接受传入函数的所有参量。
</p>
</div>
</div>

<div class="outline-3">
<h3 id="orgheadline31">rest用法</h3>
<div class="outline-text-3" id="text-2-21">
<p>
这个有点类似于lisp语言的rest参量控制概念，也就是如下
</p>
<pre>
function func(a,b,...rest){
    console.log(rest)
}
</pre>
<p>
rest是表示除了a和b之外的所有其余参量。注意前面三个点号: <code>...rest</code> 。
</p>
</div>
</div>


<div class="outline-3">
<h3 id="orgheadline32">箭头函数</h3>
<div class="outline-text-3" id="text-2-22">
<p>
就是匿名函数lambda的一种写法。暂时不太关心、
</p>
</div>
</div>
</div>


<div class="outline-2">
<h2 id="orgheadline42">面向DOM的操作</h2>
<div class="outline-text-2" id="text-3">
<p>
如果读者熟悉python的beautifulsoup或者类似的爬取网页领域，那么对于javascript所谈论的DOM是个什么东西是无需多言的。下面开始介绍那些对象吧。
</p>
</div>


<div class="outline-3">
<h3 id="orgheadline34">window</h3>
<div class="outline-text-3" id="text-3-1">
<p>
window是一个全局变量，表示本浏览器的窗口。
</p>

<dl class="org-dl">
<dt>innerWidth</dt><dd>本窗口的内部宽度，所谓的内部宽度是指除去菜单栏工具栏等具体显示网页的净宽度。</dd>
<dt>innerHeight</dt><dd>本窗口的内部高度，内部高度含义类似上面谈及的内部宽度。</dd>
<dt>outerWidth</dt><dd>本窗口的外部宽度</dd>
<dt>outerHeight</dt><dd>本窗口的外部高度</dd>
</dl>
</div>
</div>

<div class="outline-3">
<h3 id="orgheadline35">navigator</h3>
<div class="outline-text-3" id="text-3-2">
<p>
其有属性如下所示:
</p>
<dl class="org-dl">
<dt>appName</dt><dd>浏览器名称；</dd>
<dt>appVersion</dt><dd>浏览器版本；</dd>
<dt>language</dt><dd>浏览器设置的语言；</dd>
<dt>platform</dt><dd>操作系统类型；</dd>
<dt>userAgent</dt><dd>浏览器设定的User-Agent字符串。</dd>
</dl>
</div>
</div>

<div class="outline-3">
<h3 id="orgheadline36">screen</h3>
<div class="outline-text-3" id="text-3-3">
<dl class="org-dl">
<dt>width</dt><dd>屏幕宽度</dd>
<dt>height</dt><dd>屏幕高度</dd>
<dt>colorDepth</dt><dd>颜色位数</dd>
</dl>
</div>
</div>

<div class="outline-3">
<h3 id="orgheadline37">location</h3>
<div class="outline-text-3" id="text-3-4">
<dl class="org-dl">
<dt>href</dt><dd>完整路径</dd>
<dt>protocol</dt><dd>如下所示:</dd>
</dl>
<pre>
&gt; location.protocol
"http:"
</pre>

<dl class="org-dl">
<dt>host</dt><dd>对应python urlsplit之后的netloc</dd>
<dt>port</dt><dd>端口号</dd>
<dt>pathname</dt><dd>对应python urlsplit之后的path</dd>
<dt>search</dt><dd>参数字段</dd>
<dt>hash</dt><dd>也就是segement</dd>
</dl>

<hr >

<dl class="org-dl">
<dt>assign()</dt><dd>刷新当前页面</dd>
<dt>reload()</dt><dd>重载当前页面</dd>
</dl>
</div>
</div>

<div class="outline-3">
<h3 id="orgheadline41">document</h3>
<div class="outline-text-3" id="text-3-5">
<p>
你可以认为这是beautifulsoup刷过之后的网页文档树，这是以后我们操作文档的主要交互对象。比如简单的写入html代码:
</p>
<div class="highlight"><pre><span></span><span class="nb">document</span><span class="p">.</span><span class="nx">write</span><span class="p">(</span><span class="s2">&quot;&lt;h1&gt;This is a heading&lt;/h1&gt;&quot;</span><span class="p">);</span>
<span class="nb">document</span><span class="p">.</span><span class="nx">write</span><span class="p">(</span><span class="s2">&quot;&lt;p&gt;This is a paragraph.&lt;/p&gt;&quot;</span><span class="p">);</span>
</pre></div>

<p>
这会在网页文档里面附加一些内容。
</p>

<p>
按钮点击一下则执行什么javascript代码。
</p>
<div class="highlight"><pre><span></span><span class="o">&lt;</span><span class="nx">button</span> <span class="nx">type</span><span class="o">=</span><span class="s2">&quot;button&quot;</span> <span class="nx">onclick</span><span class="o">=</span><span class="s2">&quot;alert(&#39;Welcome!&#39;)&quot;</span><span class="o">&gt;</span><span class="nx">点击这里</span><span class="o">&lt;</span><span class="err">/button&gt;</span>
</pre></div>

<p>
javascript改变HTML内容
</p>
<div class="highlight"><pre><span></span><span class="p">&lt;</span><span class="nt">script</span><span class="p">&gt;</span>
<span class="kd">function</span> <span class="nx">myFunction</span><span class="p">()</span>
<span class="p">{</span>
<span class="nx">x</span><span class="o">=</span><span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s2">&quot;demo&quot;</span><span class="p">);</span>  <span class="c1">// 找到元素</span>
<span class="nx">x</span><span class="p">.</span><span class="nx">innerHTML</span><span class="o">=</span><span class="s2">&quot;Hello JavaScript!&quot;</span><span class="p">;</span>    <span class="c1">// 改变内容</span>
<span class="p">}</span>
<span class="p">&lt;/</span><span class="nt">script</span><span class="p">&gt;</span>

<span class="p">&lt;</span><span class="nt">button</span> <span class="na">type</span><span class="o">=</span><span class="s">&quot;button&quot;</span> <span class="na">onclick</span><span class="o">=</span><span class="s">&quot;myFunction()&quot;</span><span class="p">&gt;</span>点击这里<span class="p">&lt;/</span><span class="nt">button</span><span class="p">&gt;</span>
</pre></div>


<dl class="org-dl">
<dt>title</dt><dd>title标签内所含的内容</dd>
<dt>cookie</dt><dd>获取cookie的内容</dd>
<dt>getElementById()</dt><dd>该方法用于根据Id来提取网页内容的某个DOM子节点</dd>
<dt>getElementsByTagName()</dt><dd>该方法用于根据Tag标签名字来提取某个DOM子节点（看到那个Elements的s，其将返回多个命中目标。记住带s的这些将返回的是一个数组对象）</dd>
<dt>getElementsByClassName()</dt><dd>该方法用于根据css来进行选择某些DOM子节点。</dd>
</dl>

<p>
返回的所谓DOM子节点对象，可以如同document对象一样使用这三个方法，相当于在第一次查找结果之上进一步查找。
</p>

<dl class="org-dl">
<dt>querySelector()</dt><dd>类似beautifulsoup的selector选择语法:</dd>
</dl>
<pre>
var ps = q1.querySelectorAll('div.highlighted &gt; p');
</pre>
<dl class="org-dl">
<dt>querySelectorAll()</dt><dd>类似上面，但返回所有结果。</dd>
</dl>


<p>
找到目标标签元素之后，各个样式属性可以如下直接引用:
</p>
<pre>
document.querySelector('a').href
</pre>
</div>

<div class="outline-4">
<h4 id="orgheadline38">getAttribute函数</h4>
<div class="outline-text-4" id="text-3-5-1">
<p>
找到元素之后我们可以使用 <code>getAttribute</code> 函数来获取其属性。比如获取title属性:
</p>
<pre>
object.getAttribute("title")
</pre>
</div>
</div>

<div class="outline-4">
<h4 id="orgheadline39">setAttribute函数</h4>
<div class="outline-text-4" id="text-3-5-2">
<p>
设置某个元素节点的属性值。
</p>

<pre>
object.setAttribute(attribute,value)
</pre>
</div>
</div>

<div class="outline-4">
<h4 id="orgheadline40">修改节点的文本内容</h4>
<div class="outline-text-4" id="text-3-5-3">
<dl class="org-dl">
<dt>innerHTML</dt><dd>对应该DOM节点标签内的文本内容</dd>
<dt>innerText</dt><dd>类似上面的innerHTML，但不可设置任何HTML标签</dd>
</dl>


<dl class="org-dl">
<dt>createElement()</dt><dd>创建一个标签元素对象:</dd>
</dl>
<pre>
var haskell = document.createElement('p');
haskell.id = 'haskell';
haskell.innerText = 'Haskell';
</pre>
<p>
上面的haskell具体内容就是: <code>&lt;p id=​"haskell"&gt;​Haskell​&lt;/p&gt;​</code> 。
</p>

<dl class="org-dl">
<dt>appendChild()</dt><dd>本标签元素为所谓的父节点，给自己添加一个子节点标签元素。（可以把找到的标签元素视作一个列表，然后执行append某个子节点操作）</dd>
<dt>insertBefore()</dt><dd>本标签元素为所谓的父节点，然后在其内的某个标签元素之前插入某个子节点标签元素:</dd>
</dl>
<pre>
parentElement.insertBefore(newElement, referenceElement);
</pre>
<dl class="org-dl">
<dt>insertAfter()</dt><dd>javascript原生没有，需要自己定义:</dd>
</dl>

<div class="highlight"><pre><span></span><span class="kd">function</span> <span class="nx">insertAfter</span><span class="p">(</span><span class="nx">newElement</span><span class="p">,</span> <span class="nx">targetElement</span><span class="p">){</span>
    <span class="kd">var</span> <span class="nx">parent</span> <span class="o">=</span> <span class="nx">targetElement</span><span class="p">.</span><span class="nx">parentNode</span><span class="p">;</span>
    <span class="k">if</span> <span class="p">(</span><span class="nx">parent</span><span class="p">.</span><span class="nx">lastChild</span> <span class="o">==</span> <span class="nx">targetElement</span><span class="p">){</span>
        <span class="nx">parent</span><span class="p">.</span><span class="nx">appendChild</span><span class="p">(</span><span class="nx">newElement</span><span class="p">);</span>
    <span class="p">}</span>
    <span class="k">else</span><span class="p">{</span>
        <span class="nx">parent</span><span class="p">.</span><span class="nx">insertBefore</span><span class="p">(</span><span class="nx">newElement</span><span class="p">,</span> <span class="nx">targetElement</span><span class="p">.</span><span class="nx">nextSibling</span><span class="p">);</span>
    <span class="p">}</span>
<span class="p">}</span>
</pre></div>

<dl class="org-dl">
<dt>parentElement</dt><dd>返回本标签元素对象的父标签元素对象</dd>
<dt>removeChild()</dt><dd>本标签元素为父节点，删除本父节点的某个子节点</dd>
</dl>

<p>
但是实际使用中推荐用jquery来操作各个DOM节点。
</p>
</div>
</div>
</div>
</div>


<div class="outline-2">
<h2 id="orgheadline43">表单相关</h2>
<div class="outline-text-2" id="text-4">
<p>
<a href="http://www.liaoxuefeng.com/wiki/001434446689867b27157e896e74d51a89c25cc8b43bdb3000/001434499922277b890fd537901490a84fc24b2b8b8867e000">http://www.liaoxuefeng.com/wiki/001434446689867b27157e896e74d51a89c25cc8b43bdb3000/001434499922277b890fd537901490a84fc24b2b8b8867e000</a>
</p>
</div>
</div>


<div class="outline-2">
<h2 id="orgheadline44">AJAX技术</h2>
<div class="outline-text-2" id="text-5">
<p>
AJAX技术英文全名是: Asynchronous JavaScript and XML ，什么异步的JavaScript与XML技术。简单的了解就是网页开着，然后javascript开启了某个类似于python的requests模块的网页请求，一般是向本地的网页服务器发送的吧，但也可以跨站请求。然后其是异步的，如果不异步，那么网页阻塞了，用户无法继续阅读或点击了，这当然是不行的。
</p>

<p>
基本的使用过程是新建然后 <code>XMLHttpRequest()</code> 对象，然后通过这个对象来进行后续的操作。如下所示:
</p>

<pre>
var request = new XMLHttpRequest();
</pre>

<p>
然后就是定义request的行为:
</p>

<pre>
request.onreadystatechange = function(){
    do something;
}
</pre>

<p>
我们看得出来这是一个什么 <code>onreadystatechange</code> 事件，然后挂载了某个函数。然后request有如下几个 <code>readyState</code> 状态:
</p>

<ul class="org-ul">
<li>0 未初始化</li>
<li>1 正在加载</li>
<li>2 加载完毕</li>
<li>3 正在交互</li>
<li>4 完成</li>
</ul>

<p>
请求的HTTP状态码返回通过 <code>request.status</code> 获得，请求的响应文本通过 <code>request.responseText</code> 获得，此外还有一个 <code>responseXML</code> 属性，如果服务器响应是XML则用它。
</p>


<pre>
var request = new XMLHttpRequest(); // 新建XMLHttpRequest对象

request.onreadystatechange = function () { // 状态发生变化时，函数被回调
    if (request.readyState === 4) { // 成功完成
        // 判断响应结果:
        if (request.status === 200) {
            // 成功，通过responseText拿到响应的文本:
            return success(request.responseText);
        } else {
            // 失败，根据响应码判断失败原因:
            return fail(request.status);
        }
    } else {
        // HTTP请求还在继续...
    }
}

// 发送请求:
request.open('GET', '/api/categories');
request.send();
</pre>

<p>
然后就是通过request的 <code>open</code> 方法和 <code>send</code> 方法来实际发送请求了。比如 'GET'
</p>

<pre>
request.open('GET',url,true)
request.send()
</pre>

<p>
第三个参数是异步否，一般设置为true。
</p>

<p>
如果是 'POST' 则send还可以发送一些东西作为POST请求的额外数据。下面是来自w3school的一个例子:
</p>
<pre>
xmlhttp.open("POST","ajax_test.asp",true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send("fname=Bill&amp;lname=Gates");
</pre>
<p>
这里的 <code>setRequestHeader</code> 是设置请求头的，然后send的是string字符串，也就是说我们想要发送json或者那种字典格式，是需要额外处理的。（我注意到jquery提供的data这个东西可以直接是字典值。）
</p>

<p>
然后在处理request过程，我们一般是需要等到readyState为4然后http状态码为200才进行某个动作，也就是廖雪峰的这个例子所展示的sucess情况:
</p>
<pre>
request.onreadystatechange = function () { // 状态发生变化时，函数被回调
    if (request.readyState === 4) { // 成功完成
        // 判断响应结果:
        if (request.status === 200) {
            // 成功，通过responseText拿到响应的文本:
            return success(request.responseText);
        } else {
            // 失败，根据响应码判断失败原因:
            return fail(request.status);
        }
    } else {
        // HTTP请求还在继续...
    }
}
</pre>

<p>
我注意到jquery里面有个sucess这个东西，应该对应的就是这里的success的情况，难怪jquery那么流行，就是ajax这里就带来了很大的便利，更不用提 <code>document. getElementById()</code> 等等那些冗长的语法了。关于jquery另外一篇文章讨论吧。
</p>
</div>
</div>


<div class="outline-2">
<h2 id="orgheadline52">附录</h2>
<div class="outline-text-2" id="text-6">
<p>
一些零碎的东西拾遗。
</p>
</div>

<div class="outline-3">
<h3 id="orgheadline45">windows加载事件</h3>
<div class="outline-text-3" id="text-6-1">
<div class="highlight"><pre><span></span><span class="kd">function</span> <span class="nx">addLoadEvent</span><span class="p">(</span><span class="nx">func</span><span class="p">){</span>
    <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s2">&quot;window onload event&quot;</span><span class="p">);</span>
    <span class="kd">var</span> <span class="nx">oldonload</span> <span class="o">=</span> <span class="nb">window</span><span class="p">.</span><span class="nx">onload</span><span class="p">;</span>
    <span class="k">if</span> <span class="p">(</span><span class="k">typeof</span> <span class="nb">window</span><span class="p">.</span><span class="nx">onload</span> <span class="o">!=</span> <span class="s1">&#39;function&#39;</span><span class="p">){</span>
        <span class="nb">window</span><span class="p">.</span><span class="nx">onload</span> <span class="o">=</span> <span class="nx">func</span><span class="p">;</span>
    <span class="p">}</span>
    <span class="k">else</span><span class="p">{</span>
        <span class="nb">window</span><span class="p">.</span><span class="nx">onload</span> <span class="o">=</span> <span class="kd">function</span> <span class="p">(){</span>
            <span class="nx">oldonload</span><span class="p">();</span>
            <span class="nx">func</span><span class="p">();</span>
        <span class="p">}</span>
    <span class="p">}</span>
<span class="p">}</span>
</pre></div>
</div>
</div>

<div class="outline-3">
<h3 id="orgheadline46">this关键词</h3>
<div class="outline-text-3" id="text-6-2">
<p>
this关键词的内容挺丰富的，总的来说this就是指对象本身:
</p>

<ol class="org-ol">
<li>this在函数内部表示本函数自身</li>
<li>如果在方法里面（这里强调方法是指对象的某个数值的值是函数对象），则this是本对象。</li>
</ol>
</div>
</div>


<div class="outline-3">
<h3 id="orgheadline47">hello方法</h3>
<div class="outline-text-3" id="text-6-3">
<p>
重定义hello方法相当于python的重定义 <code>__init__</code> 方法，其为该对象的重构函数，这样你就可以使用 <code>new</code> 来新建一个实例了。
</p>
<pre>
s = new Student('John')
</pre>
</div>
</div>

<div class="outline-3">
<h3 id="orgheadline48">name属性</h3>
<div class="outline-text-3" id="text-6-4">
<p>
name属性是一个特殊的属性，常用来表示该对象的名字。
</p>
</div>
</div>


<div class="outline-3">
<h3 id="orgheadline49">集合</h3>
<div class="outline-text-3" id="text-6-5">
<p>
javascript中的集合Set大体也和python中的集合概念相近。
</p>
<pre>
var s1 = new Set(); // 空Set
var s2 = new Set([1, 2, 3]); // 含1, 2, 3
</pre>

<p>
然后其也有 <code>add</code> 方法用于添加一个元素。用 <code>delete</code> 方法来删除某个元素。
</p>
</div>
</div>


<div class="outline-3">
<h3 id="orgheadline50">Date对象</h3>
<div class="outline-text-3" id="text-6-6">
<pre>
var now = new Date();
now; // Wed Jun 24 2015 19:49:22 GMT+0800 (CST)
now.getFullYear(); // 2015, 年份
now.getMonth(); // 5, 月份，注意月份范围是0~11，5表示六月
now.getDate(); // 24, 表示24号
now.getDay(); // 3, 表示星期三
now.getHours(); // 19, 24小时制
now.getMinutes(); // 49, 分钟
now.getSeconds(); // 22, 秒
now.getMilliseconds(); // 875, 毫秒数
now.getTime(); // 1435146562875, 以number形式表示的时间戳
</pre>
</div>
</div>

<div class="outline-3">
<h3 id="orgheadline51">参考资料</h3>
<div class="outline-text-3" id="text-6-7">
<ol class="org-ol">
<li><a href="https://www.codecademy.com/">https://www.codecademy.com/</a></li>
<li><a href="http://www.liaoxuefeng.com/wiki/001434446689867b27157e896e74d51a89c25cc8b43bdb3000">廖雪峰的javascript教程</a></li>
<li>javascript DOM编程艺术第二版: Jeremy Keith, Jeffrey Sambells著; 杨涛 王建桥 杨晓云等译.</li>
</ol>
</div>
</div>
</div>
</div>
</body>
</html>