学习笔记-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>
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 204,793评论 6 478
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 87,567评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 151,342评论 0 338
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,825评论 1 277
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,814评论 5 368
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,680评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,033评论 3 399
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,687评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 42,175评论 1 300
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,668评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,775评论 1 332
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,419评论 4 321
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,020评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,978评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,206评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 45,092评论 2 351
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,510评论 2 343

推荐阅读更多精彩内容

  • FreeCodeCamp - Basic JavaScript 写在前面: 我曾经在进谷前刷过这一套题,不过当时只...
    付林恒阅读 16,428评论 5 28
  • 标签: 我的笔记 ---学习资料:http://javascript.ruanyifeng.com/ 1. 导论 ...
    暗夜的怒吼阅读 792评论 0 1
  • 第5章 引用类型(返回首页) 本章内容 使用对象 创建并操作数组 理解基本的JavaScript类型 使用基本类型...
    大学一百阅读 3,211评论 0 4
  • 走上音乐道路的人都是疯子 他们不怕流血不怕流泪 能昂头挺胸拨开无数轻蔑嘲讽的脸独自微笑着朝前走 宽容大度的原谅恶意...
    南陵阅读 233评论 1 0
  • [ 湖面终于泛起了一叶小舟,平日湖面管制不许舟船破坏湖水的澄澈与鱼儿的宁静,今晨曦,有渔人不顾限制,撑着小舟去湖中...
    花香小札阅读 226评论 0 3