JSP directive

JSP directive에는 3가지 종류가 있다:

page directive
include directive
taglib directive

기본 문법 : <%@ directive attribute="value" %>

page directive

<%@ page attribute="value" %>

Attributes of JSP page directive

import : 특정 class나 interface나 페키지의 모든 멤버를 import 하는데 사용
contentType: HTTP response의 MIME(Multipurpose Internet Mail Extension)을 정의함
extends: servlet으로부터 상속받을 부모 클래스를 정의한다 (드물게 쓰임)
info: JSP 페이지에 대한 텍스트 정보를 설정함
buffer: JSP 페이지에서 생성 된 출력을 처리하기 위해 버퍼 크기를 킬로바이트 단위로 설정 <버퍼의 기본 크기: 8Kb>
language: JSP 페이지에서 사용되는 스크립팅 언어를 지정 <기본값: java>
isELIgnored: jsp의 EL (Expression Language)을 무시할 수 있음 <default 값: false(기본적으로 EL이 사용됨)>
isThreadSafe: 서블렛과 JSP둘다 멀티쓰레딩 방식으로 작동하여서, isThreadSafe 속성을 사용하여 이 방식을 제어할 수 있다. <default 값: true>이다.,

errorPage:오류 페이지를 정의하는 데 사용 <현재 페이지에서 예외가 발생하면 오류 페이지로 리디렉션> 
isErrorPage: 현재 페이지가 오류 페이지임을 선언하는 데 사용 <예외 개체는 오류 페이지에서만 사용 가능>

Jsp Include Directive

이 태그는 외부 HTML, JSP, text file을 현재의 파일에 include하는데에 사용된다. 

장점은 코드 재사용성.

Syntax: <%@ include file="resourceName" %>  

JSP Taglib directive

많은 태그를 정의하는 태그 라이브러리를 정의하는 데 사용. TLD (Tag Library Descriptor) 파일을 사용하여 태그를 정의합니다.

 사용자 정의 태그 섹션에서는이 태그를 사용하다.

uri, prefix의 두개의 요소를 가짐

<%@ taglib uri="uriofthetaglibrary" prefix="prefixoftaglibrary" %>  

JSP Action Tags

각 JSP 액션 태그는 일부 특정 태스크를 수행하는 데 사용됩니다.

액션 태그는 페이지 간의 흐름을 제어하고 Java Bean을 사용하는 데 사용됩니다. Jsp 작업 태그는 다음과 같습니다.

JSP 정리내용:

JSP 기술은 Servlet 기술과 마찬가지로 웹 애플리케이션을 만드는 데 사용됩니다. 표현 언어, JSTL 등과 같은 서블릿보다 더 많은 기능을 제공하기 때문에 서블릿의 확장으로 생각할 수 있습니다.

JSP 페이지는 HTML 태그와 JSP 태그로 구성됩니다. JSP 페이지는 디자인과 개발을 분리 할 수 ​​있기 때문에 Servlet보다 유지 관리가 더 쉽습니다. Expression Language, Custom Tags 등과 같은 몇 가지 추가 기능을 제공합니다.

JSP 스크립팅 요소

스크립팅 요소는 jsp 내부에 Java 코드를 삽입하는 기능을 제공합니다. 세 가지 유형의 스크립팅 요소가 있습니다.

• scriptlet tag
• expression tag
• declaration tag

JSP scriptlet tag

스크립틀릿 태그는 JSP에서 Java 소스 코드를 실행하는 데 사용됩니다. 구문은 다음과 같습니다.

<% 자바 소스 코드 %>  

예시)

JSP 표현식 태그

내에 배치 코드 JSP 식 태그가 되는 응답의 출력 스트림에 기록 . 따라서 데이터를 쓰기 위해 out.print ()를 쓸 필요가 없습니다. 주로 변수 또는 메서드의 값을 인쇄하는 데 사용됩니다.

JSP 표현식 태그의 구문

<%=  statement %>  

JSP 선언 태그

