반응형 웹 디자인

  • 디바이스나 브라우저의 크기에 상관없이 동일한 콘텐츠를 사용할 수 있도록 디자인
  • 스마트 폰 애플리케이션을 제작할 때도 이 개념은 중요
  • 웹에서는 css 의 media query 와 상대적인 크기 개념으로 구현을 합니다.

JavaScript

1.개요

  • script는 웹 페이지의 처리능력을 향상시키기 위해서 등장
    • 동적으로 DOM 객체의 변환을 하는 것이 목적
  • 초창기에는 apple script, vb script 등이 존재했지만 지금은 javascript를 표준으로 간주
    • java 와 javascript는 근본적으로는 관계가 없습니다.
  • 최근에는 타입의 안정성(정적인 자료형 도입, 클래스 의 개념)을 추가한 typescript도 있습니다.
  • 기본적으로는 브라우저 안에서만 동작하는 클라이언트 사이드 언어
  • 웹 프로그래밍을 할 때는 자바스크립트가 필수 요소라서 최근에는 라이브러리나 프레임워크를 이용해서 자바스크립트 문법으로 서버 사이드 개발이 가능한 node.js 도 등장했고 브라우저 엔진 위에서 동작하는 응용 프로그램을 만드는 용도로도 사용이 되며 스마트 폰 앱 애플리케이션 제작에도 활용됩니다.
  • 자바스크립트 문법 만으로 웹 서버와 클라이언트를 같이 제작하기도 합니다.

M(Mongo DB)E(Express.js)A(Angular.js)N(Node.js) 이라고 합니다.
A 대신에 react 나 vue를 사용하기도 합니다.

  • 최근에는 텐서플로우 와 같은 AI 분야의 라이브러리도 등장

2.사용 방법

1) 외부 파일에 만들어두고 사용 - 가장 권장

<script src="자바스크립트 파일 경로"></script>

2) html 파일 내부에서 만들어서 사용 

<script>
내용
</script>

3) 태그 안에 만들어서 사용
<태그 이벤트="script:내용"></태그>

3.작성 시 주의 사항

  • 대소문자 구별
  • ;은 한줄에서 2개 이상의 명령을 작성할 때 명령을 구분하기 위해서 사용
  • 명령어마다 ;을 할 필요는 없지만 한 줄에 2개의 명령어를 사용할 때는 필수
  • 문자열을 만들 때 작은 따옴표나 큰 따옴표를 동일한 역할을 수행
    • 작은 따옴표나 큰 따옴표 안에 다른 따옴표를 할 때는 반드시 나중에 만들어진것을 먼저 닫아야 합니다.
  • 자바스크립트나 파이썬은 줄 단위로 번역하면서 실행되기 때문에 뒷부분에 에러가 있더라도 에러가 없는 부분까지는 수행되고 예외가 발생할 수 도 있습니다.

4.제어문자

  • \ 다음에 하나의 영문자를 추가해서 만든 특별한 문자 상수
  • \n: 줄 바꿈
  • \t: 탭
  • \', \", \\: ', ", \를 의미

5.주석

  • //내용 : 한 줄 주석
  • /* 내용 */ : 여러 줄 주석

6.Literal

  • 사용자가 직접 작성한 데이터
    • 숫자 리터럴: 10진수 형태로 작성
    • 문자열 리터럴: '문자열' 또는 "문자열"
    • 논리형 리터럴: true, false
    • 참조형 리터럴: null(만들어졌지만 가리키는 데이터가 없음), undefined(만들어지지 않은 데이터)

var a //a가 undefined
var b = null //b는 null

7.변수 선언

var 변수명 = 값

  • 처음에 값을 대입하지 않으면 변수는 생성되지 않습니다.
  • 초기값을 대입하지 않은 경우에는 나중에 값을 대입해야만 생성되는것으로 간주
  • var를 붙이지 않고 만드는 것이 가능한데 이 경우는 실제로는 변수가 만들어지는 것으로 보지 않습니다.
  • var를 붙이지 않으면 전역변수의 개념처럼 동작합니다.
  • 변수명 = 값 이런식으로 하기도 합니다.

8.데이터 출력

1) 브라우저 창에 출력
document.write(메시지 또는 변수 나 상수 또는 연산식 그리고 함수 수행)
document.writeln(메시지 또는 변수 나 상수 또는 연산식 그리고 함수 수행)

  • writeln은 줄 바꿈이 아니고 한 번에 수행해 달라는 요청
    • ln이 없으면 모아서 출력하는 것이고 ln이 있으면 모으지 말고 바로 출력해 달라는 것입니다.
    • 메시지가 길 때 한번에 작성하는 것이 어려우면 write를 이용해서 나누어서 작성한 후 한번에 출력해달라고 합니다.

