게으른 나에게

[Do it! 한권으로 끝내는 웹 기본 교과서 HTML+CSS+자바스크립트 웹 표준의 정석] "자바스크립트 기초-넷째마당: 13 자바스크립트와 첫 만남" 본문

My Study/서적 공부

[Do it! 한권으로 끝내는 웹 기본 교과서 HTML+CSS+자바스크립트 웹 표준의 정석] "자바스크립트 기초-넷째마당: 13 자바스크립트와 첫 만남"

handbefore 2024. 8. 4. 00:45

13-1 자바스크립트로 무엇을 할까

웹의 요소 제어

HTML이나 CSS와 함께 사용해서 웹의 요소를 움직이거나 포토 갤러리를 펼쳐 놓은 것처럼 웹 사이트 UI 부분에 많이 활용.

-웹 애플리케이션 만듦.

-다양한 라이브러리 사용. (리액트, 앵큘러, 뷰, 제이쿼리)

-서버 개발 가능. (Node.js)

 

 

 

 

 

13-2 웹 브라우저가 자바스크립트를 만났을 때

웹 문서 안에 <script> 태그로 자바스크립트 작성

 

<내부 자바스크립트 사용>

자바스크립트 실행 할 위치에 바로 코드 작성.

웹 문서 안에 어디든 위치 가능. 삽입된 위치 그 자리에서 바로 스크립트 실행.

여러개 사용 가능.

영어 대소문자 구별 주의

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

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

 

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

자바스크립트 소스도 따로 파일로 저장한 후 웹 문서에 연결해 사용.

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

 

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

① <!DOCTYPE html>를 보고 이 문서가 웹 문서라는 것을 알게 됨. <html></html> 태그 사이의 내용을 HTML 표준에 맞춰 읽기 시작.

② 웹 문서에서 HTML 태그의 순서와 포함관계를 확인. <head></head> 태그, <body></body> 태그 사이에 있는 태그 확인. 태그 간        의  관계 분석.

③ 태그 분석이 끝나면 7~14행의 스타일 정보 분석.

④ 20행에 있는 <script> 태그를 만나면 웹 브라우저 안에 포함된 자바스크립트 해석기에게 스크립트 소스 넘김. 자바스크립트 해석기는        <script></script> 사이의 소스 해석.

⑤ ②에서 분석한 HTML과 ③에서 분석한 CSS정보에 따라 웹 브라우저 화면에 표시.

⑥ 웹 브라우저에에서 '자바스크립트' 텍스트를 클릭하면 분석해 놓은 자바스크립트 실행해 그 결과 화면에 표시.

 

 

 

13-3 자바스크립트 용어와 기본 입출력 방법

식과 문

식: 표현식. (연산식, 함수식) 식은 변수에 저장.

inch  *. 2.54. // 연삭식은 식.
"안녕하세요?";    // 문자열도 식.
5              // 숫자도 식.

문: 명령. 문의 끝에는 세미콜론(;) 붙여 구분. (조건문, 제어문)

 

간단한 입출력 방법

알림창 출력하기

알림창: 간단한 대화 상자. 단순히 메시지를 보여주는 기능.

alert(메시지)

<script>
	alert("안녕하세요?");
</script>

 

확인창 출력하기

확인창: 사용자가 [확인]이나 [취소] 버튼 중에서 직접 클릭. 어떤 버튼을 눌렀는지 결과를 변수에 저장한 후 그 값에 따라 프로그램 처리.

confirm(메시지)

<script>		
	  var reply = confirm("정말 배경 이미지를 바꾸겠습니까?");
</script>

 

프롬프트 창에서 입력 받기

프롬프트 창: 텍스트 필드가 있는 작은 창. 간단한 메시지 입력 가능. 그 내용을 가져와 프로그램 사용.

prompt(메시지)

<script>
	var name=prompt("이름을 입력하세요.");
</script>


prompt(메시지, 기본값)

<script>
	var name=prompt("이름을 입력하세요.", "아무개");
</script>

 

웹 브라우저 화면에 출력을 담당하는 document.write( )문

브라우저 화면에서 결괏값을 확인하는 용도.

웹 문서에서 괄호 안의 내용을 표시하는 명령문.

괄호 안에는 실제 웹 브라우저 화면에 표시할 내용이나 어떤 결과 값이 저장된 변수 넣을 수 있음. 

큰 따옴표(" "), 작은 따옴표(' ') 사이에 입력한 내용은 웹 브라우저에 그대로 표시.

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

웹 브라우저 화면에 표시할 내용과 변수를 섞어서 나타낼 수 있음. +연산자(연결 연산자: 내용과 변수 연결하는 역할) 사용해 연결.

<script>
	var name = prompt("이름을 입력하세요.");
	document.write("<b><big>" + name + "</big></b>님, 환영합니다.");		
