어떤 문자열이 있다고 가장하자.

string txt = "Hello My Name is JANG.";

이 때, 특정 문자열(Hello, My, Name, is, JANG, Hell, Nam 등등 모든 문자열 가능)

이 포함되어 있는지 확인하고 싶다면,

indexOf()메소드를 사용하면 된다.

주의할 점은,

 if문에서,

if (txt.indexOf("Hello")) {

로 생각할 수 있지만, 아니다.

index의 반환값은 

Hello라는 문자열이 없을 때 -1을 반환한다고 한다.

하지만, if 조건문에서 

0, -0, null, false, NaN, undefined, ' '

을 제외한 모든 값들은 true이다. -1도 true로 인식되므로, 위 if문은 항상 true가 된다.

그래서, 

if (txt.indexOf("JANG") !== -1)  {

alert("Find txt : JANG");

}

이렇게 -1 이 아니라면, 조건을 해줘야 한다.

-1이 아니라는 것은 string txt에 문자열이 존재한다는 것이므로 true가 발생, 

-1이라는 것은 없다는 것이므로 false가 출력된다.

<button onclick="myFunction()">Try it</button>

<p id="demo"></p>

<script>
    function myFunction() {
        var str = "Hello World!";
        var res = str.toUpperCase();
        document.getElementById("demo").innerHTML = res;
    };
</script>

ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ
<p id="demo"></p>

<script>

    function myFunction() {

        var str = "HELLO MY NAME IS ...UMM";
        var res = str.toLowerCase();

        document.getElementById("demo").innerHTML = res;
    };
</script>

윗쪽 코드가 모든 문자열을 대문자로 변환하는 toUpperCase() 함수고,

아래 코드가 모든 문자열을 소문자로 변환하는 toLowerCase();함수이다.

또한, 스크립트는 버튼 Try it을 눌렀을 때 일어나는 버튼 클릭 이벤트 onClick을 정의하였다.

결과는 

HELLO WORLD!

hello my name is ...umm

당연한 것이지만, 한글이나 숫자에는 전혀 영향을 미치지 않는다. 에러가 아니라 무시된다

express를 사용시 제이드(Jade)를 사용하여 웹 페이지를 만들때가 있다.

express는 템플릿 엔진을 이용해서 웹페이지를 생성하는데 제이드(Jade)가 대표적이다.

이번 글에서는 express에서 Jade 템플릿을 이용한 웹페이지 렌더링 방법에 대해 알아보려고 한다.

Jade 템플릿을 설치하는 방법은 매우 간단하다.

$npm install jade --save

설치한 Jade 모듈을 익스프레스에 설정하는 코드를 추가한다.

[app.js]에

app.set('views', path.join(__dirname, 'views'));

app.set('view engine', 'jade');

////////////////////

Jade만의 특수 태그가 몇 가지 존재하며, 이 특수 태그를 사용하여 페이지를 구성한다.

1. -Code : 자바스크립트 코드를 입력할 때 사용한다.

2. #{Value} : 데이터를 출력한다.

3. = Value : 데이터를 출력한다.

            -for(var i = 0 ; i < data.length ; i ++)

            { 

a(href = "http://www.naver.com") 이동하기 : p #{i}

           -}

[결과]

이동하기 : 0

4. div 태그 생성하기

div 태그를 직접 입력하지 않고 #header 태그를 입력하는 것만으로도 : id 속성이 header인 div 태그를 생성.

div 태그를 직접 입력하지 않고 .header 태그를 입력하는 것만으로도 : class 속성이 header인 div 태그를 생성.

body

  #header 

h1 Hello World!

h2 Mr.Jang.

이와 같이 div 태그를 쓰지 않고도 쉽게 생성할 수 있다.

보통 폼(form) 태그에서 action을 이용하여 input 정보들을 보낸다.

하지만, 이 외에도 form태그는 작성만 해놓고, 자바스크립트 내에서 처리할 수 있다.

<form name="comment_form" method="post">

 // 안에 작성

</form>

<script type="text/javascript">

function submitForm() {

document.comment_form.action = "./comment.php";

document.comment_form.submit();

}

</script>

이렇게 하면, document로 form의 이름을 불러온 뒤, action 또는 submit()함수를 실행할 수 있다.

예를 들어 어떤 버튼을 눌렀을 때, form으로 전송하고 싶다면, submit type도 있지만

위와 같이 submitForm함수를 호출하여 처리를 할 수도 있다.

보통 폼(form) 태그에서 action을 이용하여 input 정보들을 보낸다.

하지만, 이 외에도 form태그는 작성만 해놓고, 자바스크립트 내에서 처리할 수 있다.

<form name="comment_form" method="post">

 // 안에 작성

</form>

<script type="text/javascript">

function submitForm() {

document.comment_form.action = "./comment.php";

document.comment_form.submit();

}

</script>

이렇게 하면, document로 form의 이름을 불러온 뒤, action 또는 submit()함수를 실행할 수 있다.

예를 들어 어떤 버튼을 눌렀을 때, form으로 전송하고 싶다면, submit type도 있지만

위와 같이 submitForm함수를 호출하여 처리를 할 수도 있다.

- function이라는 단어와 중괄호 숫자를 줄이기 위해 만들어진 단축 문법이다.

- 화살표 함수에는 세 가지 문법이 존재.

1) function 키워드를 생략이 가능함.