2) 대화상자에 출력 alert(출력할 내용)

  • 최근 브라우저에서는 별도의 윈도우 출력하는 것을 권장하지 않아서(팝업 금지) 옵션을 변경하지 않으면 출력되지 않을 수 있습니다.

3) 브라우저 디버거에 출력 console.log(출력할 내용)

  • 화면에서는 보이지 않고 디버거 창을 열어서 콘솔에서 확인
  • 크롬의 경우는 마우스 오른쪽 클릭해서 [검사]를 실행해야 확인이 가능

9.스크립트 작성 위치

  • 스크립트는 html 문서 내의 어느곳에나 작성 가능
  • 순서대로 실행되므로 자신이 사용하고자 하는 객체는 호출하기 전에 만들어져 있어야 합니다.
  • 예전에는 head에 만들었는데 최근에는 body 안에 만들기도 합니다.

10.html 파일을 만들고 작성

<script>
    //변수 만들기
    var msg = "자바스크립트"

    //브라우저에 출력
    document.write(msg)
    //대화상자에 출력
    alert("대화상자에 출력")
    //콘솔에 출력
    console.log("콘솔에 출력")
</script>

11.javascript 디버깅

  • 자바스크립트는 대부분의 IDE가 디버깅 기능을 제공하지 않습니다.

1) 자바스크립트는 에러가 없는 부분까지 실행하는 경우가 많기 때문에 중간 중간 출력하는 코드를 삽입해서 어디까지 에러없이 실행되는지 확인해 볼 수 있습니다.

2) 브라우저의 검사 기능을 이용

  • 크롬이나 IE는 검사 기능을 이용하면 문서의 구조, 그리고 css 적용, 자바스크립트 에러를 어느 정도까지는 확인할 수 있도록 해줍니다.
  • 단지 에러라고 출력합니다. 예외 종류를 구체적으로 알려주지는 않습니다.

document.wris is not a function 

* 위 문장만 가지고는 document 가 없는 것인지 wris가 없는 것인지 알 수 없습니다.

12.배열 생성

  • 자바스크립트의 배열은 List 입니다.
var 배열명 = [데이터 나열]
var 배열명 = new Array(데이터 나열)

  • 데이터 사용 배열명[정수 인덱스]

  • 없는 인덱스를 사용하면 가져올 때는 undefind 대입할 때는 추가가 됩니다.

    파이썬이나 자바스크립트는 객체가 클래스로부터 만들어지지 않고 Map의 인스턴스로 보는 것이 이해하기 편리합니다 .

13.자료형 변환

1) 숫자로 된 문자열에 정수를 하게되면 문자열을 숫자로 변환해서 을 수행

2) 자료형(데이터)를 이용하면 데이터를 자료형으로 변환

  • Number, Boolean, String 으로 변환 가능

3) 다른 자료형 객체를 문자열로 변환할 때는 toString() 메소드의 결과를 이용해도 됩니다.

14.연산자

1) 최우선 연산자

  • [인덱스]: 배열에서 인덱스번째 데이터를 가리키기 위한 연산자
  • . : 객체가 자신에게 속한 속성이나 메소드를 호출할 때 사용하는 연산자

2) 증감 연산자

  • 정수 변수에만 사용가능한 연산자
  • ++, --
  • ++는 변수의 값을 1증가시키고 --는 변수의 값을 1감소시키는 연산자
  • 명령문에 사용되는 경우 ++를 변수 앞에 사용하면 변수의 값을 증가시키고 명령문에 변수의 값을 사용하고 변수 뒤에 사용하면 변수의 값을 명령문에 사용하고 변수의 값을 증가시킵니다.

3) 산술 연산자

  • 숫자 데이터끼리만 사용
  • % : 나머지 구해주는 연산자
  • *, / : 곱 과 나누기 연산자
  • +, - : 더하기 와 빼기 연산자

4) 결합 연산자

  • 문자열 과 다른 종류의 데이터 또는 문자열과의 결합에 사용: +

