1. 관계형 데이터베이스(Relational Database)

안드로이드에서 데이터베이스를 사용하는 구체적인 방법을 설명하기에 앞서, 데이터베이스 프로그래밍을 하기 위해서 미리 알아두면 좋을 데이터베이스 이론에 대해 설명드리겠습니다.

<데이터베이스 이론>                                                                                                                           안드로이드에서 기본적으로 제공되는 데이터베이스인 SQLite가 관계형 데이터베이스 구조를 따르고, 또한 표준으로 정의된 SQL 기능의 대부분을 지원하기 때문에, 안드로이드에서 SQLite를 사용하기 위해 데이터베이스 이론을 공부한다는 것은 상당한 도움이 되는 과정이라 할 수 있습니다.

<안드로이드에서 제공되는 SQLite 관련 클래스에 대한 구조 및 API 함수들의 사용법>                                          대부분의 내용이 데이터베이스 처리를 위한 SQL 문과 그 SQL을 실행하는 함수에 대한 설명, 그리고 함수의 실행 결과를 확인하는 방법들로 구성될텐데요, 여기서 설명하는 내용 정도만 이해하고 있어도 실질적인 구현 과정에서 큰 어려움없이 SQLite 를 사용할 수 있을거라 생각합니다.

<SQLite를 다루는 클래스에 대한 구조와 API 함수들의 사용법에 대해 설명>

2. 안드로이드에서 SQLite 사용하기.

안드로이드에서 기본적으로 제공되는 데이터베이스는 SQLite입니다. SQLite는 비교적 작은 규모의 안드로이드 앱에서 사용하기 적합한 데이터베이스로써, SQLite에서 제공하는 몇 가지 API 함수를 호출하는 것만으로 데이터베이스 기능을 사용할 수 있는 특징이 있습니다.

안드로이드의 SQLite 관련 클래스 및 API 함수는 "android.database.sqlite" 패키지에 들어 있으며, 그 중 가장 중요한 클래스는 SQLiteDatabase 클래스입니다.

아래 그림은 앞으로 설명할 SQLite 데이터베이스를 사용하는 과정을 요약한 것입니다.

2.1 SQLiteDatabase 클래스

