자바스크립트

Javascript 기초1

이소금 2019. 9. 16. 13:37
반응형

자바스크립트란?

  • 개발자가 만든 문서에 방문자가 방문하여 어떤 동작을 취했을 때 그 동작에 대하여 반응이 일어날 수 있도록 도와주는 언어

  • HTML과 CSS로 정적인 웹사이트를 퍼블리싱 => 방문자의 영향 미치지 않음

  • 자바스크립트로 방문자의 동작에 따라 웹사이트가 유동적으로 반응

 

자바스크립트의 특징

  • 1. 인터프리터 언어

    • 줄의 순서대로(위 -> 아래) 해석. 에러가 발생한 구문 분석 동작하지 않음

  • 2. 클라이언트 스크립트 언어

    • 사용자 컴퓨터에서 실행 => 서버의 부하 줄일 수 있음

    • 서버스크립트 언어로 처리한다면 서버 일처리가 가중되어 부하가 걸림

  • 3. 객체 기반 언어(Object Oriented Language)

    • 객체와 그에 맞는 기능(메서드) 사용

  • 4. 공개된 언어

  • 5. 다양한 라이브러리

    • 제이쿼리, 제이쿼리 모바일, 센차터치, NODE JS, COCO 2d 등

 

자바스크립트 IDE 춘추전국시대

  • SublimeText

    • 장점: 자바스크립트 개발자라면 누구나 써본다, 가벼운 툴, 다양한 플러그인 제공, 모든 OS지원, 강력한 탐색 기능

    • 단점: 설정해야 할 것이 많음. 컴퓨터 바뀔 때마다 플러그인 재설치, 플러그인이 ruby로 되어있음, 큰 파일에서 속도저하(플러그인이 많을수록 더욱 저하), git 통합 힘듬

  • WebStorm

    • 장점: 메모리만 많다면 사용하기 좋음

    • 단점: 유료, 메모리 많이 잡아먹음, JVM에서 돌아가기 때문에 heap 영역을 많이 잡아야 함

  • EditPlus

    • 이클립스 나오기 전 한국 개발자들이 제일 많이 사용

  • Brackets(어도비)

    • 장점: 라이브 프리뷰(파일이 저장되지 않은 채로 실시간 크롬반영 가능), 무료, atom의 절반 크기, 코드완성기능 우수, CSS인라인으로 열어 빠른 편집 가능

  • ATOM(깃헙)

    • 장점: 새로운 기능 많이 업데이트, 커스터마이징 자유도 多, 패키지 제작 참여 활발

    • 단점: GUI 한글지원 無, 무거움, 소스코드 용량 클수록 속도 저하

  • VSCODE(MS의 Visual Studio의 라인)

    • 장점: git 통합, 디버거 내장, MS가 개발중이라 개발 중단에 대한 위험성 낮음

    • 단점: 프로젝트를 하나만 설정 가능해서 여러가지 프로젝트 동시열람 힘듬

 

자바스크립트의 선언

  • <script type = "text/javascript">   …자바스크립트 영역… </script>

  • 보통 <head>나 <body>에 선언하나 한국에서는 보통 <head>에 선언

  • /*   */로 주석처리

  • HTML문서에 데이터 출력 하지 않고 확인하기: console.log(“문자열”)

  • 세미콜론, 괄호 matters

  • Case Sensitive

자바스크립트 연동/내부 스크립트 분리

  • 외부 스크립트로 작성한 파일을 html 파일에 연동

    • 자바스크립트 소스 찾기 쉬움 & 관리 용이 & 소스 손상 염려 無

 

변수(Variable)

  • 데이터를 저장할 수 있는 메모리 공간

  • 문자형(String), 숫자형(Number), 논리형(Boolean), 비어있음(Null)

  • 변수 선언: var 변수명; or var 변수명 = 값;

    • 값에 원하는 형질을 삽입함으로써 변수의 타입을 정한다

  • Typeof

    • 지정한 데이터의 형질을 알고 싶을 때 사용하는 내장함수

연산자

  • 사칙연산 + 나머지

    • +, -, *, /, %

    • 변수 선언 해주기

문자 결합 연산자

  • 문자형 데이터 + 문자형 데이터 = 하나의 문자형 데이터

  • 문자형 데이터 + 숫자형 데이터 = 하나의 문자형 데이터

증감 연산자 / 비교 연산자  / 논리연산자

  • 변수–- or 변수++

    • var A = B–- 는 A에 B를 저장한 후 감소 

  • --변수 or ++변수

    • var A = --B 는 B를 감소 후 A에 저장

  • >, <, >=, <=

    • A == B: A와 B의 값은 같다(데이터 형 달라도 값만 같으면 ok)

    • A != B: A와 B의 값은 다르다

    • A === B: A와 B의 값은 같다(데이터 형도 같아야함)

    • A !== B: A와 B의 값은 다르다(A와 B가 다르면 true 반환)

  • !, ||, &&

    • !: not

    • ||: or

    • &&: and

 

삼향 조건 연산자

  • IF문을 한줄로 표현

  • 조건식 ? 실행문 1 : 실행문 2;

제어문

  • 조건문

    • 조건에 따라 실행

    • If

    • Else

    • Elseif

  • 선택문

    • 일치하는 값이 있을 경우에만

    • switch

  • 제어문

    • 실행문을 지정하는 횟수만큼만

    • While

    • for

 

If문

if(조건식){

실행문;

}

If문 예제

예제: 회원 탈퇴 여부 묻기

중첩 if문

 

선택문 with 예제

  • Case의 값을 검사하여 변수와 경우의 값에서 일치하는 경우 리턴

  • 일치하는 값이 없을 경우 default 실행 후 종료

반복문

  • For, While, do while

  • 실행문을 원하는 횟수만큼 반복할 수 있다

 

While

  • 조건문을 만족시킬 때까지 실행문을 반복

  • 조건식 -> 실행문 -> 증감식 -> 조건식 -> …

Do While

  • 조건식이 맞을 때 까지 do 실행

  • While에 충족이 되면 loop에서 나가진다

 

For

  • For 역시 조건식이 충족이 될 때까지 반복한다

  • 조건식 -> 실행문 -> 증감식 -> 조건식 -> 실행문 -> …

 

Break / continue

  • break

    • 모든 반복문에서 조건과 상관없이 loop out

    • 예제

  • Continue

    • 실행문 무시하고 바로 조건문으로 돌아가서 검사

 

중첩 for문

  • For 안의 for

  • 공전과 자전

    • 지구 한바퀴 공전할 때 달이 다섯바퀴 자전한다 가정

    • 지구 한바퀴 공전 => 달 다섯바퀴 자전

    • 지구 두바퀴 공전 => 달 열바퀴 자전 …

 

반응형

'자바스크립트' 카테고리의 다른 글

자바스크립트 함수 및 이벤트  (0) 2019.09.16