JavaScript Basic

Erickson

About Me

~~Electrical Engineering~~

Computer Science Engineering Junior

WEB : HTML + CSS (SCSS) / JavaScript / PHP

APP : Android

Other : nodejs / python / ReactJS

ITAC PM & 副社長

Outline

JavaScript
- Syntax
- Data type
- Control structures
  - loop
  - if-condition
- Function
HTML
- What is DOM ?
- HTML with JavaScript
JavaScript Framework - jQuery

JavaScript

Is JavaScript

equal to Java ?

What is JavaScript?

用來做很潮的網頁特效

用來做很潮古早的網頁特效

用來做很潮的網頁特效

Basic Syntax

Output

document.write("印在網頁上");
console.log("會印在console");
alert("會跳出來，很煩 ^_<");

Output

大家試看看吧

Data Type

String & Number

var name = "Erickson";
var hourly_rate = 1000;
var mail = "s1010541@ee.yzu.edu.tw"

String & Number

var name = "Erickson";
var hourly_rate = 1000;
var mail = "s1010541@ee.yzu.edu.tw"

Array

var memberName = ["Erickson", "Howard Lo", "Yan Lui"];
var hourly_rate = [1000, 1000, 1000];
var mail = ["s1010541@ee.yzu.edu.tw",
             "howard@gmail.com",
             "yan@gmail.com"];

Array

var memberName = ["Erickson", "Howard Lo", "Yan Lui"];
var hourly_rate = [1000, 1000, 1000];
var mail = ["s1010541@ee.yzu.edu.tw",
             "howard@gmail.com",
             "yan@gmail.com"];

那如果有一千個要打到死？

Array

for(var i = 0; i < 3; i++)
{
     console.log("Name = "+memberName[i]
        +" hourly_rate = "+hourly_rate[i]
        +" mail = "+mail[i]);
}

For Loop

A

B

C

D

執行順序

A -> 檢查B---成立---> D -> C -> (回到檢查B)
--不成立-->離開

for(var i = 0; i < 3; i++)
{
     console.log("Name = "+memberName[i]
        +" hourly_rate = "+hourly_rate[i]
        +" mail = "+mail[i]);
}

For Loop

Name = Erickson hourly_rate = 1000 mail = s1010541@ee.yzu.edu.tw

i = 0

for(var i = 0; i < 3; i++)
{
     console.log("Name = "+memberName[i]
        +" hourly_rate = "+hourly_rate[i]
        +" mail = "+mail[i]);
}

For Loop

Name = Erickson hourly_rate = 1000 mail = s1010541@ee.yzu.edu.tw

i = 1

for(var i = 0; i < 3; i++)
{
     console.log("Name = "+memberName[i]
        +" hourly_rate = "+hourly_rate[i]
        +" mail = "+mail[i]);
}

For Loop

Name = Erickson hourly_rate = 1000 mail = s1010541@ee.yzu.edu.tw

Name = Howard Lo hourly_rate = 1000 mail = howard@gmail.com

i = 1

for(var i = 0; i < 3; i++)
{
     console.log("Name = "+memberName[i]
        +" hourly_rate = "+hourly_rate[i]
        +" mail = "+mail[i]);
}

For Loop

Name = Erickson hourly_rate = 1000 mail = s1010541@ee.yzu.edu.tw

Name = Howard Lo hourly_rate = 1000 mail = howard@gmail.com

i = 2

for(var i = 0; i < 3; i++)
{
     console.log("Name = "+memberName[i]
        +" hourly_rate = "+hourly_rate[i]
        +" mail = "+mail[i]);
}

For Loop

Name = Erickson hourly_rate = 1000 mail = s1010541@ee.yzu.edu.tw

Name = Howard Lo hourly_rate = 1000 mail = howard@gmail.com

Name = Yan Lui hourly_rate = 1000 mail = yan@gmail.com

i = 2

for(var i = 0; i < 3; i++)
{
     console.log("Name = "+memberName[i]
        +" hourly_rate = "+hourly_rate[i]
        +" mail = "+mail[i]);
}

For Loop

Name = Erickson hourly_rate = 1000 mail = s1010541@ee.yzu.edu.tw

Name = Howard Lo hourly_rate = 1000 mail = howard@gmail.com

Name = Yan Lui hourly_rate = 1000 mail = yan@gmail.com

i = 3

只知道很多，但不知道有多少？

Array

1

Object

var data = 
{
    "name": "Erickson",
    "hourly_rate": 1000,
    "mail": "s1010541@ee.yzu.edu.tw"
}

Object

Array of Object

