GitHub - ss00-coder/study-js

JavaScript 😺

자바스크립트(Javascript)

1. 퍼즐 조각처럼 코드 형태로 HTML 페이지에 내장된다.
2. 컴파일 과정 없이 브라우저 내부의 자바스크립트 처리기(인터프리터)에 의해 바로 실행된다.
    ※ 개발이 발전됨에 따라 컴파일 과정이 가능해졌으며, Node.js로 서버 환경을 구축한다.
    
[index.html]    			[웹 브라우저]
<script>
    자바스크립트 코드		  인터프리터 -> 자바스크립트 실행
</script>

웹 페이지에서 자바스크립트의 역할

웹 페이지는 3가지(HTML, CSS, JS) 코드가 결합되어 작성된다.
자바스크립트는 사용자의 입력을 처리하거나 웹 어플리케이션을 작성하는 등
웹 페이지의 동적 제어에 사용된다.

- 사용자의 입력 및 연산
    HTML 폼은 입력창만 제공하고,
    키, 마우스의 입력과 연산은 오직 자바스크립트로만 처리가 가능하다.

- 웹 페이지 내용 및 모양의 동적 제어
    HTML 태그의 속성이나 콘텐츠, CSS 속성 값을 변경하여
    웹 페이지에 동적인 변화를 일으키는 데에 활용된다.

- 브라우저 제어
	    브라우저 윈도우의 크기나 모양 변경, 새 윈도우나 탭 열기, 다른 웹 사이트 접속,
	    브라우저의 히스토리 제어 등 브라우저의 작동을 제어하는 데 활용된다.

- 웹 서버와의 통신(Ajax)
	    웹 페이지가 웹 서버와 데이터를 주고 받을 때 활용한다.

- 웹 애플리케이션 작성(API)
	    자바스크립트 언어로 활용할 수 있는 많은 API를 제공하므로,
	    웹 브라우저에서 실행되는 다양한 웹 애플리케이션을 개발할 수 있다.

자바스크립트를 작성할 수 있는 위치

1. HTML 태그의 이벤트 리스너 속성에 작성
    HTML 태그에는 마우스가 클릭되거나 키보드의 키가 입력되는 등의 이벤트가 발생할 때
	    처리하는 코드를 등록하는 리스너 속성이 있다.

2. <script></script> 태그 내에 작성
	    <head></head>, <body></body>, <body>태그 밖 등 어디든 들어갈 수 있다.
	    웹 페이지 내에서 여러 번 작성할 수 있다.

3. 자바스크립트 파일에 작성
	    자바스크립트 코드를 확정자가 .js인 별도의 파일로 저장하고,
	    <script src".js경로"></script>

4. URL 부분에 작성
	    <a> 태그의 href 속성 등에도 자바스크립트 코드를 작성할 수 있다.
	    "javascript:"라는 키워드를 작성해야 href 속성에 JS 코드를 작성할 수 있다.

자바스크립트로 HTML 요소 출력

자바스크립트 코드로 HTML 요소를 웹 페이지에 직접 삽입하여 브라우저 윈도우에
출력되게 할 수 있다. 이때 document.wirte() 혹은 document.writeln()을 사용한다.

자바스크립트 다이얼로그

사용자에게 메세지를 출력하거나, 입력을 받을 수 있는 3가지 다이얼로그가 있다.

- 프롬프트 다이얼로그
	    prompt("메세지", "디폴트 값");

    사용자가 입력한 문자열 값을 리턴하지만 아무 값도 입력하지 않으면 ""을 리턴,
	    취소나 강제로 닫으면 null을 리턴한다.
	    "디폴트 값"은 생략이 가능하다.

- 확인 다이얼로그
	    confirm("메세지");

	    확인/취소 버튼을 가진 다이얼로그를 출력한다.
	    확인 true, 취소 혹은 강제로 닫을 시 false를 리턴한다.

- 경고 다이얼로그
	    alert("메세지");

데이터 타입과 변수

