whatisthis?

생활코딩 WEB3 - javascript편(2/6) 본문

WEB STUDY/JAVASCRIPT

생활코딩 WEB3 - javascript편(2/6)

thisisyjin 2021. 9. 29. 13:54

> 편의상 강의 번호로 작성함.

 

6. 데이터타입 - 문자열과 숫자

 

JavaScript Data Types

  • Boolean
  • Null
  • Undefined
  • Number
  • String
  • Symbol

 

 

<Number>

 

[F12]-Console에서 1+1을 입력하고 엔터를 치면 아래와 같은 결과가 나온다.

 

1+1과 같이 항 두개를 이용한 연산을 이항연산 이라고 하고,

+와 같은 기호를 '산술 연산자'라고 한다.

 

 

___

 

 

<String>

 

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/String/toUpperCase

 

String.prototype.toUpperCase() - JavaScript | MDN

toUpperCase() 메서드는 문자열을 대문자로 변환해 반환합니다.

developer.mozilla.org

자바스크립트에는 다양한 String 관련 메소드와 프로퍼티(Properties)가 존재한다.

따라서 위 사이트 좌측 메뉴를 통해 다양한 것들을 살펴보자.

 

 

예제

 

그 외에도 공백을 모두 제거해주는 .trim()과 같은 다양한 메소드들이 존재함.

 

 

 

** 주의 

 

문자열과 숫자의 차이

 

 

+) 참고 - string 관련 properties와 methods

  1. Properties
    1. String length
  2. Methods
    1. String.prototype[@@iterator]()
    2. String.prototype.anchor()
    3. String.prototype.at()
    4. String.prototype.big()
    5. String.prototype.blink()
    6. String.prototype.bold()
    7. String.prototype.charAt()
    8. String.prototype.charCodeAt()
    9. String.prototype.codePointAt()
    10. String.prototype.concat()
    11. String.prototype.endsWith()
    12. String.prototype.fixed()
    13. String.prototype.fontcolor()
    14. String.prototype.fontsize()
    15. String.fromCharCode()
    16. String.fromCodePoint()
    17. String.prototype.includes()
    18. String.prototype.indexOf()
    19. String.prototype.italics()
    20. String.prototype.lastIndexOf()
    21. String.prototype.link()
    22. String.prototype.localeCompare()
    23. String.prototype.match()
    24. String.prototype.matchAll()
    25. String.prototype.normalize()
    26. String.prototype.padEnd()
    27. String.prototype.padStart()
    28. String.raw()
    29. String.prototype.repeat()
    30. String.prototype.replace()
    31. String.prototype.replaceAll()
    32. String.prototype.search()
    33. String.prototype.slice()
    34. String.prototype.small()
    35. String.prototype.split()
    36. String.prototype.startsWith()
    37. String.prototype.strike()
    38. String.prototype.sub()
    39. String.prototype.substr()
    40. String.prototype.substring()
    41. String.prototype.sup()
    42. String.prototype.toLocaleLowerCase()
    43. String.prototype.toLocaleUpperCase()
    44. String.prototype.toLowerCase()
    45. String.prototype.toSource()
    46. String.prototype.toString()
    47. String.prototype.toUpperCase()
    48. String.prototype.trim()
    49. String.prototype.trimEnd()
    50. String.prototype.trimStart()
    51. String.prototype.valueOf()

7. 변수와 대입 연산자

* 변수 = 바뀔 수 있는 값.

 

주의 : 자바스크립트에서는 명령문 하나당 세미콜론(;)을 반드시 해줘야함.
(파이썬을 하다 와서 자꾸 까먹게 된다..)

 

x = 1
y = 1

x+y;    // 2

위와 같은 예제에서 x, y는 값이 바뀔 수 있으므로 변수라고 한다.

x와 y에 각각 1이라는 값을 '대입'시킨 것 이므로 ' = ' 기호는 대입연산자 라고 한다.

 

  • 상수 = constant
  • 변수 = variable

 

예> 문자 변수의 활용

 

name = 'thisisyjin';

과 같이 변수를 선언하고 스트링 값을 대입연산자(=)를 통해 입력해줌.

 

alert("저의 이름은"+name+"이라고 합니다.");

와 같이 실행시키면, 다음과 같은 결과가 나옴.

 

name = 'thisisyjin';
alert("저의 이름은"+name+"이라고 합니다.");

 

만약, 여기서 이름이 바뀐다면 ? 변수에 대입하는 값만 변경해주면 된다.

변수가 없었다면 우리는 하나하나의 이름을 전부 변경해줘야하는 번거로움이 있다.

 

 

 

 

** 참고

변수를 사용할때 꼭 변수명 앞에 var 을 붙여주자!

var = Variable (변수)

 

var name = 'thisisyjin';

 

 

 

 

8. 웹브라우저 제어

- 자바스크립트의 중요한 기능 중 하나.

 

 

예제. CSS 이용시

 

  <body style="background-Color:black;color:white;">

