1st_ DoIt!_ 1/10

12282 단어 자바스크립트DoIt 자바스크립트DoIt 자바스크립트

Doit! 자바스크립크립트 기본편 책, 시작
: 이 책은 scheduling이 잘 되어있는데, 내가 선택한 코스는 빡시게10일 코스이다. 오늘은 1st.
이 책은 자바스크립트 만을 위한 문법 책이어서, 기본적인 html/css는 작성하지 않도록 '실습'파일을 해당 출판사에서 다운받아, 기본 html 틀이 잡혀져 있는 파일 위에 javaScript를 실습하도록 되어있다. 꽤 효율적이어서 좋다.

1강~2강_ 웹프로그래밍에 대한 간량한 소개와 VSCode 에딧을 다운받도록 설명되어있다. 설명이 간략하니 좋다.

1. VSCode 설치

: 나는 VSCode에딧을 설치해 놓고 잘 사용하는 방법을 몰랐는데, 이 책을 통해 기본적으로 설치->한글로 설정 -> Live Server extension설치 정도가 소개되어 있다. 더 많은 extension은 [드림코딩엘리_10가지 extention추천](https://www.youtube.com/watch?v=bS9yTI2fC0w&t=215s)을 통해 추천받은 모든 extention 을 설치하였다.

2. 2강 내용

1) 외부 스크립트 파일 연결하기

: js파일을 html파일에 밑의 코드 

<script src="js/welcome.js"> </script>

를 삽입함으로써 연결하는 작업을 했다.
실제 업무에서도 무한개의 html에 같은 동작을 하는 단일의 자바스크립트 연결하는 방식으로 많이 사용한다고 한다.

-html 파일-

<!DOCTYPE html>
<html lang="ko">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>연습문제-1</title>
	<style>
		body {
			font-size:1.3em;
			text-align: center;
		}
	</style>
</head>
<body>
	<script src="js/welcome.js">
	</script>
</body>
</html>

-js 파일-

var name = prompt("이름을 입력하세요.");
document.write("<h1>" + name + "님, 어서오세요</h1>");

2) prompt("안녕?","YJ"); alert("오류입니다.");

prompt(); 
<!DOCTYPE html>
<html lang="ko">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>Welcome</title>
	<style>
		body {
			font-size:1.3em;
			text-align: center;
		}
	</style>
</head>
<body>
	<h1>어서오세요</h1>	
	<script>
		var name = prompt("이름을 입력하시오.");
		document.write(  name + "님, 환영합니다.")
		
		var name = prompt("몇 살?");
		console.log(name + "이야.");	
		
	</script>

</body>
</html>

-알림창 출력 : alert();

3) 자바스크립트의 기본적인 규칙 설명

4) 콘솔을 이용하여 수정 후, 본 코드에 수정 설명.

Android Compose State
Lv 1. 내적

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage