javascript_멀티캠퍼스 240305, 240308

brave_chicken·2024년 3월 5일
JavaScript잇(IT)생 챌린지

잇(IT)생 챌린지

목록 보기
4/90


전날 과제 (flex 적용) 드래그 된 부분 수정함

css는 html head태그에 삽입하지 않고, 외부페이지로 분리하는게 일반적

CSS미션

  • 다다음주 월요일(3/18)까지(부트스트랩 배운 후 적용해서)
  • 무료템플릿을 찾아서 쇼핑몰 메인페이지와 상품조회(상품목록)페이지 작성(2장이상)(메인 페이지에서 클릭하면 상품 목록이 조회되도록)
  • 메인페이지는 자유
  • 템플릿이 아니고 직접 만들어도 좋음(부트스트랩 후에)
  • 상품 목록은 db에서 못가져오니까 이미지태그로 작업
  • 당장 연습할 것 : 무료 쇼핑몰 템플릿 찾기, 잘만들어진 페이지 서식 벗겨오는거 해보기

자바까지 배우고 시험 3/20(과정 중 시험 총 네 번)

자바스크립트 인트로

→ 동적인 처리(제이쿼리, 에이작스)



  • 사용자가 입력하는 게 브라우저에서 실행됨
  • 가입버튼은 submit확률일 큼, 서버에 전송해주어야하니
  • 동적 ⇒ 에이작스랑 연결되는 부분때매, 서버에서 데이터 가져오기
  • 웹서버는 자바해석 못함, was에 자바해석엔진이 포함됨
  • 스크립트가 붙는 언어들은 단독으로 실행할 수 없음, html문서에 삽입해서 사용
  • 스크립트는 인터프리터언어 →위에서부터 한줄한줄 실행
    (html도 인터프리터언어임)
    cf) c는 컴파일언어(실행할수있게 번역하는 작업을 함)
  • 인터프리터는 브라우저에 달려있음

1.자바스크립트 사용방법


http://localhost:8088/clientweb/js_basic/js_basic_test2.html


http://localhost:8088/clientweb/js_basic/js_basic_test3.html

1)바디태그 내부에 정의

2)헤드태그 내부에 정의

3)외부문서

4)인라인으로 태그 내부에 정의

  • 이벤트핸들러 : 이벤트(자극)가 발생할 때 실행할 명령을 처리하는 것
    on+이벤트명(키보드, 마우스)
    click, dbclick, mouseover, mouseout, 등
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>Insert title here</title>
		<!-- 3. 외부문서로 정의하고 연결해서 사용하는 방법 -->
		<script type="text/javascript" src="../common/js/test1.js"></script>
		<!-- 2. 헤드태그 내부에서 정의하고 사용하는 방법 -->
		<script type="text/javascript">
			console.log("head태그 내부");
			function test(){//함수정의
				alert("안녕하세요");
				console.log("함수실행중");
				document.write("함수실행결과");
			}
		</script>
	</head>
	<body>
		<!-- 1. 바디태그 내부에서 정의하고 사용하는 방법 (mime)-->
		<script type="text/javascript">
			document. write("<h1>브라우저에 html태그를 실행해서 출력 - 연습용</h1>");
			/* 도큐먼트는 객체임. 미리만들어서 제공됨 */
			console.log("디버깅용 - 자바의 System.out.println과 비슷")
			test();//함수호출
			</script>
		<h1>안녕</h1>
		<!-- 4. 인라인으로 태그 내부에 자바스크립트 코드를 삽입(이벤트 핸들러를 이용해서 연결) -->
		<input type="button" value="자바스크립트 명령어 실행하기" onclick="alert('자바스크립트 명령어 실행')"/>
		<input type="button" value="자바스크립트 함수 호출하기" onclick="test()"/>
		<input type="button" value="자바스크립트 외부문서에 정의된 함수 호출하기" onclick="test2()"/>
		<a href="javascript:test2()">자바스크립트 함수 호출</a>
	</body>
</html>

미션 - js_basic_exam

① exam.js작성하기

test1함수 - alert실행

test2함수 - confirm실행

test3함수 - prompt실행

② 문서에서 버튼을 정의하고 onclick이벤트핸들러로 test1함수 연결하기

③ 문서에서 문자열을 정의하고 하이퍼링크로 test2함수 연결하기

④ 문서에서 image를 추가하고 하이퍼링크로 test3함수 연결하기

=> 이미지에 하이퍼링크로 함수 연결

⑤ 문서에 이미지를 추가하고 이미지의 onclick이벤트핸들러에서 test1함수 연결하기

⑥ 문서에 스크립트를 추가하고 콘솔에 메시지 출력하기

=> <script></script>안에 정의하기

