dallae_log

안녕 난 달래야🐣

Blog/노마드코더 - 초보자를 위한 바닐라 자바스크립트

const title = document.querySelector("#title"); const BASE_COLOR = "rgb(52, 73, 94)"; const OTHER_COLOR = "#7f8c8d"; function handleClick() { const currentColor = title.style.color; if (currentColor === BASE_COLOR) { title.style.color = OTHER_COLOR; } else { title.style.colo = BASE_COLOR; } } function init() { title.style.color = BASE_COLOR; title.addEventListener("click", handleClick); } init()..

2021. 8. 29.

Blog/노마드코더 - 초보자를 위한 바닐라 자바스크립트

이번엔 if-else라는 걸 설명할거예요. if-else는 기본적으로 프로그래밍에서 cost title = document.querySelector("#title"); function handleClick() { title.style.color = "blue" } title.addEventListener("click", handleClick); 이건 조건입니다. 많은 것들이 조건이에요. 예를 들어 유저가 로그인 했으면 이걸 보여 주고 안했으면 다른걸 보여 주는 겁니다. 유저가 여길 클릭 했으면 이걸 하고 아니면 다른걸 하게 해요. 좀 더 구체적으로 플레이어가 총알을 만지면 죽고 아니면 계속 가는 거. 이런 거요. 이 모든게 if-else, if-else, if-else입니다. 다행인건 if-else는 거..

2021. 8. 29.

Blog/노마드코더 - 초보자를 위한 바닐라 자바스크립트

자바스크립트는 단지 html와 css를 바꾸고 싶어서 만들어지진 않았습니다. 자바스크립트는 이벤트에 반응하기 위해서 만들어 졌어요. 그럼 이벤트란 뭐냐! 이벤트는 웹사이트에서 발생하는 것들을 말하는 겁니다. click, resize, submit input change load before closing printing 같은 것들이요. 모두 이벤트입니다. 좋은 사실은 우리가 이 이벤트를 중간에 가로챌수 있다는 거예요. 예를 들면 window는 조금 다른 이벤트를 가지고 있어요. window.addEventListener("resize") 이제 자바스크립트가 이벤트를 받기를 기다리고 있습니다. 그럼 우리는 분명히 어떤 이벤트인지를 말해 줘야 해요. 모든걸 다 기다리고 싶지는 않거든요. 또 어떤 건 신경 쓸..

2021. 8. 29.

Blog/노마드코더 - 초보자를 위한 바닐라 자바스크립트

이전 글에서 HTML을 DOM 객체로 바꿀 수 있다는 것을 배웠습니다. 이번 글에서는 title에서 여러분이 가진 모든 가능성을 보여 주는 것을 배울겁니다. console.log(title);을 하면 title을 나타내는 html을 볼 수 있습니다. 여러분이 title로 할 수 있는 모든 걸 보여 줄건데 그러기 위해선 console.log 하는 대신에 console.dir을 할게요. attribute를 보면 base url classname 흥미롭네요. id title innerHTML innnerText localname nodevalue nodetype offsentparent 이게 모두 이벤트입니다. parentNode: body outerHTML outerText style 이게 모두 자바스크립트..

2021. 8. 29.

Blog/노마드코더 - 초보자를 위한 바닐라 자바스크립트

console.log() , calculator.plus() 등과 같이 브라우저에서 우리에게 제공하는 더 많은 다른 함수들이 있습니다. 그래서 함수 파트에서 그냥 쭉 머물 수 있어요. 예를 들면 Calculator로 뭘 만들면서 말이에요. 하지만 이 카테고리에서 하고자 하는 방향은 사실 HTML을 다루는 겁니다. HTML이 자바스크립트와 만나면 어떻게 동작하는지 보여줄거예요. CSS와 같이 자바스크립트에서도 element를 선택할 수 있습니다. 그래서 변경할 수 있어요. h1을 선택해서 바꿀 수 있는것 처럼요. 여기 script.js에서 타이틀을 바꿔볼게요. 오직 자바스크립트 만으로요! 먼저 우리는 연습을 해볼거예요. 보통 어떻게 연습하냐면 This works가 써있는 것을 바꿔야하니까 h2에다가 tit..