1. 자바스크립트 식별자(이름)
	    식별자(identifier)란 자바스크립트 개발자가 변수, 상수, 함수에 붙이는 이름이다.
	    식별자를 만들 때 다음 규칙을 준수해야한다.

	    - 첫 번째 문자: 알파벳, 언더바, $문자만 사용가능
	    - 두 번째 이상 문자: 알파벳, 언더바, 0-9, $ 사용가능
	    - 대소문자 구분: data와 dAta는 다른 식별자이다.
	    - 키워드(예약어) 사용 불가

2. 문장 구분
	    세미콜론으로 문장과 문장을 구분한다.
	    한 줄에 한 문장만 있는 경우 세미콜론을 생략할 수 있다.

	    i = i + 1		(O)
	    j = j + 1;		(O)
	    k = k + 1; m = m + 1;	(O)
	    n = n + 1 p = p + 1	(X)

3. 주석
	    - 한 줄 주석 : //
	    - 범위 주석 : /* */

4. 데이터 타입
	    - 숫자 타입(number)
	    - 논리 타입(bool)
	    - 문자열 타입(string)
	    - 객체 레퍼런스 타입(object): Object, Array, Math, Date, ...
	    - undefined: 타입이 정해지지 않은 것을 의미한다.
	    - null: 값이 정해지지 않은 것을 의미한다.

5. 변수
	    - var 키워드로 변수를 선언한다.

	    var score;
	    var year, month, day;
	    var address = "남양주";

	    - var 키워드 없이 변수를 선언할 수 있다.

	    age = 20;

	    ※ 대혼란

	    var age = 20;
	    var age = 10;
	    age = 5;

	    모두 선언 또는 수정이다.

6. 지역 변수와 전역 변수
	    변수의 사용 범위(scope)에 따라서 전역 변수(global)와 지역 변수(local)로 나뉜다.
	    var로 선언 시, scope는 반드시 함수의 영역만 판단한다.

	    전역 변수: 함수 밖에서 선언되거나 함수 안에서 var 키워드 없이 선언.
	    지역 변수: 함수 안에서 var 키워드로 선언. 선언된 함수 내에서만 사용 가능.

7. 상수
	    let: 수정 가능
	    const: 수정 불가능

함수

코드의 재사용을 위한 목적으로 사용된다.
인자(파라미터, parameter, variable): 매개변수(선언부)
인수(아규먼트, argument, value): 매개변수에 들어가는 값(사용부, 호출부)

함수의 선언

function 식별자(arg1, arg2, arg3, ...) {
	    실행할 문장;
	    return 리턴 값;
}

- function: 함수 선언 표시한다
- 식별자: 동사로 작성한다
- parameter: 여러 개 있을 때에는 콤마로 분리하고 자료형을 따로 작성하지 않는다. 생략도 가능하다
- return: 생략이 가능하다. 리턴타입은 따로 작성하지 않고, return을 만나면 함수는 즉시 종료된다

전역 함수

- eval()
	    문자열 형태의 수식을 전달받아서 수식을 계산한다.
	    eval("2+3*6-7") == 13;

- parseInt()
	    문자열을 정수로 변환.
	    parseInt("34") === 34;

- isNaN()
	    값이 NaN이면 true
	    NaN이 아니면 false

- isFinite()
	    값이 NaN이 아니면 true
	    NaN이면 false

객체

객체의 고유한 속성을 프로퍼티(property)라고 부르며, 여러 프로퍼티와 값의 쌍으로 표현된다.
객체가 호출하는 함수는 메소드라고 부른다.

account = {name: '한동석', number: '110-11-1232142', password: '1234'}
account.name
account.number
account.password
account["name"]
account["number"]
account["password"]

account.age = 20

account.deposit = function() {...}

account.deposit();

BOM(브라우저 객체 모델)

자바스크립트를 이용하면 브라우저의 정보에 접근하거나 브라우저의 여러 기능들을 제어할 수 있다.
이때 사용할 수 있는 객체 모델을 브라우저 객체 모델(BOM)이라고 한다.
브라우저 객체 모델은 문서 객체 모델(DOM)과 달리 W3C의 표준 객체 모델은 아니다.
하지만 자바스크립트가 브라우저의 기능적인 요소들을 직접 제어하고 관리할 수 있는 방법을 제공해준다.

