JavaScript

박산해·2025년 5월 8일

Java Script 첫수업

기초

자바스크립트 문법 작성법
body 태그 가장 하단에 작성
script 태그 안에 작성

예시

<body>
	<script>
    	들어갈 내용
    <script>
<body>

Ex01

1. 출력

1) 문서에 출력

웹페이지 출력
document.write('문서에 출력!');

2) consonle창 출력

console.log('console에 출력!');
vs코드에서 log만 쳐도 앞에 console 나옴

3) 팝업창에 출력

alert('팝업창에 출력!');

2. 입력

1) 확인 질문 : confirm

확인(true) or 취소(false)
리턴타입 : boolean
var late = confirm('오늘 지각 안했나요?');
conlsole.log(late);

2) 입력 확인문 : prompt

사용자가 입력 가능
리턴타입 : string
prompt('질문(필수)', 응답의 기본값(선택));
var menu = prompt('오늘 점심메뉴는 무엇인가요?', '맛집');
console.log(menu);

EX02

1. 변수

변수란?

데이터를 담는 공간

호이스팅 현상

"변수가 선언되기 전에 사용하는걸 허용하는 특성" 이라고 생각하면됨
let과 const는 더 엄격하게 동작해서, 선언 전에 사용하려면 에러가 발생

1) var (요즘은 잘 안씀)

코드가 실행되면 메모리에 변수, 함수를 미리 저장
var color = 'balck'; (선언)
var color = 'pink'; (재선언 가능)
color = 'yellow'; (재할당 가능)
console.log('var : ', color);

2) let (요즘은 var 말고 let을 씀)

var 과 같이 코드가 실행되면 메모리에 변수, 함수를 미리 저장
var 과 다른점은 재선언이 불가능함.
재할당은 가능
let color = 'balck'; (선언)
let color = 'pink'; (재선언 불가능)
color = 'yellow';
console.log('let : ', color);

3) const : 상수

변하면 안되는 값 ex) 주민등록번호, 여권번호, 혈액형 등
누군가 접근해서 재선언, 재할당 하면 안되는 값
const color = 'black'; (선언)
const color = 'pink'; (재선언 불가능)
color = 'yellow'; (재할당 불가능)
console.log('const : ', color); (선언)

Ex 03

변수실습!

1) 사용자한테 이름을 입력받기 (prompt 사용)
2) console창에 출력 ' console.log('let : ', name); '

어서오세요!
000님, 환영합니다!
3) 웹페이지에 출력 (document.write 사용)
안녕 000님 환영합니다!

let name = prompt('너의 이름은?');
console.log('어서오세요!');
console.log(name, '님, 환영합니다!');
document.write('안녕 ',name,'님 환영합니다!');

tip) 문자 + 변수 이어서 쓰는 방법

1) 콤마( , )
2) 더하기( + )
3) 문자포매팅 백틱( ~ ) 쉬프트 안누르고 숫자 1번 왼쪽 버튼
document.write(백틱
안녕 $ {name}님 환영합니다.백틱);

백틱 쓰는법 : ${변수명}

Ex 04

1. 자료형

Number : 정수, 실수 등 산술 연산이 가능한 자료형

let num1 = 1.234;
let num2 = 5;
console.log('num1 : ', num1); => num1 : 1.234 출력됨
console.log('num2 : ', num2); => num2 : 5 출력됨
String : 문자열로 이루어진 자료형

let str1 = '안녕하세요?';
let str2 = '반갑습니다!';
console.log('str1 : ', str1); => 안녕하세요? 라고 출력됨
console.log('str2 : ', str2); => 반갑습니다! 라고 출력됨
Boolean : 참/거짓으로 표현되는 논리 형태의 자료형

let eat = true;
console.log('아침밥 먹었나요?', eat) => 아침밥 먹었나요? true 라고 출력됨
undefined : 값이 할당된 적이 없거나 존재하지 않는 속성일 때의 유형

let value1;
console.log(value1); => undefined 로 출력됨
null : 아무런 값을 나타내지 않을 때의 자료형 의도적으로 비어있는 상태

let value2 = null;
console.log(value2); => null 로 출력됨
```
 
```

2. 형변환

1) 문자를 숫자로 형변환 시킬수 있음

let number = '3.14';
console.log(number);

정수화 parseInt()

console.log('int : ', parseInt(number));
int : 3 으로 출력됨 (소숫점 사라짐)
실수화 parseFloat

console.log('float : ', parseFloat(number));
float : 3.14 로 출력됨
숫자화 Number()

console.log('number : ', Number(number));
number : 3.14 로 출력됨

2) 숫자를 문자로 형변환

let number2 = 100;
console.log(number2); ⇨ 100 으로 출력
console.log(number2 + ''); ⇨ 100 으로 출력
console.log(number2+'10'); ⇨ 10010 으로 출력
console.log(String(number2)); ⇨ 문자 100 으로 출력
console.log(number2.toString(2)); ⇨ 1100100 으로 출력 (2진법)