2021. 8. 29.

Blog/노마드코더 - 초보자를 위한 바닐라 자바스크립트

자, 이제 console.log 쓰는 거 대신에 이런 딱 봐도 문자열 같은거 말고 섹쉬한 스트링을 써보자고요~!~ 자바스크립트에서는 텍스트를 써야 하고 텍스트에 변수를 섞어 쓸 순 없습니다. 예전 자바스크립트에서는 많은 콤마를 쓰고 싶지 않을 때 어떻게 했었냐면 "Hello" + name + 그리고 다시 또 문자열을 넣고 .... 스페이스 주는거 잊지말아야 하공.. 스페이스를 주고 안주고 하는건 일반적으로 많이 하는 실수지요. 아 이건 섹쉬 하지 않아요. 그리고 자바스크립트에서는 "(따옴표)" 도 스트링이고 '(싱글 따옴표)'도 스트링입니다. "(따옴표)로 시작 했으면 반드시 "(따옴표)로 끝내야 하고 '(싱글 따옴표)로 시작 했으면 '(싱글 따옴표)' 로 끝내야 합니다. 하지만 이렇게 쓰는 방식이 지루..

2021. 8. 29.

Blog/노마드코더 - 초보자를 위한 바닐라 자바스크립트

안녕하세요 ^_^ 이 코드를 봐보세요. console.log 그리고 dalleinfo.favFood에서 말입니다. 어때요? 비슷해 보이지 않나요? console.(점)log / dallaeinfo.(점)favFood console은 Object입니다. dallaeinfo가 Object 인 것 같이 .log는 자바스크립트 안에 있는 것들을 말합니다. 이 컴퓨터 소프트웨어에 console이라는 object가 있고 log라는 키가 있는거죠.이 경우에는 log는 function(함수)인거예요. 근데 object지요. 그렇다면 오브젝트를 console.log로 찍어 보면 어떨까요? console은 nicoinfo보다 더 큰 오브젝트입니다. dallaeinfo에 console.log를 했습니다. log, error..

2021. 8. 29.

Blog/노마드코더 - 초보자를 위한 바닐라 자바스크립트

Array가 어떻게 동작하는지 알았으니 이제 Obejct 라고 불리는 것으로 데이터를 정렬해보자구요! Object하고 Array의 다른 점은 Object에는 각 value에 이름을 줄 수 있습니다. 무언가를 리스트로 만들고 싶을땐 Array를 정의할 겁니다. 간단하잖아요. 그냥 리스트를 만들면 되니까요. 월, 화, 수, 목, 금, 토, 일로 요일리스트를 만들 수 있습니다. 그리고 나서 첫 번째 값을 얻으려면 daysOfWeek[0] 두 번째는 daysOfWeek[1]... 이렇게 쭉~ 가면 되겠죠? 근데 여기서 알아야 할 건 만약 여러분이 자신의 개인 정보를 저장하고 싶다면 일단 이렇게 만들겠습니다. 누구도 이 데이터를 정렬된 방식으로 접근할 수 없습니다. 왜냐하면 이건 그냥 리스트기 때문입니다. 이제 ..

2021. 8. 24.

Blog/노마드코더 - 초보자를 위한 바닐라 자바스크립트

자! 그럼, 어떻게 우리가 가진 데이터 타입을 정렬할까요?😮 정답은 두 가지인데 하나는 Array고 다른 하나는 Object입니다. Array란 리스트 처럼 데이터를 저장하는 곳입니다. 예를 들어 우리가 요일을 정렬한다고 하면 이 변수명을 보세요. 자바스크립트에서는 문법을 위한 규칙이 필요합니다. 또 이렇게도 작성하면... daysofweek 이라고 써도 오류는 없습니다. 하지만 일하는 동료 혹은 나중에 여러분 자신도 이걸 보면 만든 사람에게 분노하게 될 것입니다. 왜냐하면 이건 Camel case라는 방식으로 써야 하기 때문이죠. camel(낙타)는 등이 구불구불 하죠?🐪 camel case란 변수명을 언제나 소문자로 시작해서 중간에 스페이스가 필요하면 스페이스 대신에 대문자를 써주고 그 다음 다른 단..

2021. 8. 24.