JSP에서 필드와 메서드를 선언하기 위해 사용하는 태그이다.

<%!  field or method declaration %>  

JSP Implicit Objects

JSP에는 9개의 내장객체가 있다.

       Object                                Type

각 Object가 abbreviation된 형태로 사용할 수 있다.

1. request           :      클라이언트의 http 요청 정보를 저장하고 있는 객체

                               요청시마다 만들어지는 객체

  javax.servlet.ServletRequest ( 아래의 부모 )

  javax.servlet.http.HttpServletRequest                     

2. response         :      http요청에 대한 응답정보를 저장하고있는 객체 

 javax.servlet.ServletResponse ( 아래의 부모 ) 

 javax.servlet.http.HttpServletResponse

3. pageContext    :      JSP페이지에 대한 정보를 저장( 응답 페이지실행에 필요한 context정보 저장한 객체 )

                                 하나의 서블릿에 하나의 pageContext가 존재

                                  다른 기본객체(나머지8개 기본객체)들을 프로그램적으로

                                  접근하기위한 객체 (형변환필요)

                                   실행중인 jsp정보를 담고있다.

                                  가장 일찍 객체가 사라진다. lifeScope가 가장짧다

                                   out/ request / response/ session정보를 얻는게 가능

                                   pageContext.getOut();

                                   pageContext.getReqeust();

                                   pageContext.getSession();

                                   []javax.servlet.jsp.PageContext

4. session           :      HTTP 세션정보를 저장( client가 서버에 접속했을 때 정보를 저장한 객체 )

                              클라이언트별로 만들어지는 객체( 클라이언트에서 새로운 요청이 있어도 session객체

                              에 속성들이 그대로 유지됨 )

                                   javax.servlet.http.HttpSession

5. application       :      웹 어플리케이션에 대한 정보를 저장

                                  웹 어플리케이션을 표현하기위한 객체

                                  모든 jsp파일이 다 공유

                                   ( 동일한 application의 context정보를 저장하고있는 객체 )

                                   ( 즉 한 플젝에 하나 존재하므로 하나로 다 공유가능 )

                                   톰캣 구동시 만들어지는 객체로 톰캣 중지시 사라지며 lifeScope가 가장 길다

                                   서블릿정보나 플젝 실제 경로등을 가지고 있음

                                   javax.servlet.ServletContext

6. out                 :      JSP페이지가 생성하는 결과를 출력할때 사용되는 출력스트림

                                    javax.servlet.jsp.JspWriter

7. config             :      JSP페이지에 대한 설정 정보를 저장( 설정관련 )

                              서블릿의 구성정보에 접근( 특정페이지의 서블릿 설정 정보를 저장하고있는 객체 )

                                    javax.servlet.ServletConfig

                                    서블릿내에서 ( this는 HttpServlet 을말함 . 이걸 상속받음! )

                                            ServletConfig config = this.getServletConfig();

8. page               :      JSP페이지를 구현한 자바 클래스 인스턴스이다( this 개념 )( 객체 그자체 )

                                   java.lang.Object

9. exception        :      예외객체. 에러 페이지에서만 사용됨

                                   java.lang.Throwable

목차:

1) JSP 프로젝트 생성법

2) github에 프로젝트 연결방법

3) 불필요한 파일을 제외시키는 gitignore파일 생성법

1) JSP 프로젝트 생성법:

New > Dynamic Web Project > 프로젝트 이름 > Finish

프로젝트 설정:

WAS 설정 (톰캣) : 프로젝트 우클릭 > Properties > Java Build Path > Libraries 탭에서 아무거나 클릭 > 오른쪽에서 [Add Libraries ...] 클릭 > Server Runtime에서 설치한 tomcat버전 선택 > Finish

Maven 프로젝트로 변환:

라이브러리 관리를 (협업에) 용이하게 만들기 위해 maven project로 변환시켜준다.

-> pom.xml파일이 자동생성됨.

방법: 프로젝트 선택 >우클릭> Configure > Convert to Maven Project 클릭

