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岁的狗叫了

posted on 2016-08-08 19:02 怡情_老二阅读(175) 评论(0) 编辑收藏举报