学习笔记-js-2017.2.27

一、Array(数组) 对象

数组可以用一个变量名存储所有的值,并且可以用变量名访问任何一个值。

数组中的每个元素都有自己的的ID,以便它可以很容易地被访问到。

访问数组中的第一个对象

 <p id="demo"></p>
    <script type="text/javascript">
        var myCars=["a","b","c","d"];
        var name=myCars[0];
        document.getElementById("demo").innerHTML=myCars;
    </script>

改变数组中第一个对象并输出

<p id="demo"></p>
    <script type="text/javascript">
        var myCars=["a","b","c","d"];
        myCars[0]="f";
        document.getElementById("demo").innerHTML=myCars;
    </script>

合并数组

<script type="text/javascript">
        var myCars=["a","b","c","d"];
        var mytxt=["e","f","g"];
        var he=myCars.concat(mytxt);
        document.write(he);
    </script>

从一个数组中选择元素

<p id="demo"></p>
    <button onclick="myFunction()">点击</button>
    <script type="text/javascript">
        function myFunction(){
         var myCars=["a","b","c","d"];
         var select=myCars.slice(0,3);
         document.getElementById("demo").innerHTML=select;
        }
    </script>

二、JavaScript 弹窗

<script type="text/javascript">
    function myFunction(){
        var x;
        var r=confirm("按下按钮");
        if(r==true){
            x="你按下了\"确定\"按钮!";
        }
        else{
            x="你按下了\"取消\"按钮!";
        }
        document.getElementById("demo").innerHTML=x;
    }

</script>

<button onclick="myFunction()">点击</button>
<p id="demo"></p>
<script type="text/javascript">
    function myFunction(){
        var x;
        var person=prompt("请输入你的名字","Harry Potter");
        if(person!=null&&person!=""){
            x="你好"+person+"!今天感觉如何?";
            document.getElementById("demo").innerHTML=x;
        }
    }
</script>

三、JavaScript Cookie

<script type="text/javascript">
    function setCookie(cname,cvalue,exdays){
        var d=new Date();
        d.setTime(d.getTime()+(exdays*24*60*60*1000));
        var expires="expires="+d.toGMTString();
        document.cookie=cname+"="+cvalue+";"+expires;
    }
    function getCookie(cname){
        var name=cname+"=";
        var ca=document.cookie.split(';');
        for(var i=0;i<ca.length;i++){
            var c=ca[i].trim();
            if(c.indexOf(name)==0)return c.substring(name.length,c.length);
        }
        return"";
    }
    function checkCookie(){
        var user=getCookie("username");
        if(user!="")
        {
            alert("Welcome again "+user);
        }
        else{
            user=prompt("please enter your name:","");
            if(user!="" && user!=null)
            {
                setCookie("username",user,30);
            }
        }
    }
</script>

四、JavaScript 计时事件

每三秒弹出 "hello" :

<script type="text/javascript">
    function myFunction(){
        setInterval(function(){alert("Hello")},3000);
    }
</script>

三秒后弹出“hello”

<script type="text/javascript">
    function myFunction(){
        setTimeout(function(){alert("Hello")},3000);
    }
</script>

五、JavaScript 函数定义

1、函数声明

function functionName(parameters) {
  执行的代码
} 
<script type="text/javascript">
    function myFunction(a,b){
        return a/b;
    }
    document.getElementById("demo").innerHTML=myFunction(0.1,0.2);
</script>

2、Function() 构造函数

<script type="text/javascript">
    var myFunction = new Function("a","b","return a*b");
    document.getElementById("demo").innerHTML=myFunction(4,3);
</script>

3、自调用函数

<p id="demo"></p>
<script type="text/javascript">
(function(){
    document.getElementById("demo").innerHTML="Hello!"
})();
</script>

4、函数可作为一个值使用

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

5、函数是对象

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

六、JavaScript 函数参数

1、Arguments 对象

JavaScript 函数有个内置的对象 arguments 对象。