JSP 프로젝트에 필요한 html, jsp 파일들 생성하면 됨!!

참고하기: hyoje420.tistory.com/26

2) github에 프로젝트 연결방법

github에 올리는 과정 간략하게 정리:

1. 깃헙에 repo 새로 생성하기 (설정은 아무것도 하지 말고!!) 

2. 깃헙 주소 복사

3. STS4에서 연결하고 싶은 local repo를 선택하여 remote Git repo와 매칭시켜주기

    1) 먼저 2단계에서 생성한 새로운 remote git(Github repo)을 내 local PC에 clone하여 sts에 보여지게 해야한다. 

        이 과정을 sts에서 할수 있다. 

        Window탭 > Show View > Other > Git Repositories > Clone Git Repository 버튼을 클릭!  

    (remote git 주소가 뜨고 next > next> local git 주소 설정(맥은 자동으로 Users/맥유저이름/git 폴더로 세팅되더라) > Finish)

    2) 이제 remote repo 와 연결하고 싶은 local repo, 즉 내 프로젝트를 연결하기 위해 아래 작업을 수행한다.

        프로젝트 클릭(선택) > 우클릭 > Team > Share Project... > local git 주소 설정 > Finish  

    이렇게 하면 이제 local 과 remote가 연결이 되어서 git add, commit, push하면 된다.

    (즉, local에 add하고 remote로 commit, push 하는 것이다)

4. 이제 프로젝트 선택 > 우클릭 > Team > commit , push 등을 할 수 있게 옵션창이 바꿘다.

아래 이미지 참고: 
Github에 새로운 repository생성

Dynamic Web Project를 깃헙에 연동:

gitignore파일 생성법:

1) 구글에서 gitignore검색

2) 사이트에서 필요한 옵션들 입력 > 검색

3) 소스코드를 우클릭 > 다른이름으로 저장 > .gitignore 파일 이름으로 저장

jquery_get.html

ajax_data.html

ajax_data2.php

질문:

ajax로 html에서 php로 요청을 받아서 처리하려고 하는데 name, city 값을 인식을 못하는 것 같다....

binarywoo.dothome.co.kr/camp2021/Lab10/jquery_samples.html

해답: 나의 잘못은 $_post를 소문자로 적어서 그렇다!! -> 대문자로 바꿔줄것. ($_POST)

내용정리

p태그 중에서 인덱스 1 의 요소만 css 효과 적용하기

정답: [href]

The Document Ready Event

거의 모든 jQuery 문서에서 함수 시작 앞에 $(document).ready 부분을 보았을 것이다. 이건 모든 페이지가 로딩이 되고 난 뒤에 javascript효과를 적용시켜 혹시나 HTML 태그가 로딩이 되기 전에 javascript를 적용하려는 시도로 인한 에러를 막을 수 있다.

이건 내가 몰랐던 문법이었는데, function의 이름이 없을때는 그냥 익명함수라는 뜻이 아니라, $(document).ready(function(){}); 을 간단하게 표현한 방법이다.

jQuery Selectors

특정 HTML 요소를 선택하고 조작하기 위해 요소의 태그 name, id, classes, types, attributes,를 기반으로 jQuery selector를 적용하면 원하는 요소들만 css 효과, 이벤트-함수호출 를 이끌어낼 수 있다.

그냥 <p>태그 사용하기: $("p") 

id 속성 --> #test 사용하기: $("#test")

class 속성 --> .test 사용하기: $(".test")

$("[href]") --> href 속성(property)를 가지는 selector에 특정 css 적용하기

The on() Method

jQuery 기능들 중에서,

hide/show : 특정 요소를 숨기고/보이기

fade in/fade out: 특정 요소를 서서히 보이고/ 서서히 숨기기 (마치 파도 물결같은 효과: 밀물 / 썰물)

slideToggle() : 슬라이드가 서서히 보이고/사라지게 하는 함수

jQuery Callback Functions*** 매우중요

