LGHV_3기_자바스크립트_JavaScript(1)

Pepzera·2025년 3월 17일
LG 헬로비전 DX DATA SCHOOL 3기 공부 정리웹 개발

LGHV3기_공부정리

목록 보기
24/34

Chap 01 자바스크립트

JavaScript

1. JavaScript란? 🙄

자바스크립트는 객체 기반의 스크립트 언어이다.

HTML로는 웹의 내용을 작성하고, CSS로는 웹을 디자인하며, 자바스크립트로는 웹의 동작을 구현할 수 있다.

2. 자바스크립트로 무엇을 할까?

웹 요소를 제어합니다.

  • 웹 요소를 가져와서 필요에 따라 스타일을 변경하거나 움직이게 할 수 있음.
  • 웹 사이트 UI 부분에 많이 활용
  • 예 ) 마우스 포인터를 올렸을 때 펼쳐지는 메뉴 → 한 화면에서 탭을 눌러 내용만 바뀌도록 하는 콘텐츠

다양한 라이브러리를 사용할 수 있습니다.

  • 웹을 중심으로 하는 서비스가 늘어나면서 브라우저에서 처리해야 할 일이 늘어남!
    ➡ 라이브러리와 프레임워크가 계속 등장

웹 애플리케이션을 만듭니다.

  • 최근의 웹 사이트는 사용자와 실시간으로 정보를 주고 받으며 애플리케이션처럼 동작
  • 예 :
    • 온라인 지도의 길 찾기 서비스,
    • 데이터 시각화 서비스,
    • 공개된 API를 활용한 다양한 서비스

서버를 구성하고 서버용 프로그램을 만들 수 있습니다.

  • node.js
    • FE 개발에 사용하던 JavaScript를 BE 개발에서 사용할 수 있게 만든 프레임워크

3. 웹 브라우저가 자바스크립트를 만났을 때

웹 문서 안에 자바스크립트 작성하기

  • <script> 태그와 </script> 태그 사이에 자바스크립트 소스 작성
  • 웹 문서 안의 어디든 위치할 수 있지만, 주로 </body> 태그 앞에 작성
  • 자바스크립트 소스가 있는 위치에서 실행됨.
  • 자바스크립트를 작성할 땐, 문장이 끝난 뒤 세미콜론 (;)을 붙이는 것을 지향함.
  • 웹 문서 안에 자바스크립트 작성하는 코드 예시 )
...
	<title>글자색 바꾸기</title>
	<style>
		body { text-align:center; }
		h1 { color:blue; }
	</style>
</head>
<body>
	<h1 id="heading">자바스크립트</h1>
	<p id="text">위 텍스트를 클릭해 보세요</p>
  
	<!-- 내부 스크립트 코드 작성하기 -->
  <script>
		let heading = document.getElementById("heading");
		heading.onclick = function () {
			heading.style.color = "red";
		};
	</script>
	
	<!-- 스크립트는 head 안에.. body 안에 둘 다도 가능하고, 어디에든 무제한으로 위치함. -->
	<!-- id를 통해서 접근할거다. , 뒤에 ;(세미콜론) 붙이도록 하자..java는  -->
</body>
</html>

외부 스크립트 파일 연결해서 작성하기

  • 자바스크립트 소스를 별도의 파일(*.js)로 저장한 후 웹 문서에 연결
  • 기본형 - <script src=”외부 스크립트 파일 경로”></script>
  • 외부 스크립트 파일 연결하는 코드 예시 )
<!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; }
		h1 { color:blue; }
	</style>
</head>
<body>
	<h1 id="heading">자바스크립트</h1>
	<p id="text">위 텍스트를 클릭해 보세요</p>
  
	<!-- 외부 스크립트 코드 작성하기 -->
	<script src="js/change-color.js"></script>
</body>
</html>