argument 对象包含了函数调用的参数数组。

<p id="demo"></p>
<script type="text/javascript">
    x=findMax(1,123,500,115,44,88);
    function findMax(){
        var i,max=arguments[0];
        if(arguments.length<2) return max;
        for(i=0;i<arguments.length;i++){
            if(arguments[i]>max){
                max=arguments[i];
            }
        }
        return max;
    }
    document.getElementById("demo").innerHTML=x;
</script>

2、

<p id="demo"></p>
<script type="text/javascript">
    function sumAll(){
        var i,sum=0;
        for(i=0;i<arguments.length;i++){
            sum+=arguments[i];
        }
        return sum;
    }
    document.getElementById("demo").innerHTML=sumAll(1,2,3,4,5,6);
</script>

七、JavaScript 函数调用

1、函数作为方法调用

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

2、使用构造函数调用函数

<p id="demo"></p>
<script type="text/javascript">
    function myFunction(args1,args2){
        this.firstName=arg1;
        this.lastName=arg2;
    }
    var x=new myFunction("John","Doe")
    document.getElementById("demo").innerHTML=x.firstName;
</script>

3、作为函数方法调用函数

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

八、JavaScript 闭包

1、全局变量

函数可以访问�由函数内部定义的变量

<button type="button" onclick="myFunction()">点击</button>
<p id="demo"></p>
<script type="text/javascript">
    function myFunction(){
        var a=4;
        document.getElementById("demo").innerHTML=a*a;
    }
</script>

2、函数访问定义在函数外的变量

<script type="text/javascript">
        var a=4;
        function myFunction(){
        document.getElementById("demo").innerHTML=a*a;
    }
</script>

3、JavaScript 闭包

<button type="button" onclick="myFunction()">点击</button>
<p id="demo"></p>
<script type="text/javascript">
    var add=(function(){
        var counter=0;
        return function(){return counter +=1;}
    })();
    function myFunction(){
        document.getElementById("demo").innerHTML=add();
    }
</script>

九、ECMAScript 基础

ECMAScript 原始类型

ECMAScript 有 5 种原始类型(primitive type),即 Undefined、Null、Boolean、Number 和 String。

typeof 运算符

对变量或值调用 typeof 运算符将返回下列值之一:

  • undefined - 如果变量是 Undefined 类型的
  • boolean - 如果变量是 Boolean 类型的
  • number - 如果变量是 Number 类型的
  • string - 如果变量是 String 类型的
  • object - 如果变量是一种引用类型或 Null 类型的

1、Undefined 类型

function testFunc() {
}

alert(testFunc() == undefined);  //输出 "true"

2、Null 类型
undefined 是声明了变量但未对其初始化时赋予该变量的值,null 则用于表示尚未存在的对象

3、Boolean 类型

var bFound = true;
var bLost = false;

4、Number 类型

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

推荐阅读更多精彩内容

  • 第5章 引用类型(返回首页) 本章内容 使用对象 创建并操作数组 理解基本的JavaScript类型 使用基本类型...
    大学一百阅读 3,231评论 0 4
  • 有人说过,很多弯路到最后都成了直路,所有的坑到最后也都成了坦途;所谓的直路和坦途并不是摆在眼前的,都是不断的的...
    老衲法号一眉道人阅读 1,326评论 0 4
  • 第1章 JavaScript 简介 JavaScript 具备与浏览器窗口及其内容等几乎所有方面交互的能力。 欧洲...
    力气强阅读 1,124评论 0 0
  • 第一章: JS简介 从当初简单的语言,变成了现在能够处理复杂计算和交互,拥有闭包、匿名函数, 甚至元编程等...
    LaBaby_阅读 1,664评论 0 6
  • 冲着鹿晗初见版MV《让我留在你身边》去看了《摆渡人》,看到导演/编剧是张嘉佳的时候就知道:“噢,原来真的只是喜剧片...
    我是蟹老板阅读 274评论 1 0