오늘은 흐름제어에 대해서 필기 해보았다.

if..else

//if..else
fun main() {
  
  //if..else 사용
  val job = "SoftWare Developer"
    
    if(job == "Software Developer") {
      println("개발자")
    } else("개발자 아님")  
}

//코틀린의 if...else는  "표현식" 이다. 자바는 "구문"이다. 
val age : Int = 10
  
  val str = if(age > 10) {
    "성인"
  } else {
    "아이"
  }

//코틀린은 삼항 연산자가 없다. if..else가 표현식이므로 불필요 하다.
val a = 1
val b = 2
val c = if (b > a) b else a

위와 같이, Kotlin에서의 if..else문은 표현식이며, 삼항연산자가 없다는 특징이 있다. 

 


 

When

자바에서 특정 break누락한 경우, 그대로 넘어가기에 예상치 않은 결과를 return할 수 있다.밑은 자바에서의 When 예시

 

Kotlin

//Kotlin에서 When식 
fun main() {
  val day = 2
  val result = When (day) {
    1 -> "월요일"
    2 -> "화요일"
    3 -> "수요일"
    4 -> "목요일"
    else -> "기타"  
  }
  println(result) //화요일
  // else 생략 가능.
    when(getColor()) {
    Color.Red -> print("red")
    Color.GREEN -> print("green")
    else -> println("blue")
  }
  // 여러개의 조건을 콤마로 구분해 한줄에서 정의할 수 있다.
  when (getNumber()) {
    0, 1 -> print("0 또는 1")
    else -> print("0또는 1이 아님")
  }
}

enum class Color {
  RED, GREEN, BLUE
}

fun getColor() = Color.RED

fun getNumber() = 2-

for loop

fun main() {
  //  범위 연산자 ..를 사용해 for loop 돌리기
  for (i in 0 < .. <3) {
    println(i) 
      //0
      //1
      //2
      //3
  }
  // until을 사용해 반복한다.
  // 뒤에 온 숫자는 포함하지 않는다.
  for (i in 0< until <3) {
    println(i)
      //0
      //1
      //2
  }
  //step의 값 만큼 증가시킨다
  for(i in 0 <.. < 6 step 2){
    println(i)
      //0
      //2
      //4
      //6
  }
  //downTo를 사용해 반복하면서 값을 감소시킨다.
  for(i in 3> downTo >1) {
    println(i)
      //3
      //2
      //1
  }
  
  //전달받은 배열을 반복
  val numbers = arrayOf(1,2,3)
    
    for(i in numbers) {
      println(i)
    }
  //1
  //2
  //3
}

While

fun main() {
  //Java의 while문과 동일
  //조건을 확인하고 참이면 코드 블록을 실행한 후 다시 조건을 확인
  
  var x = 5
    
    while(x > 0) {
      println(x)
        x--
        //5
        //4
        //3
        //2
        //1
    }
  
}

 

 

출처 FastCampus

'Kotlin' 카테고리의 다른 글

Kotlin.06 클래스와 프로퍼티  (0) 2023.04.02
Kotlin 05.예외처리  (0) 2023.04.02
Kotlin 04. 널 참조  (0) 2023.04.02
Kotlin 02. 함수  (0) 2023.04.02
Kotlin 01.변수  (0) 2023.04.02

(Kotlin 카테고리를 통해서 순서대로 공부할 수 있으니, 참고 부탁드립니다. ^^ 👍 )

 

이번엔 함수에 대해서 알아보자. Kotlin에는 함수를 선언하는 것도 엄청 다양하고 유용한 것들이 많다!👏(대박...함수 조차 이렇게 많이 신경쓰는 언어 너무 매력있고 멋있어요 정말)  빨리 알고 싶으니 바로 Let's go!

 

①. 가장 기본적인 함수 스타일

  //function의 약자 fun, 함수명, 함수 인자, 함수 반환할 타입,로직이 있다.
    fun sum(a: Int, b: Int) : Int {
        return  a + b
    }

위의 코드를 잘 살펴보면

