본문 바로가기

전체 글119

Vanilla Js. textarea(replace메서드, 개행) 오늘 별거도 아닌걸로 겁나게 헤맸다.. textarea를 사용해서 입력한 값을 저장해서 불러오는거였는데.. 줄 바꿈이 안되네? 후, 그래서 찾아보았다. 개행하는 법! 하지만 개행 이후에도 고난이 있었으니.. 바로 코드 들어가겠습니다. HTML코드 click 오늘의 주인공 textarea 태그의 입력값을 클릭을 누르면 p태그에 출력이 되도록 하겠습니다. Javascript 코드 const input = document.querySelector("#textInput"); const output = document.querySelector("#textOutput"); const click = document.querySelector("#click"); click.addEventListener("click", .. 2023. 2. 21.
JavaScript 문법. JSON (stringify, parse) 엉뚱한 짓을 하고 다닐 때 봤던 JSON 말로만 들어보고 그냥 눈으로만 봤지 어떻게 동작하고 어떤 기능이 있는지 잘 몰랐다. 일단, 오늘 도움을 주신우리의 지식을 풍족하게 해주실 MDN Web Docs 선생님과 유튜브 드림코딩 엘리 님의 영상을 보고 작성함을 알려드립니다. 아니, 대체 JSON이 뭐죠? * 참고 자료 : MDN Web Docs - JSON으로 작업하기 JavaScript Object Notation (JSON)은 Javascript 객체 문법으로 구조화된 데이터를 표현하기 위한 문자 기반의 표준 포맷입니다. 웹 어플리케이션에서 데이터를 전송할 때 일반적으로 사용합니다. (서버에서 클라이언트로 데이터를 전송하여 표현하려거나 반대의 경우) JSON 는 Douglas Crockford가 널리 .. 2023. 2. 15.
HTML. input button 과 button의 차이점 안녕하세요, 오늘은 요며칠 동안 엉뚱한 짓을 하면서 생각이든 2023. 2. 14.
한동안 공부 업데이트가 뜸했다. 이유인즉슨..패스트캠퍼스 유료강의 하나를 듣는데 제이쿼리 코드로 다조졌기 때문이다.. 나는 제이쿼리 코드를 처음봤다..기본개념도 없다..뭐 다행?인지 불행인지 그 코드들은 강의자료에 완성본이 있었다. 하지만 나는..이전에도 그랬지만 코드를 뜯어서 재구축하고 새로운 기능을 넣는걸 즐기는 뭔가 이상한 놈이다. 그래서 지금 일주일 내내 검색으로 모르는걸 다 조지고 원하는 기능 같은걸 넣는 과정에 남이 짜놓은 코드다 보니 중간중간 혼선이 와서 다시보고 또 보고..하다보니 결국 일주일이 넘도록 공부내용을 업데이트 하지 못 했다는 것 이다. 잡고있는 이 코드는 주말까지 물고, 뜯고, 맛보고, 즐긴 후 다음 주 부터 새로운 공부내용을 업데이트 하겠다..끝~ 2023. 2. 10.
JavaScript 문법. Arrow Function( 화살표 함수 ) * 화살표 함수를 외면하고 일반 함수만 하던 나.. (이전 글들 보면 화살표 함수 예제를 다 일반 함수로 바꿔서 씀..) * 화살표 함수, 피할수 없다면 즐겨주겠어. 자바스크립트 함수 정의 방법 1. 일반 함수 2. 화살표 함수 1-1. 일반 함수 - 함수 선언식 함수 선언식이란, 함수 function키워드를 쓰고, 함수 이름을 넣어준 다음 함수 블록에 내용을 채워 넣으면 된다. * 참고 자료 1 : MDN Web Docs - 함수 선언(function declaration) function name([param[, param,[..., param]]]) { [statements] } name 함수 이름. param 함수로 전달되는 인수(argument)의 이름. 인수의 최대 개수는 엔진마다 다름. st.. 2023. 1. 29.
JavaScript 문법. this * 어...음...설날 전후로 신나게 펑펑 놀았습니다. 오늘은 this에 관해서 파헤쳐보겠습니다. * 참고 자료 : MDN Web Docs - this 위 참고 자료를 읽어보면, 대부분의 경우 this의 값은 함수를 호출한 방법에 의해 결정됩니다. (= this는 함수를 호출한 객체) 라고 합니다. * 유튜브 별코딩님 영상을 참고했습니다. 1. 전역문맥 (함수 외부에서 this 값) console.log(this); // window 객체 if(true) { console.log(this); } // window 객체 전역적인 문맥에서 this에 접근하면 this는 window 객체로 출력된다. 1-1. 엄격모드 'use strict'; console.log(this); // window 객체 2. 함수.. 2023. 1. 28.
Vanilla JS. Light and Dark Mode * 오늘은 라이트 모드랑 다크 모드를 해보자. * input태그 하나로 누르면 라이트 모드, 다크 모드 두개를 실행하게 해볼 예정이다. .day { background-color: white; color : black; } .night { background-color: black; color: white; } * style.css 파일에 day와 night 클래스의 속성을 정했줬다. const change = document.querySelector("#change"); const body = document.querySelector("body"); //화면의 배경화면을 전체 바꿔야하니 body 태그를 불러왔다. function changeHandle () { if(change.value === "ni.. 2023. 1. 19.
CS. var, let, const의 차이점 (feat. 호이스팅) /* 오늘도 어김없이..클론코딩만 하는 나에게 이런 시련이.. 호이스팅 개념을 이해하는데 많은 시간을 썼다.. */ ps. 틀린곳도 많을거기 때문에 피드백은 항상 겸허히 받아들입니다. 변수의 선언은 var, let, const 키워드로 할 수 있으며, ES6에서 let과 const가 추가되었다. 자바스크립트에서 변수 선언은 선언 → 초기화 단계를 거쳐 수행된다. 더보기 선언 단계: 변수명을 등록하여 자바스크립트 엔진에 변수의 존재를 알린다. 초기화 단계: 값을 저장하기 위한 메모리 공간을 확보하고 암묵적으로 undefined를 할당해 초기화한다. 왜 기존 var가 있는데, let과 const가 추가 되었을까? var, let, const에는 4가지 차이점이 있다. 1. 중복선언 가능 유무 2. 재할당 가.. 2023. 1. 18.

티스토리툴바