들어가기 전
_____________________________________________________________________
안녕하세요 :) 오늘은 알아볼 것은!!
1. 변수와 대입연산자
2. 웹 브라우저 제어
=> 이 두가지의 수업을 듣고 난 후의 정리 및 알아보도록 하겠습니다 :)
이번 수업을 통해 알아가야할 목표는 다음과 같습니다!
1. 변수와 대입연산자 : 변수와 대입 연산자란 무엇인지 정의하고, 변수의 필요성에 대해 이해할 수 있다.
2. 웹 브라우저 제어 : javascript에서 웹브라우저 제어가 가능하다는 것을 알고, 간단하게 이해하는 것
그렇다면 변수와 대입 연산자 부분부터 알아보도록 하겠습니다
변수와 대입연산자
_____________________________________________________________________
해당 단원에서의 핵심 단어는 다음과 같습니다.
변수란 어떤 것일까요!?
변수란 바뀔 수 있는 값을 이야기합니다.
예시를 통해 좀 더 간단히 설명을 해볼까요!?
x = 1 , y = 1을 넣었다는 가정하에
x + y를 하게 되면 값은 어떻게 될까요??
당연히 2가 나오게 됩니다. 왜냐하면 x , y 값에 각각 1이라는 숫자가 들어있기 때문입니다.
이렇듯 넣는 수에 따라 값이 바뀌는 수를 변수로 이야기할 수 있습니다.
이때! 저 예시에 대입 연산자가 있다는 사실을 눈치채셨나요!?
x , y에 각각 1을 넣어줄 때 사용되었던 '='를 대입 연산자라고 합니다.
즉 왼쪽에 있던 변수 x, y에 오른쪽에 있는 1을 넣는다는 이야기를 하는 것이죠!
대입 연산자의 경우에는 '='를 제외한 다양한 연산자들이 존재하며 그 종류의 경우 아래 링크 첨부하겠습니다!
[Java, C, C++ 강좌] 연산자란? 연산자 종류 - 단항 연산자, 이항연산자, 삼항연산자
[C, C++, 프로그래밍 기초 완전 정복 목차] [ 연산자 Operator ] 안녕하세요~!! 오늘은 연산자에 대해서 배워볼까 합니당 ㅎㅎ 서론.. 들어가기 전 컴퓨터는 원래 계산기였어요 ㅎㅎ 지금이야 뭐 워낙
jhnyang.tistory.com
그렇다면 상수는 어떤 것을 의미할까요!? 예시를 통해 살펴보겠습니다!
만약, 1 = 2를 정의했을 경우 결과 값이 어떻게 나올까요!?
당연히 오류가 날수 밖에 없습니다.
왜냐하면 각각의 숫자가 확실한 바뀔 수 없는 내용을 가지고 있기 때문입니다.
즉, 이렇게 바뀌지 않는 수를 상수라고 하는 것입니다.
그렇다면 변수는 왜 필요할까요!?
정답은, 사람도 실수할 수 있기 때문입니다.
코딩을 하다보면 간단하게가 아닌 복잡하게 엄청나게 많은 줄의 코딩을 접할때가 있습니다.
하지만 그 코딩을하다 실수를 하거나 반복되는 내용을 계속하여 적을 경우 메모리 손실이 엄청나게 되는데
이를 조금 더 편리하게 이용하고 간편하게 관리할 수 있게 변수를 사용합니다!
한번 예시를 통해 알아볼까요!?
이렇게 aaa라는 변수를 설정 후 문자열들 사이에 이렇게 변수를 넣어놓게 되면
이렇게 문자열들 사이에 변수에 저장해두었던 정보가 삽입된다는 점!
또한 내용을 바꿔야 할 경우에도 각각 문자열을 보면서 찾는 것이 아닌 변수의 내용만 바꿔준다면
내용 또한 바뀌기 때문에 간편하게 사용할 수 있습니다.
+ 변수를 사용할 때 앞에 var을 사용하는 것이 좋은 습관이니 쓰는 게 좋습니다
+ var 이란 varable을 의미합니다!
웹 브라우저 제어
_____________________________________________________________________
지금까지 자바 스크립트의 문법에 대해 살펴봤다면 이제는 웹브라우저를 제어하는 방법에 대해서 간단히 알아보도록 하겠습니다!
해당 단원의 핵심 단어의 경우는 다음과 같습니다.
해당 강의의 경우에는 살짝 맛보기(?)로 살펴보는 느낌이었습니다.
해당 내용은 다음과 같습니다!
먼저, style이라는 속성은 해당 웹 페이지의 형태를 꾸며주는 역할을 하는데 코드를 통해 설명하자면
다음과 같이 body 태그 안에 사용되며 해당 style 속성에 사용될 수 있는 속성 값은 CSS입니다.
또한 이때 background-color이 의미하는 건 배경색 , color은 글자 색을 의미하며
해당 코드를 해석하면 해당 웹 페이지의 배경색을 검정으로, 글자색은 하얀색으로 해라라는 의미가 됩니다.
해당 내용을 통해 웹페이지를 새 로고 침해 살펴본다면
이러한 식으로 결과가 나오는 것을 확인할 수 있습니다!
이를 통해 알 수 있는 것은 다음과 같습니다.
1. 웹사이트의 색깔이 바뀌기 위해서는 <body> 태그의 속성이 바뀌어야 한다.
2. style 속성에는 CSS라는 디자인을 위한 언어가 들어간다.
하지만!
html의 경우 한번 화면에 표시되면 자신을 다시 바꿀 수 없는 정적인 언어인데
우리가 현재 배우는 언어는 Javascript입니다. 즉 동적으로 변경이 가능한 언어!
따라서 우리가 앞으로 알아야 할 것은 2가지라 설명하셨습니다!
1. CSS에 대해 자세하게는 아니더라도 알 필요가 있다.
2. 속성을 주고자 하는 태그가 무슨 태그인가를 웹브라우저에게 알려주는 방법을
자바 스크립트로 어떻게 하는지를 알고 있어야 한다.
따라서 앞으로 배울 것은 다음과 같습니다!
1. CSS의 가장 본질적이고 주요한 문법들
2. 자바스크립트를 이용해 제어하고자 하는 태그를 선택하는 방법에 대해 살펴보는 것
생각해보기
_____________________________________________________________________
해당 파트 같은 부분도 크게 어려운 부분이 없어 이해하는 것은 문제없었습니다 :)
여러분들은 어떠셨나요!?
그렇다면 각 강의들의 생각해보기를 살펴보겠습니다!
변수가 사용할 때 좋은 점....
그리고 밑 배경색 파란색과 글자색 회색이라...
강의를 들었었던 저는 크게 어려운 거 같지 않았습니다 :)
다음과 같이 작성해보았습니다.
어떠신가요!? 여러분도 똑같이 작성하셨나요!? :)
두 번째 생각해보기의 경우 답은 똑같을 거라 생각하고 있습니다
마치며
_____________________________________________________________________
지금까지 정말 제대로 들어가기 전 몸풀기?라는 느낌을 많이 받았습니다.
그래서 그런지 뭔가... 준비운동 정도 한 거 같은 느낌이 들었었습니다(뭔 소리야 -_-)
제가 작성하는 모든 내용은 부스트 코스의 자바스크립트 시작에서 배운 내용을 바탕으로 작성됩니다!
아래 링크드릴게요!
자바스크립트의 시작
부스트코스 무료 강의
www.boostcourse.org
다음 업로드는 CSS기초들에 대해 살펴보도록 하겠습니다!
'네이버 부스트코스 서포터즈 3기' 카테고리의 다른 글
| [부스트코스 서포터즈3기]웹과 자바스크립트 - CSS기초(style 태그) (0) | 2021.01.19 |
|---|---|
| [부스트코스 서포터즈3기]웹과 자바스크립트 - CSS기초(style 속성) (0) | 2021.01.15 |
| [부스트코스 서포터즈3기]웹과 Java script - 콘솔 (0) | 2021.01.11 |
| [부스트코스 서포터즈 3기]웹과 Java script - 이벤트 (0) | 2021.01.10 |
| [부스트코스 서포터즈 3기] 웹과 Java script -script 태그 (0) | 2021.01.08 |