[국비지원무료교육] 자바스크립트 무작정 따라하기 (Iot 과정, 스마트인재개발원)
자바 스크립트 처음 배운날..
자바스크립트(JavaScript)는 객체(object) 기반의 스크립트 언어이다.
웹의 동작을 구현할 수 있다.
목차
1. 무작정 따라하기
<!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>
<a href="#">자바스크립트 무작정 따라하기!!!!!!!!!!!!</a>
<br><br>
<button id="btn1">디자인바꾸기 짠!</button>  <button id="btn2">되돌리기 짠!</button>
<br>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JS</li>
</ul>
<h1>오늘은 1/26</h1>
<p>즐거운 JavaScript 수업입니닷!</p>
</body>
</html>
선생님이 주신 실습코드이다!
실행하면 이렇게 나온다.
a태그로 "#" 링크로 연결 해놓았다. 클릭 시 아무일도 일어나지않는다.
button 태그를 이용해서 버튼 2개 생성하고 아이디를 붙여놓았다.
<script>
document.querySelector("#btn1").addEventListener("click", function(){
document.querySelector("body").style.backgroundColor = "black";
document.querySelector("body").style.color="white";
})
document.querySelector("#btn2").addEventListener("click", function(){
document.querySelector("body").style.backgroundColor = "white";
document.querySelector("body").style.color="black";
})
</script>body태그 안쪽에 <script>태그를 열고 닫아서 이렇게 작성했다.
일단 아무것도 모르고 따라 썼다..
document - 현재 html문서, body 안쪽이라고 생각하면 편하다고 설명해주셨다.
querySelector() - 선택자를 지정하는 것 같다.
addEventListener() - 선택한 영역에 이벤트 발생할때까지 기다리다가 발생하면 실행한다.
function(){} - 함수이다
작성하고 버튼을 눌러보면,
디자인바꾸기 짠!
되돌리기 짠!
화면이 바뀌는 것을 확인할 수 있다.
전체코드
<!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>
<a href="#">자바스크립트 무작정 따라하기!!!!!!!!!!!!</a>
<br><br>
<button id="btn1">디자인바꾸기 짠!</button>  <button id="btn2">되돌리기 짠!</button>
<br>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JS</li>
</ul>
<h1>오늘은 1/26</h1>
<p>즐거운 JavaScript 수업입니닷!</p>
<script>
documen.querySelector("#btn1").addEventListener("click", function(){
document.querySelector("body").style.backgroundColor = "black";
document.querySelector("body").style.color="white";
})
document.querySelector("#btn2").addEventListener("click", function(){
document.querySelector("body").style.backgroundColor = "white";
document.querySelector("body").style.color="black";
})
</script>
</body>
</html>
자바 스크립트는 인터프리터(Interpreter) 언어 이다.
컴파일 (compile) - 파일 전체를 읽어 코드의 의미를 해석하고 기계어로 변환하는 것
인터프리팅 (interpreting) - 코드를 한줄 한줄 읽어 한줄 씩 bytecode로 변환하는 과정을 거침
그래서 코드를 작성하는 동안에는 어떤 오류가 났는지 확인 할 수 없다.
잘못되어도 실행이 된다..
스크립트를 작성했는데 반응이없다면
F12 -> console 창 확인
무엇이 잘못 작성되었는지 확인 할 수가 있다.
documen.querySelector("#btn1").addEventListener("click", function(){
document에서 t를 빼먹었을때 Issue
2. 입력문
document.write( )
document : 현재 HTML문서(body 부분) 주소창 밑으로 보이는 부분
<script>
document.write("<strong>아자아자 화이팅!!</strong><br>으라차차!!")
</script>( ) : " " 또는 ' ' 안 쪽에 보이고 싶은 html언어를 작성하면 화면에 그대로 출력이 된다!
자바 스크립트에서는 " " 가 쓰이는 자리에는 ' ' 도 사용할 수 있다.
편한 방식으로 사용하라고 하셨다.
위 코드는 이렇게 표시된다.
console.log( )
콘솔을 통해 출력하는 방법은 여러가지가 있다.
<script>
console.log("log")
console.info("info")
console.warn("warn")
console.error("error")
</script>이렇게 코드를 작성한다면..
f12 -> console 탭에서 이렇게 표시된다.
크롬에서는 log, info가 보이기에 구분이 없지만
브라우저에 따라 다르게 나올 수 있다고 한다.
console창에 출력하는 것은 일반 사용자들에게 보이는 부분은 아니다.
개발 중에 사용하거나 서버랑 통신이 잘되는지 확인할 때 쓰인다고 하셨다.
alert( )
알림 팝업창을 띄운다.
원래는 Window.alert( ) 인데
자바에서 object클래스가 최상위 클래스인 것처럼
자바 스크립트에서는 Window가 최상위객체라서 생략 가능하다고 하셨다.
<script>
alert("제쿵")
</script>
이렇게 표시된다.
3. 출력문
prompt( )
prompt("출력내용","입력내용")으로 쓰인다.
두번째 인자 입력내용은 옵션이다.
<script>
var lunch = prompt("오늘 기분은 어때??","좋아!!")
console.log(lunch)
</script>
입력내용까지 설정하면 기본적으로 문자열이 들어가있다.
리턴타입은 String,
입력받은 문자열을 반환한다.
confirm( )
confirm("출력문작성")
리턴타입 boolean
<script>
var choice = confirm("올 때 메로나")
console.log(choice)
</script>
취소를 눌렀다.
확인을 누른 경우 출력값은 true가 된다.
prompt와 confirm의 리턴값을
var 변수명 에 받아왔다.
여기서 var란..
변수에서 설명해주셨다.
4. 변수
앞서 배운 Java에서는 자료형을 컴파일 시 결정했다.
Java는 정적 타입의 언어이다.
자료형을 컴파일 시 결정하고
자료형에 맞지 않은 값이 들어있다면 컴파일 에러가 발생한다.
int age = "김철수";이경우 컴파일 에러가 발생한다.
반면에
Javascript는 동적 타입의 언어이다.
자료형을 런타임 시 결정하고
<script>
var age = "20"
</script>실행 도중 변수에 예상치 못한 타입의 값이
들어오면 Type Error가 발생한다.
변수 선언에는 3가지 방법
var, let, const 가 있다.
var
변수 재선언 가능
변수 재할당 가능
<script>
var aValue = 1
var aValue = 2;
console.log(aValue)
</script>
같은 이름으로 재선언, 재할당이 가능하다.
let
변수 재선언 불가
변수 재할당 가능
<script>
let bValue = 1
let bValue = 2
console.log(bValue)
</script>
재선언하면 에러가 난다. 콘솔창에 확인가능하다.
이미 선언되어있다고 한다 -> 변수 재선언 불가
const
변수 재선언 불가
변수 재할당 불가
<script>
const cValue = 1
const cValue = 2
console.log(cValue)
</script>
실습문제!
문제를 하나 내주셨다.
1. 이름 입력받기
2. 이름으로 문구 출력하기
<script>
var name = prompt("이름을 입력하세요.")
console.log("어서오세요!\n"+name+"님, 환영합니다.")
document.write("어서오세요!<br>"+name+"님, 환영합니다.")
</script>
콘솔창에도 마찬가지로 출력된다.
5. 자료형
number : 정수, 실수 등 산술 연산이 가능한 자료형
string : 문자열로 이루어진 자료형
boolean : 참/거짓으로 표현되는 논리 형태의 자료형
undefined : 값이 할당된 적이 없거나 존재하지 않는 속성일 때의 유형
null : 아무런 값을 나타내지 않을 때의 자료형
undefined과 null 자료형을 자세히 설명해주셨다.
예를 들어
var aa 라는 공간만 만들어주고 값이 할당되지 않았을 때
undefined 값을 가진다.
메모리 공간을 싹 비우고 싶다면
var a = nullnull을 이용하면된다.
타입확인하려면 typeof 연산자를 사용한다.
console.log(typeof 22)변수의 데이터 타입을 문자열로 반환한다.
console.log(typeof undefined) -> undefined
console.log(typeof null) -> object
6. 연산자
동등연산자( == )와 일치연산자( === )가 있다.
동등연산자( == )
자동으로 자료형 변환 후 비교한다.
10 == '10' 의 경우 자료형이 다르지만
자동으로 자료형은 변환 후 비교하기 때문에 true 값을 반환한다.
일치연산자는( === )
타입 변환을 하지 않고 정확히 값을 자료형을 비교한다.
10 === '10' 의 경우 자료형이 다르기 때문에 false 값을 반환한다.
피연산자가 boolean 일 경우
true는 1로
false는 0으로 변환한다.
1 == true -> true
null == undefined -> true
실습문제를 내주셨다.
변수 값이 456이라면 400이 되고
111이라면 100이 되는 코드 작성
<script>
let num = 312
console.log(num-(num%100))
console.log(parseInt(num/100)*100)
</script>console.log(num-(num%100))
312 - (321%100) = 300
원래값에서 100으로 나눈 나머지를 빼준다.
console.log(parseInt(num/100)*100)
형변환을 이용하는 방법이 있다.
parseInt( )는 정수값을 반환하기 때문에
소수점 아래는 모두 버린다.
parseInt()가 없다면 출력값은 312가 된다.
parseInt(num/100) = 3
num/100 = 3.12
7.형변환
이 코드를 실행시키면..
<script>
var age = prompt("나이 입력해주세요")
alert("20년뒤의 나이는 "+(age+20))
</script>
나이가 정확히 출력되지않는다.
prompt( ) 함수가 문자열을 반환하기 때문이다.
형변환이 필요하다.
<script>
// var age = prompt("나이 입력해주세요")
// alert("20년뒤의 나이는 "+(age+20))
var age = Number(prompt("나이 입력해주세요"))
alert("20년뒤의 나이는 "+((age)+20))
var age = parseInt(prompt("나이 입력해주세요"))
alert("20년뒤의 나이는 "+(age+20))
</script>
parseInt( )와 Number( )를 사용할 수 있는데
두 경우 모두 정상적으로 출력된다.
형변환 parseInt( )와 Number( )
모두 인자로 문자열을 받으면 숫자를 반환해준다.
위 코드에선 문제가 없었지만..
두가지 형변환에는 차이점이 있다.
parsInt( )
<script>
var num1 = parseInt('500명');
var num2 = parseInt('명 : 500');
console.log(num1)
console.log(num2)
</script>
이렇게 출력된다.
숫자의 시작과 끝부분을 형변환하여 num1에 넣는다.
그 이후의 다른 자료형은 포함하지 않는다.
단, 숫자로 시작하지 않으면 뒤에 숫자가 있어도 NaN이 저장된다.
Number( )
<script>
var num1 = Number('500명');
var num2 = Number('명 : 500');
console.log(num1)
console.log(num2)
</script>
형변환 Number( )은 문자열에 숫자 이외의 자료형이 있으면
NaN을 반환한다.
차이점을 알아두면 좋을 것 같다.
parseFloat( )
문자열에서 숫자를 실수로 반환한다.
toString()
<script>
var num1 = (5).toString();
var num2 = (5).toString(2);
console.log(num1)
console.log(num2)
</script>
숫자를 문자열로 반환한다.
인자 값을 넣어주면 해당 값에 해당하는 진수로 반환한다.
5 = 101(2)
8. 조건문
조건문은 자바에서 사용하던 것처럼 사용할 수 있다.
<script>
var j = Number(prompt("java 점수"))
var p = Number(prompt("python 점수"))
var r = Number(prompt("R 점수"))
var avg = (j+p+r)/3
var rank = null;
if(avg>=90) rank = 'A'
else if(avg>=80) rank = 'B'
else if(avg>=70) rank = 'C'
else rank = 'F'
console.log("당신의 평균은 "+ avg.toFixed(2) + "이고 학점은 " + rank +"입니다.")
</script>.toFixed(값)은 소수 (값)번째 짜리까지 출력한다는 말이다.
스마트인재개발원
4차산업혁명시대를 선도하는 빅데이터, 인공지능, 사물인터넷 전문 '0원' 취업연계교육기관
www.smhrd.or.kr