var data = 
[
    {
        "name": "Erickson",
        "hourly_rate": 1000,
        "mail": "s1010541@ee.yzu.edu.tw"
    },
    {
        "name": "Howard Lo",
        "hourly_rate": 1000,
        "mail": "howard@gmail.com"
    },
    {
        "name": "Yan Lui",
        "hourly_rate": 1000,
        "mail": "yan@gmail.com"
    }
];

Array of Object

Array of Object

Array of Object

for(var i = 0; i < 3; i++)
{
    console.log("第"+i+"筆資料");
    for(var k in data[i])
    {
        console.log(k + " = " + data[i][k]);
    }
}

Array of Object

哪有沒有把Array放在Object裡的?

Loop

Loop

for loop
for-in loop
while

while

while

while(memberName[i])
{
    console.log(memberName[i++]);
}

A

B

執行順序

檢查A ---成立---> B -> (回到檢查A)
--不成立-->離開

while

while(memberName[i])
{
    console.log(memberName[i++]);
}

i = 0

var memberName = ["Erickson",
     "Howard Lo",
     "Yan Lui"];

while

while(memberName[i])
{
    console.log(memberName[i++]);
}

Erickson

i = 0

var memberName = ["Erickson",
     "Howard Lo",
     "Yan Lui"];

while

while(memberName[i])
{
    console.log(memberName[i++]);
}

Erickson

i = 1

var memberName = ["Erickson",
     "Howard Lo",
     "Yan Lui"];

while

while(memberName[i])
{
    console.log(memberName[i++]);
}

Erickson

Howard Lo

i = 1

var memberName = ["Erickson",
     "Howard Lo",
     "Yan Lui"];

while

while(memberName[i])
{
    console.log(memberName[i++]);
}

Erickson

Howard Lo

i = 2

var memberName = ["Erickson",
     "Howard Lo",
     "Yan Lui"];

while

while(memberName[i])
{
    console.log(memberName[i++]);
}

Erickson

Howard Lo

Yan Lui

i = 2

var memberName = ["Erickson",
     "Howard Lo",
     "Yan Lui"];

while

while(memberName[i])
{
    console.log(memberName[i++]);
}

Erickson

Howard Lo

Yan Lui

i = 3

var memberName = ["Erickson",
     "Howard Lo",
     "Yan Lui"];

Control Structures

if
if-else
if-else if
switch

Control Structures

if & if-else

if(1 > 5)
{
    console.log("1 比 5 大");
} else {
    console.log("1 沒有比 5 大");
}

if(1 == 3)
{
    console.log("1 等於 3");
}

if(1 == 1)
{
    console.log("1 等於 1");
}

if & if-else

if(1 > 5)
{
    console.log("1 比 5 大");
} else {
    console.log("1 沒有比 5 大");
}

if(1 == 3)
{
    console.log("1 等於 3");
}

if(1 == 1)
{
    console.log("1 等於 1");
}

1 等於 1

1 沒有比 5 大

switch

var Day = 0;

switch(Day) {
    case 0:
        console.log("Sunday");
        break;
    case 1:
    	console.log("Monday");
    	break;
    case 2:
    	console.log("Tuesday");
    	break;
    case 3:
    	console.log("Wednesday");
    	break;
    case 4:
    	console.log("Thursday");
    	break;
    case 5:
    	console.log("Friday");
    	break;
    case 6:
    	console.log("Saturday");
    	break;
    
}

Sunday

switch

var Day = 0;

switch(Day) {
    case 0:
        console.log("Sunday");
        break;
    case 1:
    	console.log("Monday");
    	break;
    case 2:
    	console.log("Tuesday");
    	break;
    case 3:
    	console.log("Wednesday");
    	break;
    case 4:
    	console.log("Thursday");
    	break;
    case 5:
    	console.log("Friday");
    	break;
    case 6:
    	console.log("Saturday");
    	break;
    default:
        console.log("No Day");
    
}

Sunday

Function

var Day1 = 5;

switch(Day) {
    case 0:
        console.log("Sunday");
        break;
    case 1:
    	console.log("Monday");
    	break;
    case 2:
    	console.log("Tuesday");
    	break;
    case 3:
    	console.log("Wednesday");
    	break;
    case 4:
    	console.log("Thursday");
    	break;
    case 5:
    	console.log("Friday");
    	break;
    case 6:
    	console.log("Saturday");
    	break;
    default:
        console.log("No Day");
}

var Day2 = 2;

switch(Day) {
    case 0:
        console.log("Sunday");
        break;
    case 1:
    	console.log("Monday");
    	break;
    case 2:
    	console.log("Tuesday");
    	break;
    case 3:
    	console.log("Wednesday");
    	break;
    case 4:
    	console.log("Thursday");
    	break;
    case 5:
    	console.log("Friday");
    	break;
    case 6:
    	console.log("Saturday");
    	break;
    default:
        console.log("No Day");
}

