01. 자바스크립트의 활용
- 자바스크립트란 웹 브라우저에서 작동하는 프로그래밍 언어이다.
- ECMAScript란 유럽컴퓨터제조협회에서 표준화한 자바스크립트의 공식 명칭이다.
- 웹 애플리케이션이란 기존의 웹 페이지보다 많은 기능을 구현한 웹 페이지를 말한다.
자바스크립트는 발전을 거듭하며 웹 뿐만 아니라 다양한 모바일, PC 애플리케이션도 개발할 수 있게 되었다.
확인문제
- 인터넷을 돌아다니면서 보았던 쉽게 사용할 수 있고, 기능이 많다고 느꼈던 웹 사이트를 5개 정도 적어보세요.
- 유튜브
- 네이버
- 오피스365
- 구글 드라이브
- 페이스북
- statcounter에서 책을 보고 있는 현재 시점의 웹 브라우저 점유율(Browser Market Share Woldwide)을 확인해 보세요.
Source: StatCounter Global Stats - Browser Market Share
코멘트
- 위 언급한 사이트들은 다양한 기능이 웹 브라우저에서 구현되어 있다.
특히 MS Office 같은 제품은 이전엔 데스크톱에 프로그램을 설치해 사용했던 기능들을 웹 브라우저에서 설치 없이 사용할 수 있다. 아무렇지도 않게 사용하고 있지만 불과 십년전을 떠올리면 놀라운 발전이라고 할 수 있겠다. - 크롬이 가장 높을 것은 예상했지만 Firefox의 점유율이 생각보다 낮아 놀랐다. Safari의 점유율은 아마 iPhone과 iPad가 견인한 것이라고 생각된다. 크롬이 과반 이상을 차지하긴하지만 상황에 따라 여러 브라우저를 사용하기 때문에 다양한 환경에서 동일하게 동작하도록 하는 것은 중요할 것 같다.
02. 개발환경 설치와 코드 실행
- 개발환경이란 개발을 할 수 있는 환경
- 텍스트 에디터란 코드를 작성할 수 있는 프로그램. 우리는 현재 시점에서 가장 많이 사용되는 비주얼 스튜디오 코드를 사용하고 있다.
- 구글 크롬 개발자 도구란 구글 크롬이 개발자를 위해 오류 확인 등의 기능을 제공하는 도구
확인 문제
- 구글 크롬 개발자 도구의 콘솔을 실행하고 다음 명령울 입력했을 때 나오는 결과를 빈칸에 적어보세요. 코드를 하나 실행할 때 여러 줄의 출력이 나오는 경우 모두 적어주세요.
"안녕하세요"
console.log("안녕하세요")
안녕하세요- 비주얼 스튜디오 코드에 다음 소스 코드를 입력하고 ex.html로 저장한 후 화면에 나오는 결과를 적어보세요.
<body>
<script>
document.body.innerHTML = "<h1>안녕하세요</h1>"
</script>
</body>코멘트
-
"안녕하세요" // '안녕하세요' console.log("안녕하세요") // 안녕하세요 // undefined 안녕하세요 // Uncaught ReferenceError: 안녕하세요 is not defined
똑같은 “안녕하세요” 라는 문자열이지만, 어떻게 입력하느냐에 따라 다르게 결과가 출력된다.
컴퓨터가 이해할 수 있는 방법으로 요청을 해야 원하는 결과를 얻을 수 있다.
이 코드는 ‘document.body.innerHTML’ 속성을 사용해서 Body 태그의 내용을 변경하는 코드이다. ‘innerHTML’ 속성은 요소의 내용을 포함한 모든 하위 요소를 변경할 수 있는 속성이다. 따라서 이 예제에서는 ‘<h1>’ 요쇼를 포함한 문자열을 지정하여 ‘<body>’ 요소의 내용을 변경한다.
따라서 이 코드를 실행하면 <body> 요소의 내용을 변경하여 "안녕하세요"라는 제목을 만든다.
03. 알아두어야 할 기본 용어
- 표현식이란 값을 만들어내는 간단한 코드를 말합니다.
- 문장이란 하나 이상의표현식이 모여 구성되는 것으로 코드를 읽어들이는 기본 단위입니다.
- 키워드란 프로그래밍 언어가 처음 만들어질 때 정해진 특별한 의미가 있는 단어입니다.
- 식별자란 이름을 붙일 때 사용하는 단위입니다.
- 주석은 프로그램 코드를 설명하는 문장으로, 프로그램 진행에는 전혀 영향을 주지 않습니다.
확인 문제
- 다음 단어 중 식별자로 사용할 수 있는 것은 O표, 식별자로 사용할 수 없는 것은 X표를 하세요.
a( )hello( )10times( )_( )$( )
console.log()에서console은 다음 중 무엇일까요?- 키워드
- 식별자
- 연산자
- 메소드
console.log()에서log()는 다음 중 무엇일까요? (중복 선택 가능)- 키워드
- 식별자
- 연산자
- 메소드
- 여러 단어로 이루어진 식별자를 만들려고 합니다. 71쪽에서 설명한 방법에 따라서 한 단어로 묶어주세요.
- we are the world ( )
- create output ( )
- create request ( )
- init server ( )
- init matrix ( )
- 다음 코드를 입력해보고 어떤 오류가 뜨는지 확인해 보세요.
konsole.log('안녕하세요')+++ 1 ++ 2 + 3console.log)
코멘트
- 식별자는 숫자로 시작할 수 없으므로 3번이 X표, 나머지는 모두 식별자로 사용할 수 있는 형태이다.
1. O 2. O 3. X 4. O 5. O-
2. 식별자
console.log()는 콘솔 안에 log() 메소드를 호출하는 문장으로 console은 식별자이다.
-
2. 식별자 4. 메소드log()는 식별자임과 동시에 식별자 뒤에 위치하는 함수이므로 메소드이다. -
1. weAreTheWorld 2. createOutput 3. createRequest 4. initServer 5. initMatrix- 변수, 인스턴스, 함수, 메소드의 이름은 반드시 소문자로 시작한다.
- 여러 단어로 이루어진 식별자는 각 단어의 첫글자를 대문자로 한다.
-
konsole.log('안녕하세요') > Uncaught ReferenceError: konsole is not defined // console의 오타로 인하여 konsole이라는 식별자를 찾을 수 없다는 메세지 +++ 1 ++ 2 + 3 > Uncaught SyntaxError: Invalid left-hand side expression in postfix operation // +++ 라는 연산자는 존재하지 않기 때문에 발생한 메세지 console.log) > Uncaught SyntaxError: Unexpected token ')' // 괄호를 제대로 열고 닫지 않아 발생한 메세지
'Language > JavaScript' 카테고리의 다른 글
| 혼자서 공부하는 자바스크립트 Chapter 04 반복문 (0) | 2023.04.07 |
|---|---|
| 자바스크립트 입문 1주차 과제 (0) | 2023.04.05 |
| 혼자서 공부하는 자바스크립트 Chapter 03 조건문 (0) | 2023.04.04 |
| 혼자서 공부하는 자바스크립트 Chapter 02 자료와 변수 (0) | 2023.04.03 |
| 혼자서 공부하는 자바스크립트 시작하기 (0) | 2023.04.02 |
