Javascript - (1)

Topic : Basic grammar

Lecturer: Lemon

〞

Any application that can be written in JavaScript, will be written in JavaScript.

– Jeff Atwood

JavaScript 是個物件導向、輕小型的腳本語言。

intro

物件導向：

我應該有講過(?

簡單來說就是你的程式碼是由一個個物件構成ㄉ

然後這些物件具有屬性，可以進行特定的操作。

腳本語言(Script language)：

其實很簡單w

Python就是一種強大的腳本語言，

腳本語言和編程語言的差別在於腳本語言不需要編譯。

好多人用OAO

什麼都可以做w

JS最主要的用途還是用來做網頁前端和後端的開發

這兩個禮拜我們會學著如何用JS開發前端

至於後端(Node.js)可能要等有緣(?

或者以後你們來教學弟妹w

javascript可以用來幹嘛(?

最近做ㄉ(排版燒雞

我自己覺得JS很難用w

可能因為我也不太會寫網頁QAQ

然後JS在語法上其實比較模糊

所以可能很多寫法都是被通融ㄉ

然後由於語法的部分可能跟C++稍微有點像(?

所以我會預設你們會C++來教課w

如果不會的話可以直接跟我講ㄛ

note

每學一個新的語言就是要Hello world!

Hello world

在Javascript主要有四種寫法：

  1. alert
  2. innerHTML
  3. document.write
  4. console.log

我的程式碼要寫在哪裡(?

緊急插播

<!DOCTYPE html>
<head>
  
  <script>
    //其實
    //Your code here
  </script>

</head>
<body>

  <script>
    //放哪
    //Your code here
  </script>

</body>

<script>
    //都可以
    //Your code here
</script>
<!DOCTYPE html>
<head>

</head>
<body>
	<script src = "example.js"></script>
</body>


//in example.js
//your code here

寫在HTML檔裡

寫在外面

alert

<!DOCTYPE html>
<head>
    <title> Hello world </title>
</head>
<body>
    <script>
        alert("Hello, world!");
    </script>
</body>

inner html

<!DOCTYPE html>
<head>
    <title> Hello world </title>
</head>
<body>
    <p id = "myid"> </p>
    <script>
        document.getElementById("myid").innerHTML = "Hello, world!";
        //getElementById會找到相同idㄉ標籤
    </script>
</body>

注意大小寫，不然它不會動 ;-;

其實不一定要ById

也可以ByClassName、ByName、ByTagName

但他們會找到一堆咚咚(一個陣列)

note

<!DOCTYPE html>
<head>
    <title> Hello world </title>
</head>
<body>
    <p id = "myid"> </p>
    <p class = "myclass"> </p>
    <p name = "myname"> </p>
    <div> </div>
    <script>
        document.getElementById("myid").innerHTML = "Hello, myid!";
        document.getElementsByClassName("myclass")[0].innerHTML = "Hello, myclass!";
        document.getElementsByName("myname")[0].innerHTML = "Hello, myname!";
        document.getElementsByTagName("div")[0].innerHTML = "Hello, mytag!";
        //要加s
    </script>
</body>

document.write

<!DOCTYPE html>
<head>
    <title> Hello world </title>
</head>
<body>
    <script>
        document.write("Hello world! (Normal text)");
        document.write("<p> <b> Hello world! (With tags)</b> </p>");
        //它會直接寫在檔案上
    </script>
</body>

console.log

<!DOCTYPE html>
<head>
    <title> Hello world </title>
</head>
<body>
    <script>
        console.log("Hello, world!");
    </script>
</body>

note

console.log是最常用的輸出方法

因為不會影響觀感(?

 

對於一個寫前端的人而言

因為JS的bug很難找

f12是用來debug的好幫手w

算術運算子： +, - , * , /

比較運算子： > , == , < , >= ,  <=, !=

邏輯運算子： && , || , !

 

反正大致跟C++一樣w

除了幾個比較運算子： ===(嚴格等於), !==(嚴格不等於)

我們會需要保證型別、值都是一樣ㄉ

一些重複的東東

Javascript很奇怪

不同型別也能拿來比較

奇怪的地方

<!DOCTYPE html>
<head>
    <title> Compare </title>
</head>
<body>
    <script>
        console.log(1 == "1");
        //true
        console.log(1 === "1");
        //false
    </script>
</body>

Javascript主要有三種宣告變數的方法：

var, let, const

我們只講var就好ㄌ

variable

可以把它當Python在用w 型別會自己隨著值改變

<!DOCTYPE html>
<head>
    <title> Variable </title>
</head>
<body>
    <script>
        var a = 1;
        console.log(a);
        //1
        console.log(a == "1");
        //true
        console.log(a === "1");
        //false
    </script>
</body>

condition

<!DOCTYPE html>
<head>
    <title> Condition </title>
</head>
<body>
    <script>
        var a = 2;
        if(a === 1) {
            console.log("a === 1");
        }
        else if(a === 2) {
            console.log("a === 2");
        }
        else {
            console.log("a !== 1 && a !=== 2");
        }
        // a === 2
    </script>
</body>

loops

<!DOCTYPE html>
<head>
    <title> Loops </title>
</head>
<body>
    <script>
        var a = 5;
        for(var i = 1; i <= a; ++i) {
            console.log(i);
        }
        while(a) {
            console.log(a)
            --a;
        }
    </script>
</body>

function

<!DOCTYPE html>
<head>
    <title> Function </title>
</head>
<body>
    <script>
        var a = 2, b = 1;
        function myfunc(x, y) {
            console.log(x + y);
            return x - y;
        }
        var c = myfunc(a, b);
        console.log(c);
        // 3
        // 1
    </script>
</body>

這是今天最重要ㄉ東東

event

<!DOCTYPE html>
<head>
    <title> Event </title>
</head>
<body>
    <p id = "date"> </p>
    <button onclick = "myfunc();">Push me</button>
    <script>
        var cnt = 0;
        function myfunc() {
            ++cnt;
            alert("You have pushed the button " + String(cnt) + " times");
            return cnt;
        }
    </script>
</body>

Event(onclick)等號後面是用JS的語法

note

<!DOCTYPE html>
<html>
<body>

  <h2>JavaScript HTML Events</h2>
  <p>Click the button to display the date.</p>

  <button onclick="displayDate()">The time is?</button>

  <script>
    function displayDate() {
      document.getElementById("demo").innerHTML = Date();
    }
  </script>
  <p id="demo"></p>
  <!-- from w3school -->
</body>
</html>

還有許多不同的Event

e.g. onchange, onload, etc.

 

Event可以有很多不同用法

搭配各種input

也可以有很多不同ㄉ效果

note

我做ㄉ

茶會活動的解謎

雖然有點小丑

但還算堪用(?

example

補充咚咚

Javascript還有一個很重要的東西

叫做callback function

 

可能我下禮拜講jQuery的時候順便講(?

但這個東西很複雜

所以我也不太會QAQ

我好討厭JS

記得報寒訓！！

有好好玩ㄉ活動欸

先這樣ㄅ

I wanna go home.

Made with Slides.com