베이스 캠프 3일차

TIL

베이스 캠프 3일차

버밀이 2023. 2. 15. 16:51

4. 데이터 타입

문자열(string) : "" 안에 들어있는 문자들
숫자(number) : 숫자를 나타내는 자료형이며 모든 숫자를 실수(float)로 처리한다.
불린(Boolean) : 참과 거짓.
undefined : 변수를 선언했지만 값이 할당되지 않았을 때 자바스크립트 엔진이 암묵적으로 초기화 하는 값
null : 의도적으로 값이 없음을 명시하기 위해 할당하는 값

5. 조건문

if ~ else 문
위 조건문은 if의 조건(()의 명령)이 맞으면 {} 안의 실행문을 실행하고 그렇지 않으면 else문 안의 실행문을 실행한다.

예시)

// if문 적용
if(1+1 === 2) {
    console.log("정답입니다!")     // 정답입니다!
}

// if ... else문 적용
if(1+1 === 3) {
    console.log("정답입니다!")
} else {
    console.log("틀렸습니다!")     // 틀렸습니다!
}

// if , else if , else 문 적용
if(3학년>=13) {
    console.log("초등학교 1학년은 13살 이상입니다.")
} else if(3학년<13 && 3학년>=8) {
    console.log("3학년은 13살 미만 8살 이상입니다.") // 3학년은 13살 미만 8살 이상입니다.
} else {
    console.log("3학년은 8살 미만입니다.") 
}
// 마지막 예시는 에러가 뜰 것 입니다. 컴퓨터는 3학년이 뭔지 모르기 때문입니다. 
// 마지막 예시는 우리의 상식선에서의 예시입니다. 해당 코드가 잘 작동되게 하고싶으시다면 컴퓨터에게 3학년의 개념을 알려주시면 됩니다.

6. 반복문

반복문 : 특정 조건을 만족하는 경우 계속해서 반복문 안의 실행문을 실행

반복문 예시(for문)

const classmates = ["철수", "영희", "훈이", "민수" , "민지" ]
for(let i=0; i<=4; i=i+1) {
    console.log(classmates[i] + "어린이")
}

// 결과
// 철수어린이
// 영희어린이
// 훈이어린이
// 민수어린이
// 민지어린이

7. 수학 객체

자바 스크립트에서 수학과 관련된 기능과 속성을 가진 객체

8. DOM

DOM은 Document Object Model의 줄임말로 웹브라우저가 정적인 웹페이지를 변경하거나 조작하기 위해 HTML 파일을

자바스크립트 객체로 만들어 준다.

DOM 예시

// HTML 파일
<html>
    <head></head>
    <body>
        <div id="apple">철수는 사과를 먹습니다.</div>
        <div id="banana">맹구는 바나나를 먹습니다.</div>
        <div class="food">영희는 피자를 먹습니다.</div>
	<div class="food">훈이는 치킨을 먹습니다.</div>
    </body>
</html>

// JAVASCRIPT 객체
document = {
    head: <head></head>,
    body: {
        children: [
            <div id="apple">철수는 사과를 먹습니다.</div>,
            <div id="banana">맹구는 바나나를 먹습니다.</div>,
            <div class="food">영희는 피자를 먹습니다.</div>,
            <div class="food">훈이는 치킨을 먹습니다.</div>
        ]
    }
}

// 객체로부터 정보 가져오기
console.log(document.body.children[0].id)            // apple
console.log(document.body.children[0].innerText)     // 철수는 사과를 먹습니다.
console.log(document.body.children[0].innerHTML)     // 철수는 사과를 먹습니다.

// ID로 HTML 태그값 가져오기
const text1 = document.getElementById('apple');      // <div id="apple">철수는 사과를 먹습니다.</div>
console.log(text1.innerHTML);     // 철수는 사과를 먹습니다.

// CLASS로 HTML 태그값들 가져오기
const text2 = document.getElement**s**ByClassName('food');
console.log(text2[**0**].innerHTML);     // 영희는 피자를 먹습니다.
console.log(text2[**1**].innerHTML);     // 훈이는 치킨을 먹습니다.

// 자바스크립트로 HTML 및 속성 변경하기
document.getElementById('apple').setAttribute('style', 'color: red;')
document.getElementById('banana').innerHTML = '맹구는 노란 바나나를 <strong>맛있게</strong> 먹습니다.'
// 		<html>
//			<body>
//				<div id="apple" style="color: red;">철수는 사과를 먹습니다.</div>
//   			<div id="banana">맹구는 노란 바나나를 **<strong>맛있게</strong>** 먹습니다.</div>
//				<div class="food">영희는 피자를 먹습니다.</div>
//				<div class="food">훈이는 치킨을 먹습니다.</div>
//			</body>
//		</html>

// DOM을 활용한 헤더 타이틀 변경
<html>
  <head>
    <script>
        function clickSave() {
	          const text = document.getElementById('title_input').innerHTML
	          document.getElementById('title').innerHTML = text
        }
    </script>
	</head>
	<body>
    <h1 id="title">사이좋은 사람들, 싸이월드</h1>
    <textarea id="title_input">타이틀 변경</textarea>
    <button type="button" onclick="clickSave();">Save</button>
	</body>
</html>