[JavaScript] 기본 사용법, 입력, 출력, 자료형, 사용법, 조건문, 연산자

alert console.log

console.log 는 자동 줄바꿈 alert는 \n 적어야함

html

<!DOCTYPE html>

<head>

<title>Document</title>

</head>

<body>

</body>

</html>

// TODO: 화면 출력 방법 (결과 확인용)

// 1) 사용법 : alert("문자열")

// 코딩 용어 : ;(세미콜론), :(콜론), &(엔퍼센트)

// 자바스크립트(js) 명령문(문장)의 끝에 ;(세미콜론) 붙임(생략가능)

// 주석 단축키 : ctrl + /

alert("Hello Javascript");

// 2) 사용법 :

console.log("Hello Javascript");

결과

변수, 상수, 산술 연산자

html

<!DOCTYPE html>

<head>

<title>Document</title>

</head>

<body>

</body>

</html>

// 주석 단축키 : ctrl + /

// 자바스크립트 주석 : //

// TODO: 자료형

// 1) 문자열(String) : 예) "안녕하세요", '안녕하세요'

// 쌍따옴표, 홑따옴표를 사용해서 문자들을 묶음

// alert("안녕하세요");

// alert('안녕하세요');

// 2) 숫자(Number) : 1, 2, 3 등

// alert(1);

// 3) 표현식 : 변수 , 상수 , 값 ...

// 1) 변수 : 변하는 값을 저장하는 곳(공간), 1가지 값만 저장 (***)

// vs 값 : 문자열, 숫자 등

// 변수 사용법 : let 변수명 = 값;

// let 안 쓰면 전역변수 쓰는 거 추천

// 실습)

// let hello = "안녕하세요";

// hello = "안녕"; // 값 수정(변수는 가능)

// // 출력방법 : 변수 사용해서 출력 (소프트 코딩(soft coding)), 추천

// alert(hello);

// vs 아래 출력방법 : 하드 코딩(hard coding), 추천하지 않음

// alert("안녕")

// 2) 상수 : 변하지 않는 값을 저장하는 곳(공간)

// 상수 사용법 : const 상수명 = 값;

// 실습

// const num = 1; // 상수 정의 (값 저장), 초기화

// // num = 2; // 수정 불가 (에러 발생)

// alert(num);

// 연산자

// 사칙연산자 : +(덧셈), -(뺄셈), *(곱셈), /(나눗셈(슬래쉬))

// %(나머지연산자: 나누어서 나머지가 결과로 나옴)

// 실습) 주석 : ctrl + / (여러줄 주석 : 블럭(마우스 여러줄 지정))

// 1) 덧셈

// let num = 52 + 273; // 변수 정의 (값 저장), 변수명(상수명) 유일

// // 결과 출력

// alert(num);

// 2) 뺄셈 : 273 - 52

// let num = 273 - 52;

// alert(num);

// 3) 곱셈 : 273 * 52

// let num = 273 * 52;

// alert(num);

// 4) 나눗셈 : 273 / 52 , 실수(비슷한 숫자, 유사한 숫자(부동소수점법))

// let num = 273 / 52;

// alert(num);

// 5) 나머지연산 : 273 % 52 (결과가 나머지가 나옴)

// let num = 273 % 52;

// alert(num);

// 문자열 특수문자 : \(역슬래쉬)

// 특수문자 사용법 : \영문자

// 1) 줄 바꿈(<br/>) : \n

// let hello = "안녕하세요\n홍길동입니다."

// // 결과출력

// alert(hello);

// 2) 홑따옴표 , 쌍따옴표 출력

// '안녕하세요'

// let hello = "'안녕하세요'";

// alert(hello);

// "안녕하세요"

// let hello = '"안녕하세요"';

// alert(hello);

// 쌍따옴표 + 홑따옴표 모두 출력

// 사용법 : 특수문자 사용 : \", \'

// '"안녕"하세요'

