{%hackmd theme-dark %}

###### tags: `中研院 Javascript`
# Javascript Basic L2

## 本章內容

[TOC]

### the role of js in web

> lightweight (didnt eat large memory)
> cross-platfrom,object-oriented

>html : content(像是名詞)
>css : presentation(像是形容詞)
>js : dynamic effects/programming(像是動詞)

### Variables Mutation

var firstName = 'John';
var age = 28;

var job, isMarried;
job = 'teacher';
isMarried = false'

console.log(firstName + ' is a ' + age +'year old '+job +'. Is he married?'+ is Married)
// John is a 28 year old teacher. Is he married?false

//Variable mutation 改變變數
age = 'twenty eight';
job = 'driver';

console.log(firstName + ' is a ' + age +'year old '+job +'. Is he married?'+ is Married)
// John is a twenty eight year old driver. Is he married?false 跑出alert 框框

//跑出詢問框框 ,就像alert框一樣，不過是可以按回覆的
var lastName = prompt('What is his lat Name?')
console.log(fistName +' '+ lastName)
//所以如果再輸入框打上ginger 底下console.log會回 john ginger

### If_else Statements

var firstName = 'John';
var civilStatus = 'signal';

if (civilStatus === 'married'){
    console.log(fistName + ' is married!');
}else {
    console.log(firstName + ' will hopefully marry soon');
}

>AND(&&) => true if **All** are true
>OR(||) => true if **ONE** is true
>NOT(!) => inverts true/false value 轉變從對變成錯 從錯變成對

### The Ternary Operator and Switch Statements

#### The Ternary Operator
> 讓if else 只在一行呈現

var firstName = 'John';
var age = 16;

age >= 18 ? console.log(firstName + 'drinks beer.')
:console.log(firstName + 'drinks juice.')
/*  ?代表 if true? then 做後面那串字 
: 代表else */

var drink = age>=18 ?'beer' :'juice';
console.log(drink);
// beer

#### Switch statment

var job = 'teacher';
switch(job){
//在括弧中放入想要測試的variable
    case 'teacher':
        console.log(firstName+' teachers kids how to code')
        //這邊放入想要發生的事 如果case相符的話
    break;
     case 'driver':
     case 'driver2':
     //如果有多個case 就是放在一起就ok
        console.log(firstName+' drives an uber in Lisbon.')
    break;
    default:
    //如果是其他的就要有個defualt值
        console.log(firstName+ ' does something else.')

}

switch(true){
//put 'true' in here is a trick to simply make the switch work as an if...else statement with ranges.
    case age < 13:
        console.log(firstName + ' is a boy')
    case age >=13:
        console.log(firstName + ' is a young man')
    default:
        console.log(firstName + ' is a man')
}

### Truthy and Falsy values and equality operators

>falsy values: undefined,null,0,'',NaN
>truthy values: NOT falsy values

var height;
height = 23;

if(height || height ===0){
//代表height 存在或是 height為0
    console.log('Variable is defined');
} else {
    console.log('Variavle has NOT been defined');
}

if (height === '23'){
//為Equality operators 為絕對相等
// 若只有兩個的== 的話 就不是覺得相等 int==string 也是true
    console.log('the == operator does type coercion!')
}

### Funciton and Expressions

function calculateAge(birthYear){
    return 2018 - birthYear;
}

var ageJohn =calculateAge(1998);
console.log(ageJohn)

function yearsUntil(year, firstName){
    var age =calculateAge(year)
    //在function裡面可以有一個funciotn裡頭的function 得var 要跟上面依樣(在這裡)
    var retirement= 65 - age;    
    console.log(firstName +' retires in' + retirement + 'years.');
}

yearsUntiol(1998, 'John')
//John retires in 37 years.
//

var whatdoyoudo = function(job, firstName){
    switch(job) {
        case 'teacher':
            return firstName + 'teaches kids how to  code'
        case ' designer':
            return firstName + ' designs beautiful websites';
        default;
            return firstNmae + ' does somthing else'
    }
    
}

