생활코딩WEB2_js 데이터타입, 변수, 대입 연산자

이 글은 https://opentutorials.org/module/3180/18871 생활코딩 이고잉님의 강의를 보고 복습하면서 작성한 글이므로 모든 내용은 아래 opentutorials.org의 내용을 참고하여 작성되었습니다.

변수와 대입 연산자 - WEB2 - JavaScript

 

3. HTML과 JavaScript의 만남 1 (script 태그)

정적인 html과 동적인 javascript의 차이

 

 

4. HTML과 JavaScript의 만남 2 (이벤트)

• onclick 속성은 javascript가 와야한다.
• onclick 속성값은 웹 브라우저가 기억하고 있다가 이 onclick 속성이 위치하고 있는 태그에 사용자가 클릭했을 때 
• 기억하고 있던 javascript 코드를 javascript문법에 따라 해석해서 웹브라우저가 동작한다.

<<정리

이렇게 웹 브라우저 위에서 벌어지는 일들을 '사건', 영어로는 'event'라고 한다.

위의 경우에서는 어떤 event가 일어났을때 어떠한 javascript가 실행되도록 하는 것이 onclick이다.

javascript에 여러 이벤트중 기념할만한(사용자에게 유용할만한) 것들은 정해져있다. 'on'까지 쓰고 추천되는 것들을 참고할 수 있다.

약 10~20개 정도 되는 정의되어있는 event 속성들을 이용해서 사용자와 상호작용하는 웹사이트를 만들 수 있다.

 

<<검색해서 사용하는 방법

구글에서 영어로 검색해서 사용방법 예제를 찾아 입력해보자.

 

 

 

5. HTML과 JavaScript의 만남 3 (콘솔)

개발자도구로 콘솔열어서 javascript 사용할때의 예시는 다음과 같다.

'alert(''.length)'를 사용해서 글으 길이를 측정해보는 예시

 

6. 자바스크립트의 데이터타입 - 문자열과 숫자

google에서 'javascript data type'을 검색해서 그 중에 모질라 재단의 글을 보자.

6개의 데이터 타입이 있고 객체가 있다고 써져있다.

여기에 있는 모든 내용을 알 필요는 없다.

문자열과 숫자열이라는 비교적 익숙한 데이터 타입을 통해서 데이터  타입은 무엇인가를 파악해보고,각 데이터 타입의 성격들을 파악해보자. 

 

-숫자 데이터타입이 어떻게 표현되는가와 숫자와 숫자를 연산해서 결과를 만드는 산술연산자 4개(+,-,*,/)

-문자열 데이터타입에서는 '''.length'라고 표현하면 문자열의 길이를 알려준다.

그 밖에

'Hello World'.indexOf('world')->몇 번째에 ()안의 문자열이 있는지

trim->공백제거

등등의 다양한 기능들을 알아내는 방법을 익히고 익숙해지는 게 중요하다. 

 

7.변수와 대입 연산자

변수를 왜 쓰는가? 여러 이유가 있어 하나만 꼽아 설명하기는 어렵지만 한 개의 예시를 들자면 다음과 같다.

어떤 글을 쓰고 굉장히 긴 글이라고 가정하고 그 안에는 'egoing'이라는 단어가 3개 섞여있다고 극단적으로 생각해보자.

그리고 그 'egoing'이라는 부분이 다 'leezche'라고 바뀌어야 한다고 생각해보자.

그러면 그걸 하나씩 바꾸는 것은 한계가 있다.

실행을 유보하고자 할 경우는 shift + enter를 해준다.

name이라는 변수를 써서 egoing을 넣고

실행을 유보하고자 할 경우는 shift + enter를 해준다. 

위에 글을 복사해서 넣고 바뀔 수 있는 부분을(egoing) "+name+"로 바꿔서 처리해주자.

그리고 name ='egoing'; 을 name ='leezche';이라 바꿔주고 실행하면 모든 이름들이 바뀐 것을 볼 수 있다.

그리고 변수 앞에 var라고 써주자.

var의 장

단점에 대해 잘 알기 전에는 일단 써주기로 하자.

 

대입연산자에 의해서 black이라고 하는 값이 background라고 하는 말하자면 변수의 값이 된 것이란 것을 알아두고 가자.