学习笔记-js-2017.2.21

一、JavaScript 对象

1、函数属性作为一个方法访问

<p id="demo"></p>
    <script type="text/javascript">
        var person ={
            firstName:"John",
            lastName:"Doe",
            id:5566,
            fullName:function()
            {
                return this.firstName+" "+this.lastName;
            }
        };
        document.getElementById("demo").innerHTML=person.fullName();
    </script>

2、函数属性作为一个属性访问

<p id="demo"></p>
    <script type="text/javascript">
        var person ={
            firstName:"John",
            lastName:"Doe",
            id:5566,
            fullName:function()
            {
                return this.firstName+" "+this.lastName;
            }
        };
        document.getElementById("demo").innerHTML=person.fullName;
    </script>

二、JavaScript 函数

1、调用带参数的函数

<button onclick="myFunction('asu','teacher')">点击</button>
    <script type="text/javascript">
        function myFunction(name,job){
            alert("welcome "+name+", the "+job);
        }
    </script>

在调用函数时，您可以向其传递值，这些值被称为参数。这些参数可以在函数中使用。

您可以发送任意多的参数，由逗号 (,) 分隔，变量和参数必须以一致的顺序出现。第一个变量就是第一个被传递的参数的给定的值，以此类推。

2、带有返回值的函数
在使用 return 语句时，函数会停止执行，并返回指定的值。

<p id="demo"></p>
    <script type="text/javascript">
        function myFunction(a,b){
            return a*b;
        }
     document.getElementById("demo").innerHTML=myFunction(3,4);
    </script>

三、JavaScript 作用域

在 JavaScript 中, 对象和函数同样也是变量。

在 JavaScript 中, 作用域为可访问变量，对象，函数的集合。

JavaScript 函数作用域: 作用域在函数内修改。

1、局部变量在声明的函数内不可以访问。

<p id="demo"></p>
    <script type="text/javascript">
        myFunction();
        document.getElementById("demo").innerHTML="carName的类型是："+typeof carName;
        function myFunction()
        {
            var carName="Volvo";
        }
    </script>

2、全局变量在任何脚本和函数内均可访问。

<p id="demo"></p>
    <script type="text/javascript">
        var carName="volvo";
        myFunction();
        function myFunction()
        {           document.getElementById("demo").innerHTML="我可以显示："+carName;
        }
    </script>

3、如果你的变量没有声明，它将自动成为全局变量：

<p id="demo"></p>
    <script type="text/javascript">
        myFunction();
        document.getElementById("demo").innerHTML="我可以显示："+carName;
        function myFunction()
        {
            carName="volvo";
        }
    </script>

4、在 HTML 中, 所有全局变量都会成为 window 变量。

<p id="demo"></p>
    <script type="text/javascript">
        myFunction();
        document.getElementById("demo").innerHTML="我可以显示 "+window.carName;
        function myFunction()
        {
            carName="Volvo";
        }
    </script>

四、JavaScript 事件

1、代码将修改自身元素的内容 (使用 this.innerHTML):

<button onclick="this.innerHTML=Date()">点击</button>

2、点击按钮执行 displayDate() 函数.

<button onclick="displaydate()">点击</button>
    <script type="text/javascript">
        function displaydate(){
            document.getElementById("demo").innerHTML=Date();
        }
    </script>
    <P id="demo"></P>

五、JavaScript 字符串

1、字符串可以存储一系列字符，如 "John Doe"。

字符串可以是插入到引号中的任何字符。你可以使用单引号或双引号：

<P id="demo"></P>
    <script type="text/javascript">
        var x='it\'s alright';
        var y="he is called \"John\"";
        document.getElementById("demo").innerHTML=x+"<br>"+y;
    </script>

2、字符串长度
可以使用内置属性 length 来计算字符串的长度：

<script type="text/javascript">
        
        var txt="hello world";
        document.write("<p>"+txt.length+"<p>");
        var txt="dfadfgaewaewa";
        document.write("<p>"+txt.length+"<p>");
    </script>

3、特殊字符

4、字符串可以是对象