console.log(whatdoyoudo('teacher','john'))
//console 可以放置funciton
//john teaches kids how to code

### Array

// Initialize new arry
var names = ['John','Mark','Jane'];
var years = new Array(1990,1969,1948);

names[1] = 'Ben';
names[names.length] = 'Mary';
console.log(names);

//John Ben Jane Mary
//
var john = ['John' , 'Smith' , 1990 , 'teacher' , false]

john.push('blue');
//新增在最尾巴
john.unshift('Mr.');
//新增在最前面
john.pop();
//刪掉最後面的
john.shift();
//刪掉最前面的

console.log(john.indexOf(1990));
//indexOf找出1990的index
console.log(john.indexOf(23));
// -1 不存在的位置 就回傳-1

var isDesigner = john.indexOf('designer') === -1 ? 'John is NOT a designer' : 'John Is a designer';
console.log)isDEsigner

### Objects and properties

> have key and value

var john = {
    firstname : 'John',
    //key .    value   記得用逗號隔開
    lastname : 'Smith',
    birthYear : 1990 ,
    family :['Jane' ,'Mark'],
    job: 'teacher',
    isMarried:false
}

console.log(john.firstname)
//John
var x ='birthYear'
console.log(john[x])
//1990

john.job ='designer'
//更改john的job
//
//創立object 的另一種方法
var jane = new Object();
jane.firstName = 'Jane';
jane.birthYear =1990;

var john = {
    firstname : 'John',
    lastname : 'Smith',
    birthYear : 1990 ,
    family :['Jane' ,'Mark'],
    job: 'teacher',
    isMarried:false,
    calcAge:function(){
        return 2018 - this.birthYear;
        //this代表這層的某個東西 所以這裡是 john的birthYear
    //原本應該為
    //calcAge:function(birthYear){return 2018 - birthYear;
    }
};
console.log(john.calcAge())

//若想要直接在object裡面新增一個age 使用剛剛用的funciton?
//
var john = {
    firstname : 'John',
    lastname : 'Smith',
    birthYear : 1990 ,
    family :['Jane' ,'Mark'],
    job: 'teacher',
    isMarried:false,
    calcAge:function(){
        this.age =2018 - this.birthYear;
        //this.age代表新增一個key值
    }
};

john.calcAge();
//記得呼叫 這樣才會執行
console.log(john)
//裡面就會有

### Loops and iteration

for(var i =0;i<10;i++){
    console.log(i);
}

var john =['John','Smith',1990,'designer',false];
for(var i =0; i<john.length;i++){
    console.log(john[i])
}

var i=0;
while(i<john.length){
    console.log(john[i]);
    i++;
}

for(var i =0;i<john.length;i++){if(typeof john[i] !=='string')continue;
//!== 為完全不等 
console.log(john[i]);
}
//'John','Smith',designer'
//continue 為 中斷循環進入 下一個 所以下這裡如果不為stirng 則進入下一個字

for(var i =0;i<john.length;i++){if(typeof john[i] !=='string')break;
//!== 為完全不等 
console.log(john[i]);
}
//'John','Smith'
//break 為 直接中斷 跳出迴圈

//作業

var john = {
  cost:[148,48,268,180,42],
  cal:function(){
    this.tips=[];
    this.final =[];
    for(var i =0;i<this.cost.length;i++){
      var percentage;
      if(this.cost[i]<50){
        percentage = .2
      }else if(50<this.cost<200){
        percentage =.15
      }else{
        percentage =.1
      }
      
      this.tips[i] =this.cost[i] *percentage;
      this.final[i] = this.cost[i] + this.cost[i] *percentage
    }
  }
}

john.cal()
console.log(john)



function tipsa(t){
  var sum =0;
  for(var i =0 ;i<t.length;i++){
    sum = sum+t[i]
  }
  return sum/t.length
  
  
}

console.log(tipsa(john.tips))