2) 함수에 매개변수가 단 하나뿐이라면 괄호()도 생략이 가능함.

3) 함수 바디가 표현식 하나라면 중괄호{}와 return문도 생략이 가능함.

- 화살표 함수는 항상 익명 함수.

const f1 = function() { return "Hi"; }

이러한 함수를

const f1 = () => "Hi";

const f2 = function(name) { return `Hi, ${name}`; }

이 함수를 

const f2 = name => `Hi, ${name}`;

const f3 = function(a,b) { return a + b; }

이 함수를 

const f3 = (a,b) => a + b;

- 화살표 함수의 사용 목적 : 익명 함수를 만들어 다른 곳으로 전달하기 위해 가장 유용하게 사용됨.

- 

- 한 마디로 생명주기라고도 하기도 한다.

- 변수와 상수, 매개변수가 언제, 어디서 정의되는지를 결정하는 요소.

- 함수의 매개변수가 함수 바디 안에서만 존재하는 것도 스코프의 일종.

- 함수를 실제 호출하기 전까지는 함수의 매개변수가 존재하지 않음.

- 함수를 호출할때마다 매개변수가 나타나고, 함수가 제어권을 반환하면(종료되면) 

- 변수가 존재하지 않으면 그 변수는 '스코프 안에 있지 않음'

- 즉, 아직 선언하지 않은 변수, 함수가 종료되면서 존재하지 않게 된 변수는 '스코프 안에 있지 않음'

- 무엇인가 존재하지 않는다고 해도 곧바로 메모리를 회수하지는 않음

- 유지할 필요가 없다고 표시하면, 가비지 컬렉션 프로세서에서 메모리를 회수함.

- 가비지 컬렉션은 자동으로 일어나므로 프로그래머가 신경 쓸 필요는 없다.

- 프로그램 소스 코드는 정적인 구조지만, 실제 실행하면 실행 흐름은 이곳 저곳으로 움직임.

정적 스코프

- 어떤 변수가 함수 스코프 안에 있는지 함수를 정의할 때 알 수 있다는 뜻.(호출할 때 알 수 있는 것X)

- 함수는 자신이 정의될 때 접근할 수 있었던 식별자에는 여전히 접근할 수 있지만,

- 호출할 때 스코프에 있는 식별자에는 접근이 불가함.

- 정적 스코프는 전역 스코프, 블록 스코프, 함수 스코프에 적용됨.

1) 전역 스코프

- 프로그램이 시작할 때 암시적으로 주어지는 스코프가 필요한데 이 스코프를 전역 스코프라 부름.

- 즉, 자바스크립트가 실행되고 어떤 함수도 호출되지 않았을 때 실행 흐름은 전역 스코프에 있음.

- 즉, 전역 스코프에서 선언된 것은 무엇이든 해당 프로그램의 모든 스코프에서 접급이 가능함.

- 전역 스코프에서 선언된 것들을 전역 변수라고 부름.

- 전역 스코프를 남용하는 것은 모든 스코프에서 보이기 때문에 반드시 자제하고, 충분한 고려가 필요.

- 전역 변수가 변수만을 의미하는 것이 아님. 변수, 함수, 객체등을 모두 총칭하는 것.