callback함수는 특정 효과가 완료되고 나서야 실행되는 함수를 지정할 때 그 함수를 callback 함수라고 합니다.

즉, 뭔가가 실행이 완료가 되고 다시 순서대로, 원래 흐름으로 되돌아 온다고 해서 callback이라고 함.

JavaScript 문은 본래 한 줄씩 실행됩니다. 그러나 효과를 사용하면 효과가 완료되지 않은 경우에도 다음 코드 줄을 실행할 수 있습니다. 이로 인해 오류가 발생할 수 있습니다.

이를 방지하기 위해 콜백 함수를 생성 할 수 있습니다.

현재 효과가 완료된 후 콜백 함수가 실행됩니다.

일반적인 구문 : $ ( selector ) .hide ( speed, callback );

위 예제를 돌리면, 첫번째에서 p태그가 완전히 사라지고 난 뒤에야 그때 alert창이 뜹니다.

jQuery - Chaining

jQuery를 사용하면 액션 / 메소드를 함께 연결할 수 있습니다.

체이닝을 사용하면 단일 문 내에서 여러 jQuery 메서드 (동일한 요소에서)를 실행할 수 있습니다.

이 방식의 장점은 같은 요소를 여러번 선택할 필요없이 여러 기능을 묶어서 한번에 실행할 수 있다는 점입니다.

(코드 간결화)

지금까지 우리는 한 번에 하나씩 jQuery 문을 작성했던 것을,

동일한 요소에서 여러 jQuery 명령을 차례로 실행할 수 있도록 chaining하는 기법이 추가되었다.

jQuery DOM Manipulation

jQuery에는 HTML 요소 및 속성을 변경하고 조작하는데 매우 유용합니다.

jQuery의 매우 중요한 부분 중 하나는 DOM을 jQuery라이브러리에서 제공하는 DOM관련 함수로 조작 할 수 있다는 것입니다.

www.w3schools.com/jquery/tryit.asp?filename=tryjquery_dom_html_set

jQuery .append/.prepend : 특정 요소에 이어붙일 때 사용한다. 순서대로 뒤에/앞에 이어붙일때.

jQuery .after/.before: 특정 요소에 뒤에/앞에 이어붙일때 사용

jQuery remove/empty

jQuery - Get and Set CSS Classes

jQuery로 특정 요소에 이벤트 효과로 CSS를 추가하거나 제거할 수 있다.

one of the most rejoicing hymns.....

www.youtube.com/watch?v=9w7euJuSBVs&list=PLB5fFsrZhPfC_ThY2iNJiMjn5U2e4BRDH&index=5

(맨 아래에 질문/해답 있음)

AJAX = Asynchronous JavaScript And XML.

AJAX just uses a combination of:

• A browser built-in XMLHttpRequest object (to request data from a web server)
• JavaScript and HTML DOM (to display or use the data)

참고: AJAX는 실제로 항상 XML을 사용하여 데이터를 전송하는 것은 아니다. 이름이 그렇다 할 뿐이지 실제로는 plain txt 파일이나, JSON파일로 전송하는 경우들이 있다.

중요한 점은 AJAX는 비동기식(asynchronously)으로 웹서버와 데이터를 주고받을(Exchange of data) 수 있다는 점이 획기적인 기능이다. 이 기능을 통해서 웹 페이지를 새로고침을 하지 않고도 웹 페이지의 부분만을 새로고칠 수 있다.

AJAX작동 방식: 이 정도는 기본으로 숙지할것 (모든 내용이 순차적으로 일어남)

AJAX의 핵심은 바로 XMLHttpRequest object.인데요, 이 객체가 바로 서버와 데이터를 교환하는 역할을 수행합니다.

모든 최신 브라우저(Crome, Firefox, IE7+, Edge, Safari, Opera)에는 XMLHtpRequest 개체가 내장되어 있습니다.

생성법:

보안 문제로, 최신 브라우저들은 여러 도메인 간의 접근을 막고 있는데요, 그래서 웹페이지에서 접근하고자 하는 XML파일은 사용하고 있는 해당 브라우저 서버와 같은 위치에 있어야 합니다.

