Day: 2022 2월 17

bookmark_border자바스크립트 반복문

Posted on

자바스크립트 반복문

  • While
    • 조건이 참인 동안 코드블록을 반복
    • 반복 횟수가 불명확한 경우 주로 사용

while(조건) {
코드블록
}

var a = Math.floor(Math.random() * 10);
var b = Math.floor(Math.random() * 10);
var answer;

while (answer != (a + b)) {
  answer = prompt(a + '+' + b + '= ?');
}
console.log("정답입니다.");
0506-while-1다운로드
  • For
    • 배열안의 요소를 하나씩 꺼내며 반복
    • 배열의 길이만큼 처럼 반복 횟수가 명확한 경우 주로 사용

for(var{변수}of{배열}) {
코드 블록
}

var scores = [90, 92, 84, 98, 70];
var sum = 0;

for (var score of scores) {
  sum += score;
}
console.log("총점: " + sum);
console.log("평균: " + (sum / scores.length));
0507-for-1다운로드
  • 가장 큰 수를 반환하는 함수
function max(arr) {
  var _max = -99999; // 아주 작은수
  for (var i of arr) {
    if (i > _max) {
      _max = i;
    }
  }
  return _max;
}      
console.log("가장 큰 수는 " + max([5, 7, 10, 2, 8]) + "입니다.");
0508-max-num-1다운로드
  • 배열을 화면에 출력하기
<ul id="list"></ul>
<script>
  var list = document.getElementById("list");
  var products = ['데스크탑', '모니터', '노트북', '스피커', '마우스'];

  var html = '';
  for (var product of products) {
    html += '<li>' + product + '</li>';
  }
  list.innerHTML = html;
</script>
0509-print-array-1다운로드

과제 : 전달 받은 배열 중 가장 큰 수를 반환하는 자바스크립트 함수를 작성해보세요.

0510-homework-1다운로드

bookmark_border자바스크립트 조건문

Posted on

자바스크립트 조건문

  • if
  • if~else
  • if ~else if~else
var score = prompt("성적을 입력하세요.");

if (score >= 90) {
  console.log("A");
} else if (score >= 80) {
  console.log("B");
} else if (score >= 70) {
  console.log("C");
} else {
  console.log("D");
}
  • switch
  • break
var language = prompt("언어를 입력해주세요.");

switch(language) {
  case "korean":
    alert("안녕하세요.");
    break;
  case "english":
    alert("Hello.");
    break;
  case "spanish":
    alert("Hola.");
    break;
  default:
    alert("지원하지 않는 언어입니다.");
    break;
}
0505-condition-1다운로드

bookmark_border자바스크립트 함수

Posted on

자바스크립트 함수

함수 정의

  • 특정 기능을 하는 구문(알고리즘,로직)을 독립된 형태로 만드는 것
  • 변수에 저장할 수 있는 한가지 자료형
  • 함수 구조 형식 : var {함수명}=function(){//저장할 코드 }
  • 축약 형식 : function{함수명}(){//저장할 코드 }
  • 함수 실행 : {함수명}()
var sayHello = function () {
  console.log('Hello~');
}
sayHello();

// 같은 코드
function sayHello() {
  console.log('Hello~');
}

함수에 값 전달하기

  • 함수에 저장된 코드를 실행할 때 값을 전달할 수 있음
  • 매개변수 사용 함수 형식 : function{함수명}(값1,값2,…){}
  • 값1,값2,…매개변수라고 함
  • 코드 블럭 안에서 전달 받은 값 사용 가능
  • 함수에 전달하는 값을 함수 인자라고 함
function square(x) {
  console.log(x * x);
}
square(2);
square(0.1);

값을 반환하는 함수

  • 함수의 실행 결과를 반환
  • 함수 코드 블록 안에서 return{값} 형식 사용
  • 반환된 값은 다른 표현식들과 같은 취급
function square(x) {
  return x * x;
}
var vaule = square(4);
0501-function-1다운로드

함수를 인자로 전달받는 함수

  • 함수의 인자로 함수명을 전달
  • 함수 내부에서 전달받은 함수를 실행
  • ex) setInterval(tick, 1000);
function operator(x, y, func) {
  return func(x, y);
}

function add(a, b) { return a+b; }
function substract(a, b) { return a-b; }

console.log(operator(4, 2, add));
console.log(operator(4, 2, substract));

<script>
  var element = document.getElementById("text");

  setTimeout(function() {
    element.innerText = '삭제됨';
  }, 3000);      
</script>
0502-function-2다운로드

배열 객체의 함수

CRUDHTTP 메서드URI
책들의 목록을 표시GET/books
책 한권의 정보를 표시GET/books/{id}
새 책을 생성POST/books
책을 수정PUT/books/{id}
책을 삭제DELETE/books/{id}
var balls = ['축구공', '야구공', '배구공', '농구공'];
balls.forEach(throwBall);

function throwBall(ball) {
  console.log(ball + '을(를) 던졌습니다.')
};

var numbers = [1, 2, 3, 4, 5];
var twice = numbers.map(function(value, index) {
  return value*2;
});
console.log(twice);

var even = numbers.filter(function(value, index) {
  return value % 2 == 0;
});
console.log(even);
0503-function-3다운로드

이벤트

자바스크립트 이벤트

  • 사용자의 입력을 처리
  • HTML태그 마다 다양한 이벤트가 발생됨
  • click, focus, blur 등
  • 이벤트 처리기는 이벤트 발생 시 실행할 함수를 전달받음

이벤트 처리기 등록

  • 자바스크립트로 html요소를 선택한 뒤 addEventListener 함수를 호출
  • 형식 : addEventListner(이벤트이름, 실행할 함수)
    • 첫 번째 인자-이벤트의 이름
    • 두 번째 인자-이벤트가 발생했을 때 실행할 함수

Click이벤트

  • HTML 요소를 마우스로 클릭하거나 터치 디바이스에서 터치시 발생
  • 마우스 이벤트 중 하나로 mousedown, mouseup 이벤트 발생 후에 발생됨
  • 버튼 뿐만 아니라 모든 HTML요소에서 이벤트가 발생되고 이벤트 처리기를 등록할 수 있음
var button = document.getElementById("button");
var element = document.getElementById("count");

var count = 0;
button.addEventListener('click', function() {
  count++;
  element.innerText = count + '회 클릭';
});
0504-function-4다운로드