let hello = "'\"안녕\" 하세요'";

alert(hello);

결과

상수의 값을 변경하여 오류가 발생했을 때

(f12 단축키 사용가능)

자료형, 비교 연산자, 논리 연산자, 대입 연산자

html

<!DOCTYPE html>

<head>

<title>Document</title>

</head>

<body>

</body>

</html>

// 문자열 연산(더하기 === 붙이기) *****

// 사용법: let 변수명 = "문자열" + "문자열2" + ....;

// let hello = "안녕하세요 " + "홍길동입니다.";

// // 결과 출력

// alert(hello);

// 자료형 : 문자열(String), 숫자(Number)

// 참/거짓을 표시하는 자료형 : bool(boolean)(불, 불린)

// 사용법 : let 변수명 = true(또는 false)

// **) c언어나 java 달리 변수의 자료형을 나타내는 예약어가 없음

// let(const) 이용해서 변수 정의

// let hello = true; // 내부적으로 bool 된것임

// // 출력방법

// alert(hello);

// let hello2 = false;

// alert(hello2);

// 비교연산자 : >=(크거나같음), <=(작거나같음),

// , >(크다), <(작다),

// , ==(같다), ===(같다, 좀더 엄격하게 검사, 추천) *

// 코딩 실수 예) 조건문 : if(hello = "안녕하세요"){} (x)

// 식별자 : 변수명, 상수명, 함수명 등 을 통틀어서 말함

// 변수(변하는 공간), 상수(안변하는 공간)

// 변수, 상수 의 이름 짓기 규칙(명명법)

// 변수명 규칙 : 1) 첫글자는 영문자, 달러($), 언더바(_)

// 만 올수 있음(숫자 안됨)

// 2) 대소문자를 구분

// 3) js 예약어(let , const 등) 사용 못함

// 기타(참고) : 한글, 한자도 가능

// let Hello = "안녕하세요";

// let hello = "안녕하세요";

// let 안녕 = "안녕하세요"; // 참고

// 명명법(이름을 정하는 규칙)

// 1) 카멜표기법(camelCase) : 낙타표기법

// 사용법) 단어와 단어사이는 대문자, 첫글자는 소문자

// 예) hello + world -> helloWorld

// 사용처 : 변수명, 함수명(메소드명) 등

// 2) 파스칼표기법(Pascal)

// 사용법) 단어와 단어사이는 대문자, 첫글자는 대문자

// 예) hello + world -> HelloWorld

// 사용처 : 클래스명, 생성자명

// 기타(참고) : 언더바 표기법(스네이크 표기법), 마이너스표기법

// 예) hello + world -> hello_world (언더바표기법)

// 예) hello + world -> hello-world (마이너스표기법)

// 논리 연산자

// 참/거짓을 이용해서 논리 연산함

// 1) 논리 부정 : !(반대), (참이면 거짓, 거짓이면 참이됨)

// let hello = !true;

// // 출력

// alert(hello);

// 2) 논리 곱(and, ***) : && (연산 시 하나라도 거짓이면 거짓)

// 리액트 코딩할때 굉장히 많이 나옴

// let hello = true && true; // true

// let hello2 = true && false; // false

// // 결과 출력 : alert, console.log

// alert(hello);

// alert(hello2);

// 활용 : if문 대신 논리곱을 사용할 수 있음 (고급 코딩)

// 3) 논리 합(or) : || (연산 시 하나라도 참(true)이면 참)

// let hello = true || true; // true(참)

// let hello2 = true || false; // true(참)

// // 결과 출력

// // 줄복사 : ctrl + d

// alert(hello);

// alert(hello2);

// 대입 연산자 : =(대입연산자) vs ==, === (비교연산자)

// 변수, 상수에 값을 넣을 때 사용

// let hello = "안녕하세요";

// let num = 1;

// 대입연산자 축약형

// let x = 10; // x 의 변수에 10 값을 저장(대입연산자 = 사용)