최신 브라우저는 XMLHttpRequest Object 대신 Fetch API를 사용할 수도 있습니다. Fetch API 인터페이스를 통해 웹 브라우저는 웹 서버에 HTTP 요청을 할 수 있는데, 대신 XMLHttpRequest Object를 사용하는 경우 Fetch를 더 간단한 방법으로 동일한 작업을 수행할 수 있습니다.

아래 두 이미지는 꼭 중요한 내용이니 숙지하시기 바랍니다.

(추가로, 아래 내용은 네트워크 수업을 들었으면 더 이해하시기 쉬울겁니다. HTTP 헤더 내용이 조금 들어가 있네요)

첫번째로 XHTTP객체가 생성되었으면, 이 객체로 XmlHttpRequest를 서버에게 보내게 됩니다. 이러기 위해선, XMLHttpRequest 객체의 open(), send() 함수를 사용하게 됩니다.

아래 사진에서 보시는 바와 같이, 맨 처음에 open()함수를 통해 서버에게 어떤 request를 보내는것인지 그것에 대한 정보를 전달하게 됩니다.

그리고 send()함수로 Get, Post 방식에 따라 적절하게 함수를 호출합니다.

*** open()에서 3번째 파라미터는 async를 정하는데 사용됩니다. 주로 async:true; 값을 사용하여 비동기식으로 진행합니다.

데이터 교환에 있어, GET 방식이 POST방식 보다 빠르지만, POST방식을 따를 것을 권장합니다.

다음과 같은 경우 항상 POST 요청을 사용해야합니다.:

• 캐시된 파일은 선택사항이 아닐때(즉, 서버의 파일 또는 데이터베이스를 꼭 업데이트해야할 때).
• 서버에 대량의 데이터를 보내야 할때. (POST방식에는 크기 제한이 없다.)
• 사용자 입력(알 수 없는 문자를 포함할 수 있음)을 전송할때 POST가 GET 보다 강력하고 안전한 방법이다. (데이터 유실을 막음)

AJAX를 이용하여 서버에게 request를 보낼 수 있고, 이에 대한 response를 받아서 원하는 작업을 수행할 수 있다.

www.w3schools.com/js/tryit.asp?filename=tryjs_ajax_app

**추가로 왜 노드[0]인지 알아볼것

해답) 

비동기식으로 사용하게 되면 코드가 쓰레드로 인해서 코드를 순차적으로 실행하는게 아니라 

xmlhttp.send(); 밑의 코드를 실행하려고 할 것이다. 이게 문제가 되서 코드가 에러로 인해 작동이 안될텐데, 그래서 순차적으로 밑의 코드가 실행이 되도록 false로 설정하는 것이다.

그럼, open()을 하고 xhr.readyState상태를 0~4까지 실행을 완료한 뒤에 서버로 send()를 하게 될 것이다. 

비동기 여부는 true이면 비동기적으로, false면 동기적으로 호출을 하여, response가 올때까지 xhr.send()에서 브라우저는 대기하고 있을 것이다.

출처: https://unikys.tistory.com/232 [All-round programmer]

JS Browser BOM은 JavaScript가 브라우저와 "대화"할 수 있도록 도와주는 브라우저 개체 모델(BOM)이다.

The Window Object

윈도우 객체는 document객체의 parent 노드로써, 현 윈도우 페이지를 나타낸다.

윈도우 사이즈, 윈도우 열기, 닫기 등을 한다.

Window Location

윈도우의 정보를 알아내는데 사용된다.

현재 페이지의 url, path 주소 정보, 

Window History

현재 윈도우 히스토리를 트래킹하고 있어서 현재페이지에서 뒤로가기, 앞으로 가기 버튼을 만들수 있다.

(예를 들면 결제 페이지에서 "뒤로 가기" 버튼을 클릭해서 정보를 수정한다던지)

Popup Boxes

팝업 창을 활성화 시켜 작업을 수행할 수 있다. 

