[JS] HTML과 JS 간의 관계, data types, 조건문, 리팩토링, 배열, 반복문

hoje15v·2021년 9월 24일
0

JavaScript

목록 보기
1/71
post-thumbnail

출처 : 생활코딩 JavaScript

Javascript

HTMl 언어 : 프로그래밍 언어 X, 화면에 바로 띄워지기에 시간의 순서가 필요하지 않음.
Javascript 언어 : 프로그래밍 언어임. 시간의 순서에 따라 고안되어야 함. 동적이라는 특징을 갖고 있음.

HTML과 JS의 만남 - script 태그

<script>
document.write(1+1);
</script>

위의 코드 값으로 화면에 2가 입력이 된다. 자동으로 계산이 됌.

HTML과 JS의 만남 - Event(사건)

event(사건) : 웹브라우저 내에서 일어나는 일들 ex) onclick, onchange, onkeydown

ex)여러 이벤트 만들기

<body>
<input type="button" value="hi" onclick="alert('hi')">
<input type="text" onchange="alert('changed')">
<input type="text" onkeydown="alert('key down')">

onclick, onchange, onkeydown : 이 속성들의 속성은 반드시 js가 나와야 한다. onclick이 위치한 태그를 클릭했을 때 js코드를 js문법에 따라 적혀있는데로 웹브라우저가 동작할 것.

key를 눌렀을 때 event를 발생시키고 싶은 경우
-> Javascript key down event attribute 라고 검색 가능

HTML과 JS의 만남 - Console

오른쪽 커서 - 검사 - 콘솔 이용가능

console.length : 문자의 갯수 알려주는 명령어
alert('문자'.length)
라고 콘솔 내에 적으면 자동 계산된다.

Data types - Strings and numbers

콘솔 내에서 숫자는 자동으로 계산이 된다.
산술 연산자 표기 : - + * /

string 문자열 -> javascript string 이라고 검색 가능.
ex)

'hello world'.length
'hello workd'.toUpperCase()

1 : 숫자 "1" : 문자열 임 주의!
1+1=2 "1" + "1" = 11 임.
데이터 타입 정확히 표현할 것!

Variables(변수)와 Assignment Operators(대입연산자)

i=1
i는 변수(상수constant와 반대), =는 대입연산자를 의미한다.

응용

ex) night 버튼과 day버튼 만들기

<body>
<input type="button" value="night" onclick="">

onclick 내에 js코드를 넣어야함. body태그의 스타일 속성으로, 프로그래밍적으로, 상호작용에 의해 넣으려고 함.
js의 문법에 따라서 웹브라우저에게 이 body태그를 선택하도록 해야함.

즉 js에서 "css의 선택자"를 이용하여 tag를 선택하고 싶음.

-> javascript select tag by css selector 검색 가능
-> .querySelector()

style을 통해 배경색변화를 주고 싶을 때

-> javascript element style 검색!
->.style

javascript script background color

->.backgroundColor=""2

<input type="button" value="night" onclick="document.querySelector('body').style.backgroudColor='black'" >

비교연산자(Comparison Operator)와 블리언(Boolean)

<script>
document.write(1===1);
</script>

위의 코드로 "true" 값이 출력 된다. ===는 비교연산자 혹은 2항연산자(좌항, 우항이 결합하여 결과를 만든다) 로 부른다.

Boolean : true 또는 false 로만 이루어진 data type

<h3>1&1t;2</h3>
<script>
document.write(1<2);
</script>

1<2
true
라고 화면상 출력이 된다.

> : > (greater than)

조건문

조건문 : 조건에 따라 다른 순서의 기능들이 실행되도록 하는 것
if(true or false 즉 bulleon data type이 나온다.){a} else {b}
블리언 값에 따라 실행되는 값이 달라진다.

ex) day 버튼을 클릭하면 night 야간모드로 바뀌게 하고 싶을 경우