①.function의 약자인 fun

②. 함수명(sum)

③. 함수의 인자(a: Int, b: Int)

④. 함수가 반환할 Type

⑤.함수의 로직이 들어가는 몸통( { return a +b } )으로 구성 되어 있다!


②.표현식 스타일

  //표현식 스타일
    fun sum2(a: Int, b: Int) : Int = a + b
    //표현식 & 반환타입 생략
    fun sum3(a: Int, b: Int) = a + b

Kotlin에서는 표현식 스타일을 제공하고 있다. sum2의 함수를 보면 중괄호 없이 로직만 들어간 것을 확인할 수가 있다.

바로 이런 방법을 표현식이라고 한다!

sum3처럼 반환타입을 생략할 수가 있다.저번 시간에 변수는 타입추론이 가능하다고 했었다. 그런 것처럼 함수도 타입 추론이 가능해져서 타입을 컴파일러가 기본적으로 추론 해주기 때문에 반환 타입을 생략 가능하다!  이것은 함수 본문이 단 하나의 표현식으로 구성된 함수인데 단일 표현식 함수(single-expression function)라고 한다.

 //몸통이 있는 함수는 반환 타입을 제거하면 컴파일 오류 //Int 생략하면 오류
    fun sum4(a: Int, b:Int) : Int {
        return a + b
    }

단! 위의 코드처럼 중괄호가 있을 경우, return-type을 생략하면 compile error가 발생 하니 주의 바란다😢..

예를 들어서 위의 "Int" 를 생략하게 되버리면 return 부분에서 빨간 줄로 변할 것이다(헉👀)


③.반환타입이 없는 함수는 Unit을 반환 한다.

  //반환타입이 없는 함수는 Unit을 반환한다. Void와 유사 반환타입에는  : Unit 이 숨겨져 있다.
    fun printSum(a: Int, b: Int) {
        println("$a + $b = ${a + b}")
    }

Kotlin에서는 반환 타입이 없는 함수는 Unit을 반환하게 되어 있다. Java로 굳이 이야기 하자면 Void와 유사하다.

return이 없고 반환 값이 없는 함수의 경우에 사용 가능하다. Kotlin에서 반환 값이 없거나 중요하지 않은 경우에 사용되는 특수한 타입이다.

하지만 일반적으로 Unit 타입은 생략하고 작성하는 것이 더 깔끔하고 일반적이다.


 ④.Default Parameter

//디폴트 파라미터
    fun greeting(message: String = "안녕하세요!!") {
        println(message)
    }
    
       fun main() {
        greeting()
        greeting("Hi!")
    }

Kotlin에서는 Default Parameter라는 아주 유용한 기능을 제공하고 있다. 인자로 message라는 String값을 받도록 하고,

"안녕하세요!!"라는 값을 할당했는데, 

main 함수에서 실행하게 되면, 첫번째 greeting() 이라고 선언한 함수는 아무 값도 안주니 "안녕하세요!!"라는 값이 출력된다.

두번 째 함수인 greeting("HI!!!")에서는 "HI!!!"라는 값이 출력 된다. 이와 같이 Kotlin에서는 값이 없는 경우 Default parameter에서 값을 할당 해줄 수가 있다.

 

아래는 자바 코드인데, Message라는 Java class라는 클래스를 생성했다.

 

public class Message {

    public void greeting(String message) {
        if (message == null || message.length() == 0) {
            System.out.println("안녕하세요!!");
            return;
        }
        System.out.println(message);
    }

    public static void main(String[] args){

        new Message().greeting(null);

        new Message().greeting("Hello, World");
    }
}

, new Message().greeting(null);은 null이기 때문에 if문으로 값을 check해서 넣어주는 것과 유사하다.


⑤.Named Argument

fun log(level: String = INFO", message: String) {
  println("[$level]$message")
}

fun main() {
  log(message = "인포 로그")
  log(level = "DEBUG", "디버그 로그")
  log("WARN", "워닝 로그")
  log(level = "ERROR", message="에러 로그")
 
}