<p id="demo"></p>
    <script type="text/javascript">
        var x="John";
        var y=new String("John");
        document.getElementById("demo").innerHTML=typeof x+" "+typeof y;
    </script>

<p id="demo"></p>
    <script type="text/javascript">
        var x="John";
        var y=new String("John");
        document.getElementById("demo").innerHTML=x===y;
        /*=== 为绝对相等，即数据类型与值都必须相等。*/
    </script>

5、字符串属性和方法

原始值字符串，如 "John", 没有属性和方法(因为他们不是对象)。

原始值可以使用 JavaScript 的属性和方法，因为 JavaScript 在执行方法和属性时可以把原始值当作对象。

字符串属性

字符串方法

六、JavaScript 运算符

1、运算符 = 用于给 JavaScript 变量赋值。

算术运算符 + 用于把值加起来。

<button onclick="myFunction()">点击计算</button>
    <p id="demo"></p>
    <script type="text/javascript">
        function myFunction()
        {
            y=5;
            z=2;
            x=y+z;
            document.getElementById("demo").innerHTML=x;
        }
    </script>

2、JavaScript 算术运算符
y=5，下面的表格解释了这些算术运算符：

3、赋值运算符用于给 JavaScript 变量赋值。
给定 x=10 和 y=5，下面的表格解释了赋值运算符：

4、用于字符串的 + 运算符

<button onclick="myFunction()">点击</button>
    <p id="demo"></p>
    <script type="text/javascript">
        function myFunction()
        {
            txt1="what a very ";
            txt2="nice day";
            txt3=txt1+txt2;
            document.getElementById("demo").innerHTML=txt3;
        }
    </script>

5、对字符串和数字进行加法运算

两个数字相加，返回数字相加的和，如果数字与字符串相加，返回字符串:

<button onclick="myFunction()">点击</button>
    <p id="demo"></p>
    <script type="text/javascript">
    function myFunction(){
        var x=5+5;
        var y="50"+5;
        var z="hello"+110;
        var demop=document.getElementById("demo");
        demop.innerHTML=x+"<br>"+y+"<br>"+z;
    }
    </script>

七、JavaScript 比较和逻辑运算符

1、x=5，下面的表格解释了比较运算符：

2、逻辑运算符

给定 x=6 以及 y=3，下表解释了逻辑运算符：

3、条件运算符
语法：

variablename=(condition)?value1:value2

<input type="text" id="age" value="18">
    <button onclick="myFunction()">点击</button>
    <p id="demo"></p>
    <script type="text/javascript">
        function myFunction()
        {
            var age,voteable;
            age=document.getElementById("age").value;
            voteable=(age<18)?"年龄太小":"年龄已经达到";
            document.getElementById("demo").innerHTML=voteable;
        }
    </script>

八、JavaScript If...Else 语句

if 语句 - 只有当指定条件为 true 时，使用该语句来执行代码
if...else 语句 - 当条件为 true 时执行代码，当条件为 false 时执行其他代码
if...else if....else 语句- 使用该语句来选择多个代码块之一来执行
switch 语句 - 使用该语句来选择多个代码块之一来执行

1、If 语句

if (condition)
{
    当条件为 true 时执行的代码
}

<p>如果时间早于20：00，会获得问候“Good day”</p>
    <button onclick="myFunction()">点击</button>
    <p id="demo"></p>
    <script type="text/javascript">
    function myFunction(){
        var x="";
        var time=new Date().getHours();
        if(time<20){
            x="Good day";
        }
        document.getElementById("demo").innerHTML=x;
}
    </script>

2、If...else 语句

if (condition)
{
    当条件为 true 时执行的代码
}
else
{
    当条件不为 true 时执行的代码
}

<p>点击这个按钮，获得基于时间的问候。</p>
    <button onclick="myFunction()">点击</button>
    <p id="demo"></p>
    <script type="text/javascript">
    function myFunction(){
        var x="";
        var time=new Date().getHours();
        if(time<10){
            x="Good day";
        }
        else {
            x="Good night";
        }
        document.getElementById("demo").innerHTML=x;
}
    </script>

