![생활코딩 9일차 [21.01.22]](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdna%2Fs0EHF%2FbtqUscS5ESK%2FAAAAAAAAAAAAAAAAAAAAANzI0D7A0ooB0SfdX89pYnbTCtbjuk7soZ3zxlrfVidj%2Fimg.png%3Fcredential%3DyqXZFxpELC7KVnFOS48ylbz2pIh7yKj8%26expires%3D1774969199%26allow_ip%3D%26allow_referer%3D%26signature%3D2aQpA1fI%252F84gxlep9c1%252B%252FwUh2do%253D)
<데이터 타입 - 문자열과 숫자 > (*01.21 할당량)
데이터 타입(Data Type)이란?
컴퓨터 프로그래밍을 하는 데에 있어 가장 중요한 것이 데이터를 처리하는 것이다. 그리고 이 데이터 처리를 잘 해내기 위해서 데이터의 종류를 구분해서 정리해왔다. 이것이 데이터 타입이다.
이번 시간에 알아볼 데이터 타입은 Number(숫자)와 String(문자열)이다.
- Number와 String의 차이
String은 큰따옴표(", ") 또는 작은따옴표(', ')로 나타내는 반면, Number는 그냥 숫자를 쓰면 된다. 그리고 number는 javascript의 특성으로 사칙연산이 가능하다.
String에는 다양한 특성들이 있는데, 이를 활용하여 문자열의 성질을 다양하게 파악하고 활용할 수 있다.
" ". length : 문자의 개수를 세어준다. (띄어쓰기 포함)
" ".toUpperCase() : 문자를 대문자로 바꿔준다. (. toUpperCase 쓸 때 대문자 소문자 구분해서 써야 함)
" ".trim() : 글자 밖의 띄어쓰기 제거해준다.
" ".search(" ") : 글자 내에서 어떤 글자들을 찾아서 검색해준다. 답으로 나오는 것은 어떤 순서에 있다는 걸 알려주는 자릿수인데, 0부터 시작해서 카운트한다.
<변수와 대입 연산자>
변수란? variable. 한 마디로 변하는 수 또는 바뀔 수 있는 값을 말하는 건데, 쉽게 생각해서 방정식에서의 x나 y 같은 것들을 얘기한다. 그러니까 우리가 임의로 정하는 값을 얘기하며 이는 우리가 입맛대로 바꿀 수 있다.
대입 연산자란? 한 마디로 얘기해서 '=' (등호)를 얘기한다. 우리가 변수를 대입 연산자를 통해서 임의로 값을 정하고 이를 활용할 수 있다.
그렇다면 왜 우리는 변수를 배우는가? 당연히 써먹을 곳이 있기 때문에 배우는데 어디에다가 써먹나?
예시를 들어보자. 밑의 글을 엄청나게 긴 글이라고 가정하자.
Bob Dylan (born Robert Allen Zimmerman, May 24, 1941) is an American singer-songwriter, author and visual artist. Widely regarded as one of the greatest songwriters of all time, Dylan has been a major figure in popular culture for more than 50 years. Much of his most celebrated work dates from the 1960s, when songs such as Blowin' in the Wind (1963) and The Times They Are a-Changin (1964) became anthems for the civil rights and anti-war movements. dylan His lyrics during this period incorporated a range of political, social, philosophical, and literary influences, defied pop music conventions and appealed to the burgeoning counterculture. Following his self-titled debut album in 1962, which mainly comprised traditional folk songs, Dylan made his breakthrough as a songwriter with the release of The Freewheelin Bob Dylan the following year. dylan The album features Blowin' in the Wind and the thematically complex A Hard Rain's a-Gonna Fall. For many of these songs, he adapted the tunes and phraseology of older folk songs. He went on to release the politically charged The Times They Are a-Changin' and the more lyrically abstract and introspective Another Side of Bob Dylan in 1964. In 1965 and 1966, Dylan drew controversy when he adopted electrically amplified rock instrumentation, and in the space of 15 months recorded three of the most important and influential rock albums of the 1960s: Bringing It All Back Home (1965), Highway 61 Revisited (1965) and Blonde on Blonde (1966). Commenting on the six-minute single dylan Like a Rolling Stone (1965), Rolling Stone wrote: No other pop song has so thoroughly challenged and transformed the commercial laws and artistic conventions of its time, for all time.
중간에 있는 dylan 이라는 단어가 1억 개가 있다고 가정해보자. 이 단어를 수정하려면 1억 개의 단어들을 일일이 수정해야 하는가? 만에 하나 그렇게 했다고 치자. 우리는 인간인데 1억 개의 작업을 하는 동안 오타 같은 실수를 하지 않겠는가?
이를 방지하기 위해 변수와 대입 연산자를 이용한다.
var name='dylan';
그리고 중간의 dylan 대신 name을 넣는다. 그리고 dylan이라는 단어를 수정할 때마다 변수와 대입 연산자 하나만 수정해주면 1억 개의 단어가 한 번에 바뀌는 것이다.
글자 속의 dylan을 변수와 대입 연산자를 통해 name으로 지정하고 중간에 변수를 넣어준다. 그래도 결과는 똑같다.
그리고 'dylan'대신 '손흥민짱'으로 변경하고 싶다면 위의 변수와 대입 연산자 하나만 바꾸어주면 된다.
그리고 이는 변수의 수많은 효용 중 한 가지에 불과하다.
<웹브라우저 제어> (*01.22 할당량)
자, 우리가 만들던 웹 페이지로 돌아오자. 여기서 night, day 버튼을 만들어 색깔을 바꾸어보려고 한다.
디자인을 수정하는 것이니 CSS를 사용해야 하고, 사용자의 반응에 따라 바뀌는 것이니 JavaScript 또한 사용해야 한다.
이 둘을 어떻게 HTML 위에 사용할까?
<CSS 기초>
아래 질문에 대답할 수 있다면 이 수업은 듣지 말고 다음 수업인 '제어할 태그 선택하기'로 바로 넘어가셔요.
- CSS는 어떤 목적의 언어인가요? 웹 페이지를 디자인하기 위한 목적의 언어
- CSS를 웹페이지에 삽입하는 방법은 무엇인가요? 선택자를 이용하여 <head> 문에 작성할 수도, 태그 바로 옆에 사용할 수도 있다.
- style 속성은 무엇인가요? 선택자 안의 바꾸고 싶은 특성들을 얘기하는 것 같다.
- 선택자가 무엇인가요? 바꾸고자 하는 태그를 지정하는 것이다.
'Web > java script' 카테고리의 다른 글
| 생활코딩 13일차 [21.01.28] (0) | 2021.01.28 |
|---|---|
| 생활코딩 12일차 [21.01.27] (0) | 2021.01.27 |
| 생활코딩 11일차 [21.01.26] (0) | 2021.01.26 |
| 생활코딩 10일차 [21.01.25] (0) | 2021.01.25 |
| 생활코딩 8일차 [21.01.19] - JavaScript 시작 (0) | 2021.01.19 |