第一课---js的认识

40 阅读1分钟

1.用法:
HTML 中的脚本必须位于 <script> 与 </script> 标签之间。
脚本可被放置在 HTML 页面的 <body> 和 <head> 部分中。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <script>
    alert('hello word')    
    </script>
    <button onclick="click_me()">click me</button>
    <p id="demo"></p>
</html>
<script>
function click_me(){
    document.getElementById('demo').innerHTML="第一个点击事件"
}

</script>


2.JavaScript 显示数据
JavaScript 可以通过不同的方式来输出数据:
使用 window.alert() 弹出警告框。
使用 document.write() 方法将内容写到 HTML 文档中。
使用 innerHTML 写入到 HTML 元素。
使用 console.log() 写入到浏览器的控制台。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <p id="demo"></p>
    <script>
        window.alert(123);
        document.getElementById('demo').innerHTML = 'hello word';
        document.write(Date())    
        a = 5;
        b = 6;
        c = a + b;
        console.log(c)
    </script>
</body>
</html>


3.注释
单行注释以 // 开头。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <p id="title"></p>
    <script>
        //这是标题
        document.getElementById("title").innerHTML = "hello word"
        /*
        这是多行注释
         */
    </script>
    

</body>
</html>


4.数据类型
值类型(基本类型):字符串(String)、数字(Number)、布尔(Boolean)、对空(Null)、未定义(Undefined)、Symbol。
引用数据类型:对象(Object)、数组(Array)、函数(Function)。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <script>
        var x;               // x 为 undefined
        var x = 5;           // 现在 x 为数字
        var x = "John";      // 现在 x 为字符串
        //字符串
        var answer="It's alright";
        var answer="He is called 'Johnny'";
        var answer='He is called "Johnny"';
        //数字
        var x1=34.00;      //使用小数点来写
        var x2=34;         //不使用小数点来写
        var y=123e5;      // 12300000
        var z=123e-5;     // 0.00123
        //布尔
        var x=true;
        var y=false;
        //数组
        var cars=new Array();
        cars[0]="Saab";
        cars[1]="Volvo";
        cars[2]="BMW";
        var cars=["Saab","Volvo","BMW"];
        //对象
        var person={firstname:"John", lastname:"Doe", id:5566};
        //Undefined 和 Null
        cars=null;
        person=null;
    </script>
</body>
</html>


5.对象
对象是拥有属性和方法的数据。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <script>
    var person = {firstName:"John", lastName:"Doe", age:50, eyeColor:"blue",name:function name(){},};
    a = person.name;
    console.log(a)
    </script>
</body>
</html>