다음과 같이 태그 안에 style속성으로 값을 지정해줄 수도 있다.

그러나, 이는 한번 지정하면 계속 이런 값을 가지게 된다.

(html은 정적인 언어이기 때문에)

 

이 때, 자바스크립트를 이용하면 동적으로 작동할 수 있도록 할 수 있다.

예를 들면, 버튼을 클릭하면 배경색이 검정, 글자색이 흰색이 되었다가

다시 되돌아올 수 있도록 할 수 있다.

 

** JavaScript는 동적인 언어이기 때문에, html이 스스로 상태를 바꿀 수 없는 점을 보완해준다.

 

 

  <body>
    <h1><a href="index.html">MY WEB STUDY</a></h1>
    <input type="button" value="night" onclick="
    document.querySelector('body').style.backgroundColor='black';
    document.querySelector('body').style.color='white';
    ">
    <input type="button" value="day" onclick="
    document.querySelector('body').style.backgroundColor='white';
    document.querySelector('body').style.color='black';
    ">

 

<body>태그에 해당 자바스크립트를 적용하는 버튼을 만드는 코드는 위와 같다.

** onclick 등의 속성을 이벤트 속성 (Event Attribute)라고 한다. 지난 포스팅 참조.

 

 

생활코딩 WEB3 - javascript편(1/6)

> 웹이 동적으로 사용자와 상호작용 할 수 있게 하기 위해 js를 이용. JavaScript는 '정보'라는 이미지를 움직이도록 하는 역할. 기능 추가 - 버튼을 통해 야간모드 / 주간모드 설정 웹 브라우저는 한

mywebproject.tistory.com

 

좌) 원래의 기본 상태       /      우) night 버튼 클릭시

 

9. CSS - style 속성

 

onclick 속성 안에 JavaScript가 오는 것 처럼,

style 속성 안에는 CSS가 와야 함.

 

방법1.  적용할 태그 내에 style 속성을 적는다.

 

 

 

<h2 style="background-color:coral;color:powderblue"> WELCOME TO MY PAGE </h2>

 

10. CSS - <style> 태그

 

 

만약, style 속성을 사용한다면 태그가 1억개가 해당된다면 하나하나 입력해줘야하는 불편함이 있다.

이떄, 선택자(Selector)를 지정하여 스타일을 적용할 수 있는 <style>태그를 이용하자.

 

<head>태그 내에 <style>태그로 작성한다.

이는 선택자. { 내용 }과 같은 문법으로 작성해야 한다.

 

 

** 어떤 의미도 없이 디자인만을 위한 태그

<div> 태그 Block Container
블럭 단위. (한 줄을 다 차지함)
<span> 태그 Inline Text Container
문장 단위로 텍스트 영역을 지정

 

예 > 글자를 진하게

 

span{

font-weight:bold;

}

 

<선택자>

태그 : 태그명

클래스 :  .클래스명

아이디 : #아이디명

 

안에 있는 요소는

예> #id div = id라는 아이디를 가진 div요소.

예2> div.a = a라는 클래스의 div요소.

 ex>                # grid   ol

= grid라는 아이디에 속해있는    =<ol>태그

 

 

 

 

11. CSS - 선택자

 

class 와 id의 차이

 

- 문서 안의 '복수'의 요소에 스타일을 적용하는 것인가 아니면 '유일'한 요소에 스타일을 적용하는 것인가의 차이.

 

 

  • id : '유일'한 요소에 스타일을 적용
  • class : '복수'의 요소에 스타일을 적용
id class
요소 1개만 특정.
(예를들면 main이라는 아이디는 특정 div태그
하나만 가질 수 있음)		 여러 요소들을 묶을 수 있음.
(p요소, h2요소, li요소 등)
각 요소는 단 한개의 id만 가질 수 있음. 각 요소는 여러개의 클래스를 가질 수 있음.

** 간단하게 말하면,

id는 식별하는 것 / class는 그루핑(grouping)하는 것.

 

-> 주로 class 로 다같이 스타일을 준 후에, 예외처리를 id로 하는 구조.

 

 

** id의 속성이 class의 속성보다 우선 순위가 높다.

(우선순위 = id > 클래스 > 태그)

 

선택자 서열정리 (누굴 우선으로 적용하는가 / 순서상관X)

태그(div,h1,p등) < class < id

* 만약 같은 것 끼리는 마지막에 나온게 우선으로 적용.

 

 

 

 

 

 

'WEB STUDY > JAVASCRIPT' 카테고리의 다른 글

생활코딩 WEB3 - javascript편(6/6)  (0) 2021.10.02
생활코딩 WEB3 - javascript편(5/6)  (0) 2021.10.01
생활코딩 WEB3 - javascript편(4/6)  (0) 2021.10.01
생활코딩 WEB3 - javascript편(3/6)  (0) 2021.09.30
생활코딩 WEB3 - javascript편(1/6)  (0) 2021.09.24
'WEB STUDY/JAVASCRIPT' Related Articles more