学习笔记-js-2017.2.20

1、JavaScript：直接写入 HTML 输出流

<script type="text/javascript">
    document.write("<h1>这是一个标题</h1>");
    document.write("<p>这是一个段落</p>")
</script>

2、JavaScript：对事件的反应

<button type="button" onclick="alert('欢迎！')">点击</button>

3、JavaScript：改变 HTML 内容

<P id="demo">
    this is a demo 
</P>
<script type="text/javascript">
    function myFunction()
    {
        x=document.getElementById("demo");
        x.innerHTML="hello js";
    }

</script>
<button type="button" onclick="myFunction()">点击</button>

4、JavaScript：改变 HTML 图像

<script type="text/javascript">
    function changeImage()
    {
        element=document.getElementById('myimage')
        if(element.src.match("bulbon"))
        {
            element.src="images/pic_bulboff.gif";
        }
        else
        {
            element.src="images/pic_bulbon.gif";
        }
    }
</script>

![](images/pic_bulboff.gif)

5、JavaScript：改变 HTML 样式

<script type="text/javascript">
function myFunction()
{   
    x=document.getElementById("demo")
    x.style.color="#ff0000";
}
</script>
<p id="demo">this is a demo</p>
<button type="button" onclick="myFunction()">点击</button>

6、JavaScript：验证输入

<script type="text/javascript">
function myFunction()
{   
    var x=document.getElementById("demo").value;
    if(x==""||isNaN(x))
    {
        alert("不是数字");
    }
}
    
</script>
<p>请输入数字</p>
<input type="text" id="demo" name="">
<button type="button" onclick="myFunction()">点击</button>

一、JavaScript输出

JavaScript 显示数据

• 使用 window.alert() 弹出警告框。
• 使用 document.write() 方法将内容写到 HTML 文档中。
• 使用 innerHTML 写入到 HTML 元素。
• 使用 console.log() 写入到浏览器的控制台。

1、使用 window.alert()

<script type="text/javascript">
    window.alert(5+5);
</script>

2、操作 HTML 元素
如需从 JavaScript 访问某个 HTML 元素，您可以使用 document.getElementById(id) 方法。

请使用 "id" 属性来标识 HTML 元素，并 innerHTML 来获取或插入元素内容：

<p id="demo">我的段落</p>
<script type="text/javascript">
    document.getElementById("demo").innerHTML="段落已经修改";
</script>

3、

 <script type="text/javascript">
        document.write(Date());
    </script>

4、如果在文档已完成加载后执行 document.write，整个 HTML 页面将被覆盖。

<p>我的段落</p>
<button onclick="myFunction()">点击</button>
<script type="text/javascript">
    function myFunction()
{
    document.write(Date());
}   
</script>

5、

<script type="text/javascript">
    a=6;
    b=6;
    c=a+b;
    console.log(c);
</script>

二、JavaScript 语法

1、JavaScript 字面量
数字（Number）字面量 可以是整数或者是小数，或者是科学计数(e)。

<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = 123e5;
</script>

<script>
    document.getElementById("demo").innerHTML = 'asu';
</script>

<script>
    document.getElementById("demo").innerHTML = 2*10;
</script>

2、JavaScript 变量

JavaScript 使用关键字 var 来定义变量， 使用等号来为变量赋值。

<p id="demo"></p>
    <script type="text/javascript">
        var length;
        length=6;
        document.getElementById("demo").innerHTML=length;
    </script>

3、以下是 JavaScript 中最​​重要的保留字（按字母顺序）：

4、JavaScript 数据类型

var length = 16;                                  // Number 通过数字字面量赋值
var points = x * 10;                              // Number 通过表达式字面量赋值
var lastName = "Johnson";                         // String 通过字符串字面量赋值
var cars = ["Saab", "Volvo", "BMW"];              // Array  通过数组字面量赋值
var person = {firstName:"John", lastName:"Doe"};  // Object 通过对象字面量赋值 

5、JavaScript 代码是 JavaScript 语句的序列。浏览器按照编写顺序依次执行每条语句。

<p id="a"></p>
    <div id="b"></div>
    <script type="text/javascript">
document.getElementById("a").innerHTML="hello";
document.getElementById("b").innerHTML="你好";
    </script>

6、JavaScript 可以分批地组合起来。代码块以左花括号开始，以右花括号结束。代码块的作用是一并地执行语句序列。

    <p id="a">你好世界</p>
    <div id="b">你好吗</div>
    <button type="button" onclick="myFunction()">点击</button>

    <script type="text/javascript">
        function myFunction(){
document.getElementById("a").innerHTML="hello world";   document.getElementById("b").innerHTML="how are you";
        }
    </script>

7、JavaScript 语句标识符

三、JavaScript 变量

当您向变量分配文本值时，应该用双引号或单引号包围这个值。

当您向变量赋的值是数值时，不要使用引号。如果您用引号包围数值，该值会被作为文本来处理。

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

四、JavaScript 数据类型

1、字符串（String）、数字(Number)、布尔(Boolean)、数组(Array)、对象(Object)、空（Null）、未定义（Undefined）。

<script type="text/javascript">
        var carname1="Volve XC60";
        var carname2='Volve XC60';
        var answer1="it's alright";
        var answer2="he is called'John'";
        var answer3='he is called "John"';
        document.write(carname1+"<br>");
        document.write(carname2+"<br>");
        document.write(answer1+"<br>");
        document.write(answer2+"<br>");
        document.write(answer3+"<br>");
    </script>

<script type="text/javascript">
        var x1=34.00;
        var x2=34;
        var y=123e5;
        var z=123e-5;
        document.write(x1+"<br>")
        document.write(x2+"<br>")
        document.write(y+"<br>")
        document.write(z+"<br>")
    </script>

<script type="text/javascript">
        var i;
        var cars =new Array();
        cars[0]="saab";
        cars[1]="volvo";
        cars[2]="BMW";
        for(i=0;i<cars.length;i++)
        {
            document.write(cars[i]+"<br>");
        }
    </script>

<script type="text/javascript">
        var person=
        {
            firstname:"John",
            lastname:"Doe",
            id:5566
        };
        document.write(person.lastname+"<br>");
        document.write(person["lastname"]+"<br>");
    </script>

<script>
var person;
var car="Volvo";
document.write(person + "<br>");
document.write(car + "<br>");
var car=null
document.write(car + "<br>");
</script>

五、JavaScript 对象

<p id="demo"></p>
    <script type="text/javascript">
    var person ={
        firstName:"John",
        lastName:"Doe",
        age:50,
        eyeColor:"blue"
    }
    document.getElementById("demo").innerHTML=person.firstName+"现在"+person.age+"岁";
    </script>