✏️ html 문서에 js 적용하기
<body>태그 속 맨 아래에서
<script src = "파일이름.js"><\script>
1. Variables (변수)
JS에서 변수명은 🐫Camel case : testVariableOne
const | let 변수명 = 값;
const는 상수 선언 시 사용(값 변경 불가)
let은 값 변경 가능항상 const를 사용하되, 값을 변경해야하는 경우 let을 사용해야함✨
let a =5; const b = 2; let myName = "Youn";
2. DataType
boolean : true | false
전부 소문자로 작성함!
const bool = true | false;
null
- 아무것도 없는 상태를 정해 줌!
- 자연적으로 발생하지 않음. 사람이 지정해야함
const value = null;
undefined
- 변수는 존재하나 값을 정해주지 않았을 때
let something; console.log(something); // 로그 창을 통해 확인하거나 let something2 = undefined; // 값 지정도 가능
3. Array (배열)
- 데이터 타입 섞여도 OK!
- 대괄호 [] 안에 값 나열해서 사용
- index는 0부터 시작
const 배열이름 = [값1, 값2, 값2, ...];
array 예시
const daysOfWeek = ['mon', 'tue', 'wed', 'thu', 'fri', 'sat']; const nonsense = [1, 2, "hello, World!", false, null, true, undefined] console.log(daysOfWeek, nonsense);
배열 값 가져오기
console.log(daysOfWeek[2]);
배열 값 추가
//Add one more day to the array daysOfWeek.push("sun"); console.log(daysOfWeek); `
4. Objects (객체)
- 중괄호로 열고 닫음
- 내부 property는 문법 다름. 값변경 가능!
const player1 = { name : "youn", points : 200, adult : true, }; //객체 값 참조 console.log(player1); console.log(player1.name);
5. Function (함수)
- 함수 호출 시 지정한 함수가 받는 인자의 수보다 많은 수를 입력해도 상관 없음 > 함수가 받을만큼만 순서대로 가져옴!
- 함수 변수는 함수 내부에서만 존재함!
function plus(num1, num2){ console.log(num1 + num2); //NaN : not a number } function divide(num1, num2){ console.log(num1 / num2); } plus(8, 60);
객체 안에 함수 property 넣기 가능!
const player2 = { name : "youn", sayHello : function(otherPersonsName){ console.log("hello " + otherPersonsName + "nice to meet you!"); }, }; player2.sayHello("lynn");
console.log나 alert()를 이용하는 것을 지양함 🥺
함수값을 return 받아 함수 밖에서도 활용하는 것을 지향함! 😊🥺 console.log()를 이용한 함수
const calculator = { plus : function(a, b){ console.log(a+b); }, minus : function(a, b){ console.log(a-b); }, divide : function(a, b){ console.log(a/b); }, times : function(a, b){ console.log(a*b); }, power : function(a, b){ console.log(a**b); }, } calculator.plus(5, 2); calculator.minus(5, 2); calculator.divide(5, 2); calculator.times(5, 2); calculator.power(5, 2);😊 return을 사용한 함수
const newCalculator = { plus : function(a, b){ return a+b;//return 하면 함수 끝. }, minus : function(a, b){ return a-b; }, divide : function(a, b){ return a/b; }, times : function(a, b){ return a*b; }, power : function(a, b){ return a**b; }, } const plusResult = newCalculator.plus(2, 3); // 2 + 3 = 5 const minusResult = newCalculator.minus(plusResult, 10); //5 - 10 = -5 const timesResult = newCalculator.times(10, minusResult); // 10 * -5 = -50 const divideResult = newCalculator.divide(timesResult, plusResult); // -50 / 5 = -10 const powerResult = newCalculator.power(divideResult, minusResult); // -10 ** -5
6. Conditionals (조건문)
🚩기본문법
if(condition){
/// condition === true
} else {
///condition === false
}✏️추가 개념
prompt 사용
const age = prompt("How old are you?"); //prompt : 입력할 때 까지 JS pause, 요즘엔 안 씀 console.log(age); console.log(typeof age); // prompt로 받은 자료의 자료형은 string
형변환
//change type console.log(typeof parseInt(age)); // number로 형변환, 숫자가 아닌 걸 형변환하면 NaN
NaN인지 아닌지 bool 값을 리턴하는 함수
const age = parseInt(prompt("How old are you?")); console.log(isNaN(age));//isNaN : return boolean
if-else 예제
// 나이가 NaN일 때 다시 입력해달라고 출력하기 if(isNaN(age)){ console.log("Please write a number"); } else { console.log("Thank you for writing your age."); }
if - else if - else 예제
if(isNaN(age) || age < 0){// || : or console.log("Please write a real positive number"); } else if (age < 18) { console.log("You are too young.") } else if (age >= 18 && age <= 50) { // && : and console.log("You can drink"); } else if (age > 50 && age <= 80) { console.log("You should exercise"); } else if (age === 100){ // === : equal | !== not equal console.log("wow, you are wise"); } else if (age > 80){ console.log("You can do whatever you want."); }
HUFS CSE 22 / TAB 42