SQLite 데이터베이스에 데이터를 추가(INSERT)하거나, 삭제(DELETE), 수정(UPDATE) 또는 조회(SELECT)를 하기 위해서는 SQLiteDatabase 클래스를 사용해야 합니다. 그리고 데이터가 저장될 테이블 생성 및 삭제, 수정 등의 기능 또한 SQLiteDatabase 클래스에서 제공되죠. (https://developer.android.com/reference/android/database/sqlite/SQLiteDatabase.html)

즉, SQLiteDatabase 클래스는 하나의 SQLite 데이터베이스를 다루기 위한 핵심 역할을 수행하는 클래스입니다. 그러므로 SQLite 데이터베이스 작업을 수행하기 전 반드시 SQLiteDatabase 클래스 객체의 참조를 획득해야 합니다.

일단 객체에 대한 참조를 획득하고 나면, SQLiteDatabase 클래스에 정의된 함수를 통해 데이터베이스 기능을 사용할 수 있습니다.

SQLiteDatabase 객체의 참조를 획득하는 것은 SQLite 데이터베이스 파일을 열거나, 새로운 파일을 생성함으로써 획득할 수 있습니다.

2.2 SQLite 데이터베이스 열기. (SQLiteDatabase 객체 참조 획득)

SQLite 데이터베이스를 사용하기 위해서는 가장 먼저 데이터베이스 파일을 열거나 생성해야 합니다.  SQLiteDatabase 클래스에 정의된 몇 가지 static 함수를 통해 수행될 수 있습니다.

리턴 타입메소드 이름

표에 나와 있는 static 함수의 이름을 통해 알 수 있듯이, 데이터베이스를 여는 과정에서 만날 수 있는 상황은 크게 두 가지로 나뉠 수 있습니다. "이미 데이터베이스 파일이 존재하는 경우(openDatabase() 함수 사용)"와 "데이터베이스 파일이 없을 수도 있는 경우(openOrCreateDatabase() 함수 사용)" 입니다. 주로 openOrCreateDatabase() 함수를 사용하여, 데이터베이스 파일 열기를 시도한 다음 만약 파일이 존재하지 않는다면 새로운 데이터베이스 파일을 생성하는 방법을 사용합니다.

아래의 코드는 openOrCreateDatabase() 함수를 사용하여 "sample.db" 파일을 여는 예제입니다. "sample.db" 파일이 존재하지 않는다면, 새로 만들게 됩니다.

[STEP-1] SQLiteDatabase - 데이터베이스 열기. (openOrCreateDatabase() 함수 호출.)

    SQLiteDatabase sqliteDB = null ;

    try {
        sqliteDB = SQLiteDatabase.openOrCreateDatabase("sample.db", null) ;
    } catch (SQLiteException e) {
        e.printStackTrace() ;
    }

2.3 SQLite 데이터베이스에 테이블 생성하기. (CREATE TABLE)

SQLite 데이터베이스 파일을 열어 SQLiteDatabase 객체의 참조를 확보했다면, 이제 객체의 참조를 통해 데이터베이스에 데이터를 추가하거나, 삭제 또는 조회 등의 작업을 수행할 수 있습니다. 하지만 데이터베이스 파일을 열었다고 해서 무턱대고 데이터를 추가할 순 없습니다.

앞서 관계형 데이터베이스에 대해 설명할 때, 데이터베이스에 데이터를 저장하기 위해 데이터를 구조화하는 과정에 대해 간단히 언급하였습니다. 이 때 데이터 구조화의 결과로써, 데이터의 속성과 그 값의 관계를 나타내는 테이블(Table)이 만들어지는 것을 설명했습니다.

SQLite 데이터베이스 파일을 열었다면, 다음 해야 할 일은 데이터베이스 내에 테이블(Table)을 생성하는 것입니다. SQLite 데이터베이스에 테이블을 만드는 방법은 테이블 생성을 위한 SQL 문자열을 SQLiteDatabase 클래스의 execSQL() 함수를 통해 전달하는 것입니다.

아래 예제 코드는 정수형(INTEGER) 데이터를 저장하기 위한 "NO" 필드와 문자열(TEXT) 데이터를 저장하기 위한 "NAME" 필드를 가지는 "ORDER_T"라는 테이블을 생성하는 코드입니다.

[STEP-2] SQLiteDatabase - 테이블 만들기. ("CREATE TABLE ... " 문을 execSQL()로 실행.)

    String sqlCreateTbl = "CREATE TABLE ORDER_T (NO INTEGER, NAME TEXT)" ;

    sqliteDB.execSQL(sqlCreateTbl) ;

그런데 "CREATE TABLE" SQL 문은 데이터베이스 파일이 생성되고나서 최초에 한번만 실행할 수 있습니다. 만약 생성하고자 하는 테이블과 같은 이름의 테이블이 이미 존재하는 상황에서 "CREATE TABLE" 명령을 실행하면, 다음과 같이 예외 상황이 발생합니다.

Caused by: android.database.sqlite.SQLiteException: table ORDER_T already exists (code 1): , while compiling: CREATE TABLE ORDER_T (NO INTEGER, NAME TEXT)

이런 경우, 테이블 중복 생성으로 인한 예외 상황(Exception)이 발생하는 것을 막기 위해서는 테이블이 존재하지 않는 경우에만 테이블을 새로 만들도록 만들어야 합니다. 이를 위해서는 "CREATE TABLE" 문에 "IF NOT EXISTS" 옵션을 추가하여 실행하면 됩니다. 예외 상황이 발생하는 문제를 해결한 코드는 아래와 같습니다.

[STEP-2.1] SQLiteDatabase - 테이블이 없는 경우 새로 만들기. ("CREATE TABLE IF NOT EXISTS ... " 문을 execSQL()로 실행.)

    String sqlCreateTbl = "CREATE TABLE IF NOT EXISTS ORDER_T (NO INTEGER, NAME TEXT)" ;

    sqliteDB.execSQL(sqlCreateTbl) ;

2.4 테이블에 데이터 추가, 수정, 삭제하기.

2.4.1 테이블에 데이터 추가하기. (INSERT)

SQLite 데이터베이스를 열고 테이블을 생성했다면, 이제 생성된 테이블에 데이터를 추가할 수 있습니다. 테이블에 데이터를 추가할 때는 "INSERT" 문을 사용합니다.

아래 예제 코드는 앞서 만든 "ORDER_T" 테이블의 "NO", "NAME" 필드에 각각 1과 "ppotta" 값을 추가하는 코드입니다. 앞서 테이블 생성 때와 마찬가지로 SQLiteDatabase 클래스의 execSQL() 함수를 사용합니다.

[STEP-3] SQLiteDatabase - 데이터 추가. ("INSERT INTO ... " 문을 execSQL()로 실행.)

    String sqlInsert = "INSERT INTO ORDER_T (NO, NAME) VALUES (1, 'ppotta')" ;

    sqliteDB.execSQL(sqlInsert) ;

"INSERT" 문을 실행하면 테이블에 새로운 데이터를 추가합니다. 이 때 새로 추가되는 값은 테이블 내 동일한 값을 가진 로우(Row)의 존재 여부와 관계없이, 새로운 로우(Row)로 추가됩니다.

그런데 어떤 상황에서는 새로운 값이 추가되는 것 대신, 기존에 저장된 로우(Row)의 값을 수정하고 싶을 때도 있을 것입니다. 물론 뒤에서 살펴볼 "UPDATE" 명령을 통해 데이터를 수정하는 것이 일반적이긴 하지만, "INSERT" 명령을 실행할 때 미리 조건에 맞는 데이터가 있으면, 새로운 로우(Row)를 추가하지 않고 이미 들어있던 로우(Row)의 값을 수정하도록 만들 수 있습니다. 이를 위해 "INSERT OR REPLACE" 문을 사용합니다.

[STEP-3.1] SQLiteDatabase - 데이터 추가. 이미 존재하면 수정. ("INSERT OR REPLACE INTO ... " 문을 execSQL()로 실행.)

    String sqlInsert = "INSERT OR REPLACE INTO ORDER_T (NO, NAME) VALUES (1, 'ppotta')" ;

    sqliteDB.execSQL(sqlInsert) ;

2.4.2 테이블 데이터 수정하기. (UPDATE)

테이블에 데이터가 추가되어 있다면, "UPDATE" 문을 사용하여 데이터의 내용을 수정할 수 있습니다.

아래 예제 코드는 ORDER_T 테이블의 "NO"와 "NAME" 필드 값을 각각 2, "ppotta2"로 수정하는 코드입니다.

[STEP-4] SQLiteDatabase - 데이터 수정. ("UPDATE ... " 문을 execSQL()로 실행.)

    String sqlUpdate = "UPDATE ORDER_T SET NO=2, NAME='ppotta2'" ;

    sqliteDB.execSQL(sqlUpdate) ;

그런데 위의 코드를 수행하면 테이블 내의 모든 행의 값이 수정됩니다. 이는 "UPDATE" 문이 실행될 데이터에 대한 조건이 지정되지 않았기 때문입니다. 만약 모든 로우(Row)가 아닌 특정 로우(Row)의 값만 수정하고자 한다면, 아래와 같이 "UPDATE" 문에 "WHERE"를 사용하여 조건을 추가하면 됩니다.

아래는 "WHERE"를 사용하여 "NO" 필드 값이 1인 로우(Row)에 대해서만 값을 수정하도록 만드는 코드입니다.

[STEP-4.1] SQLiteDatabase - 조건에 해당하는 데이터 수정. ("UPDATE ... WHERE ... " 문을 execSQL()로 실행.)

    String sqlUpdate = "UPDATE ORDER_T SET NO=2, NAME='ppotta2' WHERE NO=1" ;

    sqliteDB.execSQL(sqlUpdate) ;

2.4.3 테이블 데이터 삭제하기. (DELETE)

테이블에 저장되어 있는 데이터를 삭제하려면 "DELETE" 문을 사용합니다.

아래 예제 코드는 "ORDER_T" 테이블의 모든 데이터를 삭제하는 코드입니다.

[STEP-5] SQLiteDatabase - 데이터 삭제. ("DELETE ... " 문을 execSQL()로 실행.)

    String sqlDelete = "DELETE FROM ORDER_T" ;

    sqliteDB.execSQL(sqlDelete) ;

"ORDER_T" 테이블의 데이터 중에서 특정 로우(Row)만 삭제하길 원한다면 "WHERE"를 추가하여 조건을 지정할 수 있습니다.

아래 코드는 "NO"의 값이 2인 모든 데이터를 삭제하는 예제입니다.

[STEP-5.1] SQLiteDatabase - 조건에 맞는 데이터 삭제. ("DELETE ... WHERE ... " 문을 execSQL()로 실행.)

    String sqlDelete = "DELETE FROM ORDER_T WHERE NO=2" ;

    sqliteDB.execSQL(sqlDelete) ;

2.5 테이블 데이터 조회하기.

테이블에 저장된 데이터를 조회하려면 "SELECT" 문을 사용합니다. 하지만 앞에서 살펴 본 데이터 추가, 수정, 삭제를 위한 SQL 문장을 실행할 때와는 다르게 추가적으로 알아두어야 할 요소가 두 가지 있습니다. 바로 쿼리(Query)와 커서(Cursor) 입니다.

2.5.1 쿼리(Query)

쿼리(Query)라는 단어를 우리 말로 표현할 때 주로 "질의"라는 용어를 사용합니다. "질의"라는 단어의 사전적 의미는, "의심나거나 모르는 점을 묻는 것"을 말합니다. 자신이 모르는 사실을 알기 위해, 누군가에게 질문하여 정보를 요청하는 것이 바로 "쿼리(Query)"라는 단어의 의미인 것입니다.

이제 관점을 데이터베이스로 옮겨보도록 하겠습니다. 데이터베이스에 저장된 데이터는, 그 정보를 획득하기 전까지는 사용자가 모르는(가지고 있지 않은) 정보입니다. 그래서 만약 그 정보를 얻기 위해서 데이터베이스 시스템에 정보를 요청한다면, 우리는 그것을 "데이터베이스에 쿼리(Query)"한다고 말할 수 있는 것입니다.

정리하자면, 쿼리(Query)란, 원하는 데이터를 얻기 위해 데이터베이스에 정보를 요청(Request)하는 것을 말하며, SQLite 데이터베이스에서 그 요청(Request)은 "SELECT" 문을 사용하여 작성할 수 있습니다.

그런데 앞서 살펴본 데이터 추가(INSERT), 수정(UPDATE), 삭제(DELETE)는 데이터베이스로 전달되는 단-방향 명령인데 반해, 조회(SELECT)를 위한 쿼리(Query)는 데이터베이스로부터 결과 데이터 전달이 필요한 양-방향 명령입니다. 그러므로 아무런 값도 리턴하지 않는 execSQL() 함수 대신, "SELECT" 문의 조건에 따라 선택된 레코드 집합(RecordSet)을 리턴하는 query() 함수 또는 rawQuery() 함수를 사용해야 합니다.

리턴 타입메소드

많은 종류의 쿼리(Query) 함수가 제공되긴 하지만 많은 경우에 "SELECT" 문 전체를 한번에 전달할 수 있는 rawQuery() 함수가 주로 사용됩니다.

또한 모든 쿼리(Query) 함수가 리턴하는 레코드 집합(RecordSet)은 Cursor 인터페이스 타입으로 전달됩니다.

참고로 레코드 집합(RecordSet)이라는 용어는 쿼리(Query) 결과에 포함된 레코드(Record)의 묶음(Set)을 말하는 것입니다. 보통 데이터를 쿼리(Query)한 결과는 하나 또는 하나 이상의 레코드(Record)를 포함하고 있는데, 이렇게 리턴된 결과 레코드들의 집합을 레코드 집합(RecordSet)이라고 지칭합니다.

 

또한 레코드 집합(RecordSet)을 다른 용어로 로우 집합(RowSet)이라고 부르기도 합니다. 이전 글에서 관계형 데이터베이스 용어에 대해 설명할 때 "로우(Row)=레코드(Record)"라는 것을 설명하였으므로 그 연관성을 쉽게 이해할 수 있으리라 생각합니다.

2.5.2 커서(Cursor)

일반적인 컴퓨팅 환경에서 커서(Cursor)란, 화면에 표시된 내용에서 사용자가 내용 입력 또는 확인을 위해, 사용자가 현재 주시하고 있는 위치에 대한 표시를 말합니다. 키보드 커서 또는 마우스 커서 등이 대표적입니다.
그리고 데이터베이스에서도 그 의미는 크게 다르지 않습니다. 데이터베이스의 쿼리 결과로 리턴된 데이터에서 현재 그 내용을 확인하고 있는 위치를 나타내는 정보를, 커서(Cursor)라는 용어를 사용하여 지칭합니다.

데이터베이스에 저장된 데이터를 쿼리하면 그 결과 데이터는, 한 개의 레코드만 가지거나, 또는 여러 개의 레코드가 포함된 레코드 집합(RecordSet)입니다. 이 때 레코드 집합(RecordSet)에 들어 있는 개별 레코드에 접근하여 그 값을 확인할 수 있는 기능을 제공해주는 것이 바로 커서(Cursor)가 하는 역할인 것입니다. 그래서 SQLiteDatabase가 제공하는 모든 쿼리(Query) 관련 함수들은 Cursor 타입을 리턴하도록 되어 있습니다.

안드로이드에서 데이터베이스 커서(Cursor) 기능은 Cursor(android.database.Cursor) 인터페이스에 정의되어 있습니다. (https://developer.android.com/reference/android/database/Cursor.html)

Cursor 인터페이스에는 많은 수의 함수가 정의되어 있습니다. 하지만 대부분의 경우, 몇 개의 함수 사용만으로 쿼리 결과로 리턴된 데이터를 처리할 수 있습니다.

아래 예제 코드는 Cursor 인터페이스를 사용하여 쿼리 결과 데이터를 탐색하는 과정을 나타낸 것입니다.

    Cursor cursor = sqliteDB.rawQuery("SELECT ...", null) ;

    while (cursor.moveToNext()) {
        // 첫 번째 컬럼(Column)이 INTEGER 타입인 경우.
        int val = cursor.getInt(0) ;

        // 두 번째 컬럼(Column)의 타입이 TEXT 인 경우.
        String str = cursor.getText(1) ;

        // 세 번째 컬럼(Column)이 REAL 타입으로 선언된 경우.
        float real = cursor.getFloat(2) ;

        // 코드 계속...
    }

2.5.3 데이터베이스 데이터 조회하기. (SELECT)

앞서 설명한 쿼리(Query) 함수 및 커서(Cursor)를 사용하여 테이블에 저장된 모든 데이터를 조회하는 코드입니다.

[STEP-6] SQLiteDatabase - 데이터 조회. ("SELECT ... " 문을 rawQuery()로 실행.)

    String sqlSelect = "SELECT * FROM ORDER_T" ;
    Cursor cursor = null ;

    cursor = sqliteDB.rawQuery(sqlSelect) ;
    while (cursor.moveToNext()) {
        // INTEGER로 선언된 첫 번째 "NO" 컬럼 값 가져오기.
        int no = cursor.getInt(0) ;

        // TEXT로 선언된 두 번째 "NAME" 컬럼 값 가져오기.
        String name = cursor.getText(1) ;

        // TODO : use no, name.
    }

"SELECT" 문에 조건을 추가하여 특정 데이터만 조회하고자 한다면, 다른 SQL 문과 마찬가지로 "WHERE"를 추가하여 조건을 기술할 수 있습니다.

[STEP-6.1] SQLiteDatabase - 조건을 추가하여 데이터 조회. ("SELECT ... WHERE ..." 문을 rawQuery()로 실행.)

    // NAME 컬럼 값이 'ppotta'인 모든 데이터 조회.
    String sqlSelect = "SELECT * FROM ORDER_T WHERE NAME='ppotta'" ;

    Cursor cursor = sqliteDB.rawQuery(sqlSelect) ;
    while (cursor.moveToNext()) {
        // INTEGER로 선언된 첫 번째 "NO" 컬럼 값 가져오기.
        int no = cursor.getInt(0) ;

        // TEXT로 선언된 두 번째 "NAME" 컬럼 값 가져오기.
        String name = cursor.getText(1) ;

        // TODO : use no, name.
    }

2.6 SQLite 데이터베이스 테이블 삭제하기.

SQLite 데이터베이스에 만들어져 있는 테이블을 앱 실행 중 삭제하는 경우는 매우 드뭅니다. 하지만 앱의 기능이 변경되고 데이터베이스에 저장되는 데이터 구조가 복잡해지면, 기존에 만들어놓은 테이블만으로는 복잡해진 데이터를 처리하는 게 힘들어질 수 있습니다. 이 때 개발자가 선택할 수 있는 방법 중 하나는, 앱이 업그레이드된 후 처음 실행될 때 새로운 테이블을 만들어 기존 테이블의 데이터를 옮긴 다음, 기존 테이블은 삭제하는 것입니다.

테이블을 삭제하기 위해서는 "DROP TABLE" 문을 사용합니다.

[STEP-7] SQLiteDatabase - 테이블 삭제. ("DROP TABLE ... " 문을 execSQL()로 실행.)

    String sqlDropTbl = "DROP TABLE ORDER_T" ;

    sqliteDB.execSQL(sqlDropTbl) ;

"DROP TABLE" 문을 사용하여 테이블을 삭제할 때 주의해야 할 점은, 삭제하기 전 저장되어있던 데이터 또한 삭제와 동시에 모두 지워진다는 것과, 삭제된 데이터와 테이블은 다시 복구가 불가능하다는 것입니다. 그러므로 삭제하고자 하는 테이블에 중요한 데이터가 저장되어 있다면, 반드시 백업을 해둔 다음 테이블을 삭제해야 합니다.

3. 참고.

• 관계형 데이터베이스에 대한 간단한 설명.
  • [개발자 레시피 - 안드로이드 DB 다루기 1 - 관계형 데이터베이스]을 참고하세요.
• 안드로이드 개발 Training - SQL 데이터베이스에 데이터 저장
  • [SQL 데이터베이스에 데이터 저장]을 참고하세요.
• SQLiteDatabase에 대한 자세한 설명.
  • [안드로이드 개발 참조문서 - SQLiteDatabase 항목]을 참고하세요.
• Cursor 인터페이스에 대한 자세한 설명.
  • [안드로이드 개발 참조문서 - Cursor 항목]을 참고하세요.
• SQLite - SQL Syntax
  • [SQLite - SQL Syntax]을 참고하세요.

.END.

/*jslint devel: true */
/* eslint-disable no-console */
/*eslint no-undef: "error"*/
/*eslint-env node*/

을 코드 맨 위 상단(1~4 코드)에 적어줌으로써 에러가 발생하는 것을 해결 할 수 있다. 

-------------------자바스크립트 초보자입니다 << 책보고 공부한 내용 올립니다!!!--------------

1. javescript와 DOM

DOM은 웹페이지가 일종의 문서인데, 그 문서를 표현하고 조작하고 저장하는 방법을 제공한다.

웹브라우저를 통해 화면에 나타낼 수 있으며, heml소스 자체를 나타내기로 한다.

1) 아이디를 이용하여 DOM객체 불러오기

const value = document.hetElementByld('아이디 이름')을 이용해서 element를 가져올 수 있다.

태그에 아이디를 넣어주고, 그 태그가 포함된 element를 변수에 집어 넣을 수 있다.

2) 클래스를 이용하여 DOM 불러오기

