200221~200225 javascript 생활코딩

200221~200225 javascript 생활코딩

2020. 2. 21. 17:09ㆍ카테고리 없음

분명 수업 때 다 배웠는데 너무 빠르게 지나가서 기억이 전혀 나지 않는다.

프로젝트를 하기 위해 자바스크립트가 필수이기에 생활코딩으로 수업을 듣고 나서 코딩하기로 했다.

생활코딩 web2 - javascript로 시작한다.

https://opentutorials.org/course/3085

[수업 들으며 필기하기]

3. HTML과 JS의 만남: script 태그

html은 정적이다. (1+1은 영원히 1+1)

javascript는 동적이다. (1+1은 2) html을 제어한다.

4. HTML과 JS의 만남: 이벤트

이벤트는 웹브라우저에서 일어나는 일 즉, 사건(event)이다.

이벤트이름="myfunction()" <= 발생시킬 함수가 들어간다.

onclick: 클릭 시 발생하는 이벤트

onchange: 무언가 바뀔 때 발생하는 이벤트

onkeydown: 키보드로 하나 누를 때마다 발생하는 이벤트

5. HTML과 JS의 만남: 콘솔

자바스크립트를 실행할 때 파일을 만들어서 실행하기 귀찮거나 여건이 안 될 때, 또는 이미 있는 웹페이지의 content를 활용하고 싶을 때, F12 콘솔을 이용할 수 있다.

콘솔에 자바스크립트 코드를 써서 해당 html 페이지에 적용시킬 수 있다.

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

자바와 비슷하다. 그러나 문자는 "" 또는 ''로 감쌀 수 있고, 문자열과 문자가 나뉘는 게 아니라 String 하나만 존재한다.

7. 변수와 대입 연산자

대입 연산자를 통해 변수에 값을 대입하고, 변수의 연산을 할 수 있다.

- constant(상수): 숫자는 값이 변하지 않는 말 그대로의 상수이기에 literal이라고 한다.

- 변수의 효용: 바뀔 여지가 있는 문자열의 일부는 변수로 처리한다.

- var variablename; // 변수 선언

<mytag style="스타일 property(속성)1 = 값; 스타일 property(속성)2 = 값"></mytag>  // inline style

8. 웹브라우저 제어

9. css 기초: syle 속성

css도 자바스크립트처럼 언어이다. style에는 css로만 써야하는 것이 규칙!

css style 적용을 위한 다른 기능이 없는 무색무취의 태그 2가지!

- <div> : 줄바꿈 함

- <span> : 줄바꿈 하지 않음

10. css 기초: (style 태그)

구분자로 css style을 한 번에 적용할 수 있다.

11. css 기초: 선택자

# id

. class

class는 grouping을 위한 속성이기에 더 포괄적이다. id는 한 페이지에 같은 값이 하나만 있어야 하는 것이 원칙이다. targeting이 목적이기 때문이다.

12. 제어할 태그 선택하기 ★★★★("굉장히 중요한 주제에요")

document.querySelector('myclass') => 태그 선택하기!

document.querySelector('myclass').style.cssProperty ='value'; => 선택한 태그에 style 추가하기!

cf) NDN: 파이어폭스에서 만든 doc페이지

13. 프로그램, 프로그래밍, 프로그래머

progress(진전, 진행)에서 느끼듯이 program은 음악회에서 시간이 지남에 따른 연주곡 순서를 일컫는다.

소프트웨어에서 차용한 program의 의미는 시간 순서에 따른 소프트웨어의 실행을 컴퓨터가 할 수 있도록 글로 적어두는 방식을 일컫는 것일 테다.

14. 조건문 예고

한 가지의 버튼으로 두 가지 기능을 껐다 켰다 할 수 있도록 하는 것을 toggle이라 한다. 스위치 같은 개념으로 생각할 수 있다.

(예: He toggled between the two windows.)

15. 비교 연산자와 블리언 (comparison operator & boolean)

비교연산자: ===

- 좌항과 우항의 값을 비교하여, 같으면 true 다르면 false 값(boolean 값)을 리턴하는 연산자

비교연산자: <, >

- 좌항과 우항의 값을 비교하여, 그 결과에 따라 true 혹은 false를 리턴하는 연산자

cf) html에서 2<1 이라고 쓰면 Less Than의 축약어로, '<'를 대신한다. '<'가 html에서 태그를 구분하는데에 쓰는 mark이기 때문에 바꾸어 쓰는 것.

16. 조건문

java와 같이