⑦ 실행화면캡쳐 후 소스파일과 제출하기


http://localhost:8088/clientweb/js_basic/js_basic_exam.html

2.문법

1)명령문만들기

2)변수

  • 변수선언문(생략이 가능)** 변수명 = 값;
    (변수 선언문 = var, let, const)
  • 변수=값;
  • var 변수=값;
  • let 변수=값;
  • 자바스크립트는 변수를 선언할 때 타입을 선언하지 않지만 내부적으로 타입은 존재
  • ECMAScript6버전 이전은 var키워드만 이용해서 변수를 선언하고 정의했음
  • ECMAScript6버전 이후에 let과 const가 추가
  • let을 쓰는 추세

var
: 변수를 선언하고 중복(재) 선언이 가능하다. ⇒변수가 건들여질수있다는 뜻
재할당도 가능

let

: 변수를 선언하고 내부에서 중복 선언이 불가
재할당은 가능, 권장하는 변수선언문

const
: 상수정의
상수는 변경될 수 없는 고정된 값
상수로 변수를 정의하면 할당된 값을 변경할 수 없다.
재선언 및 재할당 불가능

3)연산자

https://joyhong-91.tistory.com/7
증감 전위, 후위 연산자 이해하기 쉽게 설명된 글

  • +연산자는 연결연산자의 의미
    +연산자 앞에 문자열이 있으면 뒤에있는 숫자는 문자열화 시킨다.

  • %는 나머지 구하기 연산자임
    document.write(10%3);
    => 1

  • js opr test

증감연산자
++ : 1씩 증가
--: 1씩 감소
후위 연산자(x++, x--) : 증가, 감소 전 값을 돌려줌
전위 연산자(++x, --x) : 증가, 감소 후 값을 돌려줌

  • x=5 일때
    y = x++
    => x=x+1=6
    y= 증가 전 값인 5

비교연산자

  • true, false
  • 결과가 boolean형식 -> 조건을 판단해서 처리해야 하는 작업에 사용

== : 똑같은지 데이터만 비교(같으면 true)
=== : 똑같은지 타입과 데이터 모두 비교(둘 중 하나라도 같지 않으면 false, 타입과 데이터 둘다 같아야만 true)
!= : 데이터 다르면 true, 같으면 false, 다른지 데이터만 비교(!는 not의 의미)
!== : 타입이 다르거나, 데이터가 다르거나 둘 중 하나라도 다르면 true, 타입과 데이터 둘 다 같으면 false

논리연산자

  • ||(or) : 하나의 조건만 true면 조건 만족
  • &&(and) : 모든 비교 조건이 true여야 조건 만족
  • !(not) : 특정한 조건이 not이면 조건 만족

4)조건제어구문

if문 

if(조건){
//조건을 만족하는 경우 실행할 문장
}

[if~else]
if(조건){
//조건을 만족하는 경우 실행할 문장
}else{
//조건을 만족하지 않을 경우 실행할 문장
}

[if~else if~ else if ... else~]
if(조건1){

}else if(조건2){

}else if(조건3){

}...
}else{

}
	<script type="text/javascript">
		//1. 조건이 만족하는 경우에만 실행할 명령문이 있는 경우
		//=>num1이 90이상이면 통과
		let num1 = 98;
		if(num1>=90){
			//조건을 만족하는 경우 실행할 문장
			alert("통과 - 조건만족");
		}
		alert("종료"); //조건만족이 안되면 블럭안으로 안들어가고 건너뛰고 종료됨
		
		//2. 조건이 만족하는 경우와 조건이 만족하지 않는 경우 모두 실행할 명령문이 있다면
		if(num1>=90){
			//조건을 만족하는 경우 실행할 문장
			document.write("<h2>합격</h2>");
		}else{
			//조건을 만족하지 않는 경우 실행할 문장
			document.write("<h2>불합격</h2>");
		}
	</script>

중첩도 가능함(입력 안하고 취소 눌렀을 시 작업 안되는거 만들기 추가했을 때)

<body>
<!-- 	prompt로 숫자를 입력 받아서 5의 배수이면
   "5의 배수" 라는 문자열을 document에 출력하고   c2.jpg를 출력하기
   5의 배수가 아니면   "5의 배수가 아닙니다."라는 문자열을 document에 출력하고   garden01.jpg를 출력하기 -->
   
   <script type="text/javascript">
   let num = prompt("숫자를 입력하세요");
   alert(num);
   if(num==null){
	   alert("취소버튼을 누르면 작업할 수 없습니다.")
   }else{
	   if(num%5 == 0){
		   document.write("<h2>5의 배수</h2>");
		   document.write("<img src='../images/c2.jpg'>");
	   }else{
		   document.write("<h2>5의 배수가 아닙니다.</h2>");
		   document.write("<img src='../images/garden01.jpg'>");
	   }
   }
   
   </script>