window 객체

웹 브라우저의 창(window)을 나타내는 객체로, 대부분의 웹 브라우저에서 지원한다.
자바스크립트의 모든 객체, 전역함수, 전역변수들은 자동으로 window 객체의 프로퍼티가 된다.

location 객체

location 객체는 현재 브라우저에 표시된 HTML 문서의 주소(URL)를 얻거나,
브라우저에 새 문서를 불러올 때 사용할 수 있다.
location 객체의 프로퍼티와 메소드를 이용하면,
현재 문서의 URL 주소를 다양하게 해석하여 처리할 수 있게 된다.

- href: 페이지의 URL 전체 정보 반환, URL을 지정하여 페이지 이동도 가능.
- pathname: URL 중 경로 부분의 정보를 반환한다.
- port: 포트번호를 반환한다.
- reload(): 새로 고침
- assign(): 현재 URL을, 지정한 URL로 바꿔서 페이지 이동
- replace(): 현재 URL을, 지정한 URL로 바꿔서 페이지 이동, 이전 페이지로 돌아갈 수 없게 한다.

history 객체

history 객체는 브라우저의 히스토리 정보를 문서와 문서상태 목록으로 저장하는 객체이다.

- go(n): n번째 페이지로 이동(0부터 시작)
	    1. n이 양수일 때 : 앞으로
	    2. n이 음수일 때 : 뒤로
	    3. n이 0일 때 : 새로고침

- back(): 뒤로 한 칸 이동
- forward(): 앞으로 한 칸 이동

jQuery

요소들을 선택하는 강력한 방법을 사용하고 선택된 요소들을
효율적으로 제어할 수 있는 자바스크립트 라이브러리이다.

jQuery 기본 문법

$("선택자")

값 가져오기

$("선택자").val(): 입력할 값을 가져올 때
$("선택자").text(): 미리 작성된 값을 가져올 때

반복문

$.each(iterator, function(index, item){});
$.each(iterator, (index, item) => {});
iterator.each(function(index, item{}));
iterator.each((index, item) => {});

jQuery를 사용하면, 순수 Javascript에 비해 속도가 느려진다. 하지만 간결한 문법으로 인해 개발 속도 증가와 처리비용 감소에 대한 장점이 있으며, 60% 이상의 웹 사이트에서 사용하고 있기 때문에 적절한 상황에 맞춰 사용할 줄 알아야 한다.

Name		Name	Last commit message	Last commit date
JS_day01		JS_day01
JS_day02		JS_day02
JS_day03/day03		JS_day03/day03
JS_day04		JS_day04
JS_day05		JS_day05
JS_day06		JS_day06
README.md		README.md

Navigation Menu

Repository files navigation

JavaScript 😺

자바스크립트(Javascript)

웹 페이지에서 자바스크립트의 역할

자바스크립트를 작성할 수 있는 위치

자바스크립트로 HTML 요소 출력

자바스크립트 다이얼로그

데이터 타입과 변수

함수

함수의 선언

전역 함수

객체

BOM(브라우저 객체 모델)

window 객체

location 객체

history 객체

jQuery

jQuery 기본 문법

값 가져오기

반복문

About

Releases

Packages

Used by

Contributors

Languages

Latest commit

History

Folders and files

Repository files navigation

JavaScript 😺

자바스크립트(Javascript)

웹 페이지에서 자바스크립트의 역할

자바스크립트를 작성할 수 있는 위치

자바스크립트로 HTML 요소 출력

자바스크립트 다이얼로그

데이터 타입과 변수

함수

함수의 선언

전역 함수

객체

BOM(브라우저 객체 모델)

window 객체

location 객체

history 객체

jQuery

jQuery 기본 문법

값 가져오기

반복문

About

Resources

Stars

Watchers

Forks

Releases

Packages

Used by

Contributors

Languages