// x = x + 5; // 10 + 5 => 다시 x 로 저장됨, x = 15;

// x += 5; // +(덧셈) 축약형

// x = x - 5; // 10 - 5

// x -=5; // -(뺄셈) 축약형

// x = x * 5; // 10 - 5

// x *=5; // *(곱셈) 축약형

// x = x / 5; // 10 - 5

// x /=5; // /(나눗셈) 축약형

// x = x % 5; // 10 % 5

// x %=5; // %(나머지 연산) 축약형

// 증감 연산자(***)

// 사용법 : 변수++, ++변수, 변수--, --변수 등

// 1씩 증가 또는 1씩 감소함

// 앞에 붙이기 : ++변수, --변수

let x=10;

++x; // 1증가

alert(x); // x=11

--x; // 1감소

alert(x); // x=10

// 뒤에 붙이기 : 변수++, 변수--

let y=10;

y++;

alert(y); // y=?

y--;

alert(y); // y=?

exam

html

<!DOCTYPE html>

<head>

<title>Document</title>

</head>

<body>

</body>

</html>

// 문제 풀이

// 1) 증감연산자를 활용해서 화면 출력하세요

// 출력방법 : alert, console.log()

// 입력 : 없음

// 출력 : 10

// 11

// 12

// let a = 10;

// alert(a++);

// 2) 공식 : price = 1500,

// num = 3,

// pay = 10000

// 잔돈계산 공식 = pay - price * num;

// 출력 : - 개당 가격 : 1500원

// - 구매 개수 : 3개

// - 지불 금액 : 10000

// - 거스름돈은 5500원입니다

let price = 1500; // 개당 가격

let num = 3; // 구매 개수

let pay = 10000; // 지불 금액

let change = pay - price * num //거스름돈

// alert("개당 가격 : " + price + "원");

// alert("구매 개수 : " + num + "개");

// alert("지불 금액 : " + pay + "원");

// alert("거스름돈은 " + change + "원");

// 출력방법 : console.log

// TODO: 문자열 붙이기 : 문자열 + 숫자 => 문자열 + 문자열 변경됨

console.log("- 개당 가격 : " + price + "원");

console.log("- 구매 개수 : " + num + "개");

console.log("- 개당 가격 : " + pay + "원");

console.log("- 거스름돈은 " + price + "원입니다");

// 3) 입력함수 : prompt() 이용해서 입력받기

// 아래 코딩을 완성하세요

// 입력 1 : a

// 입력 2 : b

// 출력 : b a

// 사용법 : let 변수명 = prompt("문자열"); // 문자열 (입력대화상자의 문구)

// 입력받은 글자가 변수명에 저장됨

// let char1 = prompt("1개의 문자가 입력된다."); // a

// let char2 = prompt("1개의 문자가 입력된다."); // b

// // 결과 출력 : char + " " + char1

// alert(char2 + " " + char1);

// 4) 입력받은 정수를 줄을 바꿔 3번 출력한다.

// 단, 줄바꿈 특수문자(\n)를 사용해서 한번에 출력하세요

// (alert, console.log 1번만 사용)

// 힌트 : "\n"(줄바꿈), 문자열 붙이기 (+)

// 입력 : 3

// 출력 : 3

// 3

// let a = prompt("정수를 입력해 주세요")

// alert(a + "\n" + a + "\n" + a)

// 5) 단어 2개가 입력된다.

// 2개를 거꾸로 붙여서 출력하세요

// 입력 1 : hello

// 입력 2 : world

// 출력 : worldhello

// let char1 = prompt("단어를 입력하세요"); // hello

// let char2 = prompt("단어를 입력하세요"); // world

// 결과 출력

// alert(char2+char1);

// 6) 입력 1: hello

// 입력 2 : world

// 출력 : hello

// world

// let a = prompt("입력 1");

// let b = prompt("입력 2");

// alert(a + "\n" + b);

// 7) 두 정수의 합을 출력하세요