if(booleanValue) { /*로직 입력*/ } else { /*로직 입력*/ }

조건문을 사용할 수 있다.

17. 조건문의 활용

id가 'sth' 인 태그의 value를 구하려면, document.queryselector('#sth').value 사용

이를 활용하여

if (document.queryselector('#sth').value === 'myvalue') {} else {}

와 같이 조건문을 작성할 수 있다.

해당 value 가 myvalue라면 {} 이 실행되고, 아니라면 else의 {}가 실행된다.

18. 리팩토링 중복의 제거 ★★★

리팩토링: 코딩 후에 비효율적인 코드를 수정하여 유지보수가 수월하도록 만드는 것. 틈틈히 리팩토링을 하여 소프트웨어 거대화에 따른 중복된 코드 등을 제거해주어야 한다.

* 코딩 잘하는 법: 중복은 끝까지 쫒아가서 제거해주자!

① 리팩토링 대상이 되는 코드

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

② 선택자 제거: this 사용

하나의 태그 내부에서 onclick = "" 등에서 ""에 로직을 부여할 때, 해당 태그는 this로 칭할 수 있다!

(선택자 없애버리고 this만 써주면 된다~~)

<input type="button" value="night" onclick="
	if (this.value === 'night') {
		document.querySelector('body').style.backgroundColor = 'black';
		document.querySelector('body').style.color = 'white';
		this.value = 'day';
	} else {
		document.querySelector('body').style.backgroundColor = 'white';
		document.querySelector('body').style.color = 'black';
		this.value = 'night';
	}
">

③ 중복 제거: 중복되는 코드는 변수를 만들어 중복 값을 할당하여 처리.

<input type="button" value="night" onclick="
	var target = document.querySelector('body');
	if (this.value === 'night') {
		target.style.backgroundColor = 'black';
		target.style.color = 'white';
		this.value = 'day';
	} else {
		target.style.backgroundColor = 'white';
		target.style.color = 'black';
		this.value = 'night';
	}
">

19. 반복문 예고 / 20. 배열

java를 통해 이미 알고 있어서 건너뛰기

21. 반복문(loop)

* 처음으로 <script>태그를 통해 javascript 작성

/* 무한히 반복되는 무한루프 */
<ul>
<script>
	while(true) {
		document.write('<li>1</li>');
	}
</script>
</ul>

/* 조건을 유의미하게 부여한 반복문 */
<ul>
<script>
	var i = 0;
	while(i < 3) {
		document.write('<li>'+ i +'</li>');
		i++;
	}
</script>
</ul>

22. 배열과 반복문

반복문과 배열을 같이 쓸 때 효용 발생

- 리스트의 항목에 링크 달기

<script>
var coworkers = ['1', '2', '3', '4'];
</script>

<ul>
<script>
var i = 0;
while(i < coworkers.length) {
document.write(
'<li><a href="http://a.com/'+coworkers[i]+'">'+coworkers[i]+'</a></li>');
  i++;
}
</script>
</ul>

* 자바와 같이 문자열을 끊고, 변수를 집어 넣어 문자열로 만들 수 있는데, 특이점은 ""와 ''를 혼용하여 문자열 안에 다시 문자열을 넣을 수 있다는 것이다.

23. 배열과 반복문의 활용

document.querySelectorAll() 로 속성을 찾아내서 배열 변수에 대입한 후 한번에 처리한다.

/* 위에서 사용했던 코드 */
<script>
var coworkers = ['1', '2', '3', '4'];
</script>

<ul>
<script>
var i = 0;
while(i < coworkers.length) {
document.write(
'<li><a href="http://a.com/'+coworkers[i]+'">'+coworkers[i]+'</a></li>');
i++;
}
</script>
</ul>

/* 반복문과 배열을 이용하여 한번에 스타일 적용하기 */
<script>
var alist = document.querySelectorAll('a');
var i = 0;
while(i < alist.length) {
alist[i].style.color = 'powderblue';
i++;
}
</script>

26. 함수: 매개변수와 인자

공통적인 부분들을 담아 뽑아내는 것이 함수이다.

함수는 입력과 출력으로 이루어져 있다.

- 입력: 인자(argument)/ 매개변수(parameter)

* 매개변수는 함수에 들어가는 변수이고, 인자는 매개변수에 대입하는 값이다.

- 출력: return

function sum(left, right) {
document.write(left+right+'<br>');
}
// left, right는 매개변수

sum(2, 3);  
// 2, 3은 인자

27. 함수 (리턴)

