본문 바로가기
멀티캠퍼스 풀스택 과정/프론트엔드

프론트엔드3-1. JavaScript 기본(입출력방법과 Dom요소의 선택)

by 이쟝 2022. 2. 9.

JavaScript

  • HTML문서에 프로그래밍 하기 위한 언어
인터프리터 언어 최근 웹 브라우저 대부분에 자바스크립트 코드를 컴파일하는 JIT 컴파일러가 내장되어 있어 실행속도가 매우 빨라졌다
동적 프로토타입 기반 객체 지향 언어 c++이나 java는 객체를 생성하는 클래스 기반 객체 지향언어
자바스크립트는 클래스가 아닌 프로토타입을 상속하는 프로토타입 기반 객체 지향 언어
객체를 생성한 후에도 property와 method를 동적으로 추가하거나 삭제할 수 있다. 
동적 타입 언어 변수 타입이 없다. 프로그램 실행 도중에 변수에 저장되는 데이터 타입이 동적으로 바뀔 수 있다. 

 

 

js로 하는 일 

 

웹 요소를 제어한다. 웹 요소를 가져와서 필요에 따라 스타일을 변경하거나 움직이게 할 수 있다. 
웹 사이트 UI 부분에 많이 활용된다.
웹 애플리케이션을 만든다. 최근의 웹 사이트는 사용자와 실시간으로 정보를 주고 받으며 애플리케이션처럼 동작
다양한 라이브러리
사용 가능하다. 		 웹을 중심으로 하는 서비스가 늘어나면서 브라우저에서 처리해야 할 일이 늘어남 
-> 라이브러리와 프레임워크가 계속 등장
서버를 구성, 서버용 프로그램을 만들 수 있다. node.js: 프런트엔드 개발에 사용하던 자바스크립트를 백엔드 개발에서 사용할 수 있게 만든 프레임워크

 

자바스크립트 사용 방법

1. html 문서에 <script></script> 태그 사이에 자바스크립트 소스 작성

  • 웹 문서 안의 어디든 위치할 수 있지만, 주로 <body> 태그 최하단에 위치하는 게 좋음(</body>태그의 바로 앞)
  • 자바스크립트 소스 즉 <script> 소스가 있는 위치에서 실행된다. (css와는 다르게 위치에 민감)
<body>
	<meta charset="UTF-8">
	<title>Insert title here</title>
	<script src="script.js"></script>
</body>

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

  • 자바스크립트 소스를 별도의 파일(*js)로 저장한 후 웹 문서에 연결
<head>
	<meta charset="UTF-8">
	<title>Insert title here</title>
	<script src="script.js"></script>
</head>

js파일

document.write("외부파일에서 자바스크립트구현하기");

3. script 내부에서 로딩 순서 제어하기 

  • HTML은 파싱 도중, script 태그를 만나게 되면 중간에 파싱이 멈춘다.
  • HTML파싱이 다 되기 전에 script 파일을 실행시키기 때문에 만약 script 파일이 DOM 요소를 조작한다면 존재하지 않는 DOM 요소에 접근하려는 시도로 예상치 못한 문제가 발생할 수 있다.(예, DOM요소에 정의한 id를 scipt에서 사용할 수 없음)

1) script 태그의 속성(async, defer)으로 로딩 순서 제어

  • async는 HTML파일을 파싱하다 script 태그를 만나면 HTML을 마저 파싱하는 동시에 script를 다운로드 시킨다.(script fetch) 그리고 실행시키는데 실행시키는 동안에는 HTML 파싱이 멈추게 된다. 
  • defer속성이 더해진 script 로드의 시작부터 끝까지 html parsing이 중단되지 않고, html parsing이 끝나고 난 뒤 script 실행
  • async와 defer의 차이점은 HTML 파싱이 완료된 후에 script를 실행시킨다.
<head>
<script async src="script.js">
<script defer src="script.js">
</head>

위는 async속성 아래는 defer속성

 