5) 비트 논리 연산자

  • 정수를 2진수로 변환해서 비트 단위로 연산한 후 다시 10정수로 리턴해주는 연산자
  • & : 둘 다 1인 경우만 1 그 이외의 경우는 0 - and
  • | : 둘 다 0인 경우만 0 그 이외의 경우는 1 - or

  • ^ : 두 개가 같으면 0 다르면 1 - xor(eXclusive OR)

    파이썬의 numpy, pandas 나 R에서는 collection 에 이 연산자를 이용해서 조건 필터링을 합니다.

  • ~ : 1의 보수

  • <<: 왼쪽의 데이터를 오른쪽의 숫자만큼 왼쪽으로 shift - 1번 할 때 마다 * 2
  • >>: 왼쪽의 데이터를 오른쪽의 숫자만큼 오른쪽으로 shift - 1번 할 때 마다 /2

6) 비교 연산자

  • >,>=, <, <= : 크기 비교

  • == : 값의 일치 여부를 확인

  • === : 값과 자료형까지 일치하는지 확인

  • "123" == 123 : true -> 123을 문자열로 변환해서 비교해버립니다.

  • 123 == 123 : "123" == "123"

  • "123" === 123 : false

  • != : 값의 불일치 여부를 확인

7) 조건 논리 연산자

  • && : and

  • || :or

  • 데이터 전체를 하나로 보고 연산을 해서 결과나 boolean 1개로 리턴

8) 여러 개의 데이터로 구성된 데이터끼리 and 나 or 연산을 할 때는 대부분 &

9) 삼항 연산자 (조건식)?명령1:명령2

  • 조건식이 true이면 명령1 false 이면 명령2
  • 조건식은 boolean 데이터가 나오는 식이어도 되지만 숫자의 경우는 0이면 false 그 이외의 수는 true로 간주하고 존재하는 데이터면 true 존재하지 않는 데이터(null, undefined)는 false로 간주합니다.

var a = 10

  • a?100:200 -> a는 10이라는 값을 가지고 있어서 true로 간주

  • a = 0 -> a는 false로 간주

var ar ;
ar은 false
ar = [100, 200];
ar은 true

10) 대입 연산자

  • = : 오른쪽의 데이터를 왼쪽의 변수에 대입

  • +=: 왼쪽의 변수에 저장된 값과 오른쪽의 데이터를 + 연산을 해서 결과를 왼쪽의 변수에 대입

var a = 10
a += 7
a = a + 7 과 같습니다.

11) new

  • 생성자를 호출할 때 사용하는 연산자로 생성자를 이용해서 객체를 생성하고 생성한 객체의 참조를 리턴하는 연산자

12) this

  • 생성자나 인스턴스 메소드 안에서 객체 자신을 가리키는 포인터

13) typeof

  • 데이터의 자료형을 문자열로 리턴해주는 연산자

14) delete

  • 데이터를 삭제하는 연산자

15) instance of

  • 객체가 특정 클래스로부터 만들어 졌는지 확인해서 boolean 으로 리턴해주는 연산자

16) in

  • 속성이 객체에 존재하는지 확인해서 boolean으로 리턴하는 연산자

15.제어문

1) 제어문의 종류

  • 분기문 : 조건이나 값에 따라 다른 문장을 수행하도록 해주는 명령어

    • if : 조건에 의한 분기
    • switch : 값에 의한 분기

  • 반복문(Loop - Iteration)

    • while: 조건이 false가 될 때 까지 수행
    • do ~ while: 일단 한 번은 하고 조건이 false가 될 때 까지 반복
    • for: 시작점부터 종료하는 부분까지 하나의 괄호안에 모두 작성
    • for - each : for ~ in - 어떤 객체나 데이터의 모임을 순서대로 방문(순회)
  • 자바스크립트는 데이터의 모임 뿐 아니라 객체도 for-in 사용 가능

2) if

  • 조건 분기를 위한 명령어
if(조건1){
    조건1의 내용이 true 일 때 수행할 내용;
}else if(조건2){
    조건1의 내용이 false 이고 조건2가 true일 때 수행할 내용;
}else if(조건3){
    앞의 모든 조건이 false이고 조건3 이 true일 때 수행할 내용;
}..
else{
    앞의 모든 조건이 false일 때 수행할 내용
}
  • if는 필수이고 else if는 생략가능하고 여러 개 사용도 가능
  • else는 생략가능하고 1번만 사용 가능

3) switch

  • 값에 의한 분기
  • switch(변수 또는 정수나 문자열을 리턴하는 연산식){
  case 값1:
      () 안의 결과가 값1일 때 수행할 내용;
      break;
  case 값2:
      () 안의 결과가 값2일 때 수행할 내용;
      break;
  ...
  default:
      일치하는 값이 없을 때 수행할 내용
      break;
}

  • break가 없으면 break를 만날 때 까지 계속 수행합니다.

results matching ""

    No results matching ""