const 변수이름 = document.getElementsByClassName('클래스 이름')을 이용해서 element를 가져올 수 있다.

3) 태그 이름을 이용하여 DOM불러오기

const 변수이름 = document,hetElementsByTagName('태그이름')을 이용해서 element를 가져올 수 있다.

이런 것을 합쳐서 불러올 수 있는 기능을 가진 함수가 자바스크립트에 있으며 querySelector이다.

const vlaue = document.querySelector("클래스면(.을 붙여서 호출), 아이디면(#을 붙여서 호출), 태그이름이면 태그이름 그대로");

이런식으로 querySelector 함수를 사용하여 간단하게 element를 변수에 저장할 수 있다.

2. input에 입력한 것을 출력하는 방법

1) input 태크

input 태크는 입력을 받기 위해서 type설정을 다양하게 할 수 있으며, form 태그안에 넣는 것이 일반적이다.

<form>

<input>

</form>

<예시> javaScript를 이용해서 input 태그에 들어온 정보를 출력하는 방법(DOM 객체를 이용해서 결과 추출하기)

<!DOCTYPE html>

<html lang="en">

    <head>

        <meta charset="UTF-8" />

        <meta name="viewport" content="width=device-width, initial-scale=1.0" />

        <meta http-equiv="X-UA-Compatible" content="ie=edge" />

        <title>hi</title>

    </head>

    <body>

        <form class="js-form">

           <input type="text" placeholder="입력" />

        </form>

        <ul class="js-output"></ul>

        <script src="fdsfd.js"></script>

    </body>

</html>

<form>

<input type = "text" placeholder="입력"/>

</form>

<ul>

</ul>

form 태그를 DOM객체로 뽑아내고 input과 ul도 뽑아준다.

1) form양식에 submit 이벤트가 추가 되었을 때 함수 생성 = submitHandler

2) input.value를 통해 현재 입력된 값 가져오기

3) 출력하기 위한 함수(outputList)를 생성, li 태크와 span 태그를 creanteElement로 생성

4) spen 태그 안에 innerText로 받아온 currentValue 값을 넣음

5) li 태크 안에 appendChild로 spen 태그를 넣은 후, ul 태그 안에 자식요소 li 태그를 appendChild로 넣는다

3. console.log() 설명

console.log()란?
자바스크립트는 html, css를 동적으로 만들어주는 기능을 담당하고 있다. (그 외에도 다양한 기능은 있다)
console.log()를 하면 콘솔창 ()안에 있는 것이 출력된다.

자바스크립트의 기본동작과정 = 브라우저에게 '누구'는 OO을 XX해라! 형식으로 동작합니다.

console.log()에서는 console이 '누구'의 주체가 될것이고, log가 XX의 주체가 될 것이고, ()안의 것이 OO의 주체가 되는 것이다.
쉽게 설명하면
console -> 객체(object)
log -> 메서드(methon)
OO -> 매개변수(parameter)가 된다.