근데 팝업창은 단발성으로 그렇게 많이 사용되지 않아서 패스~

JavaScript Timing Events

Timing Events: 이벤트를 단발성, 주기적으로 활성화하기 위해서 사용하는 기능이다.

window 객체는 일정 시간이 지난 뒤에 함수를 호출할 수 있도록 다음 메소드를 제공합니다.
1. setTimeout() --> 일정 시간 후 한번만 실행
2. setInterval() --> 주기적으로 일정 시간 후에 실행됨

또한, 이렇게 설정된 함수의 호출을 취소할 수 있도록 다음 메소드를 제공합니다.
3. clearTimeout() --> setTimeOut()이 실행되고, 일정 시간 후에 이벤트가 일어나기 전에 미리 취소하는 것
4. clearInterval() --> setInterval()이 실행되고, 일정 시간 후에 주기적으로 이벤트가 일어나기 전에 취소하는 것

기본적인 문법은 각각 아래와 같습니다: (window prefix 생략가능)

setTimeOut method:

window.setTimeout(호출할함수, 지연시간);

setInterval method:

window.setInterval(호출할함수, 지연시간);

함수 취소 방법 문법도 중요한데, timeoutID를 (timing함수 반환값을 저장하는 변수) clear 해줘야 한다!!

window.clearTimeout(timeoutID);

window.clearInterval(timeoutID);

아래는 주기적 함수 실행 함수인 setInterval()을 실행 중에 멈춰버리는 clearInterval()함수 예제입니다.

JavaScript Cookies

쿠키는 주로 사용자 정보를 일정 기간 동안 저장하여, 사용자가 웹에 접근할때 서버에서 미리 사용자 정보로 사용자를 위해 커스텀 정보를 주거나 할 때 사용된다. 쿠키를 통해 또한 서버의 작업을 줄여줄 수 있다. 

자바스크립트 쿠키는 웹 설명이 더 간단 명료하다.

www.w3schools.com/js/js_cookies.asp

이어서, JS AJAX를 위한 다음 포스트를 참조해주세요!

binarywoo.tistory.com/19

www.w3schools.com/js/js_htmldom.asp 에서 한글로 정리한 내용입니다.

JavaScript HTML DOM

DOM: Document Object Model

HTML DOM을 사용하여 JavaScript는 HTML 문서의 모든 element 요소를 접근하여 변경할 수 있다.

HTML DOM 객체는 여러 객체로 이루어져있으며 트리 형태를 지닌다.

바로 이 객체 성질을 사용하여 HTML DOM을 이용하여 동적인(Dynamic)한 웹 페이지를 만들 수 있는 것이다!!

HTML 요소(element), 속성(attribute), Css style, 요소/속성 삭제 및 추가 , DOM 이벤트 추가/삭제 등을 할 수 있게된다.

중요!!
HTML DOM는 :

HTML elements를 Object(객체)로 여기며,

HTML elements에 대한 Property성질(아마 스타일)을 정의하며,

HTML elements에 대한 Access접근방법을 정의하며,

HTML elements의 Event(이벤트)를 정의합니다.

다시 말하면: HTML DOM은 HTML 요소를 가져오거나 변경, 추가 또는 삭제하는 방법에 대한 표준입니다.

JavaScript HTML DOM Elements

JS에서 HTML element를 찾는 방법은 여러가지인데, id로 가져오면 정확하게 원하는 element를 가져올 수 있고, tagname(<p>태그)이나 class(.small)으로 가져오면 배열 형태로 가져오게 되어 원하는 요소를 인덱스로 접근할 수 있다.

1. (id방식)

document.getElementById("id1").innerHTML = "Hi there"; 

2. (tag방식)

var x = document.getElementByTagName("p");

document.getElementById("demo").innerHTML = 'The first paragraph (index 0) inside "main" is: ' + x[0].innerHTML; 

3. (class방식)

var y = document.getElementsByClassName("intro");