과제

[조건]
성별을 평가할 수 있는 값을 prompt로 입력 받으세요.(1,2,3,4....)
1,2,3,4가 아닌 값이 입력되면 "잘못 입력"이라는 메시지를 출력하세요
성별이 1,2,3,4중 한 값이 입력 되었다면 다른 prompt를 이용해서 나이 값을 입력 받으세요.
성별이 1, 3 중 한 값이 입력되고 나이가 20세 이상이면 "성인남자"출력
성별이 1,3 중 한 값이 입력되고 나이가 20세 미만이면 "청소년남자" 출력
성별이 2,4 중 한 값이 입력되고 나이가 20세 이상이면 "성인여자"출력
성별이 2,4 중 한 값이 입력되고 나이가 20세 미만이면 "청소년여자"출력
[힌트]
먼저 성별이 제대로 입력되었는지 평가하고 성별이 제대로 입력되면 나이를 평가할 수 있도록 작업하세요.
성별이 제대로 입력되면 남자인지 여자인지 평가한 후
성인인지 청소년인지 평가해야 하므로 조건의 그룹은 3개입니다.
조건이 3개라는 것은 if를 3개 중첩해서 써야 한다는 의미입니다.

과제

입장객 수와 한 줄에 몇 명씩 앉을 것인지 입력받아 총 몇 줄이 필요한지 계산해보도록 하겠습니다.
예) 입장객수: 56, 한 줄에 앉을 인원수:5
[출력형태]
자리배치도
모두 12개의 줄이 필요합니다.

switch문

switch(조건을 평가할 수 있는 변수, 연산식, 메소드 호출){

case 평가할 값1 :

case 평가할 값2 :

case 평가할 값3 :

case 평가할 값4 :

…

default:

문장

}
  • 조건을 평가할 수 있는 변수, 식, 메소드호출문
  • case에서는 정확하게 일치하는 값만 정의하고 비교
  • 각 case별로 break를 추가해야함
    기본특성이 (조건에 만족하는 case문만 실행해야 하는데) 조건에 만족하는case문 이하 모든 case문을 실행하기때문에 break로 끊어줘야함
    :switch문은 기본옵션이 밖으로 못빠져나오고 밑으로 떨어지는 특성->break줘야함
  • default가 if문에서 else와 동일
  • 다중 if를 대신해서 사용할 목적
  • 보통은 코드값 등을 비교할 목적
let ssn = prompt("주민번호 7번째 값 입력");
		alert(typeof ssn); 
//typeof : 타입을 정의하지 않지만 내부적으로 타입 가짐
//switch문은 기본옵션이 밖으로 못빠져나오고 밑으로 떨어지는 특성->break줘야함
		switch (ssn){
			case "1" : 
				alert("남자");
				break;
			case "2" : 
				alert("여자");
				break;
			case "3" :
				alert("남자");
				break;
			case "4" :
				alert("여자");
				break;
			default :
				alert("기타");
		}

이하 prompt문 생략

			switch(ssn){
				case "1" :
				case "3" :
					alert("남자");
					break;
				case "2":
				case "4":
					alert("여자");
					break;
				default : 
					alert("기타");
			}

이런식으로 case 여러개에 결과 하나 줄 수 있음

switch(ssn){
				case "test1":
					alert("문자열1");
					break;
				case "test2":
					alert("문자열2");
			}

"test1" 입력하면 "문자열1" 출력

alert(ssn/10);
//자바스크립트에서는 소수의 비교가 가능
			switch(ssn/10){
			case 9.9:
				alert("문자열1");
				break;
			case 9.8:
				alert("문자열2");
			}

parseInt
'숫자모양을 하고 있는 문자열'을 숫자로 변경하기

let num1 = prompt("숫자1");
let num2 = prompt("숫자2");
alert(num1+num2);

num1=100, num2=200 줄때 얼럿 100200나옴


let num1 = parseInt(prompt("숫자1"));
let num2 = parseInt(prompt("숫자2"));
alert(num1+num2);

num1=100, num2=200 줄때 얼럿 300나옴

switch/parseInt exam
prompt로 점수를 입력받아 수, 우, 미,양, 가 출력하기
90 ~ 100 : 수
80 ~ 89 : 우
70 ~ 79 : 미
60 ~ 69 : 양
0 ~ 59 : 가
100점 이상이나 0점 미만의 점수를 입력받으면 "점수잘못입력"출력하기
document.write(h1태그로 출력하기)

5)반복제어구문

for, while, do-while
문법이 자바와 거의 유사

for문
for : 반복횟수를 체크할 숫자를 저장할 변수가 무조건 1개 있어야 한다.

