[KDT]FCFE - 2주1일 Javascript 기본

04.Javascript 배열과 반복문

for 문

for(let i=0; i<10; i++){ console.log('반복 10번'); }

: 특정 조건이 성립하는 동안 주어진 작업을 수행 ( 초기화; 조건; 작업 후 처리;)

break;

: for 문 루프를 중단.

while ( i<5 ){ console.log(i); }

: 조건이 true이면 계속 반복

HTML 요소 생성하여 삽입하기

let spanElement = document.createElement("span");

: 요소 생성

spanElement.append("삽입된 문자열");
document.querySelector("div").append(spanElement);

: 요소 삽입

for 문과 배열 사용하기

var things = ['냉장고', '코끼리', '기린'];
var steps = [
  '냉장고 문을 연다',
  '기린을 꺼낸다',
  '코끼리를 넣는다',
  '냉장고 문을 닫는다'
];

var thingsUl = document.querySelector("ul");
for (var i = 0; i < things.length; i++) {
  var li = document.createElement("li");
  li.append(things[i]);
  thingsUl.append(li);
}

var stepsOl = document.querySelector("ol");
for (var i = 0; i < steps.length; i++) {
  var li = document.createElement("li");
  li.append(steps[i]);
  stepsOl.append(li);
}

05. Javascript 함수와 이벤트

함수(function)

function printTime(){
	let today = new Date();
    console.log( today );
}

new Date()

: 현재 시각을 반환

함수를 만들고 함수안에 작성한 코드를 필요로 할 때 호출할 수 있다.

이벤트

06. 객체와 스타일 다루기

07. 자료형 더 자세히 알아보기

문자열

let myString = "동해물과 백두산이 마르고 닳도록";
console.log(myString.length);

: myString.length

문자열[n];

: 문자열 n 번째 글자

myString.replace("동해물","백두산"); // 백두산과 동해물이 마르고 닳도록

: 문자열 일부 치환

myString.indexOf('백'); // 5

:문자열 내 문자 위치

myString.split('이'); // ['동해물과 백두산','마르고 닳도록']

: 특정 문자 기준으로 배열로 분할

myString.trim(); // 동해물과백두산이마르고닳도록

: 공백 없애기

숫자형(Number)

Number('114');

: 숫자로 바꿀수 있는 문자열은 숫자로 바꿔준다.
( 숫자로 바꿀 수 없는 문자열은 NaN 으로 나온다.)

*** Math 객체를 사용한 기능들

Math.abs(-1);

: 절대값 구하기

Math.floor(2.4); Math.ceil(2.4); Math.round(2.4);

: 내림, 올림, 반올림

Math.pow(2,3)

: 제곱 구하기 2에 3제곱

배열 (array)

let array = [3,1,4,2,8,0,9];

array.sort(function(a,b){return a-b}); // array = [0,1,2,3,4,8,9]

: sort 함수

let low = array.filter(function(it){return it<5}); // low=[0,1,2,3,4]

: filter 함수

let sum1 = 0; let sum2 = 0;
array.forEach(funtion(item, index){ sum1 += item; sum2 += index })
// sum1 = 3+1+4+2+8+0+9 , sum2 = 1+2+3+4+5+6

: forEach 함수 사용

08. Javascript 실습을 위한 DOM 기능들

HTML 요소의 클래스 다루기

document.querySelector("ul li:nth-child(3)").className = "highlighted";

: 클래스 추가

document.querySelector("ul li:nth-child(4)").classList.add("important");

: 클래스 추가

document.querySelector("ul li:nth-child(3)").classList.remove("important");

: 클래스 삭제

*** input 요소 다루기