2024_06_19

오늘의 코딩순서

(폴더: oJavaScript)

01폴더

alert
boolean01
boolean02
char
confirm01
confirm02
eval
date01
date02
var_let01
var_let02
date03
example.js + exampleCall
for01
for02
for03
⭐⭐⭐isNan(구구단!!복습필수!!)
jsLocation
math01
oper01
parseInt
prim
⭐⭐⭐switch01
anchor

오늘의 코딩

1) alert

JSP도 html 사용
이전에 HTML에서 쓴 <styletype="text/css"> 랑 헷갈리지 말자!
JSP는 <script type="text/javascript"> 이다
alert(): 확인(OK)를 누를 수 있는 팝업 경고창을 나타낼 때 사용, 괄호 안에 팝업창에서 나타낼 문구를 넣으면 됨
var: variable의 줄임말, 전역변수( 어떤 변수 영역 내에서도 접근할 수 있는 변수 ), 변수의 값을 바꿀 수 있음,
prompt: 브라우저에서 제공하는 promt 함수는 두 개의 인수를 받는데, 함수가 실행되면 텍스트 메시지와 입력 필드(input field), 확인(OK) 및 취소(Cancel)버튼이 있는 모달 창을 띄워줌

<script type="text/javascript">
	alert("대박\n사건")
	var kk = prompt("보고 싶은 구구단은 몇 단?" , 7);
	alert("kk->"+kk);
	
</script>

2) boolean 1, 2

NaN: Not of Number, 정의되지 않은 값 또는 표현할 수 없는 값,
특히 부동 소수점 계산 결과를 의미하는 숫자 데이터 타입, Infinity 인수전달 안될 시 인수 중에 비교할 수 없는 값이 포함되어 있으면 Nan
console.log('이 Function은 프린트 이전에 호출됩니다.'):

3) char

document.write: Java의 System.out.print()와 비슷한 기능을 하는 함수로 html에서는 화면 영역을 document라고 부르는데 여기에 출력하는 함수
⭐⭐⭐ 16진수 보는법 암기하기!!===> 기사 시험에 나옴

4) confirm 01

⭐⭐⭐if-else

if(조건식)	{
	실행문;	//조건식이 true일 경우 실행
} else {
	실행문;	//조건문이 false일 경우 실행
}

<script type="text/javascript">
	var a = confirm("재미있니?");		//confirm의 값이 a로 들어감
	if(a) document.write("재밌구만 ㅋㅋ<br>");
	else document.write("재미없어ㅠㅠ <br>");

</script>

4) confirm 02

answer:
confirm: confirm의 값이 반환됨
confirm 함수는 매개변수로 받은 question(질문)과 확인 및 취소 버튼이 있는 모달 창을 보여줌
사용자가 확인 버튼을 누르면 true, 그 외의 경우는 false를 반환함

answer = confirm("[확인][취소]중 선택 : 수강 신청을 하시겠습니까?");
	if (answer == true) {
		document.write("수강 신청 되었습니다");
	}
	else {
		document.write("수강 신청 취소되었습니다. 다시 신청해 주세요.");
	}

5) eval

eval: 문자로 표현된 JavaScript 코드를 실행하는 함수
Java의 String과 비슷

6) date 01, 02, 03

<p>: paragraph(단락), <p>태그의 경우, <br>태그와 다르게, 정확한 속성부여(닫는태그이용)로, 더 의미있는 태그로써 평가받으면 <br>태그보다 사용빈도가 높음
date.+ getFullYear(): 년도 출력, getMonth(): 월 출력, getDay(): 요일 출력, getDate(): 날짜 출력
⭐⭐⭐switch-case

switch (변수) {
	case 값: // 변수와 값이 일치하면 해당 case 실행문을 작동시킴
   	 실행문;
  	  break; // break 조건에 해당하는 실행문을 작동시키고 switch문을 종료하기 위해 사용됨
    
    default: // 변수와 값이 불일치하면 default 실행문을 작동시킴
   	 실행문;
     break;
}

date.+ set : 날짜함수는 날짜 데이터의 원하는 형식만 다른 값으로 교체하는 함수