for(초깃값; 조건; 증가식){
	실행할 명령
}

자바스크립트 문자열을 5번 출력하기
for(i=1; i≤5; i=i+1){
	document.write("<h2>자바스크립트</h2>")
}

 i=i+1 ⇒ i++
 
 for(i=1; i≤5; i++){
	document.write("<h2>자바스크립트</h2>")
}
document.write("<hr/>");
		for(let i=27;i<=31;i++){
			document.write("<h2>자바스크립트:"+i+"</h2>");
		}
	
		document.write("<hr/>");
		for(let i=20;i<=28;i=i+2){
			document.write("<h2>자바스크립트:"+i+"</h2>");
		} 

<script type="text/javascript">
	let i;
	let sum=0; 
	for(i=1; i<=100; i++){
	sum = sum+i; //오른쪽꺼 계산해서 왼쪽에 넣는 규칙
	}
	document.write(sum);
	</script>

i=1 일 때, sum=0+1=1
i=2 일 때, sum=1+2=3
...
i=100일때, sum=4950+100=5050

<script type="text/javascript">
	let sum1=0; 
	for(let i=1; i<=100; i++){
	sum1 = sum1+i; 
	}
	document.write("총합: "+sum1);
		
	document.write("<hr/>");
	let sum2=0; 
	for(let i=1; i<=100; i=i+2){
		sum2 = sum2+i;
	}
	document.write("홀수합: "+sum2);
		
	document.write("<hr/>");
	let sum3=0;
	for(let i=2; i<=100; i=i+2){
		sum3 = sum3+i;
	}
	document.write("짝수합: "+sum3);
	</script>

for(let i=1; i<=100; i=i+2)여기서 증가식 i+2만 쓰면 로딩중만 뜸, i=i+2로 쓰기


exam : prompt로 입력받은 구구단을 출력하세요


표 없이도 가능

for 이미지

첫째줄 i=1일때 r=1부터 r<=5라서 첫째줄 5개 이미지 출력
둘째줄 i=2일때 r=2부터 r<=5라서 둘째줄 4개 이미지 출력

첫째줄 i=1일때 r<=1라서 첫째줄 1개 이미지 출력
둘째줄 i=2일때 r<=2라서 둘째줄 2개 이미지 출력



for_break test


row==3, 즉 세번째 줄부터 멈춰져서 출력이 row==2까지만 됨

row==위와 달리 하위 for문에 있어서 셋째줄만 출력이 되지 않고 넷째줄부터는 다시 상위 for문으로 올라가서 출력이 이어짐

for_continue test

continue랑 break는 자바에서도 쓰니 구분하기
break는 중단하고 나오는거
continue는 컨티뉴 이하문장이 건너뛰기가됨


2안에..너있다



while문

while(조건){
	실행할 명령
}

do{
	실행할 명령
}while(조건)

while문은 조건이 true인 동안 명령 반복 실행(like for문)
조건이 false라면 명령은 한번도 실행하지 않을 수 있음
{}으로 블록을 만들어 여러 명령을 반복할 수 있음

do~while문은 조건이 맨 뒤에 붙음
일단 명령을 한번 실행한 후 while문에서 조건을 체크
조건이 false라도 일단 명령은 최소 한번 실행됨

<script type="text/javascript">
//자바스크립트 5줄 출력
	let num = 1;
	while(num<=5){
		//document.write("<h2>자바스크립트<h2>");  //num이 트루니까 무한루프됨 오류뜸
		console.log("자바스크립트:"+num);
		num++;
	}
	document.write("<hr/>");
    
//자바스크립트 10줄 출력  
	num = 1;
	while(true){
		document.write("<h2>자바스크립트</h2>");
		if(num==10){
			break;
		}
		num++;
	} 
</script>
<script type="text/javascript">
	let num=10;
	while(num>10){
		document.write("<h4>자바스크립트</h4>");
	}
	document.write("<hr/>");
	//조건에 만족안해서 아예안들어감
	
    
	do{
		document.write("<h4>자바스크립트</h4>");
	}while(num>10)
	document.write("<hr/>");
	//일단 실행하고 조건 만족하면 다시 위로감, 만족하든 안하든 1번은 실행됨
	</script>

3.함수

4.이벤트

5.내장객체

6.브라우저객체

7.DOM

8.JQuery

백엔드까지 연동하면

1.JSon

2.Ajax

3.프로토타입

고급

자바스크립트 프레임워크 및 라이브러리

본 포스팅은 멀티캠퍼스의 멀티잇 백엔드 개발(Java)의 교육을 수강하고 작성되었습니다.

profile
brave_chicken
이전 포스트

멀티캠퍼스 240228-240229 CSS

다음 포스트

240311-240314 javascript

0개의 댓글