웹 브라우저에서 스크립트를 해석하는 과정

  1. 1행에 있는 를 보고 현재 문서가 웹 문서라는 것을 인식.
    • 이제부터 HTML 표준에 맞춰 소스를 읽기 시작하겠다!!
  2. 웹 문서에서 HTML 태그의 순서와 포함 관계 확인.
  3. 태그 분석이 끝나면 7~10행의 style 정보 분석.
  4. 16행의 <script> 태그를 만나면 자바스크립트 해석기에게 스크립트 소스 넘김. 자바스크립트 해석기에서 <script>와 </script> 사이의 소스를 분석하고 해석.
  5. 2에서 분석한 HTML과 3에서 분석한 CSS 정보에 따라 웹 브라우저 화면에 표시.
  6. 웹 브라우저에서 사용자가 동작하면 자바스크립트를 실행해서 결과를 화면에 표시.

4. 자바스크립트 용어와 기본 입출력 방법

식과 문

식 (expression)

  • 값을 만들어 낼 수 있다면 모두 식이 될 수 있음.
  • 식은 변수에 저장

문 (statement)

  • 문의 끝에는 세미콜론(;)을 붙여서 구분하는게 좋다
  • 넓은 의미에서 식이나 값을 포함할 수 있음.

간단한 입출력 방법

알림 창 출력

  • ‘확인’ 버튼이 있는 메시지 창 표시
  • 기본형 - alert(메시지)
  • 코드 예시 )
<!DOCTYPE html>
<html lang="ko">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>alert문</title>
</head>
<body>
	<!-- 알림 창 만들기 -->
	<!-- 확인 창만 뜸 -->
	<script>
		alert("안녕하세요?")
	</script>
</body>
</html>
  • 결과 )

확인,취소 창 출력

  • ‘확인’과 ‘취소’ 버튼이 있는 창 표시
  • 클릭하는 버튼에 따라 프로그램 동작
  • 기본형 - confirm(메시지)
  • 코드 예시 )
<!DOCTYPE html>
<html lang="ko">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>confirm</title>
</head>
<body>
	<!-- 확인 창 만들기 -->
	<!-- 확인 / 취소 창 두 개가 뜸. -->
	<script>		
	  let reply = confirm("정말 삭제하시겠습니까?");

		// 확인 누르면 True, 취소는 False 반환
		if(reply==true)
			alert("확인");
		else(reply=false)
			alert("취소");
	</script>
</body>
</html>
  • 결과 )

프롬프트 창에서 입력받기

  • 텍스트 필드가 있는 창 표시
  • 사용자 입력 값을 가져와 프로그램에서 사용
  • 기본형 - prompt(메시지) 또는 prompt(메시지, 기본값)
  • 코드 예시 )
<!DOCTYPE html>
<html lang="ko">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>prompt</title>
</head>
<body>
	<!-- 기본값이 있는 프롬프트 창 만들기 -->
	<script>
		// 두 개의 파라미터를 받도록 정의되어있음
		let name = prompt("이름을 입력하세요!!","ex)홍길동");
		alert(name);
	</script>
</body>
</html>
  • 결과 )

document.write( )

  • 웹 문서(document)에서 괄호 안의 내용을 표시(write)하는 명령문 이라는 정도로만 알고있기 !! (아직은)
  • 괄호 안에서 큰따옴표 (” “)나 작은 따옴표 (’ ‘) 사이에 입력한 내용은 웹 브라우저 화면에 그대로 표시됨.
  • 따옴표 안에는 HTML 태그도 함께 사용할 수 있음.
  • 기본형
    	<script>
			document.write("<h1>어서오세요</h1>");
		</script>
  • 코드 예시 )
<!DOCTYPE html>
<html lang="ko">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>document.write</title>
</head>
<body>
	<!-- document.write() 문으로 내용 표시하기 -->
	<script>
		document.write("<h1>어서오세요</h1>");
		document.write("<h2>자동차 가게입니다.</h2>")
		document.write("<ul><li>현대</li><li>기아</li></ul>")
	</script>
</body>
</html>
  • 결과 )

