국비교육 50일차 Javascript: output, 변수, 타입
1. output
1) 버튼을 클릭하면 함수가 실행
<p id="demo"></p>
<button type="button" onclick="myFunction()">클릭하세요</button>
<script type="text/javascript">
function myFunction() {
document.getElementById("demo").innerHTML = 5+6;
// document는 이 문서를 말한다.
// 자바 스크립트에서 demo라는 element를 잡는 것
}
</script>2) write
<p id="demo"></p>
<button type="button" onclick="myFunction()">클릭하세요</button>
<script type="text/javascript">
function myFunction() {
document.write(5+6);
// 문서에 5+6이라는 결과물을 덮어 씌우기 때문에 앞서 적어놓은 것들은 다 날라간다.
// document.write() 를 실행하면 모든 HTML 내용물이 삭제가 되어지고
// write() 속에 있는 결과를 HTML 문서로 출력해준다.
}
</script>3) alert
<button type="button" onclick="myFunction()">클릭하세요</button>
<script type="text/javascript">
function myFunction() {
window.alert(5+6);
alert(5+6);
// 일반적으로 window는 생략하고 alert(5+6) 과 같이 사용한다.
}
</script>4) window.onload
- html은 위에서부터 아래로 순차대로 실행되기 때문에 script를 head 태그에 적어준다면 body 태그에서 선언되어진 태그 등을 가져올 수 없어서 오류가 발생한다. 이때 head 에서 script를 선언할 때 쓰는 게 window.onload 이다.
<head>
<script type="text/javascript">
window.onload = function() {
// 웹브라우저의 페이지 로딩이 끝나면(body태그까지 끝나게 되면)
// 자동적으로 발생되어지는 함수이다.
document.getElementById("h1").innerHTML = "h1 태그 입니다.";
document.getElementById("p").innerHTML = "p 태그 입니다.";
}
</script>
</head>
<body>
<h1 id="h1"></h1>
<p id="p"></p>
</body>5) console log
<p id="demo"></p>
<button type="button" onclick="myFunction()">클릭하세요</button>
<script type="text/javascript">
function myFunction() {
console.log(5+6);
// 크롬 f12 콘솔창에서 console.log 확인 가능
// 크롬브라우저에서 키보드 f12 를 눌러서
// 개발자 도구의 콘솔탭에서 결과물을 확인할 수 있다.
}
</script>2. variable
1) var
- var는 java처럼 변수의 타입과 상관없이 전부 var를 사용한다.
- 자바스크립트는 데이터 타입이 정해져 있지 않고, 입력되어지는 값에 따라서 정해진다.
- var는 이미 선언되어진 변수명을 다시 선언하여도 오류가 아니다.
- var로 선언되어진 변수는 재사용이 가능하며, 선언 후에 값을 넣어줄 수도 있다.
- var는 block{} 에 구애받지 않는다. block안에서 선언되어진 변수가 block밖에서도 적용된다.
2) const
- const는 같은 변수명을 사용할 수 없다.
- 이미 선언된 변수에 똑같은 값을 또 넣는 것도 안된다.
- const 변수는 선언 후에 값을 넣어줄 수 없다.
- const는 { } block속에 선언될 경우 { } 내에서만 사용가능한 것이며, 자바의 지역변수와 유사하다.
- { } 을 벗어나는 순간 자동적으로 소멸되어지며, 따라서 { } 내에서는 중복된 변수명으로도 선언이 가능하다.
3) let
- let은 이미 선언되어진 변수명과 같은 변수명을 사용할 수 없다.
- 하지만 let은 이미 값이 할당된 이후에 또 값을 할당하는 것은 가능하다.
- { } block속에 선언된 let 은 { } 내에서만 사용가능한 것이며, 자바의 지역변수와 유사하다.
- { } 을 벗어나는 순간 자동적으로 소멸되어진다.
3. type
-
웹에서 input으로 받아오는 모든 값은 기본적으로 string type이다.
-
자바스크립트에서 타입에는 number, string, boolean, object, function 등이 있다.
4. 객체와 함수
1) 자바스크립트에서 객체 사용법1
const person1 = {}; // 빈 객체 선언
person1.userid = "leess"; // 객체에 userid(속성,필드)를 직접 추가한다.
person1["name"] = "이순신"; // 대괄호도 가능하다.
document.getElementById("val14").innerHTML = person1.userid;
// 객체명.속성명; 은 값을 보여준다.2) 자바스크립트에서 객체 사용법2
const person2 = {userid:"eomjh"} // 직접 객체에 넣어줄 수 있다. 3) 함수 사용법
// 1. 함수 표현식
// 함수 안에서 함수를 변수에 넣어줄 수 있다.
const func_sum = function(num1,num2) {
// 파라미터에는 그냥 변수명만 넣으면 된다.
num1 = Number(num1);
// default가 string 타입이기 때문에 number타입으로 변경해서 다시 넣어준다.
num2 = Number(num2);
return num1+num2;
};
// 함수를 불러오고 파라미터(num1,num2)에 변수를 넣어준다.
document.getElementById("result").innerHTML = func_sum(val1, val2);
// 2. 함수 선언식
// 함수 밖에서 선언하기
function func_minus(num1, num2) {
return Number(num1) - Number(num2);
};
// 3. 화살표 함수
const func_multiply = (num1, num2) => {
// 소괄호를 쓰는 경우는 함수밖에 없어서 function을 빼버리고 =>를 적어준다.
num1 = Number(num1);
num2 = Number(num2);
return `${num1*num2}`;
// 앞뒤에 백틱 ``을 쓰고 백틱 속에 ${} 를 넣고 그 안쪽에 변수를 넣어준다.
};5. 명령어
- value : input으로 입력한 값을 가져오기
- typeof(변수명) : 변수의 타입 알아보기
- document.getElementById("변수명").innerHTML : innerHTML은 태그를 포함해서 몽땅 다 가져오거나 값을 넣어줄 때 사용한다.
- intertext는 태그는 제외하고 글자만 가져온다.
- parseInt, parseFloat, Number : 형변환, number는 정수는 정수로 실수는 실수로 변환
국비 교육 시작한 이후로 TIL을 하루도 빼먹은 적이 없었는데, 미니프로젝트 시작하니까 도저히 엄두가 안났다.. 허허... 주말에는 꼭 프로젝트 회고록도 적어야한다.
이런 저런 기록들