2023.12.27 2번째 포스팅
- 학습 목표🔥
Javascript 기본 문법 이해와 활용
어느덧, HTML에 이어서 Javascript 공부까지 마치게 되었다. 아무래도 다른 프로그래밍 언어들을 많이 접하고 공부해 본 것이 Javascript를 빠르게 파악하고 학습해나가는 데에 도움이 된 것 같다.
이번 포스팅에서는 Javascript의 문법과 활용에 대하여 다루려고 한다.다른 언어와 동일하거나 비슷한 문법은 최대한 제외하고, 자바스크립트의 유니크한 문법에 집중하여 작성하도록 하겠다.
언어를 처음 공부하는 사람이라면 아래 링크를 참고하길 바람.
💻생활코딩 Javascript편
먼저, 기본적으로 자바스크립트 문법의 시작은 <script> 태그에서 시작한다.
다시 말해, <script> 태그가 동작 구현을 선언하는 것이다.
html언어에서 1+1을 작성하면 1+1이 웹 페이지에 나온다.
그러나, Javascript 언어에서 1+1을 작성하면 2가 웹 페이지에 나온다.
html 언어는 정적, Javascript 언어는 동적 언어인 것이다.
document.write(1+1); //웹 페이지에 2가 출력된다.Javascript의 중요한 역할 중 하나는 Event 처리에 있다
아래 코드를 살펴보자.
<input type = "button" value="h1" onclick = "alert('h1')">
<input type = "text" ondblclick="alert('Changed')">
<input type="text" onkeydown="alert('key down!')">버튼과 텍스트상자를 만들고 각각의 input에 대한 이벤트 처리를 하는 모습이다.
alrect는 메시지 창을 띄우는 함수이다.
div VS span 비교
div와 span 태그는 어떠한 기능도 의미도 없다.
단지, jsc나 css로 어떠한 정보를 제어하고 싶을 때 div태그로 감싼다.
div 태그는 자동으로 줄바꿈이 되는 태그이다.
자동으로 줄바꿈이 되지않는 태그가 바로 span 태그이다.
알아두면 좋은 CSS😊
위에서 설명했듯이, <script>태그는 자바스크립트 문법이 들어간다는 것을 명시한다.
마찬가지로, <style>태그는 css 문법이 들어간다는 것을 명시한다.
<style>
js { //이것은 태그를 가리킨다.
font-weight: bold;
}
</style>
<p><span class = "js">JavaScript</span>만약 위 코드와 같이 사용할 수 있는데, 한 가지 주의사항이 있다.
현재 class 이름이 js인 것의 css 속성을 변경하기를 원하는데,
만약 js라고 하면 이것은 태그 이름이 js인 것이 되어버린다.
따라서 .js로 정의해줘야 class를 의미한다.
조금 더 알아가기
.을 붙이는 것은 class를 의미하는 것이고, -> Ex)반 //그룹화 목적
#을 붙이는 것은 ID를 의미하는 것이다. -> Ex)학번 //절대로 중복X
class 광범위
ID 그중에서 예외처리 //우선순위 더 높다.<style> .js { font-weight: bold; } #first { color:blue; } span{ color:green; } </style> //우선순위: id선택자 -> class선택자 -> 태그선택자
배열(Array)
document.querySelector('a')는
첫 번째로 등장하는 <a>태그 하나만을 나타냄
document.querySelectorAll('a')
문서 안에 있는 모든 <a>태그를 나타냄 즉, 배열로 받아올 수 있음.
자바스크립트에서의 배열 선언과 생성은 아래와 같다.
var coworkers = ['egoing','leezche','duru','taeho' ]
document.write(coworkers[0]+" "); //egoing 출력
coworkers.push('duru'); //duru를 배열에 추가함수(Function)
굳이 함수를 왜 사용해야?
코드의 리팩토링(refactoring)은 상당히 중요하다.
이를 위해서는 함수의 사용이 무조건 필요함.코드의 리팩토링(refactoring)
- 주로 가독성을 높이고 유지보수를 편하게 한다.
- 버그를 없애거나 새로운 기능을 추가하는 행위는 아니다.
- 사용자가 보는 외부 화면은 그대로 두면서 내부 논리나 구조를 개선하는 유지보수 행위이다.
우리가 아래와 같이 함수를 정의해놓으면,
<script>
function setColor(color) {
var alist = document.querySelectorAll('a');
var i=0;
while(i<alist.length){
alist[i].style.color = color;
i = i+1;
}
}
setColor("red");
</script>
<a href="http://www.naver.com/">함수 짱</a>
앞으로 위와 같은 작업을 할 때, setColor("red"); 한 줄로 원하는 동작 구현이 가능해지는 것이다.
함수 선언/호출은 무조건 <script>태그 내에서 해야한다.
마치며...
마지막으로 객체에 대한 문법 내용이 남아있는데, 주관적인 생각으로 가장 중요한 부분이기도 하고 글이 길어질 것 같아서 다음 글에서 자세히 다루도록 해야겠다.
Javascript 문법을 공부하면서 다른 언어와 상당히 유사하면서도 이전에 C++, Java 등의 언어를 접했었는데, 비교적 단순하면서도 효율적인 언어라는 생각이 들었다.
Javascript 언어에 익숙해지기 위해서 여러 프로젝트를 만들 계획을 가지고 있다.