7) ⭐⭐var_let 01 (면접에 나올 가능성 ↑)

겉보기에는 에러가 없어보여도 f12로 에러확인 필수!!
var와 let은 둘 다 재할당이 가능함
var는 재선언이 가능하지만 let는 재선언이 불가능함
let: let 은 변수에 재할당이 가능
const: const는 변수 재선언, 변수 재할당 모두 불가능

8) var_let 02

if-true: 주어진 조건식이 참(ture) 일 경우 {}안에 있는 문장을 수행 또는 출력 하는것.
참or거짓 값을 가진 변수,상수를 사용한다, 참(true)과거짓(false)를 주로 사용함

9) example.js + exampleCall

HTML: 호출하기

10) for01, 02, 03

arr(array): 배열, 보통 리스트에 저장된 다수의 값들을 포함하고 있는 하나의 객체/ 하나의 변수명 아래에 데이터값을 저장하여 활용이 가능하여 많이 사용됨
arr.length: Array 인스턴스의 length 속성, 배열의 길이
⭐⭐⭐ for문

for(초기화; 조건식; 증감식) {

continue: 지정된 명령문의 실행을 종료하고, 반복문의 처음으로 돌아가서 다시 코드를 실행

for(var i=0; i <= 100; i++ )	{
			if (i % excepNum == 0)	//excepNum의 배수는 출력하지 않음
			continue;
			document.write(i + " ");
}

11) isNaN

isNaN: 어떤 값이 NaN(Not A Number)인지 판별하는 함수
인수로 전달된 값이 숫자가 아니라면 숫자로 강제 변환하여 검사
⭐⭐⭐ if-else
⭐⭐⭐for문

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
	var num = prompt("몇 단 구구단을 원하시는지 입력하시고 확인 버튼 꼭 눌러주세요","5");
	if(isNaN(num))	document.write("바보냐 숫자 몰라");
	else	{		
		document.write("OK		숫자 맞아"+"<p>");
		for(var i = 1; i <=9; i++ )
			document.write(num + " * " + i + " = " + (num*i) + "<br>"); 
	}
</script>
</head>
<body>
	<h1>isNan</h1>
</body>
</html>

12) Math01

Math.min: 주어진 숫자들 중 가장 작은 값을 반환함
이때 min() 함수는 Math의 정적 메소드 이므로, 사용자가 생성한 Math 객체의 메소드로 호출하는 것이 아닌 항상 Math.min()으로 호출되어야 함(Math는 생성자가 아니다!)
- 정적 메소드(Static Method): 클래스로 객체를 생성하지 않아도 호출이 가능한 메소드
  정적 메소드는 해당 메소드가 정의되어 있는 클래스의 이름이나 생성된 객체를 통해 호출할 수 있음
- 인스턴스 메소드(Instance Method): 우리가 일반적으로 정의하고 사용하는 메소드
  호출하기 위해서는 반드시 해당 메소드가 정의되어 있는 클래스의 객체를 먼저 생성해주어야 함
  객체에 소속된 멤버이므로 객체 없이는 사용할 수 없음
Math.max: 입력값으로 받은 0개 이상의 숫자 중 가장 큰 숫자를 반환함
min()처럼 정적 메소드이며, 주의할 점은, 아무 요소도 주어지지 않았다면 Infinity로 반환하며 한 개 이상의 요소가 숫자로 변환되지 않는다면 NaN로 반환됨
- Infinity: JavaScript에서 표현할 수 있는 양의 수를 넘는 무한대를 나타내는 값
Math.round: 입력값을 반올림한 수와 가장 가까운 정수 값을 반환함
Math.floor: 소수값이 존재할 때 소수값을 버리는 역할을 하는 함수
Math.ceil: 소수값이 존재할 때 값을 올리는 역활을 하는 함수

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
	//min	
	console.log(Math.min(1, 10, -100, -10, 1000, 0));
	console.log(Math.min());	// Infinity 인수전달 안될시

	console.log(Math.min(1, 10, -100, -10, "문자열", 0));
	// 인수 중에 비교할 수 없는 값이 포함되어 있으면 Nan
	console.log(Math.max(1, 10, -100, -10, 1000, 0));
	console.log(Math.max());	// Infinity 인수전달 안될시
	// 인수 중에 비교할 수 없는 값이 포함되어 있으면 Nan
	console.log(Math.max(1, 10, -100, -10, "문자열", 0));
	
	// round
	console.log(Math.round(10.43));
	console.log("round java->"+Math.round(10.47,1));
	console.log("round Java Script->"+Math.round(10.47).toFixed(1));
	console.log(Math.round(10.78));
	console.log(Math.round(-10.52));
	
	//floor
	console.log(Math.floor(10.43));
	console.log(Math.floor(10.78));
	console.log(Math.floor(-10.52));
	
	// ceil
	console.log(Math.ceil(10.43));
	console.log(Math.ceil(10.78));
	console.log(Math.ceil(-10.52));
	
	
	