위와 같이 level이라는 String 변수, message라는 스트링 변수를 받았다. 그래서 level은 괄호로 감싸주었고 $를 주었다.

main 함수에서 log를 4번을 사용했다.

함수에 변수 값을 넣을 때, 이름과 값을 매핑하는 기법을 Named Argument라고 한다. 출력하게 되면

fun log(level: String = INFO", message: String) {
  println("[$level]$message")
}

fun main() {
  log(message = "인포 로그") //[INFO]인포 로그
  log(level = "DEBUG", "디버그 로그") //[DEBUG]디버그 로그
  log("WARN", "워닝 로그") //[WRAN]워닝 로그
  log(level = "ERROR", message="에러 로그") //[ERROR]에러 로그
 
}

 

이렇게 출력 된다.

 

위와 같이 여러 함수기능들이 있으며, Kotlin의 변수와 같이, 함수도 따로 클래스가 없는데도 함수를 선언 가능한 특징이 있다.

 

 

참고: FastCampus

'Kotlin' 카테고리의 다른 글

Kotlin.06 클래스와 프로퍼티  (0) 2023.04.02
Kotlin 05.예외처리  (0) 2023.04.02
Kotlin 04. 널 참조  (0) 2023.04.02
Kotlin 03. 흐름제어  (0) 2023.04.02
Kotlin 01.변수  (0) 2023.04.02

(Kotlin 카테고리를 통해서 순서대로 공부할 수 있으니, 참고 부탁드립니다. ^^ 👍 )

 

 

Kotlin을 이번에 강의를 듣게 되었다. Java를 이용했던 변수와 다르게 또 다른 변수 선언 법이라서 재밌었다.

 

 

Kotlin의 변수에 대해서 알아보자.

//클래스에 있지 않게 가능.
var x = 5

fun main() {

    x+= 1
    println(x)
    val a : Int = 1

    val b = 1

    val c : Int
    c = 3

    val d : Int
    d = 123

    //val(final 재할당 X)
    //var(variable 재할당 O)


    var f = 123

    //오류 f = "hi";
}

 

위의 코드블록을 살펴보다 보면... 음..? 뭔가 익숙지 않은.... Kotlin만의 향수가 나고 있다.

엄청난 매력을 가지고 있는 친구다. 차근차근 알아보자!

 

 

-Kotlin의 변수 선언의 특징- 

 

①. Kotlin에서는 val과 var 키워드를 사용해서 변수를 선언한다. 

val :  Java에서의 "final" 변수와 유사한 친구다. 즉, 한번 값이 할당 돼버리면,  변경 불가능한 변수라고 생각하시면 된다.

var:   var은 변경 가능한 변수(Mutable) 다. variable뜻처럼,  변할 수 있으니, "variable"의 줄임말이라고 외워보면 한결 쉬워졌다.

 

②. Kotlin에서는  타입 "추론"이 가능하다.

Kotlin은 변수 선언 시 타입을 명시적으로 선언하지 않아도 Compiler가 type을 추론할 수가 있다... 👍(... 엄청나군)

이게 얼마나 대단한 거냐면 예를 들어 `val a : Int = 1`에서 `Int`타입을 명시한 것이랑, `val b = 1`에서는 타입을 생략했을 때, Compiler는 아, 얘도 위에 거랑 같은 거구나 하고 생각하고 `Int`로 추론 해버린다..  무시무시한 능력이다. (인공지능?)

 

③. Kotlin에서는 범위 밖 변수 선언 가능 하다.

위의 예시 코드로 잠깐 Scroll을 올려다보면.. 음? 맨 윗 첫 번째 코드에 외톨이 같이 홀로 변수를 지정할 수가 있다..

이렇게 외톨이 같이 함수 밖에 정의된 변수들도 함수 안으로 가져올 수가 있다.

var globalVar = "전역 변수"

fun main() {
    println(globalVar) // 전역 변수 출력

    globalVar = "전역 변수 수정"
    println(globalVar) // 수정된 전역 변수 출력

    var globalVar = "함수 내에서 재정의한 전역 변수"
    println(globalVar) // 함수 내에서 재정의한 전역 변수 출력
}

 

