[Web/JS] 자바스크립트 - 자바스크립트 기초

Web/JS

[Web/JS] 자바스크립트 - 자바스크립트 기초

poopooreum 2024. 5. 7. 21:21

https://flexboxfroggy.com/#ko

Flexbox Froggy

A game for learning CSS flexbox

flexboxfroggy.com

https://www.flexboxdefense.com/

✏️ 자바스크립트의 이용

웹의 요소 제어 : 웹 문서의 각 요소를 가져와서 필요에 따라 스타일을 변경하거나 움직이게 할 수 있음, 탭을 클릭하여 콘텐츠를 보이게 해서 공간을 절약하고 필요한 내용만 골라서 볼 수 있게 함, 사용자 정보를 서버로 전송하는 폼에서 입력된 정보가 형식에 맞는지도 체크해줌
웹 애플리캐이션을 만든다 : 최근 웹은 사용자와 실시간으로 정보를 주고 받으며 앱처럼 동작하고 낯선 곳을 찾아갈 때 검색하는 온라인 지도의 길 찾기 서비스 등 다양한 서비스를 자바스크립트를 이용하여 만들 수 있음
다양한 라이브러리 사용 가능 : 웹 애플리케이션을 개발할 때 사용하는 리액트, 앵귤러, 뷰 같은 프렘임워크와, 그래픽 활용을 위한 D3.js나 DOM을 쉽게 조작할 수 있게 해주는 제이쿼리같은 라이브러리 등등
서버 개발 가능 : Node.js는 프런트엔드 개발에서 사용하던 자바스크립트를 백엔드 개발에서 사용할수 있도록 만든 프레임워크로써 자바스크립트로도 서버 개발을 할 수 있도록 하게 만들어줌

✏️ 자바스크립트 작성하기

자바스크립트 소스 코드가 짧으면 웹 문서에서 자바스크립트를 실행할 위치에 바로 코드를 작성할 수 있음
웹 문서에서 <script> </script> 태그 사이에 실행할 자바스크립트 소스를 작성하기
<script> 태그는 웹 문서 안의 어디든 위치할 수 있고 하나의 문서에서 여러 개 사용할 수 있음.
자바스크립트는 웹 문서에서 이미지나 텍스트 등의 요소를 제어하는 경우가 많으므로 되도록이면 이미지나 텍스트 등을 다 표시한 후 실행하는 것이 좋음 => </body>태그 직전에 자바스크립트 소스를 삽입

<body>
	<h1 id="heading">자바스크립트</h1>
	<p id="text">위 텍스트를 클릭해 보세요</p>

	<script>
	  var heading = document.querySelector('#heading');
	  heading.onclick = function() {
	  heading.style.color = "red";
	  }
	</script>
</body>

✏️ 외부 스크립트 파일로 연결해서 자바스크립트 작성하기

CSS와 마찬가지로 자바스크립트 소스도 따로 파일로 저장한 후 웹 문서에 연결해서 사용이 가능. 이렇게 하면 웹 문서 안에는 자바스크립트 소스가 드러나지 않고 HTML태그와 CSS만 유지할 수 있어서 소스가 깔끔해지는 효과를 가져옴

기본형 => <script src="외부 스크립트 파일 경로"></script>

var heading = document.querySelector('#heading');
heading.onclick = function() {
 heading.style.color = "red";
}

<body>
	<h1 id="heading">자바스크립트</h1>
	<p id="text">위 텍스트를 클릭해 보세요</p>
	
	<script src="js/change-color.js"></script>
</body>

✏️ 브라우저에서의 스크립트 해석 과정

<!DOCTYPE html>
<html lang="ko">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>글자색 바꾸기</title>
	<style>
		body { text-align:center; }
		#heading { color:blue; }
		#text { 
			color:gray;
			font-size:15px;
		}
	</style>	
</head>
<body>
	<h1 id="heading">자바스크립트</h1>
	<p id="text">위 텍스트를 클릭해 보세요</p>

	<script>
	  var heading = document.querySelector('#heading');
	  heading.onclick = function() {
	  heading.style.color = "red";
	  }
	</script>
</body>
</html>

