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

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가 출력된다.

Number() 생성자 함수는 숫자 객체 / 숫자 원시값을 만들 때 사용한다.

toLocaleString() 함수를 사용하면 된다.

Number() 형 내장 함수이다.

돈의 형태(1000단위로 콤마[,]) 형태로 형변환을 시켜 리턴하는 함수이다.

뭔말인지 모르겠으면 예제를 보자.

Number(1000000).toLocaleString('en');

결과값 : 1,000,000

이전에는 var 키워드를 사용하여 변수를 생성하여 값을 담았다.

var 키워드는  ES6에서 const와 let이 나오면서 사용하지 않는다.

var 키워드의 스코프(Scope)는 함수 단위이다.

const : 한 번 설정한 후 변할 일이 없는 값을 선언할 때 사용(상수)

let : for 문 등 값이 계속 유동적으로 변할 가능성이 있을 때 사용

아래와 같은 에러는 

const에서 값을 선언하지 않았을경우 발생하는 에러이다.

const는 상수이기 때문에, 1회 선언되면 그 이후 변경할 수 없다.

SyntaxError: Missing initializer in const declaration

먼저, 

Splice의 사전적 정의는

(밧줄의 두 끝을 함께 꼬아서) 잇다   2. (필름・테이프 등의 두 끝을) 붙이다

이다.

삭제하는 메소드를 찾았는데 잇다, 붙이다라니? 이것이 과연 배열 요소를 삭제하는 메소드가 맞을까?

맞다!

1. splice를 이용해 삭제하는 방법

var a = [1, 2, 3, 4, 5, 6, 7];

이런 배열이 있다고 가정하다.

삭제하는 방법은 다음과 같다.

a.splice(0, 3);

이 명령어의 의미는 : 0번 배열부터 3개를 제거하라

따라서 a 배열은

[4,5,6,7]이 된다.

2. splice를 이용해 배열을 두개 만드는 방법

만약, var 에 변수에 값을 넣게 되면 어떻게 될까?

var b = a.splice(0, 3);

결과

console.log(a); // 결과 : [4,5,6,7]

console.log(b); // 결과 : [1,2,3]

즉, 떼버린 값을 b에 넣어 배열이 두 개로 쪼개졌다.

VS Code를 사용하다가, 변수 선언 중 색상이 다른 한 개를 발견했다.

다른것들은 하늘색인데, 이것만 회색...

뭔가 다른가해서 마우스를 갖다대보니...

위와 같이 경고가 뜬다.

'items'이(가) 선언은 되었지만 해당 값이 읽히지는 않았습니다.

선언은 되었으나 해당 파일에서 사용하지 않고 있다는 의미이다.

자바나 안드로이드 같은 경우 노란색으로 밑줄이 가는데, vs code에서는 경고 밑줄이 없어 놓치기 쉽다.

코드가 틀렸거나, 이 변수가 필요없거나 두 개 중 하나이다.

중복된 코드 부분을 복붙하다가 이 변수를 바꿔주는 것을 잊은 헤프닝이다.

쓸일이 없다면 제거해주면 된다.

<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

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

<input>의 경우 input 뒤에 한 칸 띄우고 속성을 작성했다.

하지만, Jade의 경우 

<>를 안쓰기 때문에 속성을 어디에 넣어야하는지 난감했다.

하지만 방법은 있었다.

태그명 뒤에 괄호()를 넣어 그 안에 속성을 넣을 수 있다.

placeholder를 사용하고 싶었기 때문에 다음과 같이 작성했다.

input(placeholder="Search for...").input#inputWord

또한 콤마를 이용하여 여러개의 속성도 역시 사용이 가능하다

input(placeholder="Your name" name="username" value=username)

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함수를 호출하여 처리를 할 수도 있다.