return: 위의 sum(left, right)에서 쓰는 기능(write())을 따로 빼주고, return left+right; 하게 만들 수 있다.

* 표현식(expression):

예1) 1+1은 2에 대한 표현식이다.

예2) 1===1은 true에 대한 표현식이다.

* Expressions

An expression is any valid unit of code that resolves to a value.

Every syntactically valid expression resolves to some value but conceptually, there are two types of expressions: with side effects (for example: those that assign value to a variable) and those that in some sense evaluate and therefore resolve to a value.

표현식은 하나의 값으로 귀결되는 유효한 코드 단위이다.

문법적으로 유효한 모든 표현식은 값이 있지만, 개념적으로 표현식에는 두 가지 유형이 있다: 부작용이 있는 것(예를 들어: 변수에 값을 할당하는 것)과 풀어서 답이 나오는 것. (in some sense: 어떤 의미로는; 여기서는 evaluate과 resolve의 비슷한 의미 때문에 다른 방식이라는 것을 덧붙여 서술하기 위한 것으로 보인다.)

- 첫번째 예) x = 7; 변수에 값을 할당하여, 그 자신을 7로 평가.

- 두번째 예) 3 + 4; 할당(대입) 없이 7이란 값을 +연산자로 표현.

* JavaScript has the following expression categories:

- Arithmetic: evaluates to a number, for example 3.14159. (Generally uses arithmetic operators.)

- String: evaluates to a character string, for example, "Fred" or "234". (Generally uses string operators.)

- Logical: evaluates to true or false. (Often involves logical operators.)

- Primary expressions: Basic keywords and general expressions in JavaScript. (this, Grouping operator ( ))

- Left-hand-side expressions: Left values are the destination of an assignment. (new, super, Spread operator)

