Do it! 자바스크립트
4강 흐름을 제어한다! 제어문
1. 조건에 따라 흐름 조절하기 - if문, if...else문과 조건연산자
- if문 만들기
var age = prompt("나이를 입력하세요.");
if(age>=18) alert("성인입니다.");
else alert("미성년입니다.");
- 조건 연산자 - ?(물음표) 와 :(콜론)
조건이 하나 이고 ture와 false일때 실행할 명령이 하나뿐일때
? 왼쪽에 조건,
: 왼쪽에 ture 명령어, 오른쪽에는 false 명령어
var score = 75;
(score >= 60)? alert("통과") : alert("실패");
// 60점 이상이면 '통과' , 그렇지 않으면 '실패'
- truthy 값과 falsy 값
true로 인정할 수 있는 값을 'truthy하다' 라고 표현한다.
false로 인정할 수 있는 값은 'falsy하다' 라고 표현한다.
- 3의 배수 검사기 만들기
<script>
var userNumber = prompt("숫자를 입력하세요.");
var displayArea = document.querySelector('#result');
if (userNumber != null){
if (userNumber % 3 === 0){
displayArea.innerHTML = userNumber + "은 3의 배수입니다.";
}
else {
displayArea.innerHTML = userNumber + "은 3의 배수가 아닙니다.";
}
}
else {
alert("입력이 취소되었습니다.");
}
</script>2. 조건이 많을 때 흐름 조절하기 - switch문
<script>
var session = prompt("관심 세션을 선택해 주세요. 1-마케팅, 2-개발, 3-디자인", "1");
switch(session){
case "1" : document.write("<p>마케팅 세션은 <stong>201호</strong>에서 진행됩니다.</p>");
braek;
case "2" : document.write("<p>마케팅 세션은 <stong>203호</strong>에서 진행됩니다.</p>");
braek;
case "3" : document.write("<p>마케팅 세션은 <stong>205호</strong>에서 진행됩니다.</p>");
braek;
default : alert("잘못 입력했습니다.");
}
</script>👉조건이 3개이상일때 유용
3. 명령 반복 실행하기 - for문
<script>
var sum = 0; // var i = 1 카운트 변수 선언
for(var i = 1; i<6 ; i++){ // i = 1 부터 i = 5 까지 총 5번 반복
sum += i; // sum = sum + i
}
document.write("1부터 5까지 더하면 " + sum );
</script>
- 카운터 변수 선언
카운터 변수 i란? for문을 실행할 때 반복 횟수의 기준이 되는 변수
- 카운터 변수 선언
4. for문 반복하기 - 중첩 for문
- 별 찍기 실습으로 중첩 for문 알아보기
<script>
for(var i = 0; i<30 ; i++){
document.write('*')
}
document.write("<br>");
for(var i = 0; i<30 ; i++){
document.write('*')
}
document.write("<br>");
for(var i = 0; i<30 ; i++){
document.write('*')
}
document.write("<br>");
for(var i = 0; i<30 ; i++){
document.write('*')
}
document.write("<br>");
for(var i = 0; i<30 ; i++){
document.write('*')
}
document.write("<br><br>")
// for문을 중첩시키면서 코드가 간결해짐.
for(var k = 0 ; k <5 ; k++){
for(var i = 0; i<30 ; i++){
document.write('*');
}
document.write("<br>");
}
</script>- 구구단 프로그램 만들기 - for문 중첩하기
<script>
for(var i = 2; i<= 9; i++){
document.write("<div>");
document.write("<h3>"+ i +"단</h3>")
for(var j = 1; j<=9; j++){
document.write(i + " X " + j + "=" + i*j + "<br>");
}
document.write("</div>");
}
</script>
// 중첩으로 역시 간단해짐.5. 특정 조건에 따라 반복하기 - while문, do...while문
- for문은 횟수가 정해져 있는 반복 명령을 작성할 때 편리
- while문, do...while문은 특정 조건을 만족하는 동안에만 명령을 반복
var i = 0
while (i<10){
document.write('반복 조건이 ture면 반복합니다.<br>');
i += 1; // i = i+1 , 10번 반복
}
📌 차이점 while문은 조건부터 확인, do...while문은 일단 실행 후 조건 확인
var i = 0
do {
document.write('반복 조건이 ture면 반복합니다.<br>'); // 명령 실행
i +=1;
} while (i<10); // 조건이 false가 되면 반복 종료- 팩토리얼 계산 프로그램 만들기
<script>
var n = prompt("숫자를 입력하세요.");
var nFact = 1; // 1을 기본값으로 지정
var i = 2; // 1!=1이기때문에 i=2 부터시작
while (i <= n){ // i = n까지 반복
nFact *= i; //nFact = nFact * i
i++;
}
document.write(n+"!=" + nFact);
</script>6. 반복을 건너뛰거나 멈추기 - break문, continue문
break가 나타난 지점에서 바로 반복문 종료
continue가 나타나면 실행하던 반복 문장을 건너뛰고 반복문의 맨 앞으로
- 짝수 더하기 프로그램 만들기 - 반복문, continue문, if문 활용
<script>
var n = 10;
var sum = 0;
for(var i = 1; i <= n; i++) { // i <= 10까지 반복
if (i % 2 == 1) { // i가 홀수일 경우 실행
continue
}
sum += i;
document.write(i + " ------ " + sum + "<br>");
}
</script>5강 함수와 이벤트
1. 여러 동작을 묶은 덩어리, 함수
함수란? 특정 기능을 수행하는 소스 코드를 따로 묶어 놓은 덩어리
- 함수를 정의하고 실행하기
function addNumber(){ // 함수를 선언할때는 function 예약어를 사용, 중괄호{ }로 명령 묶기
var sum = 10 + 20;
console.log(sum);
}
- 버튼을 눌렀을 때 함수를 실행하는 프로그램 만들기
function addNumber(){
var sum = 10 + 20;
alert(sum);
}덧셈 계산하기
<button onclick="addNumber()">덧셈 계산하기</button>
<script src="js/add.js"></script>
// 위에 코드를 js 파일로 저장해 다시 불러와서 적용
2. 여러 번 사용할 수 있는 함수 만들기
👉 매개변수와 인수를 사용
function addNumber(a, b){ // a와 b가 매개변수
var sum = a + b ;
console.log(sum);
}
addNumber ( 2, 3 ) // 2와 3은 인수
- 두 수를 더하는 함수 실행하기
function addNumber(a,b){
var sum = a + b;
console.log(sum);
}
var num1 = parseInt(prompt("첫 번째 숫자는?"));
var num2 = parseInt(prompt("두 번째 숫자는?"));
addNumber(num1 , num2)
function addNumber (a,b){
var sum = a + b
alert("두 수를 더한 값은 "+sum+"입니다.")
} - 함수의 return문 더 알아보기
함수값을 반환한다? 함수를 실행한 후 그 결괏값을 함수 밖으로 넘기는 것
var num1 = parseInt(prompt("첫 번째 숫자 : "));
var num2 = parseInt(prompt("두 번째 숫자 : "));
var result = addNumber(num1, num2);
alert("두 수를 더한 값은 " + result + "입니다.");
function addNumber(a, b) {
var sum = a + b;
return sum;
}-
변수의 적용 범위 알아보기
변수를 선언하고 사용할 때 변수가 적용되는 범위 '스코프'
한 함수 안에서만 사용할 수 있는 변수를 '지역 변수' or '로컬 변수'
스크립트 소스 전체에서 사용할 수 있는 변수를 '전역 변수' or '글로벌 변수' -
지역 변수와 전역 변수
var myVar = 100; // 전역 변수 선언
test();
document.write("myVar is " + myVar);
function test() {
var myVar = 50; // 지역 변수 선언- 익명 함수와 즉시 실행 함수
⚠ 익명 함수
var add = function(a,b) { // 함수 선언 후 변수 add에 할당
return a + b;
}
var sum = add(10, 20); // 익명 함수 실행 후 결괏값을 변수 sum에 저장
sum // 변수 sum 값 확인
30
⚠즉시 실행 함수
var result = (function(){
return 10 + 20;
}());
console.log(result);
30
var result = (function(a, b){ // 매개변수 추가
return a + b;
}(10,20)); // 인수 추가
console.log(result);
30🗨 익명 함수와 즉시 실행 함수를 이해 하지 못했다ㅠ이 부분은 다시 복습!
3. 이벤트 다루기
-
이벤트와 이벤트 처리기 간단히살펴보기
이벤트란? 웹 브라우저나 사용자가 행하는 어떤 동작
이벤트 처리기 or 이벤트 핸들러란? 이벤트와 이벶트 처리 함수를 연결해 주는 것 -
이벤트 처리기로
<Button>태그에 함수 연결하기
<button class="over" id="open" ondblclick="alert('두 번 눌렀습니다.')">상세 설명 보기</button><button>태그에 미리 만들어 둔 함수 연결하기
<div id="item">
<img src="images/flower1.jpg" alt="">
<button class="over" id="open" onclick="showDetail()">상세 설명 보기</button>
<div id="desc" class="detail">
<h4>민들레</h4>
<p>어디서나 매우 흔하게 보이는 잡초로서 바닥에 딱 붙어서 꽃봉오리 하나가 쏙 올라온다. 톱니 모양의 잎새와 눈에 확 띄는 노란 꽃이 인상적이다. 특히 꽃이 지고나면 솜털모양의 깃을 가진 씨앗들이 나오는데 바람을 타고 날아가서 널리 퍼진다.</p>
<button id="close" onclick="hideDetail()">상세 설명 닫기</button>
</div>
</div>
<script src = "js/event.js"></script> // 함수 연결 부분
- 여러 이벤트 처리기 연결하기
var coverImage = document.querySelector("#cover");
coverImage.onclick = function(){
alert('눌렀습니다.')
};
coverImage.onmouseover = function(){
coverImage.style.border = "5px black solid";
};
coverImage.onmouseout = function(){
coverImage.style.border = "";
};
💬하루 되돌아보기
지금 5강을 하다 말았다😰 너무 졸려서 일단 한 부분까지라도 글을 작성하고 싶어서 여기까지 작성하고,
내일 마저 공부하고 다시 작성하러 와야겠다
오늘 공부를 많이 못했는데 내일 더 많이 할수있길..
여러가지 제어문을 확실하게 머리에 세뇌 시킬 수 있었다!
일단 아직 재밌는데 뒤로 갈수록 잘 할 수있을까 걱정이 되긴하지만! 아자아자!
++추가
나머지 부분을 공부하고 일단 익명 함수와 즉시 실행 함수를 강의를 찾아봐야하구,
이벤트 부분은 수월하게 넘어갔다.
성장중인 개발자🫰