④. 타입 불일치 오류를 발생시킬 수 있다.

  var f = 123
  //오류 f = "hi";

 

Int로 추론되었던 것이, 문자열 같은 Type이 다른 걸로 재할당하려고 하면, 오류가 발생해 버린다.




 

참고: FastCampus

'Kotlin' 카테고리의 다른 글

Kotlin.06 클래스와 프로퍼티  (0) 2023.04.02
Kotlin 05.예외처리  (0) 2023.04.02
Kotlin 04. 널 참조  (0) 2023.04.02
Kotlin 03. 흐름제어  (0) 2023.04.02
Kotlin 02. 함수  (0) 2023.04.02

 

제가 그린거 아님

 

 

console.log( ) 함수를 살펴보면 자연스럽게 () 안에 값들을 넣고 있었다. 그 값을 파라미터(매개변수)라고 한다.

매개변수 내에서 변수처럼 이용할 수 있다.

 

function  함수이름(파라미터) {

console.log(파라미터) 

}



함수이름(값)        --> 함수 호출

             

함수 호출 할 때, 소괄호 입력한 값(Argument)이 파라미터에 전달되는 개념

 

**Argument와 Parameter는 헷갈리면 안 된다**

함수를 호출하는 부분에서 파라미터로 전달하는 값이 Argument

함수 선언 부분에서 소괄호에 작성되는 것이 Parameter 다.

 

예시

 

function welcomecode(Kick,Gwagon) {
  console.log ('여기에 ' + Kick + ' 다음')
  console.log ('와따머고 ' + Gwagon + ' 다음다음')
}


welcomecode('여기에','떠나야해')
실행 결과
여기에 여기에 다음
와따머고 떠나야해 다음다음

 

function welcomecode(x, y) {
console.log ( x * y )
}


welcomecode(2, 4)
8

 

function hello(name) {
 console.log(`my name is ${name!}`);
}

hello()

위와 같이 Argument에 아무 값도 입력해주지 않으면,

my name is undefined 값이 출력된다.

 

그런데 이때 파라미터에 할당 연산자를 활용하여 기본 값을 작성하게 되면 Argument를 작성하지 않아도 동작한다.

function hello(name = `tae`) {
 console.log(`my name is ${name!}`);
}

hello()

출력 값은 my name is tae! 가 된다.

 

 

 function defaultTest(x, y = x + 3){ 
 console.log(`x: ${x}`);
 console.log(`y: ${y}`);
 };
 
 defaultTest(5,)

위와 같이 Argument에 x값만 전달할 경우.

</> 실행 결과
x: 5
y: 8

y값에 x값이 대입 해져서   결과적으로 5+3이 되어 y값은 8이 되며.

Argument에 y값도 전달할 경우 

</> 실행 결과
x: 5
y: 3

그대로 y값이 전달된다.

'Javascript 이론' 카테고리의 다른 글

Javascript Promise 문법 정리  (0) 2023.04.13
Module  (0) 2023.04.13
Falsy 값과 Truthy 값은 무엇일까?  (0) 2022.08.01
Boolean 불 대수에 대해 알아보자!  (0) 2022.08.01
이벤트 핸들러(Event Handler) 써보자!  (0) 2022.07.29

 

---------------------------------------------------

Falsy 값의 종류

False

Null

undefined

NaN

0

''

---------------------------------------------------

Truthy 값의 종류

[]

{}

---------------------------------------------------

예제

if (0) {
  console.log('I love JavaScript! :')
} else {
  console.log('I hate JavaScript')
}

답 : 0은  Falsy 값이니 else값이 출력되겠죠?후훗

 

AND 연산자일 경우에는

 

console.log('love' && 'Javascript')

위의 예시인 경우, 'Javascript'가 출력 된다.

&&의 경우 왼쪽 값이 Truthy인 경우 오른쪽 출력