- 전역 변수는 남용하면 안됨. 변수보다는 단일 객체에 저장할 것.

2) 블록 스코프

- let과 const는 블록 스코프에서 선언함.

- 블록 : 중괄호{}로 묶은 부분. 

- 블록 스코프는 그 블록의 스코프에서만 보이는 식별자를 의미함.

- 보통 if나 for같은 제어문의 일부분으로 블록을 사용하지만 블록만 사용하는 독립 블록도 유효한 문법.

- 독립 블록은 필요하지도 않고 단독으로는 쓸모가 별로 없다.

- 블록 안에 내부 블록을 만들면, 동일한 변수를 생성해도 다른 변수이므로 외부 스코프의 변수를 

  숨기기가 가능한 효과.

-

for ... in 루프는 객체의 프로퍼티에 루프를 실행하도록 설계된 루프.

for(variable in object) {

...

}

const student = {name:"JSH", grade:3, age:50};    // 객체가 있다.

for(let prop in student) {                                //  for in 루프로 student 객체를 루프돌린다.

 if(!student.hasOwnProperty(prop)) continue;      //  student에에 없는 prop 값이라면 아래 코드 무시.

 console.log(prop + ': ' + student[prop]);           // 루프 돌고 난 뒤 값 출력

무조건, 객체에 존재하는 모든 요소( 처음[0]부터 끝까지)를 루프를 돌린다.

책 : 러닝 자바스크립트 : ES6로 입문하는 웹 개발

자바스크립트에서는 리터럴과 상수 그리고 변수를 알아야 한다.

1) 변수(Variable)

- 이름이 붙은 값.

- 언제든지 변경 가능.

- let number = 22; 와 같이 선언(let은 ES6에서 생성됨. 그 전에는 var만 사용 가능) 

  변수 number를 선언(즉, 생성)하고 초기값을 할당(22)하는 2가지를 나타냄.

- 초기값을 반드시 지정해야 하는것은 아니지만, 할당하지 않으면 undefined가 출력.

- 다중 선언 가능.   let num01 = 11 , num02 = 22, num03;

- 값이 수시로 변할 상황에서 변수를 사용한다.

2) 상수(Constant)

- const 키워드 사용. Ex)  const ROOM_NUMBER  = 1004;

- ES6에서 새로 생성됨.

- 변수와 마찮가지로 값을 할당할 수 있지만, 한 번 할당된 값은 변경이 불가.

- 상수 이름은 대문자와 밑줄만 사용해야 한 눈에 상수인지 파악. 가독성이 높음.

- 상황에 따라 다르지만, 될 수 있으면 변수보다 상수를 사용하는 것이 바람직함.

- 한 번 정해진 값이 변하지 않을 경우 상수로 선언한다.

3) 식별자(Identifier) 규칙

- 글자, 달러 기호 $ , 그리고 밑줄 _ 로만 시작해야 함(숫자 시작 불가)

- 글자, 달러 기호 $ , 그리고 밑줄 _ , 숫자로만 쓸 수 있음.

- 예약어(또는 키워드)는 쓸 수 없음.

- 카멜 케이스(Camel Case) : 두 단어 이상일때, 첫 글자는 대문자로 작성. 

  이러한 형태가 낙타의 혹처럼 보인다해서 이렇게 부른다. examBestScore 이런식으로..

- 스네이크 케이스(Snake Case) : 뱀처럼 _를 쓰는 방식.  exam_best_score 이런식으로..

- 대문자로 시작은 안 됨.

4) 리터럴(Literal)

- 위 num01... 변수에 선언한 11 22 33이 모두 리터럴.

- 리터럴이란 값을 프로그램 안에서 직접 지정한다는 의미이다.

- 리터럴과 식별자의 차이.

   let num01 = 11

에서 num01은 변수를 가리키는 식별자, 11은 숫자형 리터럴이자 num01의 값. 따옴표를 통해 구별함.

5) 원시 타입(Primitive)과 객체(Object)

- 원시 타입의 종류 : 숫자, 문자열, 불리언, null, undefined, Symbol(심볼)

- 원시 타입은 불변함. 숫자는 항상 같은 숫자. 문자열도 항상. 같음.

- 객체 : 원시 값과 달리 객체는 여러 가지 형태와 값을 갖을 수 있음