寫好多次好煩！！！！

function getDay(Day) {
    switch(Day) {
        case 0:
            console.log("Sunday");
            break;
        case 1:
        	console.log("Monday");
        	break;
        case 2:
        	console.log("Tuesday");
        	break;
        case 3:
        	console.log("Wednesday");
        	break;
        case 4:
        	console.log("Thursday");
        	break;
        case 5:
        	console.log("Friday");
        	break;
        case 6:
        	console.log("Saturday");
        	break;
        default:
                console.log("No Day");
    }
}

getDay(5);
getDay(7);
getDay(3);
getDay(4);
getDay(100);

Friday
No Day
Wednesday
Thursday
No Day

var getDay = function (Day) {
    switch(Day) {
        case 0:
            console.log("Sunday");
            break;
        case 1:
        	console.log("Monday");
        	break;
        case 2:
        	console.log("Tuesday");
        	break;
        case 3:
        	console.log("Wednesday");
        	break;
        case 4:
        	console.log("Thursday");
        	break;
        case 5:
        	console.log("Friday");
        	break;
        case 6:
        	console.log("Saturday");
        	break;
        default:
                console.log("No Day");
    }
}

getDay(5);
getDay(7);
getDay(3);
getDay(4);
getDay(100);

Friday
No Day
Wednesday
Thursday
No Day

Introduction of HTML DOM

<html>
    <head>
    	<title>Demo Site</title>
    </head>
    <body>
    	<p>Hello word!</p>
    </body>
</html>

<html>
    <head>
    	<title>Demo Site</title>
    </head>
    <body>
    	<p>Hello word!</p>
    </body>
</html>

<html>
    <head>
    	<title>Demo Site</title>
    </head>
    <body>
    	<p>Hello word!</p>
    </body>
</html>

<html>
    <head>
    	<title>Demo Site</title>
    </head>
    <body>
    	<p>Hello word!</p>
    </body>
</html>

<html>
    <head>
    	<title>Demo Site</title>
    </head>
    <body>
    	<p name="hello">Hello word!</p>
        <p id="XD">XDDD</p>
        <div class="Yan">雁子</div>
        <button>戳我阿！ 笨蛋</button>
    </body>
</html>

JavaScript With HTML

Get DOM Eelement

```
By ID
document.getElementById('id')
```

By Class
document.getElementsByClassName('className')

By Name
document.getElementsByName('name')

By Tag
document.getElementsByTagName('tagName')

Get DOM Eelement

```
By ID
document.getElementById('id')
```

document.getElementById('XD');

Get DOM Eelement

```
By ID
document.getElementById('id')
```

document.getElementById('XD');

.

Get DOM Eelement

By Tag
document.getElementsByTagName('tagName')

document.getElementsByTagName('p')

Get DOM Eelement

By Tag
document.getElementsByTagName('tagName')

document.getElementsByTagName('p')

.

.

Get DOM Eelement

By Class
document.getElementsByClassName('className')

document.getElementsByClassName('Yan')

Get DOM Eelement

By Class
document.getElementsByClassName('className')

document.getElementsByClassName('Yan')

.

Get DOM Eelement

By Name
document.getElementsByName('name')

document.getElementsByName('hello')

Get DOM Eelement

By Name
document.getElementsByName('name')

document.getElementsByName('hello')

.

jQuery

JS Framework

Feature

Cross-platform JavaScript library
Open Source (MIT)
Free software freedom, NOT no-cost
65% website used

Easy To...

Select DOM elements
Handle event
Create animation
Develop Ajax applications

Select DOM Element

```
By ID
document.getElementById('id')
```

By Class
document.getElementsByClassName('className')

By Tag
document.getElementsByTagName('tagName')

By Name
document.getElementsByName('name')

Select DOM Element

```
By ID
$('#id');
```

By Class
document.getElementsByClassName('className')

By Tag
document.getElementsByTagName('tagName')

By Name
document.getElementsByName('name')

Select DOM Element

```
By ID
$('#id');
```
```
By Class
$('.className');
```

By Tag
document.getElementsByTagName('tagName')

By Name
document.getElementsByName('name')

Select DOM Element

```
By ID
$('#id');
```
```
By Class
$('.className');
```
```
By Tag
$('tagName');
```

By Name
document.getElementsByName('name')

Select DOM Element

```
By ID
$('#id');
```
```
By Class
$('.className');
```
```
By Tag
$('tagName');
```
```
By Name
$('[name=name]');
```

Handle event

＆

Create animation

JavaScript Basic

By Erickson Juang

JavaScript Basic

10 years ago
1,065

Erickson Juang