객체안에 있는 메서드를 실행시킴으로 매개변수를 작동시키는 작업이라고 볼 수 있다.
console.log()안에 매개변수는 텍스트가 올 수 있고, 다른수식도 올 수 있다.

텍스트를 출력하고 싶다면 작은 따옴표로 감싸거나 큰 따옴표로 감싸서 텍스트라고 표시해주어야 한다.

console.warn() -> 경고 표시
console.error() -> 에러 표시
console.dir() -> DOM객체의 세부정보 확인

4. javascript 작성

<HTML 내부에 작성예시>

<html>

   <head>

     <meta charset="utf-8"/>

<head>

<body>

   <h1>javascript는 어디에 작성하는가?</h1>

   <h2>

     javascript는 어디에 작성하는가? javascript는 어디에 작성하는가?

     javascript는 어디에 작성하는가? javascript는 어디에 작성하는가?

     javascript는 어디에 작성하는가? javascript는 어디에 작성하는가?

     javascript는 어디에 작성하는가? javascript는 어디에 작성하는가?

     javascript는 어디에 작성하는가? javascript는 어디에 작성하는가?

   </h2>

   <script>

    console.log("HELLO");

    </script>

  </body>

<html>

html파일 작성을 마친 후, body 태그가 끝나기 직전에 <script></scripr> 태그를 이용하여

여기서부터는 javascript문법을 따라서 해석해주세요! 라고 명령하면 된다.

왜 밑에 작성하는지 궁금할 수 있다 위에 작성해도 무방하다. 하지만 지금은 코드 수가 적어서 밑에 적어도 무방하지만,자바스크립트의 코드수가 길어지면 웹사이트를 로드하는데 오래걸린다.

때문에 html 밑에 작성하면 화면이 보여지고, 동적인 작업은 좀 오래걸리더라도 웹페이지가 정상작동하는구나 하고 보여질 수 있기 때문이다.

외부에서불러와서 작성하는 방법

<.js 파일 만들기 예시>

<html>

   <head>

     <meta charset="utf-8"/>

</head>

<body>

   <h1>javascript는 어디에 작성하는가?</h1>

   <h2>

     javascript는 어디에 작성하는가? javascript는 어디에 작성하는가?

     javascript는 어디에 작성하는가? javascript는 어디에 작성하는가?

     javascript는 어디에 작성하는가? javascript는 어디에 작성하는가?

     javascript는 어디에 작성하는가? javascript는 어디에 작성하는가?

     javascript는 어디에 작성하는가? javascript는 어디에 작성하는가?

   </h2>

   <script src = "HELLO.js"></script>

  </body>

<html>

src속성을 이용하여 hello.js라는 파일을 불러오면 된다. 같은 폴더안에 있다면 위의 예제처럼 불러오면 되고,

그 파일의 루트를 찾아서 불러와도 된다.

5. javescript의 데이터타입(원시타입, 객체에 대한 설명)

자바스크립트 데이터 타입이란? :

데이터는 변수에 값을 넣을 때 등등 어떠한 값을 의미한다. num2; 에서 2가 데이터가 된다.

자바스크립트는 데이터 타입이 동적 타입이다

C언어나 JAVA언어는 데이터에 따라 타입을 다르게 지정해줘야 하는 반면, 자바스크립트는 자유롭게 지정이 된다.

정수, 문자열 같은 다양한 타입의 데이터 대입이 가능하다.

실행시, 변수에 저장된 데이터 타입을 동적으로 바꿀수 있다는 특징이 있따.

자바스크립트 데이터타입

1)원시타입

자바스크립트 데이터 타입은 두가지로 나눌 수 있다. 그중 하나가 원시타입이다.

원시타입은 숫자, 문자, 논리값, 특수한 값(null, underfined), 심볼을 지칭한다.

자바스크립트는 숫자를 모두 64비트 부동소수점으로 표현한다.

심볼은 자기자신을 제외한 그 어떤 값과도 다른 유일무이한 값이라고 한다.

symbol();

symbol();을 실행하면 위의 심볼과 아래 심볼은 유일무이한 값을 생성하기 때문에 다른 심볼 값이다.

그리고 광호안에 인수를 전달하면 생성된 심볼에 대한 설명을 덧붙이는 것이 된다.

6. 객체타입

객체란? : 이름과 값을 한쌍으로 묶은 데이터를 여러개 모은 것이라고 한다.

객체는 프로퍼티(property)를 가지고 있는데, 프로퍼티는 객체에 포함된 데이터 하나를 위미한다 (이름과 값의 묶음)

객체를 생성하는 두가지 방법

1) 객체 리터럴 사용하는 방법

2) 생성자라는 함수 사용방법

< 객체 리터럴 이용 예제>

let com = {

        name : "컴커니어",

        age : 22

}

중괄호 안에 객체 리터럴을 넣어서 com이라는 변수에 대입하는 방식으로 선언할 수 있다.

프로퍼티끼리의 구분은 쉼포(,)로 구분해주고, 프로퍼티의 이름과 값은 구분은 콜론(;)으로 구분한다.

<객체를 생성하고, 프로퍼티 값에 접근하는 방법>

com.name -> 컴커니어

com["age"] -> 22

대괄호를 통해서 프로퍼티를 읽을 때는 문자열로 표현해야 한다.

<없는 프로퍼티 호출>

com.tall -> underined  <<  underined를 반환하게 된다.

없는 프로퍼티에 값을 대입하면 객체에 새로운 프로퍼티 추가가 될 수 있다

com.tall = 180; 이라고하면

객체내부에 tall:180 이라는 프로퍼티가 들어간 것이다

객체 내부에 프로퍼티 삭제하는 방법

delete com.tall; -> 객체 내부 프로퍼티 삭제

java, C는 객체에 프로퍼티를 추가 및 삭제할 수 없다

객체에 프로퍼티로 함수가 오는 방법

객체의 프로퍼티 중 함수 객체의 참조를 값으로 담고있는 프로퍼티를 가르켜 메소드라고 한다.

메소드를 호출할 때 객체이름.함수이름(); 의 방식으로 부른다

<객체 생성자 사용 예제>

생성자로 객체를 생성할 수 있다.

생성자 => new 연산자로 객체를 생성할 것이라고 기대하고 만든 함수를 의미한다.

function Com(name,age) {

      this.name = name;

      this.age = age;

      }

let com = new Com("컴커니어", 22); // 생성자를 통해 인수 전달 하면서 객체 생성

console.log(com); // 콘솔창으로 확인하기

Com 생성자를 통해 Com 객체를 생성한다.

생성자는 앞에 문자를 대문자로 써준다. (파스칼 표기법)

this는 Com 생성자로 만들 객체를 의미한다.

여기서 Com 객체를 의미한다.

생성자를 통해서 new 연산자로 만든 객체를 인스턴스라고 부릅니다.

인스턴스는 실체라는 뜻이 있습니다.

자바스크립트는 생성자로 생성한 객체는 인스턴스가 아니다.

생성자가 클래스처럼 객체를 생성하고 있기 때문에 생성자로 생성된 객체도 인스턴스라고 한다.

<배열인지 확인하는 방법>

typeof를 사용해서 확인해도 무방하다.

정확하게 typeof는 그 안의 값이 배열인지 객체인지를 리턴해주는 역할을 한다.

쉽게 배열인지 확인하는 방법 = Array.isarray(obj)를 사용하면 된다

<예시>

Array.isArray([1, 2, 3]); // true

Array.isArray({foo: 123}); // false

Array.prototype는 스스로도 배열이다. => Array.isArray(Array.prototype); // true 라고 한다.

TIL 이스케이핑, 변수, 상수