3、If...else if...else 语句

if (condition1)
{
    当条件 1 为 true 时执行的代码
}
else if (condition2)
{
    当条件 2 为 true 时执行的代码
}
else
{
  当条件 1 和 条件 2 都不为 true 时执行的代码
}

<p>点击这个按钮，获得基于时间的问候。</p>
    <button onclick="myFunction()">点击</button>
    <p id="demo"></p>
    <script type="text/javascript">
        function myFunction(){
        var x="";
        var time=new Date().getHours();
        if(time<10){
            x="早上好";
        }
        if(time>=10&&time<16){
            x="Good day";
        }
        else{
            x="晚上好"
        }
        document.getElementById("demo").innerHTML=x;
}
    </script>

九、JavaScript switch 语句

1、首先设置表达式 n（通常是一个变量）。随后表达式的值会与结构中的每个 case 的值做比较。如果存在匹配，则与该 case 关联的代码块会被执行。请使用 break 来阻止代码自动地向下一个 case 运行。


switch(n)
{
    case 1:
        执行代码块 1
        break;
    case 2:
        执行代码块 2
        break;
    default:
        与 case 1 和 case 2 不同时执行的代码
}

    <p>点击获得日期。</p>
    <button onclick="myFunction()">点击</button>
    <p id="demo"></p>
    <script type="text/javascript">
        function myFunction(){
            var x;
            var d=new Date().getDay();
            switch (d) {
                    case 0:x="今天是星期日";
                    break;
                    case 1:x="今天是星期一";
                    break;
                    case 2:x="今天是星期二";
                    break;
                    case 3:x="今天是星期三";
                    break;
                    case 4:x="今天是星期四";
                    break;
                    case 5:x="今天是星期五";
                    break;
                    case 6:x="今天是星期六";
                    break;
            }
        document.getElementById("demo").innerHTML=x;
}
    </script>

2、default 关键词

default 关键词规定匹配不存在时做的事情。

<button onclick="myFunction()">点击</button>
    <p id="demo"></p>
    <script type="text/javascript">
        function myFunction(){
            var x;
            var d=new Date().getDay();
            switch (d) {
                case 6:x="今天是星期六";
                break;
                case 0:x="今天是星期日";
                break;
                default:
                x="期待周末";       
            }
            document.getElementById("demo").innerHTML=x;
        }

十、JavaScript for 循环

1、输出数组的值

一般写法：


document.write(cars[0] + "<br>"); 
document.write(cars[1] + "<br>"); 
document.write(cars[2] + "<br>"); 
document.write(cars[3] + "<br>"); 
document.write(cars[4] + "<br>"); 
document.write(cars[5] + "<br>");

使用for循环

<script type="text/javascript">
        cars=["BMW","Volvo","Saab","Ford"];
        for( var i=0;i<cars.length;i++){
            document.write(cars[i]+"<br>");
        }
    </script>

2、不同类型的循环

for - 循环代码块一定的次数
for/in - 循环遍历对象的属性
while - 当指定的条件为 true 时循环指定的代码块
do/while - 同样当指定的条件为 true 时循环指定的代码块

3、For 循环
for 循环的语法

for (语句 1; 语句 2; 语句 3)
{
    被执行的代码块
}

语句 1 （代码块）开始前执行 starts.

语句 2 定义运行循环（代码块）的条件

语句 3 在循环（代码块）已被执行之后执行

<button onclick="myFunction()">点击</button>
    <p id="demo"></p>
    <script type="text/javascript">
    function myFunction(){
        var x="";
        for(var i=0;i<5;i++){
            x=x+"该数字为"+i+"<br>";
        }
        document.getElementById("demo").innerHTML=x;
    }
    </script>

4、语句 1

通常我们会使用语句 1 初始化循环中所用的变量 (var i=0)。

语句 1 是可选的，也就是说不使用语句 1 也可以。

<script type="text/javascript">
        cars=["a","b","c","d"];
        for (var i=0,l=cars.length; i<l; i++){
            document.write(cars[i] + "<br>");
        }
    </script>

