1. 程式人生 > >第一個JavaScript代碼

第一個JavaScript代碼

wid 理解 pytho arm width 等號 F12 定義變量 快捷

既然我們的CSS就必須要要放再專門的style標簽內 那麽javascript也需要放在子級的標簽內,那就是script標簽內

在頁面中,我們可以在body標簽中放入<script type=”text/javascript”></script>標簽對兒,<script type=”text/javascript”></script>標簽對兒

我們可以直接定義在body中也可以定義在heard中 不過一般的都是定義在heard中的

<script type="text/javascript">

</script>

alert語句 :

我們可以理解位是javascript的輸出框 因為不同語言有不同的輸出 這個可以理解位javascript的輸出

    <script type="text/javascript">
        alert(‘大哥哥‘);

    </script>

alert(英文翻譯為“警報”)的用途:彈出“警告框”

語法規則:

變量的命名:

javascript定義變量是需要在變量前加入var的

var a =666;

這個和解釋性語言一樣定義變量都是 要在前面加上 你要定義的變量的一些特別的類型或者指定的形勢

定義變量一般用var let來定義變量的 在變量的前面加上 var或者let

//定義變量a和變量b
var a = 3
let b = 4

變量的命名規範

變量名有命名規範:只能由英語字母、數字、下劃線、美元符號$構成,且不能以數字開頭,並且不能是JavaScript保留字。

學習程序是有規律可循的 就是程序是有相同的部分的 這些部分就是一種規定 不能更改,我們稱為 語法。

javascript不同於python而是像其他語言的以{}來進行區分的,然後它的結束也是要靠;分號來區分的

1)JavaScript對換行、縮進、空格不敏感。

備註:每一條語句末尾要加上分號,雖然分號不是必須加的,但是為了程序今後要壓縮,如果不加分號,壓縮之後將不能運行。

3)JavaScript的註釋:

 單行註釋:

// 我是註釋

  多行註釋: 

/*
    多行註釋1
    多行註釋2
*/

備註:sublime或者pycharm中,單行註釋的快捷鍵是ctrl+/,多行註釋的快捷鍵是ctrl+shift+/

JavaScript在網頁中輸出信息的寫法

彈出警告框:alert("")

控制臺輸出:console.log("")

console.log("")表示在控制臺中輸出。console表示“控制臺”,log表示“輸出”。

控制臺在Chrome瀏覽器的F12中。控制臺是工程師、程序員調試程序的地方。程序員經常使用這條語句輸出一些東西,來測試程序是否正確。

//es6的語法 模板字符串 `` tab鍵上面的鍵 插變量使用${變量名}
console.log(`${first}愛${second}你`);

console.log(parseInt("2018你真帥!!"));

(2)所有的符號,都是英語的。比如括號、引號、分號。

用戶輸入:prompt()語句

prompt()語句中,用戶不管輸入什麽內容,都是字符串。

prompt()就是專門用來彈出能夠讓用戶輸入的對話框。

他就相相當於python中的input的作用一樣

下面就是這樣

技術分享圖片

代碼如下:

    <script type="text/javascript">
        a = prompt();
        console.log(a);
    </script>

然後你再你的F12中的console中可以看到你輸入的信息

javascript的內接外接樣式:

    <title>Document</title>
    <style>
        div{
            height:100px;
            width:100px;
            background-color: red;
        }
    </style>
</head>
<body>

<div onclick = ‘alert(111);‘>

</div>
</body>

效果:

當你點擊div生成的紅色塊之後就會顯示彈出一個顯示框

技術分享圖片

外接樣式就是寫在了heard中的樣式,

    <title>Document</title>
    <style>
        div{
            height:100px;
            width:100px;
            background-color: red;
        }
    </style>
    <script type="text/javascript">
        alert(111);

    </script>
</head>
<body>
<div>

</div>

</body>

效果都是一樣的,就是你要在heard中定義script中定義一個可以接收javascript中的內容的標簽

alert和prompt的區別:

alert("從前有座山");                //直接使用,不需要變量
var a = prompt("請輸入一個數字");   // 必須用一個變量,來接收用戶輸入的值

直接量:數字和字符串

“直接量”即常量,也稱為“字面量”。看見什麽,它就是什麽。

簡單的直接量有2種:數字、字符串。

(1)數值的直接量的表達非常簡單,寫上去就行了,不需要任何的符號。例如:

alert(886);  //886是數字,所以不需要加引號。

(2)字符串也很簡單,但一定要加上引號。可以是單詞、句子等。

變量的類型

變量裏面能夠存儲數字、字符串等。變量會自動的根據存儲內容的類型不同,來決定自己的類型。

數值型 number:

如果一個變量中 存放了數字 那麽這個變量就是數值型的

<script type="text/javascript">
alert(111);
let a = 345;
console.log( typeof a);

</script>
 

從F12中查看的console

技術分享圖片

typeof()表示

它和python查找數據類型的差不都就是

typeof()表示“獲取變量的類型”,語法為:

typeof 變量

在JavaScript中,只要是數,就是數值型(number)的。無論整浮、浮點數(即小數)、無論大小、無論正負,都是number類型的。

字符串型:string

    <script type="text/javascript">
        alert(111);
        let a = 345;
        console.log( typeof a);
        lec a = "abcde";
        var b =‘你好‘;
        var e =‘哈哈哈‘;
        consloe.log( typeof a ,b, c);
        // console.log(typeof b);
        // console.log(typeof c);
    //console.log()不能一次打印所有的 必須要 一次一次的輸出
    </script>
</head>
<body>
<div>

</div>

</body>

連字符和加號的區別

鍵盤上的+可能是連字符,也可能是數字的加號。如下:

   console.log("我" + "愛" + "你");   //連字符,把三個獨立的漢字,連接在一起了
    console.log("我+愛+你");           //原樣輸出
    console.log(1+2+3);             //輸出6

總結:如果加號兩邊都是數值,此時是加。否則,就是連字符(用來連接字符串)。

變量值的傳遞(賦值)

語句:

   a = b;

把b的值賦給a,b不變。

將等號右邊的值,賦給左邊的變量;等號右邊的變量,值不變。

舉個特殊的例子:

        var a = "3";
        var b = 2;
        console.log(a-b);

效果:(註意,字符串 - 數值 = 數值)

變量格式轉換

用戶的輸入

我們在上面的內容裏講過,prompt()就是專門用來彈出能夠讓用戶輸入的對話框。重要的是:用戶不管輸入什麽,都是字符串。

parseInt():字符串轉數字

parseInt()可以將字符串轉數字。parse表示“轉換”,Int表示“整數”(註意Int的拼寫)。例如:

字符串轉數字的方法:

 parseInt(“5”);

parseInt()還具有以下特性

(1)帶有自動凈化的功能;只保留字符串最開頭的數字,後面的中文自動消失。例如:

console.log(parseInt("2018你真帥!!");

(2)自動帶有截斷小數的功能:取整,不四舍五入

var a = parseInt(5.8) + parseInt(4.7);
console.log(a);
 var a = parseInt(5.8 + 4.7);
 console.log(a);

第一個JavaScript代碼