-
형변환,함수,객체,BOM_210407(수)JAVASCRIPT 2021. 7. 22. 00:36
형변환
String(),Number(),Boolean()
12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Insert title here</title><script>//자료형변환함수// 1. String()var num = 100;var str1 = String(num);var str2 = String(200); //숫자가 문자열 변환해 들어감var str3 = String('문자열'); //자바는 에러걸리지만(같은 형인데 변환한다해서), 자바스크립트는 오류 안남//document.write(str3 + "\n");//document.write(typeof (str3));// 2. Number()var str = '100';var num1 = Number(str); //100var num2 = Number('200'); //200var num3 = Number('200a'); //변환이 안되서 에러가 남 NaN not a number?//document.write(num2 + "\n");//document.write(typeof (num2));// 3. Boolean()// true = 1, false = 0;// 1) 숫자// true = 2(0빼고 아무숫자나);// false = 0;// 2) 문자열// true = '아무거나 심지어 false 문자열도';// false = '';// 3) NaN, undefined// false = NaN// false = undefinedalert('0은 ' + Boolean(0)); // falsealert('NaN은 ' + Boolean(NaN)); // falsealert('공백은 ' + Boolean('')); // falsealert('undefined는 ' + Boolean(undefined)); // falsealert('1은 ' + Boolean(1)); // truealert('-1은 ' + Boolean(-1)); // truealert('100은 ' + Boolean(100)); // truealert('false는 ' + Boolean('false')); // truealert('' == false); // truealert('' == 0); // truealert(0 == false); // truealert('100' == 100); // true</script></head><body></body></html>cs
if문
1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Insert title here</title><script>// 1. 기본 if: if(비교식){true...};if (100 < 200) {alert('100은 200보다 작습니다!'); //true이기 때문에 실행}// 2. if else: if(비교식){true...}else{false...}var hour = 11;if (hour <= 12) {alert('오전입니다.');} else {alert('오후입니다.');}// 3. 중첩조건문: if(비교식){if(비교식){...}}if (hour <= 12) {alert('오전입니다.');if (hour <= 9) {alert('정상출근입니다.');} else {alert('지각입니다.');}}// 4. if else if문: if(비교식){true} else if(비교식){true} else if...hour = 23;if (hour <= 12) {alert('오전입니다.');} else if (hour <= 18) {alert('오후입니다.');} else if (hour <= 20) {alert('저녁입니다.')} else if (hour < 24) {alert('심야입니다.')} else {alert('24시간 이내로 입력해주세요.')}</script></head><body></body></html>cs
switch문, 논리합(||),논리곱(&&)
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Insert title here</title><script>// 실습1.// 사용자에게 숫자를 입력받아서 양수, 0, 음수를 구분하는 프로그램// '음수입니다.', '0 입니다!', '양수입니다!'var n = Number(prompt("숫자를 입력하세요.", "0"));if (n > 0) {alert('양수입니다!');} else if (n == 0) {alert('0 입니다!');} else {alert('음수입니다!');}// 실습2.// 사용자에게 숫자를 입력받아서 홀수인지 짝수인지 구분하는 프로그램// '짝수입니다!' or '홀수 입니다!'if (n % 2 == 0) {alert('짝수입니다');} else {alert('홀수입니다');}// 실습3.// 사용자에게 국어, 영어, 수학점수를 입력받아 평균을 구한뒤 A,B,C,D,F학점// 을 출력 90이상 'A학점입니다.' 80, 70, 60, 60미만// prompt 출력창에서 90 90 90 이렇게 받으면 3개의 숫자로 따로 input된다.var kor = Number(prompt("국어 점수를 입력하세요.", "0"));var eng = Number(prompt("영어 점수를 입력하세요.", "0"));var math = Number(prompt("수학 점수를 입력하세요.", "0"));var avg = (kor + eng + math) / 3;if (avg >= 90) {if (avg >= 95)alert('A+학점입니다.');else {alert('A0학점입니다.');}} else if (avg >= 80) {alert('B0학점입니다.');} else if (avg >= 70) {alert('C0학점입니다.');} else if (avg >= 60) {alert('D0학점입니다.');} else {alert('F0학점입니다.');}//else if가 계속 비교하게 되면 가독성도 떨어지고 속도도 느리다.</script><script>var grade = 0;avg = 85;// switch 문avg = 95;switch (true) { // () = case ' ' 일 때: 실행문case avg >= 95:grade = 'A+';break;case avg >= 90:grade = 'A0';break;case avg >= 85:grade = 'B+';break;case avg >= 80:grade = 'B0';break;case avg >= 70:grade = 'C0';break;case avg >= 60:grade = 'D0';break;default:grade = 'F';}alert(grade + '학점입니다.')</script><script>//삼항연산자//짝수, 홀수 구분var num = 2;(num % 2 == 0) ? alert('짝수 입니다.') | alert('홀수 입니다.')</script><script>// 1. 논리합연산자(||) : (비교식) || (비교결과가 false일 경우 실행문)// 1. 논리곱연산자(&&) : (비교식) || (비교결과가 true일 경우 실행문)/* true || alert('실행이 될까요? - A'); //실행 안됨false || alert('실행이 될까요? - B'); //실행됨true && alert('실행이 될까요? - C'); //실행됨false && alert('실행이 될까요? - D'); //실행 안됨 */var num = 4;(num%2==0) || alert('홀수 입니다.'); //실행됨(num%2==0) || alert('짝수 입니다.'); //실행안됨</script></head><body></body></html>cs
for문 while, do while 문
1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Insert title here</title><script>// 1~100까지의 합: forvar sum = 0;for (var i = 1; i <= 100; i++) {sum += i;}alert('1~100까지의 합은' + sum);</script><script>// 1~100까지의 합: whilevar sum = 0;var i = 0;while (i <= 100) {sum += i;i++;}alert('1~100까지의 합은' + sum);</script><script>// 3.do whilevar sum = 0;var i = 1;do {sum += i;i++} while (i <= 100);alert('1~100까지의 합은' + sum);</script><script>//중첩 for 문var list = '';for (var i = 1; i <= 3; i++) {for (var j = 1; j <= 3; j++) {list += '(' + i + ',' + j + ')';}}</script></head><body></body></html>cs
실습
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Insert title here</title><script>//실습1//*//**//***//****//*****//..//**********var star = 1;var result = '';window.onload = function() {for (var i = 0; i < 10; i++) {for (var j = 0; j < star; j++) {result += '★';}++star;result += '<br>';}document.body.innerHTML = result;}//실습2// *// ***// *****// *******//*********//내 방법var star = 1;var blank = 4;var result = '';window.onload = function() {for (var i = 0; i < 5; i++) {for (var h = 0; h < blank; h++) {result += '\u00a0';}for (var j = 0; j < star; j++) {result += '*';}star += 2;--blank;result += '<br>';}document.body.innerHTML = result;}//선생님 방법for (var i = 0; i < 10; i++) {//1.공란for (var h = 10; h < i; h--) {result += '\u00a0';}//2.별표for (var j = 0; j < 2 * i - 1; j++) {result += '*';}result += '<br>';}document.write(result);//실습3// *// ***// *****// *******// *********// *******// *****// ***// *// 내 방법var blank = 4;var star = 1;var result = '';for (var i = 0; i < 9; i++) {for (var h = 0; h < blank; h++) {result += '\u00A0'; //공백}for (var j = 0; j < star; j++) {result += '*';}if (i < 4) {star += 2;--blank;} else {star -= 2;++blank;}result += '<br>';}document.write(result);i = 0; //줄k = 0; //별output = '';//선생님 방법while (i < 9) {if (i < 5) {k = 0;while (k < 4 - i) {output += '\u2606';k += 1;}k = 0;while (k < i * 2 - 1) {output += '\u2605';k += 1;}} else {k = 0;while (k < i - 4) {output += '\u2606';k += 1;}k = 0;while (k < (9 - i) * 2 - 1) {output += '\u2605';k += 1;}}output += '<br>';i += 1;}document.write(output);</script></head><body></body></html>cs
함수
선언적 함수
123function 함수명 (){} //이름있는 함수var 함수 = function(){} //익명함수cs 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Insert title here</title><script>//함수: 코드의 집합document.write(prompt + '<br>'); // prompt 이름인 함수형이 나옴. native code 내장 함수라 자바스크립트에서 안보이게 막아놈document.write(typeof (prompt) + '<br>'); //타입은 functionvar 함수1 = function() {var num = 10;alert(num)}; //익명 함수document.write(함수1 + '<br>'); //익명함수라 이름이 없는 함수형이 나옴. 사용자 정의 함수라 코드가 보임document.write(typeof (함수1) + '<br>'); //타입은 function// 1. 함수선언방법var 함수2 = function() {var output = prompt('숫자를 입력하세요!', '숫자');document.write('<h1>' + output + '</h1> <br>');};document.write(함수2 + '<br>'); //익명함수라 이름이 없는 함수형이 나옴. 사용자 정의 함수라 코드가 보임document.write(typeof (함수2) + '<br><hr>'); //타입은 function// 2. 함수호출방법//함수2();// 3. 함수호출시 주의사항function 함수3() {document.write('<h1> function A </h1>');}function 함수3() {document.write('<h1> function B </h1>');}//함수3(); //document를 다 읽은 다음에 호출하기 때문에, 마지막에 선언한 것만 나온다.</script><script>//매개변수가 없는 함수var result = 0;function add() {result = 10 + 20;}add();document.write('<h1>' + result + '</h1>');//매개변수가 있는 함수function add1(x, y) {result = x + y;}add1(10000, 20000);document.write('<h1>' + result + '</h1>');//return이 있는 함수function add2(x, y) {return x + y;}var xxx = add2(100.2020, 3030.123);document.write('<h1>' + xxx + '</h1>'); //숫자 넣고 결과 보기document.write('<h1>' + add2('홍', '길동') + '</h1>'); //문자열 넣고 결과 보기.</script><script>// 가변매개변수(인자, 인수, 파라미터, 아규먼트)function sumAll(a, b, c, d, e, f, g, h, i, j) {return a + b + c + d + e + f + g + h + i + j;}document.write('<h1>' + sumAll(1, 2, 3, 4, 5, 6, 7, 8, 9, 10) + '<h1>')document.write('<h1>' + sumAll(1, 2, 3) + '<h1>') //NaN 매개 인수가 매개 변수 갯수와 다르기 때문//js은 가변인자라는 내부변수 arguments를 기본적으로 제공//arguments는 전달받은 매개변수를 배열로 저장function sum_all() {console.log(typeof (arguments) + arguments.length); //(object = 가변매개변수 객체) (숫자 = 아규먼트의 길이)sum = 0;for (var i = 0; i < arguments.length; i++) {sum += arguments[i];}return sum;}var result = sum_all(1, 2, 3, 4, 5, 6, 7, 8, 9, 10); //object(=arguments의 타입) 10(=10개 숫자를 넣어서 자동으로 10개 길이)console.log("1~10까지의 합=" + result);console.log("1~10까지의 합=" + sum_all(1, 2, 3)); //object(=arguments의 타입) 3(=3개 숫자를 넣어서 자동으로 10개 길이)</script><script>//내부함수/* function outter() {function inner1() {document.write('<h1>aaaa</h1>');}function inner2() {alert('dddd');}} *///outter().inner2(); // 외부함수안의 inner2 함수 하나만 부르고 싶을 때</script></head><body></body></html>cs 'JAVASCRIPT' 카테고리의 다른 글
jQuery:선택자,ready(),val(),setTimeout(),each()_210409(금) (0) 2021.07.22 이벤트,예외처리_210409(금) (0) 2021.07.22 배열,객체,BOM,DOM_210408(목) (0) 2021.07.22 해지구달&랜덤영어날라다니기 실습_210409(금) (0) 2021.07.22 변수,연산자,window이벤트_210406(화) (0) 2021.07.21