</script>

 

콘솔 창에 출력하는 console.log( ) 문

콘솔창: 웹 브라우저의 개발자 도구 창에 포함되어 있는 공간. 소스 코드의 오류 발견하거나 변숫값 확인 가능.

괄호 안의 내용을 콘솔 창에 표시.

괄호 안에는 변수, 따옴표 사이에(HTML태그는 불가능) 표시할 텍스트 넣을 수 있음.

<h1>어서오세요</h1>
	<script>
		var name = prompt("이름을 입력하세요.");
		console.log(name + "님, 환영합니다.");		
	</script>

 

콘솔 창에서 오류 찾고 수정

1. 웹 브라우저에서 콘솔 창 열어서 확인.

2. 오류 발생 위치를 클릭해 소스에서 오류 찾기.

3. 비주얼 스튜디오 코드에서 HTML 파일 수정.

 

 

13-4 자바스크립트 스타일 가이드

코딩 규칙이 필요한 이유

자바스크립트 코딩 규칙: 스타일 가이드, 코딩 컨벤션, 코딩 스타일, 표준 스타일.

데이터 유형이 유연해서 오류가 발생하기 쉬움.

 

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

구글

https://google.github.io/styleguide/jsguide.html

 

Google JavaScript Style Guide

Google JavaScript Style Guide Please note: This guide is no longer being updated. Google recommends migrating to TypeScript, and following the TypeScript guide. 1 Introduction This document serves as the complete definition of Google’s coding standards f

google.github.io

에어비앤비

https://github.com/parksb/javascript-style-guide

 

GitHub - parksb/javascript-style-guide: Airbnb JavaScript 스타일 가이드

Airbnb JavaScript 스타일 가이드. Contribute to parksb/javascript-style-guide development by creating an account on GitHub.

github.com

 

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

1. 코드를 보기 좋게 들여쓰기

소스 간의 포함관계 알아보기 쉬움.

 

2. 세미콜론으로 문장 구분

세미콜론(;)은 문장의 끝. 문장과 문장을 구분하는 역할.

문장을 명확하게 표시해 주면 소스 디버깅 쉬움.

소스는 한줄에 한 문장만 작성.

 

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

예약어나 연산자, 값 사이에 공백을 넣어서 읽기 쉽게 작성.

 

4. 소스 코드를 잘 설명하는 주석 작성

소스 코드를 살펴보기 위해 꼭 필요한 요소.

① 한 줄 주석: 주석 기호로 슬래시 2개(//)를 붙이고 내용 작성. 한줄을 넘으면 오류 생김.

② 여러 줄 주석: 주석 기호(/*)를 맨 앞에, 닫는 주석 기호(*/)를 맨 뒤에 넣음. /* */ 사이에 주석 내용 작성.

 

5. 식별자는 정해진 규칙 지켜 작성

식별자: 자바스크립트의 변수, 함수, 속성 등을 구별하려고 이름 붙인 특정 단어.

식별자의 첫 글자: 영문자, 언더스코어(_), 달러 기호($)로 시작.

두단어 이상 모여 하나의 식별자 만들 경우 단어 사이 공백x.

두단어 이상은 단어 사이에 하이픈(-)이나 언더바(_) 연결해 사용.

두단어 붙여 사용할 경우 첫번째 단어 소문자 시작, 두번째 단어 대문자 시작.

num1           // 영문자로 시작하는 식별자
_doSomething   // 언더스코어(_)로 시작하는 식별자
checkTime()    // 두 단어로 시작하는 식별자

 

6. 예약어는 식별자로 사용 불가능

예약어 = 키워드

식별자로 사용할 수 없도록 자바스크립트에 미리 정해 놓은 단어. 

 

 

 

출처

https://easyspub.co.kr/20_Menu/BookView/PUB/421/PUB

 

https://easyspub.co.kr/20_Menu/BookView/PUB/421/PUB

 

easyspub.co.kr

 

'My Study > 서적 공부' 카테고리의 다른 글

[혼자 공부하는 컴퓨터구조+운영체제] "chapter8. 입출력장치"  (4) 2024.08.04
[Do it! 한권으로 끝내는 웹 기본 교과서 HTML+CSS+자바스크립트 웹 표준의 정석] "자바스크립트 기초-넷째마당: 14 자바스크립트 기본 문법"  (0) 2024.08.04
[혼자 공부하는 컴퓨터구조+운영체제] "chapter7. 보조기억장치"  (0) 2024.08.03
[혼자 공부하는 컴퓨터구조+운영체제] "chapter6. 메모리와 캐시 메모리"  (0) 2024.08.03
[혼자 공부하는 컴퓨터구조+운영체제] "chapter5. CPU 성능 향상 기법"  (1) 2024.08.03
'My Study/서적 공부' Related Articles more