(영문 출처: MDN web docs: javascript

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Expressions_and_Operators#Expressions)

28. 함수의 활용

* 독립된 함수를 만들면 그 함수 내의 this는 전역 객체를 가리키게 된다.

웹브라우저에서는 window (windows 아니고 창..)이다.

29. 객체 예고

함수 기반 위에 객체가 있다...

함수만으로 정리정돈이 어려울 때, 객체를 쓴다고 일단 알아두자~

* 함수를 만들 때 같은 이름으로 두 개를 만들면 밑에서 생성된 함수에 의해 덮어쓰기가 된다.

자바는 컴파일이 안되는데, 자바스크립트는 그냥 덮어씌워 버린다.

** 객체.함수()로 쓸 수 있는데, 이 때, 객체에 속한 함수는 메서드라고 부른다!

그렇다면 이제 document.write()의 document도 객체이고, write()도 메서드임을 알 수 있다!!

30. 객체 쓰기와 읽기

지금까지는 정보가 많아지면 배열을 생성해서 썼다. 이제부터는 객체를 써보자~

배열은 순서를 정해 정리정돈을 하는데, 객체는 순서없이 정보를 저장할 수 있다.

(수학으로 생각하자면, 배열은 순열이고 객체는 조합이다.)

그러나 아무렇게나 집어넣는 것이 아니고, 내용물에 이름을 붙여서 나중에 꺼낼 수 있도록 한다. 꺼낼 때를 생각하지 않고 내용물을 마구잡이로 넣는 건 쓰레기통이니까....(쓰레기통 섭섭..)

- 객체이름. 으로 객체의 속성을 가져올 수 있다.

java에서는 객체 내부의 친구들을 멤버라고 하지만, javascript에서는 property(속성)이라고 한다.

property 중 함수는 특별히 method라고 한다.

<script> 
  var coworkers = {
    "programmer":"egoing", 
    "designer":"leezche"
  };
  document.write("programmer : "+coworkers.programmer+"<br>"); // 객체.변수이름으로 변수 호출
  document.write("designer : "+coworkers.designer+"<br>"); 
  coworkers.bookkeeper = "duru"; // 객체에 변수 생성 및 초기화
  document.write("bookkeeper : "+coworkers.bookkeeper+"<br>"); 
  coworkers["data scientist"] = "taeho"; // 객체에 변수 생성하는데, 변수이름에 공백문자를 넣고 싶을 때!
  document.write("data scientist : "+coworkers["data scientist"]+"<br>"); 
</script>

31. 객체와 반복문

객체의 모든 데이터를 가져오고 싶을 때, 반복문(for (var 'key' in 'objectName'))을 사용한다.

for(var key in coworkers) {
  document.write(key+' : ' + coworkers[key]+'<br>');
}

32. 객체프로퍼티와 메소드

coworkers의 메소드인 showAll()을 31.의 로직으로 정의해보자.

coworkers.showAll = function() { 
  for(var key in this) {
    document.write(key+' : '+this[key]+'<br>');
  }
}
coworkers.showAll();

함수 내에서 함수 자기 자신을 지칭하는 this를 사용하여, 코드 리팩토링을 할 수 있다.

33. 객체의 활용

객체의 속성과 속성 사이는 배열처럼 ,로 구분해준다. property로 함수가 오든 배열이 오든 마찬가지이다.

반복되는 로직을 정리하는 친구가 함수이고, 함수들을 정리하는 친구가 객체라면, 객체들을 정리하는 친구는 누구일까?

34. 파일로 쪼개서 정리 정돈하기

가장 큰 정리정돈의 수단은 파일이다. 연관된 코드들을 파일로 분리하는 것이다.

html에 링크 태그*를 넣어서 해당 페이지에 적용하고자 하는 javascript 파일을 불러올 수 있다.

<script src="myPath/fileName.js"></script>

유지보수 측면에서도 좋지만, 사용자 입장에서도 파일 분리는 훨씬 좋은 방법이다!

웹브라우저는 캐시로 .js파일을 저장하여 매번 로딩하지 않고 빠르게 페이지를 표시할 수 있다.

35. 라이브러리와 프레임워크

- 생산자와 소비자: 소프트웨어를 만들 때, 여럿이서 만드는 것이 훨씬 낫다.

타인이 생산한 소프트웨어를 소비하여 나의 소프트웨어를 생산하면, 소비자이자 동시에 생산자가 된다.

- library VS framework

library: 잘 조직되어 있는 부품. 이를 가져와서 내 소프트웨어에 이용한다.

framework: 큰 틀, 반제품. 프레임워크를 바탕으로 내부 로직을 수정하여 원하는 바를 만들 수 있다.

* javascript library의 대표자? jQuery

jQuery는 어떻게 사용할까? 2가지 방법이 있다. 다운로드해서 나의 프로젝트 폴더에 넣거나, CDN (Content Delivery Network: 서버를 분산하여 효율적으로 컨텐츠를 받아올 수 있도록 하는 방식) 주소를 가져다 쓸 수 있는데, 보통 후자를 많이 쓴다.

<!-- uncompressed: 개발용 풀버전 -->
<script
  src="https://code.jquery.com/jquery-3.4.1.js"
  integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU="
  crossorigin="anonymous">
</script>

<!-- minified: 사용자용 압축버전 -->
<script
  src="https://code.jquery.com/jquery-3.4.1.min.js"
  integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
  crossorigin="anonymous">
</script>

<!-- 버전 숫자를 바꾸면 해당 버전이 적용된다.
     버전 숫자 대신 latest를 쓰면 가장 최신 버전이 적용된다. -->

* jQuery는 한 개의 스크립트로 이루어져 있음과 동시에 한 개의 함수로 구성되어 있습니다.

함수명은 jQuery이고 jQuery() 함수 한 개만 사용함으로써 jQuery의 모든 기능을 활용할 수 있습니다.

jQuery() 함수는 HTML의 DOM 객체를 선택하는 함수이고 반환되는 오브젝트는 선택된 객체의 핸들러입니다. 그리고 jQuery는 $ 식별자를 사용합니다. jQuery라는 함수명을 계속 사용하는 것은 번거롭기 때문에 이 함수명을 대체할 수 있는 식별자($)를 사용하는 것입니다.

(출처: 블로그 Walter's Library

http://www.walterz.net/2017/11/08/cdn-%ED%99%9C%EC%9A%A9-jquery-%EC%82%AC%EC%9A%A9-%EB%B0%A9%EB%B2%95/ )

36. UI vs API

- User Interface: 사용자 측에서 사용하는 것

- Application programming Interface: 개발자 측에서 이용하는 것

37. 수업을 마치며: 어떤 api를 찾아야 하는지 알려줌!!

* 공부 방법

무작정 책만 깊이 파지 말자!

최소한의 도구만을 가지고 문제를 해결하려고 하기! => 순서에 따라 실행된다는 것만 알자

해결할 수 없는 때가 오면? 그 때 다시 공부하자 => 나에게 필수....

38. long take: 코딩만 길게 연결해서 롱테이크로 찍은 것 => 복습용

코즐

코즐

태그

최근글

댓글

공지사항

아카이브

티스토리툴바