</script>
</head>
<body>
	<h1>math</h1>
	<h4>Math 객체는 수학에서 자주 사용하는 상수와 함수들을 
	미리 구현해 놓은 자바스크립트 표준 내장 객체</h4>
</body>
</html>

13) parseInt

parseInt(): 문자열 인자를 파싱하여 특정 진수(수의 진법 체계에서 기준이 되는 값)의 정수를 반환

<script type="text/javascript">
	var a = "123";
	var b = "456";
	document.write("덧셈 : " + (parseInt(a)+parseInt(b))+"<p>");
	document.write("덧셈 : " + (a+b));
	
</script>

14) prim

console.log(변수): 변수에 할당된 값 출력
console.log(typeof 변수): 변수에 할당된 타입 출력

15) switch

if-else if-else:
switch

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
	var a= parseInt(prompt("1~7사이 숫자를 입력하세요",""));
		if (a < 1 || a>7) 	document.write("잘못 입력하셨습니다"); 
			//|| :논리식 중에서 하나라도 참이면 참을 반환함(=OR)
		else if(isNaN(a))	document.write("숫자가 아닙니다");
		else	{
			switch(a) {
				case 1: document.write("1 입력하셨습니다".fontcolor("red"));		break;
				case 2: document.write("2 입력하셨습니다".fontcolor("orange"));	break;
				case 3: document.write("3 입력하셨습니다".fontcolor("yellow"));	break;
				case 4: document.write("4 입력하셨습니다".fontcolor("green"));	break;
				case 5: document.write("5 입력하셨습니다".fontcolor("blue"));	break;
				case 6: document.write("6 입력하셨습니다".fontcolor("navy"));	break;
		      	default: document.write("7 입력하셨습니다".fontcolor("violet"));	break;
		      }
		}
</script>
</head>
<body>
	<h1>Switch01</h1>
</body>
</html>

오늘의 숙제

(현장HW) for03 (for문 이용하기)
(현장HW) isNan

'JSP > Java Script' 카테고리의 다른 글

2024_07_10_수 (0)	2024.07.10
2024_07_09_화 (0)	2024.07.09
2024_07_08_월 (0)	2024.07.08
2024_06_21_금 (0)	2024.06.21
2024_06_20_목 (0)	2024.06.20

코딩일기

2024_06_19_수

오늘의 코딩순서

(폴더: oJavaScript)

01폴더

오늘의 코딩

1) alert

2) boolean 1, 2

3) char

4) confirm 01

4) confirm 02

5) eval

6) date 01, 02, 03

7) ⭐⭐var_let 01 (면접에 나올 가능성 ↑)

8) var_let 02

9) example.js + exampleCall

10) for01, 02, 03

11) isNaN

12) Math01

오늘의 숙제

'JSP > Java Script' 카테고리의 다른 글

티스토리툴바

2024_06_19_수

오늘의 코딩순서

(폴더: oJavaScript)

01폴더

오늘의 코딩

1) alert

2) boolean 1, 2

3) char

4) confirm 01

4) confirm 02

5) eval

6) date 01, 02, 03

7) ⭐⭐var_let 01 (면접에 나올 가능성 ↑)

8) var_let 02

9) example.js + exampleCall

10) for01, 02, 03

11) isNaN

12) Math01

오늘의 숙제

'JSP > Java Script' 카테고리의 다른 글

관련글

티스토리툴바