1. 새로고침할때 마다 body 태그의 백그라운드 컬러 색 변경하기
function random(number) {
return Math.floor(Math.random() * number);
}
function bgChange() {
const rndCol = 'rgb(' + random(255)+ ',' + random(255) + ' , ' + random(255) + ')';
document.body.style.backgroundColor = rndCol;
}
bgChange();
2. null 은 값이다. 아무것도 아닌 값
3. undefined 정의되지 않음. 형태도 없음.
4. 문자를 출력할때 쓰는 방식 큰 따옴표("") 또는 백틱(``)(맥에서는 ₩ + 옵션키)사용하여 작성한다.
let name = prompt('당신의 이름은?');
let classRoom = prompt('입장하고 싶은 강의실은?', '201');
document.write(name + "님 " + classRoom + "호 강의실로 입장하세요!", "<br/>");
document.write(`${name}님 ${classRoom}호 강의실로 입장하세요!`);
5. 객체란? 자바스크립트에서는 객체가 매우매우 중요하다.
키와 벨류값을 가지고 있다. 그 한쌍을 프로퍼티라고 부른다.
객체형태 : 객체명 = {
key : value,
key : value,
key : value
}
key : value => 한쌍 = property
예를 들어 book 이라는 객체가 있다.
그 안에는 title, page, pubDate 라는 키값이 있고, 그에 따른 벨류값이 존재한다.
let book = {
title : "javascript",
page : 200,
pubDate : "2023-04-12"
};
book.title;
'javascript'
book["pubDate"];
'2023-04-12'
값을 호출하는 방법에는 두가지가 있다. 위와같음.
6. Symbol()
Symbol() : 함수 , 객체의 자료중 유일한 혹은 유니크한 키 값을 부여하고 싶을 때 사용하는 함수.
7. 문자열 - 숫자열 변환 함수
Number() - 문자열을 숫자열로 바꿔줌.
parseInt() - 문자열을 숫자열로 바꿔줌. //보통 많이 사용한다.
parseFloat() - 문자열을 숫자열로 바꿔줌.
8. 문자열 - 숫자열로 변환하는 방법.
다른 타입의 자료형을 문자열로 변환할때 사용하는 함수는 String();
간단하게 숫자나 문자열로 변환하는 방법
변수명 = +변수명 으로 재 정의. => 숫자형
변수명 = 변수명 + ""; => 문자열
9.
다른 유형의 데이터를 논리형 데이터로 변환하고 싶다면,
Boolean() => 논리형
10. 사용자로부터 화씨 온도를 받아 섭씨온도로 변환하여 출력해주는 코드를 짜보자.
let data1 = parseInt(prompt("화씨온도를 입력하세요"));
let data2 = ((data1 - 32) / 1.8);
let result = (data2).toFixed(1); // 소수점 값을 엊고자 할때 쓰는 함수. toFixed( ) 괄호안에 들어가는 숫자가 소숫점의 자리.
document.write(`화씨 ${data1}도는 섭씨 ${result}도 입니다.`)
11. 산술연산자 : +, -, *, / , %, 증감연산자(--,++)
연산자, 피연산자 (연산자가 아닌 값)
증감연산자 : 연산자가 피연산자 앞에있으면 식을 행하기 전에 증감, 연산자가 피연산자 뒤에 있으면 식을 수행하고 증감.
12. 대입연산자 (할당연산자)
y = y + x => y += x
13. 비교 연산자 : >, >=, <, <=, ==, ===, !(부정연산자)
== : 값이 같다
=== : 값과 속성이 같다.
3 == "3"
true
3 != "3"
false
3 !== "3"
true
3 === "3"
false
14, 논리 연산자: true, false, &&, ||
15. 제어문의 종류 : if(else), else-if, for of-in, switch, do-while, continue, break
16. if문의 구조
if(조건식) { 조건식이 참일 경우, 실행할 명령값} else{위 조건식이 거짓일 경우 실행활 명령값}
let userInput = prompt('이름을 입력하세요');
if(userInput === null) { // 아무것도 입력하지 않았다면,
alert('취소했습니다.');
} else { //값을 입력했다면,
alert(userInput);
}
let score = prompt('프로그래밍점수입력');
if (score != null) { // 값이 입력되었다면 조건문 실행
if(score >= 90) { // 90이상이라면
alert("a");
} else if(score >= 80) { //80이상이라면
alert("b");
} else { // 위 두조건에 다 부합하지 않는다면,
alert("c");
}
}
17.
==== 조건문에서 중괄호 생략 언제하는가
1. false 값을 설정하지 않은 경우
2. 줄 코딩을 할 만큼 간단한 조건식일 경우
18. 삼항조건 연산자.
구조: 조건 ? 참일때 실행할 명령문 : 거짓일때 실행할 명령문.
if (num1 < num2) {
small = num1;
} else {
small = num2;
}
//위와 같은 식을 한줄로 작성할 수 있다.
small = (num1 < num2) ? num1 : num2;
19. 삼항조건 연산자를 사용하여 짝수, 홀수 구분하기
let num = parseInt(prompt('숫자를 입력하세요'));
if(num !== null) {
(num % 2 === 0) ? alert(num + "짝수입니다.") : alert(num + "홀수입니다.")
} alert("값을 입력하지 않았습니다.")
짝수, 홀수가 뿐만 아니라 값이 입력되지 않았을 때도 고려해야 함!!! *prompt 로 받는 값이 숫자형이여야 할때 꼭 문자형 => 숫자형으로 변환해줘야 함.
20. switch 문
let subject = prompt('신청할 과목을 선택하세요 1-html, 2-css, 3-javascript');
if(subject !== null) {
switch(subject) {
case "1" : document.write('html을 신청했습니다.');
break;
case "2" : document.write('css을 신청했습니다.');
break;
case "3" : document.write('javascript을 신청했습니다.');
break;
default : document.write('잘못입력했습니다.')
}
}
21.
const num1 = parseInt(prompt("첫번째 정수 : "));
const num2 = parseInt(prompt("두번째 정수 : "));
let str;
if(num1 % 2 == 0 && num2 % 2 == 0) {
str = "두 수 모두 짝수 입니다."
} else {
str = "짝수가 아닌 수가 있습니다."
}
alert(str);
22. for 문 기본형 for(초기값; 조건식; 증감문) { 실행문 }
const students = ["Park", "Kim", "Lee", "Kang"];
for(let i = 0; i < students.length; i++) {
document.write(`${students[i]}, `);
}
23. for each( )함수 : "배열 객체" 에서 각각의 요소들을 꺼내서 반복시키고자 할 때 사용.
forEach(콜백함수) : 콜백함수란? 다른 함수의 인자값으로 사용되는 함수를 의미. 인자값이란? 인수라고도함. 매개변수의 값으로 적용될 값. 매개변수란? 함수의 안에 들어가야하는 값.(함수가 작동하기위해 존재해야하는 값., = 코인)
const students = ["park", "lee", "kim", "kang"];
students.forEach(function(student) {
document.write(`${student}. `);
})
const fruits = ["사과", "딸기", "포도", "오렌지"];
fruits.forEach(function(fruit) {
document.write(`${fruit}. `);
})
24. for ( in ) 문 : "일반 객체" 에서 객체안에 있는 프로퍼티 값*(key : value)을 가져와서 반복 시킬때 사용 for(변수 in 객체명){ }
const bookInfo = {
title : "javascript",
pubDate : "2023-04-12",
pages : 272,
finished : true
};
for(let i in bookInfo) {
document.write(`${i} : ${bookInfo[i]} <br/>`)
}