728x90
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!--
body태그는 가장 아래쪽에 <script>태그로 선언
=> 필수는 X페이지의 속도를 위해서
-->
<script>
// 1. 출력
// 1-1) console창에 출력하기
// 데이터를 전송할때 올바른 값인지 검중 >> 개발지를 위한 출력창
console.log('hello world!')
console.error('error!')
console.warn('warn!')
// 1-2) 팝업창에 출력하기
// 화면상에 사용자에게 안내 팝업을 띄울 때 사용 > 사용자를 위한 출력창
// alert('pop!')
// 1-3) body 태그 내에 문서(html)로 출력
document.write('배고프다...')
// 그 전에 쓴문서들이 사라지고 document.write()가 나온다
// 2. 입력
// 2-1) 입력창을 통한 입력문 : prompt("출력질문","기본값")
// 리턴 타입 => String
let dinner = prompt('어제 저녁에 뭐드셨나요?','샤브샤브')
console.log(dinner)
// 2-2) 출력 질문 : confirm()
// 리턴타입 => Boolean
// 확인 => true / 취소 => false
// - 조건문과 함께 사용된다
let dinner2 = confirm('어제 저녁 드셨나요?')
console.log(dinner2)
</script>
</body>
</html>결과 화면
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
// 변수 : 데이터를 담는 공간
// 1) var
// 재선언이 가능, 재할당도 가능
// 오픈되어있는 코드 사용(오픈소스)
// 다른사람의 문서를 읽을때
var num = 3 // 선언
var num = 5
num = 6 // 할당
// 2) let
// 재선언이 불가능, 재할당은 가능
let num2 = 1
// let num2 =3
num2 = 5
console.log(num2)
// 3) const
// 재선언과 재할당이 모두 불가능
// 상수를 보안할때
// 제작할때 사용, api key값
const num3 = 1
// const num3 = 3
// num3 = 20
// 면접 준비를 위한 팁
// 1. var과 let의 차이점
// 2. 호이스팅 개념 :
// 자바스크립트 및 액션스크립트 코드를 인터프리터가 로드할 때,
// 변수의 정의가 그 범위에 따라 선언과 할당으로 분리되어
// 변수의 선언을 항상 컨텍스트 내의 최상위로 끌어올리는 것을 의미
//참고 https://velog.io/@bathingape/JavaScript-var-let-const-%EC%B0%A8%EC%9D%B4%EC%A0%90
console.log(num3)
</script>
</body>
</html>
- 출력
1)콘솔창에 console.log()
2) 팝업창 alert()
3) 문서창에 출력 document.write()
-- 입력
1) prompt()
2) confirm()
-- 변수
재선언 재할당
var O O
let X O
const X X
실습 코드
<script>
// (1) 사용자에게 이름을 입력 받는다.
// (2) 입력받은 이름을 어떤 공간에 담아준다.
// (3) 음료 메뉴를 입력받는다.
// (4) 음료 메뉴를 어떤 공간안에 담아준다
// (5) 그 공간에 담은 데이터들을 콘솔창에 출력
// 결과창 : 000이 주문하신 음료는 000입니다☕
let name = prompt('이름을 입력하세요','박동명')
let menu = prompt('음료메뉴를 입력하세요','바닐라라떼')
console.log(name+'님이 주문하신 음료는 '+menu+'입니다☕')
console.log(3+'가나다') // +는 데이터타입이 String형식
console.log(3,'가나다') // ,는 데이터타입이 별개로 나온다
</script>결과 화면
● 연산자
1. 삼항연산자
(조건) ? true일 때 실행문 : false일때 실행문
ex) num > 10 ? console.log('10보다 큰수') : console.log('10보다 작은수')
2. ' / ' 나누기 연산자
-- java 100/3 ==> 33
-- js 100/3 ==> 33.33333333
js에서는 나누기 연산자가 실제 나누기 값을 반환
3. 비교연산자
-- java 10 == '10' false
-- js 10=='10' true, 10 === '10' false
' == ' 비교연산자 : 안에 있는 값만 비교
' === ' 일치연산자 : 값과 자료형 모두 비교
-- java 문자비교 : equals
-- js 문자비교 : == ex) a == '가나다'
수업 코드
<script>
// 1. 삼항연산자
// (조건) ? true일 때 실행문 : false일때 실행문
// ex) num > 10 ? console.log('10보다 큰수') : console.log('10보다 작은수')
let a = 10, b = 20
//let a,b = 10,20 (X)
let res = a>b ? 'a가 더 크다' : 'b가 더 크다'
console.log(res)
// 2. 나누기 연산자
// / : 실제 나누기 값
// % : 나머지
console.log('/ : ',100/3)
console.log('% : ',100%3)
// 3. 비교연산자
//' == ' 비교연산자 : 안에 있는 값만 비교
//' === ' 일치연산자 : 값과 자료형 모두 비교
console.log(10 == '10') // true
console.log(10 === '10') // false
</script>
실행 코드
<script>
// 연산자 실습
let num = 312
// case1 나머지 연산자
console.log('백의 자리 이하 버린 결과>> ',num-(num%100))
// case2 형변환
console.log(parseInt(num/100)*100)
let number = '3.14'
console.log('숫자로', Number(number))
console.log('정수로', parseInt(number))
// +) 문자로 => String결과 화면
728x90
'Study > JavaScript' 카테고리의 다른 글
| JavaScript기초 4일차 <JQuery, Ajax> (0) | 2022.10.13 |
|---|---|
| JavaScript기초 3일차 <함수, 선언방식, DOM> (0) | 2022.10.13 |
| JavaScript기초 3일차 <함수, 선언방식, DOM> (0) | 2022.10.12 |
| JavaScript기초 2일차 <배열, 객체, 조건문> (1) | 2022.10.11 |