// 입력 1: 123

// 입력 2: -123

// 출력 : 0

// 힌트 : Number(prompt("문자열")) (문자열 -> 숫자)

let a = Number(prompt("입력 1"))

let b = Number(prompt("입력 2"))

alert(a+b);

if 조건문

html

<!DOCTYPE html>

<head>

<title>Document</title>

</head>

<body>

</body>

</html>

// 조건문 : if문 (90%)

// 1) 사용법 : 조건식이 참(true)이면 명령문이 실행됨

// if(조건식) {

// 명령문(문장);

// }

// 예제) 19살 이상이면 성인입니다. 를 출력하세요

// let age = 20; // 변수 초기화

// // age(20) >= 19 : 조건식을 판단 (참? 거짓?)

// if(age >= 19) {

// // 결과 출력

// alert("성인입니다.");

// }

// 2) 조건문 : if/else 문

// 1) 사용법 : 조건식이 참이면 실행문이 실행되고,

// 거짓이면 실행문2가 실행됨

// if(조건식) {

// 실행문(문장);

// } else {

// 실행문2(문장);

// }

// 예제 : 19살 이상이면 성인입니다. 를 출력하고,

// 19살 미만이면 미성년입니다.를 출력하세요

// let age = 20; // 변수 초기값

// if(age >= 19) {

// // 결과 출력

// alert("성인입니다.");

// } else {

// alert("미성년입니다");

// }

// 3) 조건문 : if/ else if/else 문

// 사용법 : 조건식을 판단하여 참이면 실행문이 실행되고,

// 거짓이면 조건식2를 판단하여 참이면 실행문2가 실행되고,

// 모든 조건식이 거짓이면 실행문3이 실행됨

// if(조건식) {

// 실행문(문장);

// } else if(조건식2) {

// 실행문2(문장);

// } else {

// 실행문3(문장);

// }

// 예제 ) 19살 이상이면 성인입니다.를 출력하고,

// 18살 이면 청소년입니다. 를 출력하고,

// 17살 이하이면 미성년입니다. 를 출력하세요

// 위의 코딩하세요

// 출력 : 청소년입니다.

// let age = 18; // 변수 초기값

// if (age >= 19) {

// alert("성인입니다.")

// } else if(age == 18) {

// alert("청소년입니다.")

// } else {

// alert("미성년입니다.")

// }

// 연습) x = 10이고, y = 20 값이 있습니다.

// x 와 y 같으면 "x와 y가 같다" 출력하고,

// x < y 이면 "x는 y보다 작다" 출력하고,

// x > y 이면 "x는 y보다 크다" 출력하세요

// let x =10;

// let y =20;

// if(x==y){

// alert("x와 y가 같다");

// } else if(x < y){

// alert("x는 y보다 작다");

// } else {

// alert("x는 y보다 크다");

// }

// 연습2) 10보다 작은 수가 입력되면 small를 출력하고,

// 10이상이면 아무것도 출력하지 마세요

// 입력 : 5

// 출력 : small

let a = Number(prompt("1개의 정수를 입력하세요"));

if (a < 10){

alert("small");

}

저작자표시

'HTML > JavaScript' 카테고리의 다른 글

[JavaScript] children, parent, siblings, before after, remove, classList, forbidden, char num, date (0)	2023.08.23
[JavaScript] DOM querySelector, onclick, mouseover, setInterval, addEventListener (0)	2023.08.22
[JavaScript] 함수, 객체 (0)	2023.08.21
[JavaScript] 배열, 배열함수, 내장함수, 반복문 (if switch, for, for while, array,document) (0)	2023.08.18
[JavaScript] for문, 반복문 예제 (0)	2023.08.17

alert console.log

변수, 상수, 산술 연산자

자료형, 비교 연산자, 논리 연산자, 대입 연산자

exam

if 조건문

'HTML > JavaScript' 카테고리의 다른 글

티스토리툴바