ESCAPING를 활용하면 alert창에서 (') (")를 띄울 수 있다.

alert('show\'s javascript); -> 작은 따옴표를 넣거나 작은 따옴표 안에 큰따옴표를 넣어도 출력이 가능하다.

alert은 브라우저에서 출력해주는 것이기 때문에 이스케이핑을 활용해서 줄바꿈도 가능하다.

alert("안녕하세요.\n반갑습니다.");

변수란? : 변하는 값을 담는 그릇이라는 의미로 상수는 변하지 않는 값을 의미한다.

작성법 2가지

1. myMountain(카멜표기법)

2. my_mountain(언더스코어 표기법)

요소.style의 방식은 inline의 css를 가져올수 있다. 직접 css를 inline으로 주고 싶을 때에도 사용할 수 있다.

요소.style를 사용 할때는 자바스크립트에서 -(대시)의 경우 마이너스로 인식하기 때문에 css와 다르게 적어야 한다.

캐멀표기법으로 작성법 : wlndows.getComputerStyle(요소)

클로저란? : 외부함수가 return으로 죽었음에도 불구하고 내부함수에서 외부함수에 위치한 변수의 제어가 가능한 경우

<클로저 예제>

function outer() {

      let myNumber = 1;

      function inner() {

             document.write(++myNumber + '<by>');

       }

       inner(); // myNumber 변수가 계속해서 초기화된다, 한번만 초기화 하고싶다면 앞에 return을 붙이자

}

outer();

outer();

outer();

outer();

<클로저 한번만 초기화 예제>

function outer() {

      let myNumber = 1;

      function inner() {

             document.write(++myNumber + '<by>');

       }

      return inner();

}

let myFunc = outer();

outer();

outer();

outer();

outer();

<중요>

--- 클로저의 정의 ---

myFunc()는 call할 때마다 inner 함수 내부에 있는 구문이 실행이 되는데, myNumber라는 변수가 1씩 계속 증가하는 결과를 보인다.

함수는 return을 하면 그 함수가 종료되는 것으로 알며, outer함수는 return inner;을 하고 종료가 되었음에도

우리는 myNumber 변수를 제어할 수 있다.

클로저는 Lexical Scope에 영향을 받지 않는 Static변수를 만들어내기 위한 방법이며,

Lecical Scope는 함수를 함수내부에 적으며 지역함수가 되고 함수내부에 변수는 지역변수가 되듯이 상황에 따른 Scope를 뜻한다.

Static변수는 자바스크립트에서는 쓰지않는다. 그래서 클로저를 사용하여 만들어낸다.

---클로저를 쓰는 이유---

랙시컬 스코프에 한정되지 않는 Static변수를 만들어내기 위해 클로저의 개념을 빌려 만들어낸다고 해석을 하였고,

클로저는 자바스크립트에만 있는 개념이 아닌 다른언어에서도 존재하는 개념이다.

<메서드>

Array.prototype.push() => push 메서드는 요소를 뒤에서 추가한다.

Array.prototype.pop() => pop메서드는 요소를 뒤에서 삭제한다.(1개)

Array.prototype.unshift() => unshift 메서드는 push와 마찬가지로 배열요소에 삽입하는 것으로 위치가 다르다.

Array.prototype.shift() => shift메서드는 pop와 비슷하지만, 위치가 다르다, 맨 앞에 있는 것을 삭제한다.

Array.prototype.splice() => splice는 (몇번째 위치, 삭제할 개수, 삽입할 요소(생략가능))으로 작성, index는 위치값이다

splice는 삽입 삭제 둘다 할 수 있으며, 삭제만 하는 것도 가능하다. 삭제라는 개념보다는 꺼내온다는 개념으로 이해하자

Array.prototype.concat() => concat 메서드는 기존 배열을 건드리지 않고 새로운 배열을 만들며 기존 배열은 건들지 않는다.

--------------------------------------------추가할 사항--------------------------------------------

1. 변수

자바스크립트에는 변수형(int, double, string)이 존재하지 않는다.

var 이라는 가변형 변수만 존재하여 초기화 할때 형태에 알아서 할당된다.

var i; var x = 123; var y = "123"; var z = false; var w = null;

var의 유효 범위는 함수 내부로 조건문이나 반복문 안에서 초기화 된 경우라도 함수 내부 블록이라면 어디서나 호출할 수 있다. 최신 자바스크립트에선 let이라는 가변형 블럭 지역 변수와 const라는 불변형 블럭 지역 변수가 추가되었다.

let x = 123; x = "123"; const y = false; y = null; // error

2. 연산자

+, -, *, /, % 등의 기본 연산은 물론 ++, --와 같은 증감 연산자도 사용할 수 있다.

a = a + 1 (x) a += 1 (o)

자바스크립트에서 a = a + 1 과 같은 표현은 쓰지 말라고 한다. 무조건 할당 연산자를 사용하라고 한다.

자바스크립트는 자바와 마찬가지로 스트링 컨케트네이션이 되므로 문자열을 덧셈기호로 간단히 붙힐 수 있다.

var s = "String1" + "String2"; console.log(s); String1String2

3. 조건문

a==b a!=b a==b && a==c a==b || a==c a > b if (a > b) { console.log("a is more than b.") } else if (a == b) { console.log("a is the same as b.") } else { console.log("a is less than b.") }

4. 함수

---선언과 호출은 방법---

function notify(message) { console.log('# NOTIFICAION : ' + message); } notify('say something'); # NOTIFITAION : say something

자바스크립트의 함수는다채롭게 선언할 수 있다. 

---함수를 생성---

var notify = function (message) { console.log('# NOTIFICAION : ' + message); } notify('say something');

최근 자바스크립트 문법에선 화살표 함수라는 개념이 도입되었다.

var notify = () => { console.log('# NOTIFICAION : ' + message); } notify('say something');

여러가지 형식을 가지고 있는데 정해진 규칙은 없으므로 자신이 원하는 방식으로 일관성 있게 작성하면 된다.

함수 내부의 함수나 익명 함수는 화살표 함수로 그 외에는 함수 선언식을 사용하였다.

화살표 함수의 경우 최신 문법이므로 구형 브라우저에선 인식되지 않는 점을 참고하자.

---값을 반환하는 함수 작성---

function add(value1, value2) { return value1 + value2; } var a = 10; var b = 20; console.log(add(a, b)); 30

---화살표 함수 표현---

var add = (value1, value2) => value1 + value2; console.log(add(10, 20)); 30

화살표 함수의 경우 중괄호를 생략할 수 있으며, 중괄호를 생략할 경우 화살표 다음에 선언된 식이 return 되는 것으로 간주한다.

5. 배열

배열이란? : 변수의 값이 연속적으로 나열된 형식

배열의 선언

var arr = new Array();

var arr = [];

배열에 값 삽입 : 초기화시 값 삽입

var careers = [

                   "Warrior",

                   "Archer",

                   "Wizard"

];

인덱스를 이용하여 삽입

var careers = [];

                   careers[0] = "Warrior";

                   careers[1] = "Archer";

                   careers[2] = "Wizard";

push 메서드를 사용하여 삽입

var careers = [];

careers.push("Warrior");

careers.push("Archer"); careers.push("Wizard");

배열과 관련된 메소드

var careers = ["Warrior", "Archer", "Wizard"];

console.log("total careers : " + careers.length);

total careers : 3

length는 메서드가 아니다. 자바스크립트에서 Array는 하나의 객체이며 length는 Array가 가진 멤버 변수다. 배열의 길이가 필요할 때마다 길이를 읽어오는 것 보단 O(N) 길이를 가지고 있는게 O(1) 효율적일 테니까.

var careers = ["Warrior", "Archer", "Wizard"];

console.log("careers : " + careers.join(", "));

careers : Warrior, Archer, Wizard

join은 배열을 붙여 하나의 문자열로 만들어 준다.

var careers = ["Warrior", "Archer", "Wizard"];

console.log("careers : " + careers.reverse().join(', '));

careers: Wizard, Archer, Warrior

reverse는 배열을 반대로 뒤집는 역할을 한다.

var careers = ["Warrior", "Archer", "Wizard"];

console.log("careers : " + careers.sort().join(', '));

careers : Archer, Warrior, Wizard

sort는 배열을 정리한다.

현재는 알파뱃 순서대로 정렬되고 있다. 

sort에 함수를 전달하면 자신이 원하는 방식대로 정렬할 수 있다.

var careers = ["Warrior", "Archer", "Wizard"];

var careersOnDlc = ["Assassin", "Samurai"] console.log("careers : " + careers.concat(careersOnDlc).join(', '));

careers : Warrior, Archer, Wizard, Assassin, Samurai

concat은 두 배열을 합쳐주는 역할을 한다.

var careers = ["Warrior", "Archer", "Wizard"]; var x = careers.push("Devil", "Outlaw");

console.log("total careers after push : " + x); var y = careers.pop();

console.log("pop career : " + y);

total careers after push : 5 pop careers : Outlaw

push와 pop은 자료구조 Stack에서 다뤄지며 여기서도 동일한 기능을 수행한다. 

push는 맨 뒤에 요소를 삽입 pop은 맨 뒤 요소를 꺼내는 것이다. 

push의 return type은 push 후 배열의 길이이고,

pop 의 return type은 꺼내진 개체다.

var careers = ["Warrior", "Archer", "Wizard"]; var x = careers.shift();

console.log("shift career : " + x);

var y = careers.unshift("Knight") console.log("total careers after unshift : " + y);

shift career : Warrior total careers after unshift : 3

shift는 맨 앞의 요소를 빼는 기능을, unshift는 맨 앞에 요소를 삽입하는 기능을 한다.

6. 오브젝트(Object)

구조체(struct) 처럼 내부에 여러 변수를 가질 수 있고 클래스(class)처럼 내부에 메소드를 포함하고 있는 형식이다. JSON이라고 많이 알려진 형식이다.

오브젝트의 선언

var obj = new Object(); var obj = {};

변수를 가진 오브젝트

hp와 mp를 가진 player를 생성해보자.

var player = {};

player.hp = 100;

player.mp = 300;

var player = { hp: 100, mp: 300 };

메소드를 가진 오브젝트 : 플레이어가 뒷통수 맞는 기능을 넣어보자

var player = {

     hp: 100,

     mp: 300,

     hit: function (damage) {

          this.hp -= damage; console.log('player hit damage : ' + damage);

          return this.isDie();

     },

     isDie: function () {

          if (this.hp <= 0) {

               console.log('player is die...');

               return true;

          }

          return false;

     }

};

player.hit(150);

console.log('player left hp : ' + player.hp);

player hit damage : 150

player is die...

player left hp : -50

오브젝트 할당 : 위의 객체가 선언됨과 동시에 사용되고 있다. 클래스 혹은 구조체처럼 단지 구조만 선언하고 싶은 경우엔 어떻게 표현할 수 있을까? 오브젝트를 함수로 선언하면 된다.

var Player = function(name) {

     var name = name;

     var hp = 100;

     var mp = 300;

     return {

          hit: function (damage) {

               hp -= damage;

               console.log(name + ' hit damage : ' + damage);

               return this.isDie();

          },

          isDie: function () {

               if (hp <= 0) {

                    console.log(name + ' is die...');

                    return true;

          }

          return false;

       }

   }

}

var medic = new Player('medic');

medic.hit(50); // medic hit damage : 50

var fireBet = new Player('fireBet');

fireBet.hit(100);

// fireBet hit damage : 100 // fireBet is die...

위가 클로져라는 개념을 응용한 방식이다.

위와같이 선언하면 하나의 객체를 여러 변수에서 할당받아 사용할 수 있다.

위와 같은 경우 같은 기능을 하는 함수가 변수마다 새로 할당되는 문제가 발생한다.

이럴때는 prototype을 사용하면 객체끼리 공유하는 함수를 만들 수 있다.

var Player = function(name) {

this.name = name;

this.hp = 100;

this.mp = 300;

}

Player.prototype.hit = function (damage) {

this.hp -= damage;

console.log(this.name + ' hit damage : ' + damage);

return this.isDie();

}

Player.prototype.isDie = function () {

if (this.hp <= 0) {

console.log(this.name + ' is die...');

return true;

}

return false;

}

var medic = new Player('medic');

medic.hit(50);

// medic hit damage : 50

var fireBet = new Player('fireBet');

fireBet.hit(100);

// fireBet hit damage : 100 // fireBet is die...

그렇다면 클로저 문법은 왜 사용하나? 위 코드에서는 프로그래머 혹은 사용자가 fireBet.hp 변수를 접근이 가능하다. 사실상 hp는 직접적으로 변경되어서는 안되는 은닉이 필요한 변수이다. 클로저 함수는 2개의 함수만 반환했기에 프로그래머나 사용자가 hp변수에 접근할 수 없도록 막을 수 있다.

7. 반복문

반복문이 이렇게 아래에 나오는 이유는 위에서 얻은 개념으로 반복문을 더욱 효율적으로 응용할 수 있기 때문이다. 아래는 가장 기본적으로 사용되는 방식의 반복문이다.

for (var i=0; i<5; i++) {

console.log(i);

}

var i = 0;

while (i < 5) {

console.log(i);

i++;

}

for (변수 in 오브젝트 또는 배열)

var arr = [10, 20, 30, 40, 50];

for (var i in arr) {

console.log(i);

}

배열의 경우 배열의 인덱스가 i에 할당되어 반복한다.

var obj = {

a: 1, b: 2, };

for (var key in obj) {

console.log(key + ' : ' + obj[key]); }

오브젝트의 경우 키가 key에 할당되어 반복한다.

for (변수 of 배열)var arr = [10, 20, 30, 40, 50]; for(var i of arr) { console.log(i); } 10 20 30 40 50

of의 경우에는 배열의 값이 i에 할당되어 반복이 진행된다. 혹은 forEach나 map을 이용하여 같은 작업을 수행할 수 있다.

var arr = [10, 20, 30, 40, 50];

arr.forEach((value, idx) => { console.log(idx, value); });

arr.map((value, idx) => { console.log(idx, value); });

둘다 똑같이 아래의 결과를 출력한다.

속도는 forEach가 빠르다고 알려져있다. map은 함수형 프로그래밍에 사용되는 개념으로 forEach와 달리 새로운 객체를 반환한다는 차이가 있다.

8. 문자열

문자열은 가장 기본적인 구조인데 이렇게 뒤에 있는 이유는 알아둬야 할 함수가 생각보다 많아서다. 그 중에도 중요한 것만 기록할 예정이다.

var welcome = "ONDE Planet is the most peaceful space in the universe"; console.log(welcome.charAt(0));

// charAt(n) : n번째 문자를 출력한다. 결과는 O console.log(welcome.charCodeAt(0));

// charCodeAt(n) : n번째 문자의 유니코드를 출력한다. 결과는 79 console.log(welcome.indexOf("x"));

// indexOf("?") : ?라는 글자가 있다면 글자의 인덱스를, 없다면 false(-1)을 출력한다. 결과는 -1

console.log(welcome.includes("space"));

// includes("?") : ?라는 글자가 있다면 true(0), 없다면 false(-1)을 출력한다. 결과는 0

console.log(welcome.replace("peaceful", "nasty"));

// replace("a", "b") : a를 b로 교체한다. 결과는 ONDE Planet is the most nasty space in the universe.

console.log(welcome.search("universe"));

// search("?") : ?라는 글자를 검색하여 첫 문자의 시작 지점을 알려준다. 결과는 46 console.log(welcome.slice(0,4)); // slice(n, n') : n~n'-1 까지의 문자를 가져온다. 결과는 ONDE console.log(welcome.split(" ")); // split("?") : ?라는 문자를 기준으로 문자열을 분리한다. 결과는 ONDE,Planet,is,the,most,peaceful... console.log(welcome.trim()); // trim() : 앞, 뒤의 공백을 제거하는 역할을 한다. 이 값에서는 앞뒤에 공백이 없으므로 결과가 본래의 문자열과 동일하다. console.log(welcome.length); // length : 문자열의 길이를 반환한다. 결과는 55

더 알야할 내용들

relace의 경우에는 처음 발견된 문장만 변경하는데 만일 다수의 문장을 변경하고 싶은 경우엔 어떻게 할 수 있을까? 가령 replaceAll 처럼 말이다. 바로 정규표현식을 사용하면 되는데 여기선 자세한 내용을 다루진 않는다. 대략 아래와 같은 모양이다.

console.log(welcome.replace(/ /gi, "-")); // 모든 공백이 -로 바뀐다.

slice에는 음수를 넣을 수 있다. 음수를 선택하면 뒤에부터 가져오므로 상당히 유용한 기능이며 배열에도 사용할 수 있다.

console.log(welcome.slice(-3)); // 맨 뒤에 3글자만 가져온다.

9. 수학연산

Math라는 기능을 이용하여 사용할 수 있는 연산들이다.

Math.abs(-3);

// Math.abs(n) : n을 절댓값으로 바꾼다. Math.ceil(3.1); // Math.ceil(n) : n값을 올림한다. Math.floor(3.9);

// Math.floor(n) : n값을 내림한다. Math.round(3.5); // Math.round(n) : n값을 반올림한다. var a = Math.random();

// Math.random() : 난수를 생성한다. var b = Math.random()*10+10;

// Math.random()*x+y : y~x+y 범위에서 난수가 생성된다. var c = Math.floor(Math.random() * (max - min)) + min;

// min 부터 max - 1 까지 범위의 난수

10. 형변환

// Number -> String var num = 2018; var str = String(num);

// "2018" var str = num.toString();

// "2018"

// String -> Num var str = "2018.08"; var mInt = Number(str); // 2018 var mInt = parseInt(str);

// 2018 var mFloat = parseFloat(str);

// 2018.08

// Object -> String var user = { name: '배진오', age: 24, }; console.log(user);

// { name: '배진오', age: 24 } var strUser = JSON.stringify(user);

// 문자열 JSON console.log(strUser);

// "{\"name\":\"배진오\",\"age\":24}" var strUserToObject = JSON.parse(strUser);

// JSON 형식의 문자열이면 parse를 이용해서 Object로 변환할 수 있음

11. 전개구문

많은 분들이 이 글을 "Javascript ... 문법"을 검색해서 오시는 것을 확인하였다. 정작 이 글엔 해당 내용이 없어서 추가하게 되었다. 전개구문은 이름 그대로 배열이나 객체를 전개(展開, 내용을 진전시켜 펴 나감) 시킨다고 생각하면 이해하기 쉬운 것 같다. 이 한자 표현이 맞는지는 책임지지 않는다.

우선 아래는 배열에 대한 전개구문이다.

const numbers = [1, 2, 3, 4, 5];

console.log([...numbers, 6, 7, 8, 9, 10]);

[1, 2, 3, 4, 5, 6, 7, 8, 9, 10]

위와같이 확장의 개념으로 사용할 수도 있고

const numbers = [1, 2, 3, 4, 5];

const copyNumbers = [...numbers];

복사의 개념으로도 사용할 수 있다. numbers를 바로 대입하는 것과는 달리 위 코드는 각각의 값이 복사된 전혀 새로운 객체가 할당된다. 깊은 복사가 이뤄지는 셈이다. 이제 이 이름이 착 달라붙지 않는가? 말그대로 자신의 개체들을 전개시키는 문법이다. 배열에서는 각각의 개체를 전개시키지만 객체에서는 키와 값을 전개시킨다.

const user = { name: '배진오', age: 24, };

console.log({ ...user, hobby: '게임' });

{ name: '배진오', age: 24, hobby: '게임' }

위와같이 키와 값을 그대로 전개시킨다.

const user = { name: '배진오', age: 24, };

console.log({ age: 99, ...user, });

{ name: '배진오', age: 24 }

위와같이 작성하면 전개구문에 의해서 age의 값이 덮어 써진다는 점을 고려하자. 전개 구문을 사용한 지점에서 해당 객체를 그대로 불러오는 개념으로 이해하면 될 것 같다.

12. 함수형 메서드

자바스크립트에서는 함수형 프로그래밍에 대부분 사용되는 map, filter, reduce 함수가 제공된다. 이터레이블 객체(배열 등)에서만 사용가능 한 점 참고하자. 우선 아래와 같은 배열에 대해서 각각의 함수의 사용방법을 알아보도록 할 것이다.

const users = [ { name: '배진오', age: 24, hobby: '게임' },

{ name: '김아름', age: 24, hobby: '음악' },

{ name: '아이유', age: 26, hobby: '음악' }, ]; map

map은 단순한 반복문이다. 다만 전달한 함수에 맞게 처리된 개체가 담긴 배열이 반환된다. 위 데이터에서 이름과 나이로만 구성된 오브젝트로 재구성 한다고 생각해보자.

const newUsers = users.map(function(user) { return { name: user.name, age: user.age };

});

console.log(newUsers);

[ { name: '배진오', age: 24 }, { name: '김아름', age: 24 }, { name: '아이유', age: 26 } ] filter

필터는 반복을 진행하면서 전달한 함수의 결과가 true인 개체의 배열을 리턴하는 함수다. 취미가 '음악'인 사람들만 뽑아보자.

const newUsers = users.filter(function(user) { return user.hobby == '음악' });

console.log(newUsers);

[ { name: '김아름', age: 24, hobby: '음악' }, { name: '아이유', age: 26, hobby: '음악' } ]

그럼 이번에는 필터와 맵을 함께 사용하여 취미가 음악인 사람의 이름만 출력해보자. 이번에는 위와 다르게 화살표 함수를 이용하여 문법을 간소화 시켜보았다.

const newUsers = users .filter(user => user.hobby == '음악')

.map(user => user.name); console.log(newUsers); [ '김아름', '아이유' ] reduce

reduce는 배열의 개체를 누적으로 처리하기 위해서 사용된다. 누적으로 처리할 일이 뭐가 있을까? 예를들면 합계를 내거나... 배열을 오브젝트로 만들거나... 지금 당장 생각나는 부분은 2가지 인 것 같다. 그 외 다양하게 사용될 수 있을거다.

우선 reduce를 활용해 모든 유저의 나이의 평균을 내보자.

const userTotalAge = users.reduce((acc, user) => acc += user.age, 0); console.log(userTotalAge / users.length); 

reduce는 map이나 filter와 다르게 개체뿐만 아니라 누적된 값이 함께 매개변수로 들어온다. 필자는 이 변수를 대부분 acc(accumulate)라고 표현한다. 또한 중요한 점은 함수 다음에 초기값을 넣어줬다. 위 코드에서는 0. 맨 처음 실행될 때 acc의 값으로 reduce에서는 이 초기값을 꼭 설정해야 하는점을 기억하자.

이번에는 각각의 이름을 키로 나이를 값으로 사용하는 오브젝트를 reduce를 이용해서 생성해보자.

const usersObject = users.reduce((acc, user) => { return { ...acc, [user.name]: user.age }

},

{}) console.log(usersObject);

{ '배진오': 24, '김아름': 24, '아이유': 26 }

전개구문을 이용하여 기존 오브젝트의 키와 값을 살리면서 새로운 키와 값을 추가하는 방식이다.

----------------------------------------------문법정리--------------------------------------------

출력

[removed]("Hello World!");

주석

주석이란? : 프로그램 실행에는 아무런 영향을 미치지 않지만 설명글을 달거나 사용하지 않는 코드를 무력화 시킬 때

// 한 줄 주석
/* 여러 줄
주석
*/
<!-- HTML 주석 -->

외부 자바스크립트 연동 - 기본형

[removed][removed]

변수

변수에 저장할 수 있는 데이터의 종류: String / Number / Boolean / Null

var message;    
message = "Hello World!";

문자열 안에 HTML 태그를 포함하여 출력하면 태그로 인식되어 출력됨

var tag="

Tag!!

";

문자열 데이터에서 숫자열 데이터로 바꾸는 경우

var num=Number("7");

논리형 데이터 

var isChecked=true;
var isSmall=150>100;  // true
var string=Boolean("hi");   // 0과 null을 제외한 모든 데이터 true 반환

typeof

변수에 저장된 데이터형 추출

var num=10;
[removed](typeof num);    // number가 출력됨

비교 연산자

다른 연산자들은 타 언어들과 동일하여 생략.

var a=10;
var b="10";

// 데이터형과 무관하게 표기된 숫자만 비교
[removed](a==b);   // true
[removed](a!=b);    // false

// 데이터형도 반영하여 비교
[removed](a===b);   // false
[removed](a!==b);    // true

제어문

Java의 문법과 동일

if(조건식) {
    실행문;
} else if(조건식 2) {
    실행문 2;
} else {
    실행문 3;
}

var 변수=초깃값;
switch(변수) {
    case 값 1:
        실행문 1;
        break;
    case 값 2:
         실행문 2;
        break;
    default:
        실행문 3;

var 변수=초깃값;
while(조건식) {
    실행문;
    증감식;
}

var 변수=초깃값;
do {
    실행문;
    증감식;
} while(조건식)

for(초깂값; 조건식; 증감식) {
    실행문;
}

내장 객체

브라우저의 자바스크립트 엔진에 내장된 객체. String/Date/Array/Nath/RegExp Object 등이 있음.

날짜 객체 Date

Date 객체 생성

new Date()
new Date(milliseconds)
new Date(dateString)
new Date(year, month, day, hours, minutes, seconds, milliseconds)

Date Get 메서드

getDate() - 일 정보를 가져옴.

getDay() - 요일 정보를 가져옴. 0(일요일)-6(토요일)

getFullYear - 연도 정보를 가져옴. (yyyy)

getHours() - 시간 정보를 가져옴.

getMilliseconds() - 밀리초 정보를 가져옴. 0-999 (1/1000 초의 단위)

getMinutes() - 분 정보를 가져옴.

getMonth() - 월 정보를 가져옴. 현재 월에서 -1한 값으로 옴.

getSeconds() - 초 정보를 가져옴.

getTime() - 1970년 1월 1일부터 경과된 시간을 밀리초로 가져옴.

Date Set 메서드

setDate() - 일 정보를 설정.

setFullYear() - 연도 정보를 설정. 원한다면 월과 일 정보도 설정할 수 있다.

setHours() - 시간 정보를 설정.

setMillseconds() - 밀리초 정보를 설정.

setMinutes() - 분 정보를 설정.

setSeconds() - 초 정보를 설정.

setTime() - 1970년 1월 1일부터 경과된 시간을 밀리초로 설정.

기타 Date 메서드

now() - 1970년 1월 1일부터 지금까지의 밀리초를 반환.

parse() - 날짜 형태의 문자열을 변환하여 1970년 1월 1일부터 입력한 날짜까지의 밀리초를 반환.

toString() - Date 객체를 문자열로 변환.

toJSON() - Date 객체를 JSON 데이터로 변환.

valueOf() - Date 객체를 밀리초로 반환.

숫자 객체 Number

Number 생성

var num = 1;      
var num2 = new Number(1);

Number 객체의 속성

MAX_VALUE - 표현 가능한 가장 큰 수.

MIN_VALUE - 표현 가능한 가장 작은 수.

POSITIVE_INFINITY - 무한대 수 표기.

NEGATIVE_INFINITY - 음의 무한대 수 표기.

NaN - 숫자가 아닌 경우 표기.

Number 객체 메서드

toExponential(n) - 자수 표기법으로 소수점 n자리만큼 문자형 데이터로 반환.

toFixed(n) - 소수점 n자리만큼 반올림하여 문자형 데이터로 반환.

toPrecision(n) - 유효 숫자 n의 개수만큼 반올림하여 문자형 데이터로 반환.

toString() - 숫자형 데이터를 문자형 데이터로 반환.

valueOf() - 객체의 원래 값을 반환.

parseInt(값) - 데이터를 정수로 변환하여 반환.

parseFloat(값) - 데이터를 실수로 변환하여 반환.

수학 객체 Math

Math 메서드 및 상수

Math.abs(숫자) - 숫자의 절댓값을 반환.

Math.max(숫자1, 숫자2, 숫자3) - 숫자 중 최댓값을 반환.

Math.min(숫자1, 숫자2, 숫자3) - 숫자 중 최솟값을 반환.

Math.pow(숫자, 제곱값) - 숫자의 거듭제곱한 값을 반환.

Math.random() - 0~1 사이의 난수를 반환.

Math.round(숫자) - 소수점 첫째 자리에서 반올림하여 정수를 반환.

Math.ceil(숫자) - 소수점 첫째 자리에서 무조건 올림에서 정수를 반환.

Math.floor(숫자) - 소수점 첫째 자리에서 무조건 내림해서 정수를 반환.

Math.sqrt(숫자) - 숫자의 제곱근 값을 반환.

Math.PI - 원주율 상수를 반환.

배열 객체 Array

Array 생성

var array = new Array();
array[0] = 1;
array[1] = 2;

var array2 = new Array(1, "temp", true);

var array3 = [1, true, "문자열도 가능"];

Array 객체의 메서드 및 속성

join(연결문자) - 배열 객체에 데이터를 연결 문자 기준으로 1개의 문자형 데이터로 반환.

reverse() - 배열 객체에 데이터의 순서를 거꾸로 바꾼 후 반환.

sort() - 배열 객체에 데이터를 오름차순으로 정렬.

slice(index1, index2) - 배열 객체에 데이터 중 원하는 인덱스 구간만큼 잘라서 배열 객체로 가져옴.

splice() - 배열 객체에 지정 데이터를 삭제하고 그 구간에 새 데이터를 삽입할 수 있음.

concat() - 2개의 배열 객체를 하나로 결합.

pop() - 배열에 저장된 데이터 중 마지막 인덱스에 저장된 데이터 삭제.

push(new data) - 배열 객체에 마지막 인덱스에 새 데이터를 삽입.

shift() - 배열 객체에 저장된 데이터 중 첫 번째 인덱스에 저장된 데이터를 삭제.

unshift(new data) - 배열 객체의 가장 앞의 인덱스에 새 데이터를 삽입.

length - 배열에 저장된 총 데이터의 개수를 반환.

문자 객체 String

String 생성

var str = "hello";      
var str2 = new String("hi");

String 객체 메서드 및 속성

charAt(index) - 문자열에서 인덱스 번호에 해당하는 문자 반환.

indexOf("찾을 문자") - 문자열에서 왼쪽부터 찾을 문자와 일치하는 문자를 찾아 최초로 일치하는 문자의 인덱스 번호를 반환. 찾는 문자가 없으면 -1 반환.

lastIndexOf("찾을 문자") - indexOf와 동일하나 문자열의 오른쪽부터 찾음.

match("찾을 문자") - indexOf와 동일하나 찾는 문자가 없으면 null을 반환.

replace("바꿀 문자", "새 문자") - 문자열에서 왼쪽부터 바꿀 문자와 일치하는 문자를 찾아 최초로 찾은 문자를 새 문자로 치환.

search("찾을 문자") - 문자열 왼쪽부터 찾을 문자와 일치하는 문자를 찾아 최초로 일치하는 인덱스 번호를 반환.

slice(a, b) - a개의 문자를 자르고 b번째 이후에 문자를 자른 후 남은 문자를 반환.

substring(a, b) - a 인덱스부터 b 인덱스 이전 구간의 문자를 반환.

substr(a, 문자 개수) - 문자열에 a 인덱스부터 지정한 문자 개수만큼 문자열을 반환.

split("문자") - 지정한 문자를 기준으로 문자 데이터를 나누어 배열에 저장하여 반환.

toLowerCase() - 문자열에서 영문 대문자를 모두 소문자로 바꿈.

toUpperCase() - 문자열에서 영문 소문자를 모두 대문자로 바꿈.

length - 문자열에서 문자의 개수를 반환.

concat("새로운 문자") - 문자열에 새로운 문자열을 결합.

charCodeAt("찾을 문자") - 찾을 문자의 아스키 코드 값을 반환.

fromCharCode(아스키 코드 값) - 아스키 코드 값에 해당하는 문자를 반환.

trim() - 문자의 앞 또는 뒤에 공백 문자열을 삭제.

브라우저 객체 모델(BOM)

브라우저에 내장된 객체. 

window 객체

브라우저 객체의 최상위 객체.

window 객체 메서드

open("url 경로", "창 이름", "옵션 설정") - 새 창을 열 때 사용.

- open() 메서드 옵션 설정: width/height/left/top/location/status/scrollbars/tollbars

alert("메세지") - 경고 창을 띄움.

prompt("질의 내용", "기본 답변") - 질의응답 창을 띄움.

confirm("질의 내용") - 확인/취소 창을 띄움.

- 확인 클릭시 true 반환, 취소 클릭시 false 반환.

moveTo(x 위치값, y 위치값) - 창의 위치를 이동시킬 때 사용.

resizeTo(너빗값, 높잇값) - 창의 크기를 변경시킬 때 사용.

setInterval("스크립트 실행문", 시간 간격) - 일정 간격으로 반복하여 실행문을 실행시킬 때 사용.

clearIntervar(참조 변수) - 참조 변수에 참조되어 있는 setInterval() 삭제.

setTimeout("스크립트 실행문", 시간 간격) - 일정 간격으로 한 번만 실행문을 실행시킬 때 사용.

clearTimeout(참조 변수) - 참조 변수에 참조되어 있던 setTimeout() 삭제.

screen 객체

사용자의 모니터 정보를 제공하는 객체.

screen 객체 속성

width/height/availWidth/availHeight/colorDepth(사용자 모니터가 표현 가능한 컬러 bit)

location 객체

사용자 브라우저의 주소 창에 url에 대한 정보와 새로 고침 기능을 제공하는 객체.

location 객체 속성 및 메서드

href - 주소 영역에 참조 주소를 설정하거나 URL 반환.

hash - URL의 해시값을 반환.

hostname - URL의 호스트 이름을 설정하거나 반환.

host - URL의 호스트 이름과 포트 번호를 반환.

port - URL의 포트 번호를 반환.

protocol - URL의 프로토콜을 반환.

search - URL의 쿼리를 반환.

reload() - 새로 고침.

history 객체

사용자가 방문한 사이트 중 이전에 방문한 사이트와 다음 방문한 사이트로 다시 돌아갈 수 있는 속성과 메서드를 제공하는 객체.

history 메서드 및 속성

back() - 이전 방문한 페이지로 이동.

forward() - 다음 방문한 페이지로 이동.

go(이동 숫자) - 이동 숫자만큼의 페이지로 이동. 음의 값이면 이전 페이지로 이동.

length - 방문 기록에 저장된 목록의 개수 반환.

navigator 객체

현재 방문자가 사용하는 브라우저 정보와 운영체제의 정보를 제공하는 객체.

navigator 속성

appCodeName - 방문자의 브라우저 코드명을 반환.

appName - 방문자의 브라우저 이름 반환.

appVersion - 방문자의 브라우저 버전 정보를 반환.

language - 방문자의 브라우저 사용 언어를 반환.

product - 방문자의 브라우저 사용 엔진 이름을 반환.

platform - 방문자의 브라우저를 실행하는 운영체제를 반환.

userAgent - 방문자의 브라우저와 운영체제의 종합 정보를 제공.

문자 객체 모델(DOM)

HTML 문서의 구조.

선택자

직접 선택자

직접 문서에서 요소를 선택함. (id/class/폼 명/요소 명 등)

document.getElementById("아이디 명") - 아이디를 이용해 요소를 선택.

document.getElmentsByTagName("요소 명") - 요소의 이름을 이용해 요소를 선택.

document.formName.inputName - 폼 요소에 name 속성을 이용해 요소를 선택.

인접 관계 선택자

직접 선택자를 사용해 선택해 온 문서 객체를 기준으로 가까이에 있는 요소를 선택함. (parentNode/childeNodes 등)

parentNode - 선택한 요소의 부모 요소를 선택.

childNodes - 선택한 요소의 모든 자식 요소를 선택. 선택한 모든 요소가 저장됨.

firstChild - 선택한 요소의 첫 번째 자식 요소만 선택.

previousSibling - 선택한 요소의 이전에 오는 형제 요소만 선택.

nextSibling - 선택한 요소의 다음에 오는 형제 요소만 선택.

문서 객체 이벤트 핸들러 적용하기

onclick - 선택한 요소를 클릭했을 때 이벤트 발생.

onmousevoer - 선택한 요소에 마우스를 올렸을 때 이벤트 발생.

onmouseout - 선택한 요소에 마우스가 벗어났을 때 이벤트 발생.

submit - 선택한 폼에 전송이 일어났을 떄 이벤트 발생.

버튼
document.getElementById("btn").onclick = function() {
    alert("welcome");
}