document.getElementById("demo").innerHTML = 'The first paragraph (index 0) inside "main" is: ' + y[0].innerHTML; 

(중요!!)

원하는 특정 태그의 CSS속성을 가지는 element만 선별하기.

퀴즈!!:

정답은:

addEventListener , click

JS DOM HTML (내용, 속성, css스타일 바꾸기)

위에서 언급했듯이, DOM 성질을 활용하여 내용을 수정하기도, 속성을 바꾸기도 할 수 있다.

(내용 수정하기) document.getElementById(id).innerHTML = new HTML
(속성 수정하기) document.getElementById(id).attribute = new value
(css 스타일 수정하기) document.getElementById("p2").style.color = "blue";document.getElementById("p2").style.color = "blue";

var id = setInterval(frame, 5); --> function frame() 을 5?? 단위 간격으로 돌리겠다는 뜻이 맞는지 모르겠는디... 

clearInterval(id); --> 위에서 세팅한 주기 기간을 clear시킴....??

JavaScript HTML DOM Navigation

모든 HTML요소는 노드로 표현될 수 있다. 때문에 노드를 추가하고 제거하는게 계층별로 이루어질 수 있다.

nodeName: 노드의 element 태그 이름을 알아낼 수 있고

(ex) <h1 id="id01">My First Page</h1> 에서 id="id01"은 nodeName= h1을 가진다.

큐 형태처럼 노드 앞에 새 노드 추가와 노드 뒤에 새 노드 추가가 가능하다 (insertBefore(), appendChild() respectively)

노드 제거:

노드 대체:

replaceChild();

JavaScript HTML DOM Collections

HTML 요소들을 묶음으로, 즉, collection으로 받아 올 수 있는데,

var x = document.getElementsByTagName("p"); --> p 태그를 가지는 요소들의 collection을 var x가 가지게 된다.

An HTMLCollection is NOT an array!

한가지 주의해야할 점은 HTML collection은 엄밀히 따지자면 배열이 아니다!!
각 인덱스를 조회하는 방법은 배열과 유사하나 배열이 가지는 기능인 valueOf(), pop(), push(), or join() 는 사용하지 못한다.

JS Tutorial (JS Type Conversion ~ JS JSON )

JavaScript Type Conversion

JavaScript에는 값을 포함할 수 있는 5가지 데이터 유형이 있습니다.

• string
• number
• boolean
• object
• function

객체는 6가지 유형이 있습니다.

• Object
• Date
• Array
• String
• Number
• Boolean

그리고 값을 포함할 수 없는 데이터 유형 2개가 있습니다:

• null
• undefined

string(), toString()은 string 데이터 타입으로 바꿔줌. ex) boolean값 false를 string 타입으로 바꿔줌. toString(false); --> "false"

Number() 은 숫자타입으로 바꿔줌. ex) Number("3.14") --> 3.14

Automatic Type Conversion

연산 operator 를 사용하여 자동 타입변환을 할 수 있습니다. 

Input Validation Example

아래 예제는 간단한 try, throw, catch 문을 사용하여 validation을 수행하는 코드입니다.

빈칸에 5 ~ 10 사이의 숫자를 입력하되, 

비어있으면 "empty", 숫자가 아니면(NaN 타입) "not a number", number 또는 numeric string을 확실하게 숫자 타입인 number로 변환하기 위해 Number(x)에 넣어서 변환하고, 그 숫자가 (x < 5) 이면, "too low", 그 숫자가 (x > 5) 이면, "too high"가 됩니다. 만약 숫자가 (5 ~ 10) 이 맞다면, 그냥 try 문을 빠져나오고 아무런 에러 메세지가 throw되지 않아서 아무 메세지가 출력이 되지 않습니다.

JavaScript Hoisting

자바에서 var 변수 선언은 변수 사용 후에 선언해줘도 문제가 안 생긴다.

다만 주의점은, 변수 초기화, 즉 변수와 함께 값을 할당해주면 선언을 먼저 하고 그다음 사용을 해야한다.

ex) 아래 예시는 y가 undefined로 나오는 예시이다.