||의 경우 왼쪽 값이 Truthy 인 경우 왼쪽 출력으로 외워보세요!

 

 

외우셨나요? 이제 문제 갑니다 😎

 

1    console.log('String' && 123);

2    console.log({} || []);

3    console.log(0 && false);

4    console.log(null || undefined);

5    console.log(NaN && 'Codeit');

6    console.log('' || true);

7    console.log('JavaScript' && null);

8    console.log(3000 || undefined); 

 

 

1번:  'String'이 truthy 값, && = 123

2번:  {}이 Truthy , ||  = {}

3번:  0이 falsy 값, && = 0

4번:  null이 falsy 값,|| = undefined

5번: NaN이 falsy 값,&& = NaN

6번 ''이 falsy 값,|| = ''

7번 'Javascript가 truthy값,&& = null 

8번 3000이 truthy값,|| = 3000

 

 

 

1    console.log('codeit' && undefined && null);

2    console.log('codeit' || false || null);

3    console.log('codeit' && 123 || null);

4    console.log('codeit' || 123 && true);

왼쪽부터 차례대로 계산하나, ||와 &&가  같이 있을땐 && 가 우선,

 

1번 : 'codeit' && undefined 에서 'codeit'이 truthy값이니 undefined 이고, undefined와 null이 &&이니 undefined

2번 : 'codeit' || false 에서 'codeit'이 truthy값이니 codeit이고, null과 하면 truthy값 => codeit

3번 : 'codeit과 123 &&이니깐 123, null에 ||이니까 123

4번 : 123과 true  &&니까 true, 'codeit'과 하면 codeit 

 

 

 

 

 

Application Programing interface

API의 정확한 의미는 Application Programing interface이다. 우리나라 말로 "응용 프로그램 프로그래밍 인터페이스"

초보자에게 있어서, API는 굉장히 이해하기 어렵다. 이유는 컴퓨터 공학 분야의 추상적인 개념 이기 때문일 것이다.

나 또한 API라는 것을 처음 들어보았을 때, 설명글을 읽었는데 무슨 말인지 이해 못 해서 한 두 번 정도 더 읽었던 기억이 있다.

그러나 이해하고 보니, API는 프로그래밍을 배우는 데 반드시 필요한 지식이었고, 개발할 때 매우 매우 자주 등장 하니, 꼭 알아 두어야 할 필요가 있다.. 이해하여 내 것으로 만들면, 개발의 폭도 넓어져서 개발자의 역량 또한 높아지니까 알아둔다고 손해 볼 건 없다!

 

API는 소프트웨어의 일부를 공개하여 다른 소프트웨어와 기능을 공유할 수 있도록 한 것이다.

소프트웨어의 일부를 WEB에 공개함으로써 누구나 외부에서 이용할 수 있게 된다.

이를 통해 자신의 소프트웨어에 다른 소프트웨어의 기능을 내장할 수 있게 되므로 애플리케이션 간에 연동할 수 있다.

 

API의 장점

1. 효율적으로 프로그래밍이 가능하다.

만들고 싶은 기능이 이미 API에 게시되어 있다면 동일한 프로그램을 하나를 직접 만들 필요가 없다. 

이를 통해 개발 시간을 대폭 단축할 수 있다.

또한 무료로 이용할 수 있으므로 개발 비용도 대폭 절감할 수 있고 효율적으로 애플리케이션을 제작할 수 있다.

그 밖에도, 툴이나 서비스를 사용하는 것으로 보다 앱 개발을 효율화할 수 있다.

2. 데이터를 보조 이용 가능하다.

API에서는 타사 데이터를 참고, 사용할 수도 있다. 같은 정보를 다양한 분야에서 활용하게 함으로써 정보를 분석하는 것이 용이해지고, 각 분야에 특화된 분석을 할 수 있다. 거기에서 고객의 경향과 특징을 발견함으로써 혁신이 태어나 새로운 비즈니스가 탄생할 수 있다.

3. 보안 향상

