Java Script 자바스크립트 기초문법
(연산자, 산술, 대입, 증감, 비교, 논리, 연산자 우선순위, 삼항 조건 연산자)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
var a = Boolean ();
console.log(a); //False why?
var k = Boolean ("Hello");
console.log(k); //True why?
</script>
</head>
<body>
</body>
</html>왜 boolean 안에 값이 없으면 false고 값이 있으면 True 일까?
- > boolean은 () 안 "" 빈 문자, 숫자 0,null, undefined 등을 제외한 모든 데이터에 대해 True 를 반환.
ex) Boolean(0) false
var num1 = 10;
var num2 = 3;
num1 +=num2;
document.write(num1); //13
num1 -=num2;
document.write(num1); // 10
num1 *=num2;
document.write(num1); // 30
num1 /=num2;
document.write(num1); // 10대입 연산자
a += b; // a = a+b;
a -= b; // a = a-b;
a *= b; // a = a*b;
a /= b; // a = a/b;
a %= b; // a = a%b;
여기서 = 의 뜻은 a 에 오른쪽 a+b 의 값을 '대입' 한다. 라는 뜻,
JS 에서 == 의 뜻이 a == b -> a는 b와 같다. (값이)
===의 뜻은 a === b -> a 와 b의 값도 같고 type까지 같다.
type은 numbers, String, Boolean 등의 타입을 말함.
var str = "<table border ='1'>";
str +="<tr>";
str +="<td>1</td><td>2</td><td>3</td>";
str +="</tr>";
str +="</table>";
document.write(str);
질문 : 변수에 "<tag>"를 넣는건 몰랐는데 이건 ㅇ떻게 이해할지 고민하다가
<script>
</script>
</head>
<body>
<table border ='1'>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
</table>
</body>
</html>body html 부분에 그대로 쓰니 똑같은 모양이 나온다.
JS 로 body 부분을 그린 듯 하다.
var num1 = 10;
var num2 = 20;
var num3 = 20;
var result;
var result2;
num1--;
document.write(num1,"<br>");
num1++;
document.write(num1,"<br>");
result = num2++;
document.write(result, num2,"<br>"); //20 21
result = ++num2;
document.write(result,num2,"<br>");// 22 22
result2 = ++num3;
document.write(result2,num3,"<br>"); //21 21
result3 = ++num3;
document.write(result3,num3); // 22 22
num++; 과
++num; 의 차이를 오늘 알았다.
result = num++; // result 의 값 = num, num의 값 = num+1
result = ++num; // result의 값 = num+1, num의 값 = num+1
| 증감 연산자/ 비교 연산자/ 논리 연산자 | |
| 증감 연산자 | --, ++ |
| 비교 연산자 | >, <, >=, <=, ==, !=, ===, !== |
| 논리 연산자 | ||, && ! |
| 단항 연산자 (피연산자가 한 개만 필요한) | --, ++, ! |
| 대입 연산자 | = |
| 복합 대입 연산자 | +=, -=, *=, /=, %= |
| 삼항 조건 연산자 (피연산자가 3개 필요) | 조건식 ? (true) A : (false) B -> 아래 예시 有 |
| 연산자 우선 순위 |
| 1. () |
| 2. 단항 연산자 ( --, ++, !) |
| 3. 산술 연산자 (+, -, *, /, %) |
| 4. 비교 연산자 (>, <, >=, <=, ==, !=, ===, !==) |
| 5. 논리 연산자 (||, &&) |
| 6. 대입(복합대입) 연산자 (=, +=, -=, *=, /=, %=) |
삼항 조건 연산자 ex)
var a = 10;
var b = 3;
var result = a>b ? "That's right" : "Think again";
document.write(result);
적정 체중 구하기 ex)
var weight ;
var height =180;
var normal_weight = (height-100)*0.9;
document.write(normal_weight);
적정 체중 prompt로 알려주기
prompt - user 가 응답을 할 수 있는 질의응답형 팝업창 띄우는 JS method
내가 만든 것 (수정은 아래에)
var name = prompt("이름을 입력해주세요?");
var height = prompt ("키를 입력해주세요");
var weight = prompt ("몸무게를 입력해주세요");
var n_weight = (height-100)*0.90
n_weight >= (height-100)*0.85 && n_weight <= (height-100)*0.95 ?
prompt ("당신은 적정 체중을 가지고 있습니다.") : prompt ("당신은 적정 체중을 가지고 있지 않습니다.");
-> n_weight *0.85 가 아닌 0.95, 1.05 곱하는게 맞는듯! normal_weight( = n_weight)값은 이미 0.9 곱해져 있고 여기에 + - 5 % 이기 때문
책에 나온 답
var name = prompt("이름을 입력해주세요?");
var height = prompt ("키를 입력해주세요");
var weight = prompt ("몸무게를 입력해주세요");
var n_weight = (height-100)*0.90
var result = weight >=n_weight-5 && weight <=n_weight+5;
result = result ? "적정 체중입니다." : "적정 체중이 아닙니다.";
document.write(name+'님은 '+result);
나의 정답 수정
var name = prompt("이름을 입력해주세요?");
var height = prompt ("키를 입력해주세요");
var weight = prompt ("몸무게를 입력해주세요");
var n_weight = (height-100)*0.90
var result = weight >= n_weight*0.95 && weight <= n_weight*1.05 ?
document.write(name+"님은 적정체중입니다.") : document.write(name+"님은 적정체중이 아닙니다.");
Q. 교통비, 식비, 음료비가 10,000원을 초과하면 초과한 값을 알려주는 JS 삼항 조건 연산자
나의 답 :
let transportation_expenses = Number(prompt("교통비를 입력해주세요", "0"));
let food_expenses = Number(prompt("식비를 입력해주세요", "0"));
let beverages = Number(prompt("음료비를 입력해주세요", "0"));
let sum = transportation_expenses + food_expenses + beverages;
let excess = sum-10000;
sum > 10000 ? document.write(excess+"원 초과입니다.") :
document.write("참 잘했어요! (찡긋) ");
책 정답 : (어디 나와있는거지...?????????)
Q. 평균 판매량을 구하고, 4분기 판매량을 입력하여 평균 판매량의 이상/미달 값을 출력하세요.
1분기 : 1,200
2분기 : 1,300
3분기 : 1,000
나의 답 :
let s1 = 1200;
let s2 = 1300;
let s3 = 1000;
let s4 = Number(prompt("4분기 판매량을 입력해주세요.","0"));
let s1_to_s3_average = (s1+s2+s3)/3;
s4 >= s1_to_s3_average ? document.write("판매량이 평균 이상입니다.") :
document.write("판매량이 평균 미달입니다.");
=============================JavaScript 기초 문법 끝 ==============================
Java Script 자바스크립트 제어문
(조건문, if, else, else if, 선택문 switch, 반복문, while, do while, for, break, continue, 중첩for문 )
제어문이란 ? - 프로그램의 흐름을 제어하는 문장
제어문 종류
1. 조건문 (if)
2. 선택문 (switch)
3. 반복문 (for, while)
제어문 - 1. 조건문( if, else, else if )
if 라는 가정을 넣어 맞다면 {} 안의 코드가 실행되도록 함.
60분 초과하여 통화한 경우 wow 가 뜨게 만들기
var mobile = prompt ("하루 통화 몇 분 하세요?","0");
if (mobile>60){
document.write("wow");
}
if(0, null, "", undefined){
document.write("wow");
}
if( ) 요 괄호 안에
0, null, "", undefined 를 넣으면 False ! 이 외의 모든 숫자, 문자 등은 true
*주의할 점 " " 은 true. " " 쌍 따옴표 안에 space 하나라도 있으면 true
홀수, 짝수인지 알려주는 if 조건문
let answer = prompt ("What is your favourite number? ", "0~100");
if(answer%2==0){
document.write("Your favourite number is an even");
}else{
document.write("Your favourite number is an odd");
}
Confirm () method
let result = confirm ("정말로 회원을 탈퇴하시겠습니까?");
if(result){
document.write("실망입니다.");
} else{
document.write("감사합니다.");
}confirm () 매서드는 확인 / 취소 창을 띄운다.
회원가입 시, 탈퇴 시, 사용자에게 yes or no 를 물어보고 응답을 얻을 때 사용.
질문 1 해결 완료
let result = confirm ("정말로 회원을 탈퇴하시겠습니까?");
if(true){
document.write("실망입니다.");
} else{
document.write("감사합니다.");
}
result 대신 () 안에 true 를 넣으면 확인, 취소 둘 다 "실망입니다" 가 나옴.
이유는 ?
나의 생각 - result 와 if 조건문 은 현재 아무 관계가 없음.
confirm 창의 확인, 취소 버튼과 관ㄱ ㅖ없이 if(true) 기 때문에 무얼 누르던 "실망입니다" 만 나오는 거 같다
오늘이 몇 월 인가요? 를 조건문으로 만들기
let month = prompt ("What month is it now?","1~12");
if (3 <=month && month <= 5){
document.write("Enjoy your spring!");
} else if ( 6 <= month && month <=8){
document.write("Enjoy the sunshine!");
} else if ( 9<= month && month <=11){
document.write("Enjoy the sky!");
} else (month == 12 || month == 1 || month == 2){
document.write("Elsa is here");
}
중첩 if문
조건문 안에 조건문.
if 안에 if 문
ex) 한 웹사이트의 로그인 시 회원이 입력한 아이디를 먼저 일치하는지 확인 후, 그 다음에 비밀번호가 일치하는지 확인 할 때
나의 코드 :
let user_IDs = ["apple1", "apple2", "apple3", "apple4"];
let user_PWs = [1234, 4321, 1212, 2121];
let user_ID = prompt ("Enter your ID","");
let user_PW = prompt ("Enter your Password");
for(let i=0; i<user_IDs.length; i++){
if(user_ID==user_IDs[i]){
if(user_PW == user_PWs[i]){
document.write( "Good to see you agian " + user_ID +"!");
} else {
document.write( "Your PW is not correct.");
}
}
}
let result = user_IDs.includes(user_ID);
if(result != true){
document.write( "Your ID is not correct.");
}최근 배열을 배워서 배열로 ids, pws 을 넣었다.
그리고 user_IDs.includes(user_ID); 부분에서 애먹었다.
배열에 없다면 ~ ~ 해라. 이렇게 만들고 싶었는데 배열안의 값과 일치하는 게 있는지 찾는것은
indexOf 와 includes 가 있었다. indexOf는 찾은 값 요소의 위치를 includes는 true or false로 나타내서 includes를 씀
위에 만들면서 알게 된
.spilt(",");
let user_IDs = "apple1, apple2, apple3, apple4";
let user_IDs_indi = user_IDs.split(",");
console.log(user_IDs_indi);
console.log(Array.isArray(user_IDs_indi)); // True
(4) ["apple1", " apple2", " apple3", " apple4"]
배열이 아닌 변수를 배열로 출력해줌
"" 쌍따옴표 안에 있는 것을 기준으로!
책의 코드
var id = "12345";
var pw = 1122;
var user_id = prompt ("아이디는?", "");
var user_ps = prompt ("비밀번호는?","");
if(user_id==id){
if(user_ps==pw){
document.write(user_id+"님 환영합니다.");
} else{
alert("비밀번호가 일치하지 않습니다.");
location.reload();
}
} else{
alert("아이디가 일치하지 않습니다.");
location.reload();
}
location.reload(); 브라우저 새로고침!
제어문 - 2. 선택문( switch )
선택문 - switch : 변수와 경우의 값에서 일치하는 값이 있을 때 해당하는 코드 실행
if 문과 비슷하지만 if문은 만족하는 데이터가 여러 개일 경우, switch문은 여러 경우의 값 중 일치하는 데이터를 찾을 경우에 씀
var site = prompt("네이버, 다음, 네이트, 구글 중 \
즐겨 사용하는 포털 검색 사이트는?", "");
var url;
switch(site){
case "네이버" : url = "www.naver.com";
break;
case "다음" : url = "www.daum.net";
break;
case "네이트" : url = "www.nate.com";
break;
case "구글" : url = "www.google.com";
break;
default:alert("보기 중에 없는 사이트입니다.");
}
if(url) location.href = "htttp://"+url;
알게된 팁 : 문자열 데이터는 줄을 바꾸면 오류가 발생함, \ (역슬래시) 를 쓰면 된다. -> 근데 띄어쓰기가 너무 많이 생김.
break; 뜻 switch문 종료
질문2 해결 완료
1. 위의 코드에서 break 를 모두 없애니 site 이름을 입력해도 "보기 중에 없는 사이트입니다." 가 나옴. 그리고 가장 마지막 구글 사이트로 가짐.
->답 -> switch 는 ~로 이동 해라 라는 뜻이지 일치하는 것만 실행하라 는 아님 그래서 break 를 다 없애면 거기서부터 아래까지 전부다 실행됨 그래서 네이버, 다음, 네이트, 구글까지 다 사이트 이동 , alert 뜨고 구글로 이동됨
2. switch (site) { case "네이버" : url ="www.naver.com" } 의 의미
->답 -> switch (if 처럼 생각하기) site라는 변수의 경우를 찾아 ***이동***을 하는 것. 그 경우만을 실행하는 것이 아닌, 거기로 이동 후 아래로 끝까지 실행이 되기 때문에 break을 넣어줌. 그리고 url에 값을 넣음.
3. if(url) location.href = "" ; 만약 url 이면? 의미
->답 -> url 안에 값이 있으면 실행해라~ 아니면 실행 ㄴ ㄴ false
Switch 는 뭔가 회로의 길이 2개 에서 더 많아진 st
case("네이버") : url = "www.naver.com";case 뒤에 () 를 쓰고 "네이버"를 넣어도 됨
var url;변수 url 을 선언 안해도 됨
제어문 - 3. 반복문 (while, do while, for)
3. - 1) while 반복문 - 원하는 횟수만큼 반복하여 코드 실행 가능
ex) 안녕하세요 1 ~10 까지 출력하기
let i=1;
while(i<=10){
document.write("안녕하세요"+i,"</br>");
i++;
}
2의 배수이면서 6의 배수인 30 이하의 수를 출력하기
let i = 1;
while(i<=30){
if(i%6==0){
document.write(i,"<br>");
}
i++
}
20 ~10 까지의 숫자 중 짝수일 경우 파란색 홀수인 경우 빨간색으로 출력
<style>
.blue{
color: blue;
}
.red{
color: red;
}
</style>
<script>
var i = 20;
while(i>=10){
if(i%2==0){
document.write("<p class ='blue'>" + i + "</p>");
} else {
document.write("<p class = 'red'>" + i + "</p>");
}
i--;
}
</script> for(i =20; i>=10; i--){
if(i%2==0){
document.write("<p class ='blue'>" + i + "</p>");
} else {
document.write("<p class = 'red'>" + i + "</p>");
}
}while , for 둘 이 비슷함
3. - 2) do... while - (while문은 조건식의 만족 여부 먼저 검사 후 코드 실행) do while은 반드시 한 번은 코드를 실행하고 조건식을 검사함.
do...while 문은 테스트 조건이 거짓으로 평가될 때까지 지정된 구문을 실행하는 루프를 만듭니다.
단, 구문이 실행된 뒤에 테스트 조건이 평가됨으로 구문은 무조건 한 번은 실행됩니다.
var i = 10;
do{
document.write("hello!");
} while (i<3){
document.write("world!");
}질문3 해결 완료
Hello world! 가 함께 뜸 while(i<3) 까지만 써야하는 건지 ?
답 - > (while(i<3)) 까지만 실행이 되었고 아래 코드 처럼 "world!"는 따로 실행 된 것이었음
// let i = 10;
// do{
// document.write("hello!");
// } while (i<9)
{
document.write("world!");
}
i = 10 이다.
{ } 안에 있는 코드를 do (실행) 해라. while 언제까지 ? ( i<13) 안에 있는 조건까지
//hello!hello!hello!
var i = 10;
do{
document.write("hello!");
i++;
} while (i<13)
i = 10 계속 10 이기 때문에 while 값은 true, -> do{} 안의 코드가 무한 반복 됨.
// ∞
var i = 10;
do{
document.write("hello!");
} while (i<11)
let result = '';
let i=0;
do{
i += 1;
result += i;
}while(i<5);
console.log(result);질문4 해결 완료 ** 다시 겅부 필요
result; 이렇게 변수 선언만 하면 왜 안담기는지 ? Nan 이 나옴 (아무것도없다)
-> result =''; 스트링이다. '' 을 씀으로써 알려줌
result ; -> 아무것도 없는 빈 공간. 그래서 밑에 더하기 연산이 안됨. String인지 Number인지 어떤 연산을 해야하는 지 모름.
result = '';
result += 0; // '0'
result += 1; // '01'
result += 2; // '012'
result2 = 0;
result2 += 0; // 0
result2 += 1; // 1
result2 += 2; // 3
3. - 3) for
for 문 - 조건문을 만족할 때까지 특정 코드를 반복 실행. while과 사용법은 같지만 while보다 더 사용하기 편한 장점이 있음.
기본
for (i=1; i<=10; i++){
document.write("반복"+i, "<br>");
}
1~100까지의 숫자에서 5의 배수일 경우 빨간색 글자, 7의 배수일 경우 초록색 글자, 5의 배수이며 7의 배수인 경우에는 노란색 글자를 출력 해라
<style>
.red{
color:red;
}
.green{
color:green;
}
.yellow{
color:yellow;
}
</style>
<script>
for (i=1; i<=100; i++){
if(i%5==0 && i%7!=0){
document.write("<p class='red'>"+ i +"</p>");
} else if(i%7==0 && i%5!=0){
document.write("<p class='green'>" + i +"</p>");
} else if(i%35==0){ //or i%5 == 0 && i%7 == 0
document.write("<p class='yellow'>" + i + "</p>");
}
}
</script>
3. - 4) break 문
반복문을 강제로 종료할 때 사용
1-10까지 반복 -> 변수 i의 값이 6이되면 반복문 종료 시키기
for(let i =1; i<11; i++){
if(i<6){
document.write(i,"<br>");
} else if(i==6){
break;
}
}
for(let i =1; i<11; i++){
if(i==6){
break;
}
document.write(i,"<br>");
}2번째가 더 나은 답
3. - 4) continue문
continue문은 반복문에서만 사용 가능
1) for문에서 -> continue; 다음에 오는 코드는 무시하고 바로 증감식으로 이동하여 증감 연산 ( ++ or --)
for(let i=0; i<=10; i++){
if(i%2==0) continue;
document.write(i);
}만약 i가 2의 배수면 밑에 코드 무시하고 그냥 i++ 해라 ~
2) while문에서 -> continue; 다음에 오는 코드는 코드를 무시하고 바로 조건식으로 이동해 조건 검사.
var a = 0;
while(a<=10){
a++;
if(a%2 != 0){
continue;
}
document.write(a);
}
짝수만 출력 하기, 2의 배수가 아니면 조건으로 돌아가 !
3. - 5) 중복 for 문
for반복문이 중첩되어 나타내기 - n행 n열의 표를 만들 때 등 사용함
for(i=1; i<=3; i++){
for(k=1; k<=2; k++){
document.write(i+"행"+k+"열"+"<br>");
}
document.write("<br>");
}
제어문 문제 풀기
1. while 문을 이용하여 구구단 중 5단 만들기
내 첫번 째 오답
let i = 5;
while(i==5){
for(let k=1; k<=9; k++){
document.write(i+"x"+k+"="+i*k);
}
}- > 무한 반복 됨.
내 두번째 오답
let i = 1;
while(i<=9){
let five = 5;
document.write(five+"x"+i+"="+i*five);
}
- > 무한 반복 됨.
세번 째 성공
let i = 1;
while(i<=9){
let five = 5;
document.write(five+"x"+i+"="+i*five+"<br>");
i++;
}첫번 째 오답 수정
let i = 5;
while(i==5){
for(let k=1; k<=9; k++){
document.write(i+"x"+k+"="+i*k+"<br>");
}
i++;
}i++; 을 ㅃ ㅐ먹음
1. 중첩 for문을 이용해 " 5행 5열 표를 만들고, 데이터가 1부터 25까지 출력되도록 작성"
먼저 테이블 표 html 을 사용해 만드는 법 알아보기
<body>
<table border="10"> <!--가장 밖의 table 선의 두께 -->
<tr> <!--tr은 border 가 안먹힘-->
<th>No.</th>
<th>Name</th>
</tr>
<tr>
<td>1.</td>
<td>해리포터</td>
</tr>
<td>2.</td>
<td>말포이</td>
</table>
</body>tr = table row 테이블의 행
td = table data 테이블 데이터 (≒열) 테이블 안에 들어가는 데이터, 셀
th = table header 테이블의 타이틀
처음 표 table, tr, td, th을 봤을 때 이해가 잘 안됬으나 html에 하나하나 쓰고 출력 결과를 보니 이해 됨! 직접 출력해서 연습해보는 것을 추천
<table border="10"> 은 table 두께 표현 / table 이 외의 tr, td, th 는 border 기능 x
테이블 표를 만들 때는 <table> </table>을 항상 먼저 만들어 주기
다시 문제로 돌아가서
나의 코드
document.write("<table border='2'></table");
let num = 1;
for(let i =1; i<=5; i++){
document.write("<tr>"+ "</tr>");
for(let k = 1; k<=5; k++){
document.write("<td>"+num+"</td>");
num++;
}
}만들어지는게 신기하다..
책의 코드
var num = 1;
var t ="<table border=1>";
for(var i = 1; i<=5; i++){
t+="<tr>";
for(var k = 1; k<=5; k++){
t+="<td>"+num+"</td>";
num++;
}
t+="</tr>";
}
t+="</table>";
console.log(t);
document.write(t);
t 라는 변수로 table 을 만들고 for 구문 안에서 tr (행) 5개를 +=를 사용해 붙였다. 그리고 그 안의 for 구문을 사용해 t += 으로 num 변수 (1~25)를 붙임.
t+="<td>" 가 <tr> 안에 붙여지는게 첫번 째 for 하위 for 이기 때문 같은데 이 점이 헷갈린다.
아직 += 의 기능을 읽고 바로 그리기는 어렵다
===============================JavaScript 제어문 끝 ================================
Java Script Object 자바스크립트 객체
JS 는 객체 기반 언어
객체 -> 속성과 기능으로 이루어짐
속성 : 말 그대로 해당 객체의 속성
기능 : 객체 안의 기능을 바꾸는 함수
| JavaScript Method () / 및 기타 정보 정리 |
Examples | |
| prompt() | 질의응답 팝업창 띄우기 | prompt("이름이 뭐에요", "입력해주세요"); |
| confirm() | 확인/ 취소 창 (확인=true, 취소=false) | comfirm("정말로 탈퇴하시겠습니까?") |
| .spilt(",") | "" 안에 있는 요소를 기준으로 배열로 출력하기 | let a = "a", "b", "c"; a.spilte(","); // ["a", "b", "c"] |
| .indexOf() | 배열 안의 요소를 찾아 위치를 알려줌 | |
| .includes() | 배열 안의 요소를 찾아 true of false로 알려줌 | |
| location.reload(); | 브라우저 새로고침 | |
| location.href=""; | 해당 사이트로 이동 | |
| alert("") | 경고창(?) or 팝업창 생성 | alert("환영합니다"); |
알게 된 것
ascii 코드 - 1 byte (8 bits = 최대 256가지)로 표현하는 문자 저장 방식
숫자, 알파벳, 특수기호 등
유니코드 - 2 bytes (16 bits = 최대 65536가지)로 표현하는 문자 저장 방식
인코딩 -> 사람이 읽을 수 있는 문자, 숫자 등을 컴퓨터한테 컴퓨터가 읽을 수 있게 넣는 것
디코딩 -> 컴퓨터에 인코딩된 것을 사람이 읽을 수 있는 형태로 출력하기.
'Javascript' 카테고리의 다른 글
| Callback 함수, 콜백 함수란 ? 사용 이유 (0) | 2021.04.27 |
|---|---|
| input type checkbox 전체 선택 / 해제 JavaScript 로 만들기 getElementsByName 사용 (0) | 2021.04.26 |
| [JavaScript] input type="text" 글 쓰지 못하게 막기 readonly disabled 차이 (0) | 2021.04.24 |
| 부스트코스 자바스크립트 <Javascript제어문> 강의 메모 Boostcourse Javascript by생활코딩 (0) | 2021.03.22 |
| 부스트코스 자바스크립트 <웹과 Javascript> 강의 메모 Boostcourse Javascript (0) | 2021.03.21 |