The JavaScript this Keyword

"this" 키워드는 해당 키워드가 속한 object를 참조합니다.

JavaScript Let

ES2015는 두 가지 중요한 새로운 자바스크립트 키워드인 let과 const를 도입하였다.
이 두 키워드는 JavaScript에서 블록 범위 변수(및 상수)를 제공한다.
ES2015 이전까지 JavaScript는 두 가지 유형의 범위만 있었습니다. Global 범위 및 Function 범위가 있다.

함수 레벨 스코프(Function-level scope)함수 내에서 선언된 변수는 함수 내에서만 유효하며 함수 외부에서는 참조할 수 없다. 즉, 함수 내부에서 선언한 변수는 지역 변수이며 함수 외부에서 선언한 변수는 모두 전역 변수이다.블록 레벨 스코프(Block-level scope)모든 코드 블록(함수, if 문, for 문, while 문, try/catch 문 등) 내에서 선언된 변수는 코드 블록 내에서만 유효하며 코드 블록 외부에서는 참조할 수 없다. 즉, 코드 블록 내부에서 선언한 변수는 지역 변수이다.

JavaScript const

const는 값을 재할당할 수 없다는 점만 제외하면 let처럼 작동한다.

let과 동일하게 block 안에서 선언된 const는 block 외부에 선언된 변수와 이름이 같아도 동일하지 않다.

또한, const는 한 번 기본 값을 지정하면 이 값을 변경할 수 없다.

반면에 const 타입으로 선언된 객체의 속성은 변경할 수 있지만, 객체를 다시 할당할 수는 없으며

const 배열의 element는 변경 가능하지만 이 배열을 다시 할당할 수 없다.

또한, const로 선언된 변수는 hoisting이 되어 block 맨 위에 올려지지만 초기화되지는 않는다.

따라서 const로 변수를 선언할 때 값을 같이 할당해주어야 한다.

JavaScript Arrow Function

=> 를 사용하여 코드를 간결하게 할 수 있다. 

익명 함수랑 비슷한듯...? ㅎㅎㅎ

JavaScript Class Syntax

ES6에서는 자바 스크립트 클래스를 도입하였고 class 키워드를 사용해야만 클래스를 만들 수 있으며, 클래스를 정의할 때 항상 constructor()를 사용해야 한다.

class 를 정의할 때 항상 이름이 "constructor"이어야 하며, 만약 constructor를 정의하지 않을 경우 자바 스크립트는 빈 constructor를 정의한다.

Class를 정의하고 나면 객체를 생성할 수 있다.

JavaScript Debugging

웹 페이지 브라우저에서 F12 키를 누르면 디버깅을 시작할 수 있다.

console.log()를 사용하면 디버거 창에 자바 스크립트의 값을 표시할 수 있다.

또한 debugger 키워드는 자바 스크립트의 실행 및 호출 디버깅 기능을 중지한다.

이것은 디버거에서 중단점을 설정하는 것과 동일하다.

JavaScript JSON

JSON은 데이터를 저장하고 전송하는 형식입니다.
JSON은 서버에서 웹 페이지로 데이터를 보낼 때 자주 사용됩니다.

JavaScript Form Validation

Form Validation이라고, 이거 작동방식이 js 를 사용하여 validation을 하고자 하는 값을 위한 함수를 만들고 조건을 다 만족하면 통과하는 방식으로 한다. 조건을 만족하지 못할시에 alert()를 사용하여 에러 메세지 표기! 또는 getElementById()를 사용하여 에러 메세지를 페이지에 보이게 할 수 있다. 

JavaScript Validation API

기존에 짜여진 API를 사용하여 validation을 하는 방법이 있는데, 바로 아래와 같은 예시가 있다.

Constraint Validation DOM Methods

첫번째 함수를 놓고 보자면, id에 필요한 사항들을 조건을 명시한 뒤에, 이 조건문을 만족시키지 못할시에 에러메시지를 띄우게 하는 방법이 있다.