728x90
반응형
1) Javascript 기본 문법
1-1) 변수
1-2) 데이터 타입
1-3) 연산자
1-4) prompt - I/O
1-5) 조건문 - if문
1-6) 반복문 - for문
2) 코드 실습
1) Javascript 기본 문법
1-1) 변수
// Javascript 변수
/*
예약어
var - hoisting
let
const
*/
var num = 1;
let num2 = 2;
num2 = 4;
// let: 재선언 불가능, 재할당 가능
// 재선언하고 나서 에러 메시지 확인하기
const num3 = 3;
// const: 재선언 불가능, 재할당 불가능
// 재선언과 재할당 시 에러 메시지 각각 확인하기
/*
예약어로 변수명을 만들 수 없음!!(ex. const로 변수명을 할 수 없음)
*/
1-2) 데이터 타입
/*
문자형(string)을 표현하는 방법
1. ''
2. ""
3. `` >> ES6 문법
*/
const str = "Hello Javascript";
console.log(1 + 1);
console.log(str + 1);
/*
데이터 타입
1) 원시 타입
- number(숫자형)
- string(문자형)
- boolean
- undefined: 선언 후 암묵적으로 할당되는 값
- null: 의도적으로 값이 없다라는 것을 명시할 때 사용하는 값
- symbol: ES6에서 새로 생긴 데이터 타입
2) 객체 타입
- 배열
- 객체
- 함수
...
*/
// 선언을 한 경우, default 값은 "undefined"이다!!(선언만 한 경우에는 변수 출력 시 "undefined"가 출력됨)
// let num;
// console.log(num);
// 하나의 변수에 여러 데이터를 넣고 싶을 경우 사용하는 것 >> 배열, 객체
let a = 10;
let b = "hello";
console.log(b + a); // hello10
let c = [10, "hello"]; // 배열
// 인덱스는 "0"부터 시작함
console.log(c);
console.log(c[0]); // 10
console.log(c[1]); // hello
console.log(c[1] + c[0]); // hello10
console.log(c.length); // length: 해당 배열의 총 요소의 개수 출력
// 배열은 기본적으로 같은 성향의 데이터를 한 곳에 모아 관리하기 용이하기 위한 목적으로 사용함!!
let d = [1, 2, 2, 3, 4, 4, 6];
console.log(d[2]);
console.log(d[5]);
console.log(d[1] + d[6]);
1-3) 연산자
/*
연산자: +, -, *, /, %, ==, ===, =
단항 산술 연산자: ++, --
*/
let num4 = 5;
console.log(++num4);
console.log(++num4);
console.log(num4++);
console.log(num4++);
console.log(++num4);
console.log(num4);
/*
비교 연산자: ==, ===, !=, !==, >, <, >=, <=
데이터 타입: boolean
*/
/*
논리 연산자: &&(and), ||(or)
*/
// 1 ~ 10까지의 숫자를 출력할 시 5의 배수만 'hello world!'를 찍어라!
for (let i = 1; i <= 10; i++) {
if (i === 5 || i === 10) {
console.log("hello world!");
} else {
console.log(i);
}
}
/*
||(or) 연산자 둘 중 하나라도 참이면 참
true || true >> true
true || false >> true
false || true >> true
false || false >> false
&&(and) 둘 다 참이어야지 참
true && true >> true
true && false >> false
false && true >> false
false && false >> false
!true >> false
!false >> true
*/
/*
console.log(true || true);
console.log(true || false);
console.log(false || true);
console.log(false || false);
console.log(true && true);
console.log(true && false);
console.log(false && true);
console.log(false && false);
console.log(!true);
console.log(!false);
*/
let a = 1;
let b = 2;
let c = 1;
let d = 1;
console.log(a === b || c === d);
1-4) prompt - I/O
prompt("값을 입력해주세요!!");
console.log("hello");
// prompt: 팝업창을 띄워서 값을 입력할 수 있도록 입력폼을 생성해 줌!!
/*
(매우 중요!!)
Input / Output
X 값을 입력 시 Y 값을 출력하겠다. >> 프로그래밍의 기초
*/
// 입력한 값에 대해 새로운 변수를 선언하여 할당한 뒤 이를 출력하는 코드
let input = prompt("값을 입력해주세요!!");
console.log(input);
// prompt 값을 2가지를 받을 예정
// 10 숫자와 20 숫자를 받을 예정
let input1 = prompt("첫번째 숫자를 입력해주세요.");
let input2 = prompt("두번째 숫자를 입력해주세요.");
console.log(input1); // 10
console.log(input2); // 20
console.log(input1 + input2); // 1020 >> 컴퓨터는 입력을 받았을 때 기본적으로 모든 입력값들을 string 형태로 인식함!!
// 형 변환(데이터 타입을 바꾸는 행위)
console.log(Number(input1) + Number(input2)); // 30
console.log(parseInt(input1) + parseInt(input2)); // 30
/*
알고리즘 기본 로직
1. 입력 받기(input)
2. 로직 구현(문제해결)
3. 출력(output)
*/
※ 컴퓨터는 입력을 받았을 때 기본적으로 모든 입력값들을 string 형태로 인식함!!
>> 따라서 "prompt"를 통해 입력받은 값들은 모두 string 데이터 타입을 가지기에 만일 숫자 연산이 필요한 경우에는
number로 형변환 후 계산해야 함!!
1-5) 조건문 - if문
/*
// 조건문 if
// if 예약어
// 조건에는 비교 연산자를 사용하면 좋음!!
if (조건) {
// true일 경우, 여기를 실행함
} else {
// false일 경우, 여기를 실행함
}
*/
/*
code block 안에서 선언된 변수
중괄호(code block) 안에서 선언된 변수는 중괄호 안에서만 사용 가능하다!!
지역 변수: code block 안에서 선언한 변수
전역 변수: code block 밖에서 선언한 변수
// 아래 a가 let 예약어를 사용했음에도 불구하고 재선언된 것처럼 보이지만 지역변수와 전역변수는 저장공간을 다르게 사용하기 때문에 유효함!!
let a = 0; // 전역 변수
{
let a = 0; // 지역 변수
}
console.log(a);
// 그래서 많이 쓰는 기법 >> 전역변수에서 선언만 한 뒤 값을 code block에서 할당한 뒤 출력함!!
let a;
{
a = 0;
}
console.log(a);
*/
/*
각각 숫자를 받는 input을 만듦
입력받은 값을 a, b라는 변수에 담음
a > b, "A가 큽니다." 텍스트 출력
a < b, "B가 큽니다." 텍스트 출력
*/
let a = prompt("첫번째 숫자를 입력해주세요.");
let b = prompt("두번째 숫자를 입력해주세요.");
// 기존의 string 데이터 타입인 입력값을 number 타입으로 형 변환 후 각 변수에 재할당함!!
a = parseInt(a);
b = parseInt(b);
if (a > b) {
console.log("A가 큽니다.");
} else {
if (a < b) {
console.log("B가 큽니다.");
} else {
console.log("A와 B가 같습니다.");
}
}
// 위의 조건문을 else if 문을 사용하여 좀 더 보기 좋게 만든 코드
// string 조작
// A = 20, B = 10으로 A가 큽니다.
// A = 10, B = 20으로 B가 큽니다.
// A = 20, B = 20으로 둘이 같습니다.
if (a > b) {
console.log("A는 " + a + ", B는 " + b + "으로 A가 큽니다.");
} else if (a < b) {
console.log("B는 " + b + ", A는 " + a + "으로 B가 큽니다.");
} else {
console.log("A는 " + a + ", B는 " + b + "으로 같습니다.");
}
// 형 변환을 써야 하는 이유: 자바스크립트는 타입을 별도로 지정하지 않기 때문에 추후 코드 에러 발생 시 에러 발견이 어렵다는 문제가 있기 때문임!!
let x = "10";
let y = "20";
let z = "30";
console.log(x * y + z); // '(10 * 20)' + '30' = 20030
※ code block 내부에서 선언되고 할당된 변수는 code block 영역 밖에서는 사용할 수 없는 반면,
code block 영역 밖에서 선언된 변수는 code block 내부에서 재할당이 가능하며, 해당 변수를 code block 내부에서
자유롭게 사용 가능함!!
1-6) 반복문 - for문
let arr = [1, 2, 3, 4, 5, 6, 7, 8, 9];
// arr에 있는 변수를 하나씩 다 출력하세요.
// 0 ~ 8번째 까지의 요소를 출력하는 반복문
for (let i = 0; i < arr.length; i++) {
console.log(arr[i]);
}
// 구구단 출력(2단)
// for 문 내의 i 변수 역시 지역변수에 해당함!!
for (let i = 0; i < arr.length; i++) {
console.log("2 * " + arr[i] + " = " + 2 * arr[i]);
}
// 2중 for 문
// menu와 submenu 출력
for (let i = 1; i < 5; i++) {
console.log("menu" + i);
for (let j = 1; j < 5; j++) {
console.log(" submenu" + i + "-" + j);
}
}
let arr2 = [2, 3, 4, 5, 6, 7, 8, 9];
// 구구단 출력(2단 ~ 9단)
for (let i = 0; i < arr2.length; i++) {
console.log(arr2[i]);
for (let j = 1; j < 10; j++) {
console.log(arr2[i] + " * " + j + " = " + arr2[i] * j);
}
}
// 별찍기
for (let i = 0; i < 6; i++) {
for (let j = 0; j < i + 1; j++) {
document.write("*");
}
document.write("<br>");
}
2) 코드 실습
// 과목 평균에 따른 학점 등급 메기기
let kor = prompt("국어 점수를 입력해주세요.");
let math = prompt("수학 점수를 입력해주세요.");
let eng = prompt("영어 점수를 입력해주세요.");
let sci = prompt("과학 점수를 입력해주세요.");
kor = Number(kor);
math = Number(math);
eng = Number(eng);
sci = Number(sci);
if ((kor + math + eng + sci) / 4 >= 90) {
console.log("과목평균: " + (kor + math + eng + sci) / 4);
console.log("당신의 학점은 A입니다.");
} else if ((kor + math + eng + sci) / 4 >= 80) {
console.log("과목평균: " + (kor + math + eng + sci) / 4);
console.log("당신의 학점은 B입니다.");
} else if ((kor + math + eng + sci) / 4 >= 70) {
console.log("과목평균: " + (kor + math + eng + sci) / 4);
console.log("당신의 학점은 C입니다.");
} else {
console.log("과목평균: " + (kor + math + eng + sci) / 4);
console.log("당신의 학점은 D입니다.");
}
// 1 ~ 100까지의 합 구하기
let i = 0;
for (let j = 1; j < 101; j++) {
// i = i + j;
i += j;
}
console.log(i);
// 숫자 정렬하기(sort 메서드 사용 안하고 정렬하기)
let arr = [3, 6, 9, 3, 2, 5];
let temp;
for (let i = 0; i < arr.length; i++) {
for (let j = i + 1; j < arr.length; j++) {
if (arr[i] - arr[j] > 0) {
temp = arr[i];
arr[i] = arr[j];
arr[j] = temp;
}
}
}
console.log(arr);
'Javascript > Javascript(2022 version)' 카테고리의 다른 글
Javascript 기초(6) - 상속 및 메서드 (0) | 2022.11.04 |
---|---|
Javascript 기초(5) - 객체 및 메서드 (0) | 2022.11.03 |
Javascript 기초(4) - 함수 및 객체 (0) | 2022.11.02 |
Javascript 기초(3) - 함수 (0) | 2022.11.01 |
Javascript 기초 - 프로그래밍 기초 및 Javascript 기초 문법 (0) | 2022.10.28 |