- 자바스크립트에서 내장된 객체 종류도 많다 : Array, Date, Map, Set ...

/////////////////////////////////////////////////////////////////////////////////////////////////////

/////////////////////////////////////////////////////////////////////////////////////////////////////

<숫자>

- 자바스크립트에서는 숫자형 데이터 타입이 하나밖에 존재하지 않음.  바로, 더블(Double) 형식.

<문자열>

- 자바스크립트 문자열은 유니코드 텍스트.

- 자바스크립트 문자열 리터럴은 작은 따옴표, 큰 따옴표, 백틱(Backtick)을 사용.

- 이스케이프 문자. 문자열안에 따옴표 쓰거나...   \를(역슬레시)를 써줘야 문자열로 인식

- 문자열은 작은, 큰 따옴표 모두 가능하지만, 큰 따옴표를 추천함.

- 특수문자 :  \n \r \t \' \" \` \$ \\ 등등...

<템플릿 문자열>

- 문자열 병합 : + 기호로 숫자 등을 문자열으로 만들어 사용.

- ES6 이전에는 문자열 병합뿐이었지만, ES6에서는 문자열 템플릿이라는 기능이 도입.

- 문자열 템플릿은 문자열 채우기라고도 부름.

- 문자열 템플릿은  문자열의 정해진 위치에 값을 채워 넣는 간편한 방법.

- 문자열 템플릿은 큰, 작은 따옴표를 사용하지 않고 백틱을 사용함.

(기존. 문자열 병합)

let roomNumber = 112;

const message = "방 번호는 " + roomNumber + "입니다";

(ES6. 문자열 템플릿)

let roomNumber = 112;

const message = "방 번호는 ${roomNumber}입니다";

- 문자열 템플릿에서는 달러 기호가 특수문자가 됨.

- 달러 기호 다음 중괄호로 감싼 값이 문자열에 곧바로 삽입됨.

<숫자와 문자열 결합>

const num1 = 5 +'50' : 550    // 5가 문자열로 바뀜.

const num2 = 5 * '50' : 250    // 50이 숫자로 바뀜.

<불리언>

- true 또는 false 두 값만 갖는 데이터 타입. 

- 불리언을 사용할 때는 따옴표 안에 넣지 말것. 따옴표 "false" 또는 "true"는 그냥 문자열.

<Symbol>

- ES6에서 새롭게 도입된 데이터 타입.

- 심볼은 항상 유일하며 다른 어떤 심볼과도 일치하지 않음(객체와 유사)

<null & undefined>

- null이 갖을 수 있는 값은 null 하나. 또한 undefined가 갖을 수 있는 값도 undefined 하나로 동일.

- 또한, 둘 모두 존재하지 않는다는 것을 나타냄.

- null은 프로그래머에게 허용된 데이터 타입. undefined는 자바스크립트 자체에서 사용한다.

- undefined를 할당하기보다, 불확실한 변수 값, 적용할 수 없는 경우 null을 선택하도록.

- 변수를 선언만하고, 값을 할당하지 않으면 undefined가 기본적으로 저장됨.

<객체>

- 원시 타입은 단 하나의 값만 나타낼 수 있고, 불변하지만

- 객체는 여러 가지 값이나 복잡한 다수의 값을 나타낼 수 있으며, 변할 수도 있다.

- 빈 객체 생성 : const obj = {};

        if(document.getElementById("sample_txt").value.length == 0) {

           document.getElementById("add_file").style.display = "none";

        }

일단, if 조건문에 들어간 

document.getElementById("sample_txt").value.length

이 바로 sample_txt라는 ID를 갖은 Textarea의 길이를 구하는 문법이다.

자바스크립트에서는 document.getElementById으로 아이디를 구할 수 있다.

참고로, if문 안에서 실행되는  내용은

add_file이라는 ID를 갖은 엘리먼트를 사라지게(display=none) 만드는 코드이다.

정리하면,

sample_txt의 내용이 비었다면 add_file가 사라지도록 만드는 코드이다.

이것을 

window.onload = function()

      {

        loadContent();

      }

이러한 함수를 만들어 window.onload에 넣고 실행을 한다면, 

해당 페이지가 실행되자마자 loadContent()함수가 실행되게 된다.