或者：

<script type="text/javascript">
        cars=["a","b","c","d"];
        var i=2,len=cars.length;
        for(;i<len;i++){
            document.write(cars[i]+"<br>");
        }
    </script>

5、语句 2

通常语句 2 用于评估初始变量的条件。

语句 2 同样是可选的。

如果语句 2 返回 true，则循环再次开始，如果返回 false，则循环将结束。

6、语句 3

通常语句 3 会增加初始变量的值。

语句 3 也是可选的。

语句 3 有多种用法。增量可以是负数 (i--)，或者更大 (i=i+15)。

语句 3 也可以省略（比如当循环内部有相应的代码时）

<script type="text/javascript">
        cars=["a","b","c","d"];
        var i=0,len=cars.length;
        for(;i<len;){
            document.write(cars[i]+"<br>");
            i++;
        }
    </script>

7、For/In 循环

<button onclick="myFunction()">点击</button>
    <p id="demo"></p>
    <script type="text/javascript">
        function myFunction(){
            var x;
            var txt="";
            var person={fname:"Bill",lname:"Gates",age:56};
            for(x in person){
                txt=txt+person[x];
            }
            document.getElementById("demo").innerHTML=txt;
        }
    </script>

十一、JavaScript while 循环

while (条件)
{
    需要执行的代码
}

<button onclick="myFunction()">点击</button>
    <p id="demo"></p>
    <script type="text/javascript">
        function myFunction(){
            var x="",i=0;
            while(i<5){
                x=x + "该数字为" +i + "<br>";
                i++;
            }
            document.getElementById("demo").innerHTML=x;
        }
    </script>

最后编辑于：2017.12.05 23:30:10

人面猴
序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
沈念sama阅读 195,898评论 5赞 462
死咒
序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
沈念sama阅读 82,401评论 2赞 373
救了他两次的神仙让他今天三更去死
文/潘晓璐我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
开封第一讲书人阅读 143,058评论 0赞 325
道士缉凶录：失踪的卖姜人
文/不坏的土叔我叫张陵，是天一观的道长。经常有香客问我，道长，这世上最难降的妖魔是什么？我笑而不...
开封第一讲书人阅读 52,539评论 1赞 267
港岛之恋（遗憾婚礼）
正文为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
茶点故事阅读 61,382评论 5赞 358
恶毒庶女顶嫁案：这布局不是一般人想出来的
文/花漫我一把揭开白布。她就那样静静地躺着，像睡着了一般。火红的嫁衣衬着肌肤如雪。梳的纹丝不乱的头发上，一...
开封第一讲书人阅读 46,319评论 1赞 273
城市分裂传说
那天，我揣着相机与录音，去河边找鬼。笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。我是一名探鬼主播，决...
沈念sama阅读 36,706评论 3赞 386
双鸳鸯连环套：你想象不到人心有多黑
文/苍兰香墨我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
开封第一讲书人阅读 35,370评论 0赞 254
万荣杀人案实录
序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
沈念sama阅读 39,664评论 1赞 294
护林员之死
正文独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋以下内容为张勋视角年9月15日...
茶点故事阅读 34,715评论 2赞 312
白月光启示录
正文我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
茶点故事阅读 36,476评论 1赞 326
活死人
序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
沈念sama阅读 32,326评论 3赞 313
日本核电站爆炸内幕
正文年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
茶点故事阅读 37,730评论 3赞 299
男人毒药：我在死后第九天来索命
文/蒙蒙一、第九天我趴在偏房一处隐蔽的房顶上张望。院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
开封第一讲书人阅读 29,003评论 0赞 19
一桩弑父案，背后竟有这般阴谋
文/苍兰香墨我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。一阵脚步声响...
开封第一讲书人阅读 30,275评论 1赞 251
情欲美人皮
我被黑心中介骗来泰国打工，没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。一个月前我还...
沈念sama阅读 41,683评论 2赞 342
代替公主和亲
正文我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
茶点故事阅读 40,877评论 2赞 335