티스토리 뷰

study/javascript

Do it! 01.자바스크립트 시작하기

aeuna 2020. 2. 25. 00:00

 

 

Do it!  자바스크립트 + 제이쿼리 입문으로 기초를 다질 예정입니다.

학교를 다니면서 프로젝트를 진행할 때 프런트엔드를 html, css, 간단한 javascript로 했었습니다.

이번 기회에 확실히 다잡고!!

빠르게 react 나 vue js 로 넘어갈 예정입니다. 

 

그전에, 프런트엔드 와 백엔드에 대해 알아보도록 합시다.

 

01-1 처음 만나는 자바스크립트

1) 프런트엔드 : HTML, CSS, 자바스크립트, 제이쿼리 등을 이용해 사용자(사이트 방문자)의 눈에 보이는 부분까지 개발하는 과정

2) 백엔드 : 예를 들어, 로그인과 회원가입을 생각했을 때, 사용자가 입력한 데이터를 데이터 베이스에 저장하거나 검사하는 등 눈에 보이지 않는 영역을 개발하는것

 

01-2 개발 환경 준비하기

개발환경 : 크롬 브라우저와 비주얼 스튜디오 코드 (이미 깔려있음)

-> 이미 익숙한 편집기가 있다면 그것을 사용해도 됨.

 

비주얼 스튜디오 코드 https://code.visualstudio.com/ 에서 다운로드 

 

1) emmet코드 : HTML, CSS를 약식으로 표기하여 작성할 수 있는 기능

! 하고 [tab]을 누르면 html기본 틀이 작성됨

<!DOCTYPE html>
<html lang="en">
<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>Document</title>
</head>
<body>
    
</body>
</html>

 

2) 크롬 브라우저로 html문서 열기

-'open-in-browser'  제작사 'coderfee' 설치하고 다시 로드하기

-[ctrl]+[alt]+[o]를 누르면 상단에 어떤 브라우저로 실행할지 선택 가능

-chrome을 선택하면 크롬 브라우저로 파일이 열림

 

-->근데 저 같은 경우, 맥인데 [ctrl]+[opt]+[0], [cmd]+[K]+[D]를 해도 안 열리네요 ㅜㅜ

       아시는 분은 댓글로 알려주시면 감사하겠습니다 ㅎㅎ.....

       그래서 옆에서 우클릭해서 열었습니다

--->멍청했습니다 [cmd]+[k] 누르고 난 다음 [D] .....^^ 

 

3) 자바스크립트 맛보기 예제

<!DOCTYPE html>
<html lang="en">
<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>맛보기 예제</title>
</head>
<body>
    <script>
        var age = prompt("당신의 나이는?", "0");
        if(age >= 20){
            document.write("당신은 성인입니다.");
        }
        else{
            document.write("당신은 미성년자 입니다.");
        }
    </script>
</body>
</html>

 

'study > javascript' 카테고리의 다른 글

Do it! 05.함수  (0) 2020.02.27
Do it! 04.객체  (0) 2020.02.27
Do it! 03.제어문  (0) 2020.02.25
Do it! 02.자바스크립트 기초 문법(연산자)  (0) 2020.02.25
Do it! 02.자바스크립트 기초 문법(기초문법, 자료형)  (0) 2020.02.25