웹 브라우저는 1행에 있는 <!DOCTYPE html>를 보고 이 문서가 웹 문서라는 것을 알게 됨. 그리고 <html>과 </html>태그 사이의 내용을 HTML 표준에 맞춰 읽기 시작
웹 문서에서 HTML 태그의 순서와 포함 관계 확인. <head>와 </head> 태그, <body>와 </body> 태그 사이에 어떤 태그가 있는지 확인하고 각 태그 간의 관계가 어떻게 되어 있는지 등을 분석
태그 분석이 끝나면 <style>과 </style> 태그 안의 스타일 정보를 분석
<script> 태그를 만나면 웹 브라우저 안에 포함된 자바스크립트 해석기에게 스크립트 소스를 넘기고 자바스크립트 해석기는 <script>와 </script> 사이의 소르를 해석
2에서 분석한 HTML내용과 3에서 분석한 CSS 정보에 따라 웹 브라우저 화면에 표시
웹 브라우저에서 '자바스크립트' 텍스트를 클리하면 분석해 놓은 자바스크립트를 실행해서 그 결과를 화면에 표시

✏️ 자바스크립트 용어와 기본 입출력 방법 - 식과 문

자바스크립트 언어의 큰 줄기는 식(expression)과 문(statement)이다. 식은 표현식이라고 하는데, 연산식뿐만 아니라 실제 값도, 함수를 실행하는 것도 식이 될 수 있음. 어떤 값을 만들어 낼 수만 있다면 모두 식이 될 수 있으며 식은 변수에 저장문은 명령이라고 생각할 수 있고, 문의 끝에는 세미콜론(;)을 붙여서 구분하고 조건문이나 제어문 등이 있다

✏️ 자바스크립트 용어와 기본 입출력 방법 - 간단한 입출력

소스를 입력하다 보면 사용자에게 입력받아야 하거나 자바스크립트 실행 결과를 웹 브라우저에 표시해야 할 때가 있다.

알림 창 출력하기 : 알림 창(alert)은 가장 많이 사용하는 간단한 대화 상자이고 웹 브라우저에는 작은 알림 창을 열어 메시지를 표시할 수 있음. 기본형 => alert(메시지)

확인 창 출력하기 : 알림 창은 단순히 메시지를 보여 주는 기능을 한다면 확인 창(confirm)은 사용자가 [확인]이나 [취소] 버튼 중에서 직접 클릭할 수 있고 선택한 결과에 맞게 프로그램이 동작 기본형 => confirm(메시지)

프롬포트 창에서 입력받기 : 프롬포트(prompt) 창은 텍스트 필드가 있는 작은 창으로 텍스트 필드 안에 간단한 메시지를 입력할 수 있으며 그 내용을 가져와 프로그램에서 사용할 수 있음 기본형 => prompt(메시지) 또는 prompt(메시지, 기본값)

document.write()문 : 자바스크립트 실행 결과를 브라우저 화면에서 결괏값을 확인하는 용도로 사용. ()안에는 실제 웹 브라우저 화면에 표시할 내용이나 어떤 결괏값이 저장된 변수를 넣을 수 있음. 괄호 안에서 큰따옴표나 작은따옴표 사이에 입력한 내용은 웹 브라우저 화면에 그대로 표시하고 따옴표 안에는 HTML 태그도 함께 사용 가능

<script>
  document.write("<h1>어서오세요</h1>");
</script>

✏️ 자바스크립트 스타일 가이드

자바스크립트 코딩 규칙은 스타일 가이드나 코딩 컨벤션, 코딩 스타일, 표준 스타일이라고 부른다. 스타일 가이드를 사용하여 프로젝트를 진행한다면 여러 사람이 작성해도 한 사람이 작성한 것처럼 보일 수 있고 스타일 가이드에 따라 작성된 웹 사이트나 애플리케이션은 유지.보수할 때도 수월하고 비용이 줄어듬

들여쓰기 사용 : 들여쓰기를 하게 되면 가독성이 올라가고 소스 간의 포함 관계를 알아보기 쉬움
세미콜론으로 문장을 구분 : 세미콜론을 붙이지 않아도 문장이 실행되지만 디버깅 등의 이유로 세미콜론 사용 권장
공백을 넣어 읽기 쉽게 작성 : 예약어나 연산자, 값 사이에는 공백을 넣어서 소스 코드를 읽기 쉽게 작성
소스 코드를 잘 설명하는 주석 작성 : 한 줄 주석은 (//)를, 여러 줄 주석은(/* */) 로 작성
식별자는 정해진 규칙을 지켜 작성 : 첫 글자는 반드시 영문이나 언더바(_), 또는 달러($)기호로 시작
예약어는 식별자로 사용할 수 없음 : 예약어는 키워드라고도 하고 자바스크립트에 미리 정해 놓은 단어를 가리킴

저작자표시 비영리 변경금지