<input id = "night_day" type="button" value="night" onclick="
if(document.querySelector('#night_day').value==='night'){
document.querySelector('body').style.backgroudColor='black'
document.querySelector('body').style.color='white'
document.querySelector('body').value='day'} else {document.querySelector('body').style.backgroudColor='white'
document.querySelector('body').style.color='black'
document.querySelector('body').value='night'}">

value 값 찾는 법 -> javascript get value element 검색

리팩토링(Refactoring) -중복의 제거

Refactoring : 코딩 자체를 효율적으로 만들어서 그 코드의 가독성을 높이고 유지보수를 하기 편리하게 만들고 중복된 코드를 낮추고 코드를 다시 개선하는 작업
ex) document.querySelector('#night_day').value 를 this로 교체할 수 있음.
또한 변수를 이용하여 더 간편히 줄일 수 있음.
var target = document.querySelector('body')

var target = document.querySelector('body')

<input type="button" value="night" onclick="
if(this.value==='night'){
target.style.backgroudColor='black'
target.style.color='white'
this.value='day'} else {target.style.backgroudColor='white'
target.style.color='black'
this.value='night'}">

배열(array)

배열(array) : 데이터가 많아짐에 따라 많은 데이터를 그냥 둘 수 없기 때문에 그 데이터중에서 서로 연관된 데이터를 잘 정리정돈해서 담아두는 일종의 수납상자

배열의 문법(syntax)

<script>
var coworkers=["egoing", "hydduru"]
</script>

<script>
document.write(coworkers[0]);
document.write(coworkers[1]);
</script>

배열이 몇개인지 알고 싶을 때 -> javascript array count 검색

document.write(coworkers.length);

배열 내 데이터 추가하고 싶을 때 -> javascript array count 검색

coworkers.push("hani")

반복문(loop)

ex) list 1~4중 2,3을 3번 반복 시키고 싶을 때

<script>
document.write('<li>1</li>')

var i = 0 
while (i<3){
document.write('<li>2</li>');
document.<write('<li>3</li>');
i=i+1;}
document.write('<li>4</li>');</script>

배열과 반복문

<script>
var coworkers=['egoing','leezche','duro','taeho'];
</script>

<ul>
  <script>
  var i = 0
  while(i<4){ document.write('<li>'+coworkers[i]+'</li>')}
  i=i+1
  </script>
</ul>

ex) 목록 안에 링크를 추가하고 싶을 때

while(i<4){ document.write('<li><a href = "http://a.com/'
+coworkers[i]+'">+coworkers[i]+'</a></li>')}

write()내에 총 5개의 데이터가 각각 +로 연결되어 있음.
'+coworkers[i]+' -> 문자로 적어주어야 하기 때문에 ''를 붙힘.
자바스크립트에서 string 취급을 위해서는 큰따옴표"" 혹은 작은따옴표'' 쓴다는 것 기억할 것!

배열과 반복문의 활용

ex) 링크들 야간모드일 때 더 밝게 해주기

모든 태그값을 선택하는 문법 찾기 -> javascript get element by css selector multiple

콘솔 내에

var alist = document.querySelectorAll('a');
console.log(alist.length)
cosnsole.log(alist[0])

이라고 적으면 각각 결과가 나온다.

즉 if 문 내에 다음의 코드를 추가한다.

var alist = document.querySelectorAll('a');
i=0
while(i<alist.length){
                      alist[i].style.color='powderblue';
                      i = i+1}

추가로 알아낸 정보
ex) title 제목에 따라 링크 색 변화를 주고 싶을 때 -> 조건이 다양하므로 else if를 사용할 수 있다.

var alist = document.querySelectorAll('a')
if (document.title === "My_Coding_Diary")
{alist[1].style.color = 'black'}
else if (documenet.title === "Programming")
{alist[2].style.color = 'black'}
else if (documenet.title === "Diary")
{alist[2].style.color = 'black'}

-> if 내에 if를 넣을 수 있다!

profile
A front web developer & passionate learner loving learning new things and working together with people🦋

0개의 댓글