페이스북, 트위터, 구글의 API 키를 획득하면 자사 서비스에 SNS 로그인을 설정할 수 있다. 즉, 처음부터 회원 등록 시스템을 제작하지 않아도 Facebook, Twitter, Google의 보안 수준이 높은 시스템을 사용할 수 있어 자사의 서비스 보안을 향상할 수 있다. 다만, 어디까지나 API를 이용한 일례에 지나지 않으므로 주의.

 

 

API 활용 사례

 

LINE API

LINE에는 다음과 같은 API가 있다.

  • 채팅봇 개발
  • LINE 로그인 기능
  • IoT 개발
  • 음성 어시스턴트 개발
  • LINE 결제 기능
  • 소셜 버튼 · 알림 기능


이처럼 LINE은 웹 개발에 사용할 수 있는 것뿐만 아니라 IoT 개발 등 폭넓은 기능을 공개하고 있다. 

 

YouTubeAPI

YouTubeAPI는 동영상 실적을 높이기 위해 분석할 수 있는 기능을 추가할 수 있다. YouTubeAPI에서 할 수 있는 작업은 다음과 같다.

  • 동영상의 효과 측정을 할 수 있다.
  • 동영상 제어 가능.
  • 채널의 데이터를 일괄 취득할 수 있다.

 

 

 

 

Amazon API

Amazon의 API로 할 수 있는 일은 다음과 같다.

  • 1일 단위로의 판매액·소개료의 추이를 파악할 수 있다.
  • 상품의 최신 정보를 표시할 수 있다.

Amazon의 API는 이러한 제휴사에게 유용한 기능을 제공한다.

 

이 외에도, 공공데이터 Open API 서비스 등, 정말 무궁무진한 API들이 많으니, 공공데이터 API 활용법 등, 공부를 하는 것이 웹 개발에 아주 큰 도움이 될 것이라고 나는 확신한다!

'Developer 지식' 카테고리의 다른 글

Domain  (0) 2023.04.02
Sample code in object and Instance.  (0) 2023.04.02
객체(Object)  (0) 2023.04.02
JAVA TDD  (0) 2023.04.02
트러블 슈팅이란?  (0) 2023.04.02

George Boole 1815년 &nbsp; 11월 2일 & 1864년 &nbsp; 12월 8일 영국의 수학자

George Boole 이름을 따서  만들어진 불 대수(Boolean algebra)가 있다. 수학자라는 부분이 참 인상 깊다.

 

불 대수는 JavaScript에서도 활용 되고 있으며, 현재 많은 언어들이 사용하고 있다!

 

그럼 불 대수에 대해 조금 더 알아보자.

①.불 대수의 특징

 

1.숫자 값은 진리 값이다. 진리 값은 어떤 값이 True인지 False 인지 나타낸다.

2.AND, OR, NOT로 표현 한다. 

3.명제가 필요 하다.

여기서  명제란? "True 또는 False가 확실한 '문장'"    

 

대한민국의 수도는 서울 이다. -----> 참인 명제

10은 5보다 작다 -----> 거짓 명제

한국의 수도는 어디입니까?  -----> 명제가 아님

짜장면 보다 짬뽕이 맛있다. -----> 주관적인 표현,명제가 아님 (개인적으로 짬뽕)

 

AND 연산x와 y가 모두 참일 때만  B가 참으로 변한다.

 

x         l    y             l    B

true     l   false        l   False

false    l   true         l    False

true     l   true         l  true 

 

OR 연산

 

x와 y 중 하나가 참 일때 B가 참으로 변한다

x        l      y     l    B     l

false  l   true    l  true   l

true   l  false   l  true    l

false l  false     l false   l 

 

ex) 대한민국의 수도는 제주도거나 부산이다.

둘 다 아니기 때문에 false

 

 

NOT 연산 

참이면 거짓

거짓이면 참으로 만들어 준다

 

대한민국의 수도는 서울 이다.

사실 이기 때문에 false 이다.

 

 

Javascript에서 Event Handler란 일상생활에서 비유해 보자면, 음.. 보통 운전을 할 때, Handle을 통해서 차를 조종하지 않는가? 그런 것처럼, 언어에서도 조종하는 것이 있다!  여기서는 HTML을 조종할 수 있다고 생각하면 된다.

