220607) 자바스크립트(1)

학습한 내용

Javascript

웹 개발은 웹 브라우저 화면에 보이는 겉모습을 만드는 것이 전부가 아니다 웹 사이트에서 사용자에게 제공할 기능과 서비스까지 모두 담아야 한다

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

-웹 요소 제어

• 웹요소를 가져와서 필요에 따라 스타일을 변경하거나 움직이게 할 수 있음
• 웹 사이트 UI부분에 많이 활용
• 예)마우스 포인터를 올렸을때 펼쳐지는 메뉴
  한 화면에서 탭을 눌러 내용만 바뀌도록 하는 콘텐츠

-웹 애플리케이션을 만든다

• 최근의 웹 사이트는 사용자와 실시간으로 정보를 주고받으며 애플리케이션처럼 동작
• 예)온라인 지도의 길찾기 서비스, 데이터 시각화 서비스 공개된 API를 활용한 다양한 서비스

-다양한 라이브러리를 사용

• 웹을 중심으로 하는 서비스가 늘어나면서 브라우저에서 처리해야 할 일이 늘어남 -> 라이브러리와 프레임워크가 계속 등장
• 예)시각화를 위한 d3.js 머신러닝을 위한 tensorflow.js DOM 조작을 위한 jQuery 등
• 예)웹 애플리케이션 개발을 위한 React, Angular, Vue 등

-서버를 구성하고 서버용 프로그램을 만들 수 있다.

• node.js: 프런트엔드 개발에 사용하던 자바스크립트를 백엔드 개발에서 사용할 수 있게 만든 프레임워크

오류를 확인하는 방법

• 내가 무엇을 잘못 입력했는지 알아내는 방법과 찾는 방법

<script>
alrt('Hello World') // alert를 alrt로 잘못 입력했다고 가정 
</script>

01: 현재 상태에서 코드를 실행해보면 아무것도 출력되지 않음
02: 크롬에서 코드를 실행한 후 마우스 오른쪽 버튼을 클릭해［검사를 선택
03: 개발자 도구 오른쪽 위에 x 표시가 되어 있는 붉은색 원(자바스크립트 코드 등에 오류가 발생했을 때 출력되는) 아이콘을 클릭하거나 개발자 도구의［Console］ 탭을 클릭
04: 'Uncaught ReferenceError: alrt is not defined’라는 오류 출력,
어떤 오류인지 확인. test.html: 6은 오류가 발생한 위치.
［test.html: 6］을 클릭하면 오류가 발생한 위치로 이동
05: 붉은색 밑줄이 표시되어 있어 쉽게 오류를 찾을 수 있음

• 처음자바스크립트를공부할 때자주접하는오류
  • Reference Error： 예외 처리
  • SyntaxError: 구문 오류

알아두어야 할 기본 용어

-표현식: 자바스크립트에서 값을 만들어내는 간단한 코드
-문장: 하나 이상의 표현식이 모여 문장(statement)을 구성. 문장 끝에는 마침표를 찍듯이 세미콜론(;) 또는 줄바꿈을 넣어서 문장의 종결을 나타냄
-프로그램: 줄바꿈으로 문장을 구분해 코드를 작성
-키워드: 자바스크립트가 처음 만들어질 때 정해놓은 특별한 의미가 있는 단어

-식별자: 프로그래밍 언어에서 이름을 붙일 때 사용하는 단어. 주로 변수명이나 함수명 등으로 사용
• 키워드 사용 안됨
• 숫자로 시작 불가
• 특수문자는_와$만 허용
• 공백 문자를 포함할 수 없음

-식별자를 만드는 일반적인 관례
• 클래스（Chapter 9-1 참조）의 이름은 항상 대문자로 시작
• 변수（Chapter 2-2 참조）와 인스턴스（Chapter 09-1 참조）, 함수（Chapter 05-1 참조）, 메소드（Chapter 06-1 참조） 의 이름은 항상 소문자로 시작
• 여러 단어로 이루어진 식별자는 각 단어의 첫 글자를 대문자

-식별자의종류

-주석: 프로그램 코드를 설명할 때 사용하며 프로그램 진행에는 전혀 영향을 주지 않음
1. HTML 태그 주석: <!---->로 문자열을 감싸 생성
2. 자바스크립트 주석
• [방법 1]//를 입력하는 것으로 한 줄 주석을 표현(// 뒤의 문장은 실행되지 않음)
• [방법2] /와 "를 입력하여 여러 줄 주석을 표현(/와 V 사이에 있는 모든 문장은 실행되지 않음)

-출력: 자바스크립트는 다른프로그래밍 언어와 비교해서 출력 방법이 많고 복잡한 편

• 간단한 표현식 결과 확인하기
  • 01: 구글 크롬의 주소창에 aboutblankl 입력해 빈 페이지로 들어가 단축키 Ctrl + Shift+ I (알파벳 '아이')를 눌러서 개발자 환경을 띄우기
  • 02: about:blank에서 [Console] 탭을 클릭해 구글 크롬 개발자 도구에 진입. 이곳에 어떤 값을 입력하면 곧바로 그 결과가 출력
• 경고창에 출력하기
  • 개발 전용에디 터를사용할 때의 출력하는 방법
  • alert() 함수를 사용하여 웹 브라우저에 경고창을 띄우기
• 콘솔에 출력하기
  • console.log() 메소드 사용

실습

• 알림창을 만드는 방법
  alert("알림창띄우기")

• 프롬프트 창에 입력하기
  prompt("이름을 입력하세요")
  prompt("나이를 입력하세요", "27")

• console.log("콘솔창에 출력")

• 입력받아 변수값에 저장
  var name = prompt("이름 : ");

• 웹브라우저 창에 출력
  document. write(name + "님 어서오세요");

학습한 내용 중 어려웠던 점 또는 해결못한 것들

자바스크립트 첫 시간이라 이론을 많이 했는데, 문법 사용하기가 어려웠던거같다.

학습 소감

학습 속도랑 방식을 다시 천천히 맞춰나가야할 한 주인거같다. 자바스크립트로 뭘 만들게 될지 너무 기대가 된다!!