이번 주 안에 코테를 응시해야 하는데, 특이하게 알고리즘과 SQL 뿐만 아니라, html, css, js까지도 묻는 코테이다.
이참에 미뤄왔던 자바스크립트 기초 개념에 대해 정리할 기회가 생겼다.
컴팩트하게 정리하고 싶어서 '생활코딩' 강의를 들었다.
믿고 보는 MDN 공식 문서 그리고 쉽게 따라할 수 있는 w3c school도 참고하였다.
JavaScript란
<h1>Javascript</h1>
<script>
document.write(1+1);
</script>
<h1>html</h1>
1+1
자바스크립트는 숫자 1+1을 더한 결과를 2로 만들어 화면에 출력 ➡️ 동적
⚠️but, html은 정적
-
웹 페이지에 글씨를 출력하기 위해
document.write()를 사용 -
웹 브라우저에게 자바스크립트 코드라는 것을 알려주기 위해
<script>태그 사용
이벤트
웹 브라우저 위에서 일어나는 일들을 사건, event라고 한다.
<input type="button" value="hi" onclick="alert('hi')">
-
onclick이라는 속성의 값으로는 반드시 JavaScript가 와야 함. -
onclick속성 값은 웹 브라우저가 기억하고 있다가 onclick 속성이 위취하고 있는 태그에 사용자가 클릭했을 때 동작
<input type="text" onchange="alert('changed')">
onchange: input 태그의 포커스를 벗어났을때 (즉, 입력이 끝났을때) 발생하는 이벤트
<input type="text" onkeydown="alert('key down')">
onkeydown: 사용자가 키보드 키를 눌렀을 때 발생하는 이벤트
함수
<body>
<h1>function</h1>
<ul>
<script>
function two() {
document.write('<li>2-1</li>');
document.write('<li>2-2</li>');
}
document.write('<li>1</li>');
two();
document.write('<li>3</li>')
two();
</script>
</ul>
</body>
Parameter & Argument
<script>
function onePlusOne(){
document.write(1+1+'<br>');
}
onePlusOne()
function sum(left, right){
document.write(left+right+'<br>');
}
sum(2,3);
sum(4,5);
</script>
sum(2,3)에서 함수로 전달하는 2와 3은 인자, Argument라고 부르며,
값을 받아서 함수 안으로 매개해주는 left와 right는 매개변수, Parameter이다.
Return
: 함수 내부에서 함수 외부로 데이터를 전달할 때 사용하는 값
<script>
function sum2(left, right){
return left+right;
}
document.write(sum2(2,3)+'<br>');
document.write('<div style="color:red">'+sum2(2,3)+'</div>')
</script>
➡️ 위 sum2()라는 함수는 left, right 매개 변수를 통해 들어간 값을 return을 통해 출력함으로써 다양한 용도로 활용할 수 있다.
썸네일 메이커 항상 감사합니다 ♥️
기회를 잡는 사람이 되도록!