2) DOMContentLoaded와 onload

 

  • DOMContentLoaded 내부의 코드는 DOM 생성이 끝난 후에 실행되고,  onload 내부의 코드는 문서에 포함된 모든 콘텐츠(images, script, css,...)가 전부 로드된 후에 실행된다. 

자바스크립트 기본 입출력 방법

1. document.write( )

  • 웹 문서(document)에서 괄호 안의 내용을 표시(write)하는 명령문
  • 괄호 안에서 큰따옴표(" ")나 작은 따옴표(' ') 사이에 입력한 내용은 웹 브라우저 화면에 그대로 표시된다.
  • 따옴표 안에는 HTML 태그도 함께 사용할 수 있다. 

 

예제) document.write의 사용

<body>
	<script>
    
		document.title = "자바스크립트제목"
		document.write("자바스크립트 실행","<br/>"); // <br/>로 개행을 해줘야 한다.
		document.write("body에 출력할 문자 표시");  
		// 한 줄 주석 /**/ 여러줄 주석
        
	</script>
</body>

2. console.log( )

  • 괄호 안의 내용을 콘솔 창에 표시
  • 괄호 안에 변수가 들어갈 수 있고, 따옴표 안에 텍스트를 넣을 수도 있음
  • 따옴표 안에는 태그를 사용할 수 없음

HTML 요소의 선택(Dom요소)

  • js에서 HTML요소를 다루기 위해서 특정 HTML 요소를 선택해야 한다.

 

메서드 설명
document.getElementsByTagName(태그이름) 해당 태그 이름의 요소를 모두 선택한다.
document.getElementById(아이디) 해당 아이디의 요소를 선택한다. 
document.getElementsByClassName(클래스이름) 해당 클래스에 속한 요소를 모두 선택한다.(여러 요소)
document.getElementsByName(name속성값) 해당 name 속성값을 가지는 요소를 모두 선택한다. 
document.querySelectorAll(선택자) 해당 선택자로 선택되는 요소를 모두 선택한다. 
document.querySelector(선택자) 해당 선택자로 선택되는 요소만 선택한다. 

 

예제) html의 id에 스타일 적용

<body>
	<h2 id="heading1">html영역</h2>
	<h2 id="heading2">html영역</h2>
	
	<script>
		// html의 heading1 id에 스타일을 적용한다. 
		document.getElementById("heading1").style.backgroundColor = "pink"; // 첫번째 h2 태그
		document.querySelector("#heading1").style.color = "green";
		document.getElementById("heading2").style.backgroundImage = "url(../img/nature.jpg)";
	</script>
</body>
</html>

예제2) js에서 태그 사용하기

 

<body>
	<h2 id="heading1">html영역</h2>
	<h2 id="heading2">html영역</h2>
	
	<script>
		document.getElementById("heading1").style.backgroundColor = "pink"; 
		document.getElementById("heading1").style.color = "green";
		document.querySelector("#heading2").style.backgroundImage = "url(../img/nature.jpg)";

		//js에서 태그 사용하기
		document.write('<h1 id="txt">자바스크립트에서 태그 사용하기<h1>');  // '', "" 둘다 사용가능
		document.write("<h2>자바스크립트에서 태그 사용하기<h2>");
		document.write("<img src='../img/nature.jpg' width=200px/>");
		document.getElementById("txt").style.border="2px solid navy";  // js에서 사용한 태그에도 스타일 적용 가능
		
	</script>
</body>

저작자표시

'멀티캠퍼스 풀스택 과정 > 프론트엔드' 카테고리의 다른 글

프론트엔트3-3. login form 만들기 / 이메일 분리하기  (0) 2022.02.09
프론트엔드3-2. JavaScript의 함수(메서드)와 이벤트  (0) 2022.02.09
프론트엔드2-3. tab메뉴 만들기  (0) 2022.02.08
프론트엔드2-2. 반응형 웹(미디어쿼리)과 meta 태그  (0) 2022.02.07
프론트엔드2-1. div로 layout / Semantic 태그로 layout  (0) 2022.02.07

관련글

티스토리툴바