JavaScript/생활코딩
-
[WEB2 JavaScript] 33. 객체의 활용 | 초코더JavaScript/생활코딩 2019. 11. 19. 13:29
오늘은 객체를 활용해서 공부하는 시간을 가져볼게요. 우선 아래의 코드는 함수를 이용하여 night모드와 day모드를 만들어주었습니다. function LinksSetColor(color){ var alist = document.querySelectorAll('a'); var i = 0; while(i < alist.length){ alist[i].style.color = color ; i = i + 1; } } function BodySetColor(color){ document.querySelector('body').style.color = color ; } function BodySetBackgroundColor(color){ document.querySelector('body').style.back..
-
[WEB2 JavaScript] 31. 객체와 반복문, 32. 객체프로퍼티와 메소드 | 초코더JavaScript/생활코딩 2019. 11. 18. 16:58
이번시간은 객체에 있는 정보들을 모두 빼내오기 위한 반복문에 대해 공부해보겠습니다. 우선 반복문의 형태부터 살펴보겠습니다. 배열에서는 보통 인덱스를 사용하여 정보를 빼왔다면 객체에서는 key를 사용합니다. 반복문은 coworkers에 들어있는 key의 갯수만큼 실행 되고, key는 1씩 증가합니다. for(var key in coworkers){ document.write(key+ ' : ' +coworkers[key]+' ');//key, key값(value) 출력 } 여기서 key는 programmer, designer, bookkeeper, data scientist와 같은 특성을 나타내는 것이고, key값(value)은 egoing, leezche, duru, taeho와 같은 데이터들 입니다. ..
-
[WEB2 JavaScript ] 30.객체 쓰기와 읽기 | 초코더JavaScript/생활코딩 2019. 11. 18. 16:14
이번 시간은 객체에 대해 알아볼게요. 우선 객체의 기본 사용법에 대해 공부해보겠습니다. 객체를 정의하는 법은 아래의 코드와 같습니다. var coworkers = { "programmer" : "egoing", "designer" : "leezche" }; document.write("programmer : "+coworkers.programmer+" "); document.write("designer : "+coworkers.designer+" "); coworkers라는 객체에 programmer라는 특성을 가진 egoing과 designer라는 특성을 가진 leezche가 선언되었고 출력하였습니다. 그럼 coworkers의 객체에 또 다른 정보를 추가하는 법을 알아볼게요. coworkers.book..
-
[WEB2 JavaScript] 28.함수의 활용 | 초코더JavaScript/생활코딩 2019. 11. 15. 18:28
오늘은 함수를 활용하여 예전에 짰던 코드를 리팩토링 해보는 시간을 가져볼게요. 우선 아래의 코드가 원본 코드입니다. WEB HTML CSS JavaScript JavaScript JavaScript (/ˈdʒɑːvəˌskrɪpt/[6]), often abbreviated as JS, is a high-level, dynamic, weakly typed, prototype-based, multi-paradigm, and interpreted programming language. Alongside HTML and CSS, JavaScript is one of the three core technologies of World Wide Web content production. It is used to mak..
-
[WEB2 JavaScript] 25.함수, 26. 함수 : 매개변수와 인자, 27. 리턴 | 초코더JavaScript/생활코딩 2019. 11. 15. 17:43
이번시간에는 함수와 매개변수, 인자, 리턴에 대해 공부해볼게요. 우선 함수를 정의하고 쓰는 법부터 알아볼게요. 함수는 아래의 코드와 같이 써줍니다. 저번 게시글에서 말씀드린 것처럼 왜 저렇게 쓰는지 이해도 중요하지만 우선 쓰는방법에 익숙해 지도록 연습해보는게 매우 중요한 것 같아요. function two(){ document.write(1+1); } - 함수의 형태 function(함수를 쓸것이다~정의) two(함수의 이름) ( )(매개변수가 들어갈 곳){ document.write(1+1);(함수의 내용) } 그럼 매개변수와 인자가 무엇인지 알아볼게요. 아래와 같이 코드를 작성하면 2가 나오는 sum함수입니다. function sum(){ document.write(1+1); } 그런데 1과 1만 더..
-
[WEB2 JavaScript] 23.배열과 반복문의 활용 | 초코더JavaScript/생활코딩 2019. 11. 14. 21:18
지난 시간에 이어 배열과 반복문을 활용한 a태그의 색을 변경해보겠습니다. 우선 1억개의 a태그가 있다고 치면 이 많은 a태그들의 색은 배열과 반복문을 통해 나타낼 수 있습니다. 먼저 여러개의 a태그들을 한 배열에 담는 코드를 아래에 작성해볼게요. qeurySelector는 하나의 선택자를 선택하는 것이였다면 querySelectorAll은 괄호안에 있는 모든태그를 선택해줍니다. var alist = document.querySelectorAll('a'); 그럼 이제 반복문을 이용해서 alist안에 있는 모든 태그들의 style을 변경해보겠습니다. 아래와 같이 반복문을 이용해 alist의 모든 원소들의 color 값을 변경해주었습니다. var alist = document.querySelectorAll('..
-
[WEB2 JavaScript] 22. 배열과 반복문 | 초코더JavaScript/생활코딩 2019. 11. 14. 19:14
오늘은 자바스크립트의 배열에 대해 알아볼게요~! 우선 배열이 필요한 이유에 대해 알아봅시다. 아래에는 과일을 html코드로 각각 직접 써주었습니다. Loop & Array fruits apple banana orange grape 자바스크립트의 배열을 쓰면 좀 더 편리하게 작성할 수 있습니다. 우선 각각의 과일들을 fruits배열에 담아두었습니다. 그리고 document.write를 이용해서 각각 list태그를 써주고 그안에 작성해 줄겁니다. 이때는 반복문이 필요합니다. Loop & Array fruits 4번을 반복해서 list태그를 작성해주는 코드를 짜보겠습니다. count변수는 몇번 반복을 해줄 것인지 세는 변수입니다. count변수를 선언해주고 총 4번 반복할 것이지만 배열은 0부터 시작하기 때문..
-
[WEB2 JavaScript] 18.리팩토링(refactoring) | 초코더JavaScript/생활코딩 2019. 11. 14. 15:54
이번 시간은 개발자에게 매우 중요한 리팩토링에 대해 알아볼게요. 저번시간에 만든 버튼을 활용해서 코드를 수정해보겠습니다. 먼저 이 게시물을 보고 와주세요! https://sinsomi.tistory.com/3 WEB2 JavaScript - 14. 조건문 예고, 17.조건문의 활용 오늘은 간단한 조건문에 대해 공부해볼게요. 우선 저번 시간에는 아래 사진과 같이 night버튼을 누르면 배경검정_글씨흰색, day버튼을 누르면 배경흰색_글씨검정이 되도록 만들었는데요. 버튼 하나를 가지고 day.. sinsomi.tistory.com 이러한 버튼을 100개,1000개를 만들고 싶을 때 코드가 중복되는 것을 막기 위해 짜볼게요. 우선 id값이 중복될 수 없기 때문에 코드를 복붙하게 되면 제대로 작동이 안될 뿐더러..