Button을 눌렀을 때, 클릭 이벤트가 나오게 한다 던가, 에러 처리를 할 수 있다 던가, 조금 더 나아가면 비동기 처리 등 다양한 작업들을 조종할 수 있다.

 

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>JS with Codeit</title>
</head>
<body>
  <div id="content" class="btns">
    <button id="myBtn">JS Click!</button>
    <button onclick="console.log('Hello Codeit!')">HTML Click!</button>
  </div>
  <script src="index.js"></script>
</body>

</html>

Id 가 myBtn인 값을  Js파일로 옮겨서 해보자.

 

let btn = document.querySelector('#myBtn');



function eventgood() {
 console.log('Hi taeyoung')
 }
 
 btn.addEventListener('click', eventgood)

위의 코드를 설명 해보자면, myBtn인 아이디 값을 Btn "변수"라는 바구니에 담았다. 이제, 기능을 만들어서, 'Hi taeyoun'을 나오게 하는 기능을 만들어주고, btn을 '클릭'하면 그 기능이 나오게 해주는 것이다. 이제 button을 클릭할 때마다, 'Hi taeyoung'이 콘솔 창에 찍힌다. 정말 멋지지 않은가?😊

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
	<link rel="stylesheet" href="style.css">
  <title>JS with Codeit</title>
</head>
<body>
  <div>
    <h1 class="title">오늘 할 일</h1>
		<ol id="today" class="list today">
			<li class="item">자바스크립트 공부</li>
			<li class="item">고양이 화장실 청소</li>
			<li class="item">고양이 장난감 쇼핑</li>
		</ol>
		<h1 class="title">내일 할 일</h1>
		<ol id="tomorrow" class="list tomorrow">
			<li class="item">자바스크립트 공부</li>
			<li class="item">뮤지컬 공연 예매</li>
			<li class="item">유튜브 시청</li>
		</ol>
  </div>
  <script src="index.js"></script>
</body>
</html>

위의 html 문서에서, 오늘 할 일 중 나는  자바스크립트 공부를 다 했으니, 그것을 줄을 긋고 싶다.

어떻게 해야 하는가? 라는 문제 다.

 

그럼 우선 css 파일로 가서,

 

.finish {
  opacity: 0.5;
  text-decoration: line-through;
}

줄 긋는 코드를 만들어 주자.  line-through은  줄을 만들어주는데, text-decoration: line-through하면 텍스트에 줄을 그어준다!

 

js 파일로 가서

 

const todolist = document.querySelector('#today')
const taeyoung = today.children[0]
taeyoung.classList.add('finish')

이 코드 아니면,

item.className = 'finish';

입력 해보자. 다른 방법도 2가지 있지만, 필자는 이 두 방법을 선호 함.

결과물

 

 

출처 : 코드잇

let inMyBackPack = ['cash','cuplamen','notebook','battery','Ipad']

for ( let tae in inMyBackPack) {
console.log(inMyBackPack[tae])
}

위의 코드 처럼 반복문을 쓰면, 아주 편하게 내가 가진 것들을 출력 할 수 있다!

inMyBackPack을 tae이라는 가방에 담는다고 보면 된다.

 

 

for (let i = 0; i < 5; i++) {
    console.log(i);
}

이렇게 하면 i가 0이고 i가 5만큼 증가한다. 

 

반복문은 한번 배우고 나면, 개발할 때 두고두고 써먹는 아주 유용한 친구이다.

 

이 배열들을 모두 출력 하고 싶을 때,

console.log(inMyBackPack[0])

console.log(inMyBackPack[1])

console.log(inMyBackPack[2])

console.log(inMyBackPack[3])

console.log(inMyBackPack[4])

console.log(inMyBackPack[5])   이렇게 해도 되지만, 코드의 줄 갯수가 너무 늘어나니까 반복문을 하는게 좋다.

 

 

+ Recent posts