zoukankan      html  css  js  c++  java
  • JS学习笔记(一)

    按照W3C上一点点练习的

    代码:

    <!DOCTYPE html>
    <html>
    <head lang="en">
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            div {
                margin: 10px;
                background-color: lightslategrey;
                padding: 10px;
            }
        </style>
    
    </head>
    <body>
    <!-- 跳转到某个位置 -->
        <a href="#isHere"></a>
    
    <!-- 写入 HTML 输出 -->
        <div>
            <script>
                document.write("<h2>JavaScript 能够直接写入 HTML 输出流中:</h2>");
                document.write("<p>只能在 HTML 输出流中使用 document.write。 如果您在文档已加载后使用它(比如在函数中),会覆盖整个文档。</p>");
            </script>
        </div>
    
    
    
    <!-- 对事件作出反应 -->
        <div>
            <button type="button" onclick="alert('欢迎!')">对事件作出反应 点我</button>
        </div>
    
    
    
    <!-- 改变 HTML 内容 -->
        <div>
            <p id="test">JavaScript 能改变 HTML 元素的内容。</p>
            <script>
                function changeTitle() {
                    x = document.getElementById('test');
                    x.innerHTML = "变了吧,哈哈";
                }
            </script>
            <button type="button" onclick="changeTitle()">点击改变上面的文字</button>
        </div>
    
    
    
    <!-- 改变 HTML 图片 -->
    
        <div>
            <script>
                function changeImage() {
                    element = document.getElementById('myimage');
                    if (element.src.match("bulbon")) {
                        element.src = "images/eg_bulboff.gif";
                    } else {
                        element.src = "images/eg_bulbon.gif";
                    }
                }
            </script>
    
            <img id="myimage" onclick="changeImage()" src="images/eg_bulboff.gif">
            <p>点击灯泡</p>
    
        </div>
    
    
    <!-- JavaScript 能够改变任意 HTML 元素的大多数属性,而不仅仅是图片 -->
        <div>
            <script>
                function changeColor() {
                    x = document.getElementById('test');
                    x.style.color = "#ff0000";
                }
            </script>
            <button type="button" onclick="changeColor()">JavaScript 能够改变任意 HTML 元素的大多数属性,而不仅仅是图片。</button>
    
        </div>
    
    
    <!-- 验证输入 -->
        <div>
            <p>请输入数字。如果输入值不是数字,浏览器会弹出提示框。</p>
            <input id="myInput" type="text">
            <script>
                function checkInfo() {
    
                    var x = document.getElementById("myInput").value;
                    if (x == "" || isNaN(x)) {
                        alert("不是数字");
                    }
                }
            </script>
            <button type="button" onclick="checkInfo()">check</button>
        </div>
    
    
    <!-- JavaScript 输出 -->
        <div>
            <a id="isHere"></a>
            <h2>JavaScript 输出</h2>
            <p>1、把它的内容(innerHTML)My First Paragraph 替换为 "My First JavaScript"。</p>
            <p id="myTest">My First Paragraph.</p>
            <script>
                document.getElementById('myTest').innerHTML = "My First JavaScript";
            </script>
            </br>
    
            <p>2、直接把 "p" 元素写到 HTML 文档输出中:</p>
            <script>
                document.write("<p>我是使用jS直接写入的</p>");
            </script>
        </div>
    
    
    <a href="#isHere"></a>
    
    
    <!--  警告
    请使用 document.write() 仅仅向文档输出写内容。
    如果在文档已完成加载后执行 document.write,整个 HTML 页面将被覆盖:
    -->
        <div>
            <button onclick="myFunction()">点击这里</button>
            <script>
                function myFunction() {
                    document.write("糟糕!文档消失了。");
                }
            </script>
        </div>
    </body> </html>

    JS变量

    • var 变量名 = 变量值;//自己会判断什么类型
    • 一个好的编程习惯是,在代码开始处,统一对需要的变量进行声明。
    • var name = “xiaosan”, age = 22, address = “owrhohfw”; 
    • var a = 10;  
    • var b;   // 当一个变量没有被赋值的时候,是undefined
              console.log(typeof b);  //打印a的类型
     
    • 重新声明JS变量,改变量的值不会丢失
      • var name = “Siri”;
      • var name;   // 依然是Siri

    数据类型

    • 不能写数据类型,只能用var,也可以省去var 直接写
    • number:所有数字,比如小数整数
    • object:对象类型
    • string:字符串类型,用双引号“aaa”或者单引号‘ aaa’, 建议单引号
    • function:函数类型     var msg = '我是 '
    • boolean : true / false
    • var age = 20;
      var name = 'xiaosan';
      height = 1.88;
      var msg = '我是' + name + ',' + age + '岁,身高是' + height;
     
     
    运算符从左到右
    • 其他数据类型和字符串相加,会变成一个新的字符串
    • var str1 = 10+10+'10';   //2010
      var str2 = '10'+10+10;   //101010
      var str3 = '10'+(10+10);   //1020
     
     
    数组
    // 写法一
    var cars = new Array();
    cars[0] = "Audi";
    cars[1] = "BMW";
    
    // 写法二
    var names = new Array("jack", "rose", "dd");    

    Undefined和Null

    • Undefined这个值标示变量不含有值。可以通过将变量的值设置为 null 来清空变量。
    • cars = null;

    对象

    • 在JS中,对象是数据(变量),拥有属性和方法。
    • JS中所有事物都是对象:字符串、数字、数组、日期等。
    • 对象拥有属性和方法的数据。
      • 属性是与对象相关的值。
      • 方法是能够在对象上执行的动作。
    // 对象由花括号分隔。在括号内部,对象的属性以名称和值对的形式 (name : value) 来定义。属性由逗号分隔
    var myDog = {
         age : 20,    //也可以这样写 'age' : 20      "age" : 20
         name : 'rose'
    };
    
    // 对象属性有两种寻址方式
    console.log(myDog.name);
    console.log(myDog['name']); // 这种方括号里面只能传字符串,不加引号系统会认为是一个变量

    对象调用方法

    function temp(){
      console.log('跑起来');
    }
    var dog = {
      age : 5,
      run : temp,
      // 一般都是把函数封装到对象的里面
      run2 : function () {
        console.log(this.age + '岁的狗跑起来');  //this == self
      }
    };
    dog.run();   // JS里的对象是这样调用方法的      跑起来
    dog.run2();  //  5岁的狗跑起来
    
    dog.age = 100;    //age变为100
    dog.run = function () {
      console.log(this.age + '岁的狗叫了');
    };
    dog.run(); //  100岁的狗叫了
    
    var dog2 = {
      age : 1
    };
    
    dog2.run = dog.run;
    dog2.run();  //1岁的狗叫了    
     
  • 相关阅读:
    OSX安装nginx和rtmp模块(rtmp直播服务器搭建)
    用runtime来重写Coder和deCode方法 归档解档的时候使用
    Homebrew安装卸载
    Cannot create a new pixel buffer adaptor with an asset writer input that has already started writing'
    OSX下面用ffmpeg抓取桌面以及摄像头推流进行直播
    让nginx支持HLS
    iOS 字典转json字符串
    iOS 七牛多张图片上传
    iOS9UICollectionView自定义布局modifying attributes returned by UICollectionViewFlowLayout without copying them
    Xcode6 iOS7模拟器和Xcode7 iOS8模拟器离线下载
  • 原文地址:https://www.cnblogs.com/10-19-92/p/5750613.html
Copyright © 2011-2022 走看看