console.log( )

  • 괄호 안의 내용을 콘솔 창(웹 브라우저 개발자 도구 창에 포함되어 있는 창)에 표시.
  • 괄호 안에 변수가 들어갈 수도 있고, 따옴표 안에 텍스트를 넣을 수도 있음.
  • 따옴표 안에 태그는 사용할 수 없음!
  • 기본형
    <body>
		  <h1>어서오세요</h1>
		  <!-- 콘솔 창에 내용 표시하기 -->
	<script>
		  	let name = prompt("이름을 입력하세요.");
		  	console.log(name + "님, 환영합니다.");
	</script>
</body>
  • 코드 예시 )
<!DOCTYPE html>
<html lang="ko">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Welcome</title>
</head>
<body>
	<h1>어서오세요</h1>
	<!-- 콘솔 창에 내용 표시하기 -->
	<script>
		let name = prompt("이름을 입력하세요.");
		console.log(name + "님, 환영합니다."); // 화면에서 오른쪽 마우스 -> 검사 -> console 들어가면 잇음.
		// 브라우저 상에는 영향 x , 문제가 없는지 확인해보고싶다면 console.log
	</script>
</body>
</html>
  • 결과 )

5. 자바스크립트 스타일 가이드

스타일 가이드란? 🧐

  • 코딩 규칙을 ‘스타일 가이드’, ‘코딩 컨벤션’, ‘코딩 스타일’, ‘표준 스타일’ 등으로 부름

❓ 코딩 규칙이 왜 필요할까

  • 자바스크립트는 다른 프로그래밍 언어에 비해 데이터 유형이 유연해서 오류 발생이 잦음.
  • 오픈 소스에 기여하거나 누군가와 공유할 소스라면 더욱 깔끔한 소스가 중요.
  • 팀 프로젝트를 진행한다면 통일된 코딩 규칙이 필요.
  • 코딩 규칙에 따라 작성된 웹 사이트는 유지 보수도 수월하고 그만큼 비용도 줄어듬.

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

💥 자바스크립트 소스를 작성할 때 지켜야 할 기본 규칙

  1. 코드를 보기 좋게 들여쓴다!

    • ‘Tab’키나 ‘스페이스바’를 눌러 2칸이나 4칸을 들여쓰자
    • 최근에는 공백 2칸 들여쓰기를 많이 사용함.

  2. 세미콜론으로 문장을 구분한다!!

    • 세미콜론을 붙일 것을 권장함
    • 소스는 한 줄에 한 문장만 작성하는 것이 좋음

  3. 공백을 넣어 읽기 쉽게 작성한다.

    • 식별자나 연산자, 값 사이에 공백을 넣어 읽기 쉽게 작성
  let num = 2;
  let sum = num + 10;
  1. 코드를 설명하는 주석을 작성한다.
    • 한 줄 주석 : 슬래시 2개 (//) 바로 뒤에 작성
    • 여러 줄 주석 : 여는 기호 (/*)를 맨 앞에, 닫는 기호 (*/)를 맨 뒤에 넣고 그 사이에 주석 내용을 작성
    • 주석 사이에 또 다른 주석을 넣을 수 없음!
let today = new Date();  // 현재 날짜 가져오기

/* 현재 시각과
오늘 날짜 가져오기 
*/

let display = now.toLocaleTimeString();
let today = now.toLocaleDateString();
document.write("현재 시각은 " + display);
document.write("오늘 날짜는 " + today);
  1. 식별자는 정해진 규칙을 지켜 작성한다.
    • 첫 글자는 반드시 영문자나 언더스코어(_), 달러 기호($)로 시작해야 함.
    • 두 단어 이상이 하나의 식별자를 만들 때 단어 사이에 공백을 둘 수 없음.
    • 예약어는 식별자로 사용할 수 없음!
num1 // 영문자로 시작하는 식별자
_doSomething // 언더스코어(_)로 시작하는 식별자
checkTime()  // 두 단어로 만든 식별자
profile
Pepzera
Hi
이전 포스트

LGHV_3기_CSS 그리드 레이아웃_HTML/CSS(14)

다음 포스트

LGHV_3기_자바스크립트 기분 문법_JavaScript(2.1)

0개의 댓글