GetComponent<('0')>

const Image = document.createElement("tag name"); javascript에서 createElement를 이용해 해당 tag인 Element를 생성할 수 있다. 해당 element의 하위 요소는 앞서 javascript에서 해왔듯이 입력할 수있다. Image.src = `img/${todaysImg}`; 뭐 이런식으로! Image는 이런 html element가 된다. 여기서 유의할 점은, html 내에 넣어주지 않았으므로, 그저 javascript에 존재하는 element일 뿐이다. 따라서, 이젠 html에 넣어줘야 한다. document.body.appendChild(Image); document.body.prepend(Image); document.body.appe..

localStorage API를 사용한다. 개발자 도구에서 localStorage를 확인하는 방법은 이렇게 접근할 수 있다. Key와 Value로 이루어진 한 쌍으로 저장된다. localStorage.setItem("userName", userName); 잘 저장되어있다!

이는 앞서 text color 바꾸기와 비슷하게 돌아간다. CSS에 class hidden을 추가한다. .hidden{ display: none; } 그리고 해당 이벤트리스너 함수에 classList.add("hidden");을 해주면 된다. function onLoginSubmit(event) { event.preventDefault(); const userName = loginInput.value; loginForm.classList.add(HIDDEN_CLASSNAME); greeting.innerText = `Hello, ${userName}!`; greeting.classList.remove(HIDDEN_CLASSNAME); console.log(userName); } loginForm.addE..

이 글은 수시로 추가할 예정 1. 반복되는 string 입력을 최소화하라. 함수, 변수의 사용 등은, 내가 spell을 틀릴 일이 거의 없다. 자동 완성을 사용할 뿐더러, 틀리게 되면 해당 함수가 존재하지 않기 때문에(운나쁘게 존재하면 어쩔수없고) 오류가 출력된다. 그렇지만 문자열을 틀린다면? 문자열은 오류를 반환하지 않는다. 이는 상황을 정말 성가시게 만들 것임. if(a.className === "active") { a.className = ""; } else { a.className = "active"; } 여기서 내가 active를 actice로 적어버리면? 문법 오류가 아니기 때문에 찾기가 성가셔진다. 따라서 반복되는 문자열의 사용이 존재한다면, const activated = "active";..

사실 이건 상당히 간단하다. h1.style.color = tomato; 와 같은 접근 방법으로 CSS 요소를 변경할 수 있다. 그렇지만, CSS 변경은 CSS 파일에서 하는 것이 좋을 것이다. 그렇다면 CSS 요소를 어떻게 인터랙티브하게 구성할 수 있을까? 먼저 CSS 파일의 구성을 이렇게 한다. body { background-color: beige; } h1 { color: powderblue; } .active { color: tomato; } 여기서 h1이 변경하게 될 요소이며, 해당 요소의 특정 이벤트가 트리거되면 그 요소의 색을 tomato로 변경할 것이다. 이를 위에 쓴 것 마냥, h1.style.color = tomato; 로 변경하지 말고 변경하게 될 값을 CSS에 저장한다음, java..

정말 다양한 이벤트들이 존재한다. 그리고 이런 값들은 해당 elements의 이벤트 오브젝트 프로퍼티 값을 변경할 것이다. 1. addEventListener EventTarget.addEventListener("EventType", Function); EventType에는 이벤트가 정의된다. ex) click, keydown, mouseover, drag ... 이벤트 종류 참고 : https://developer.mozilla.org/ko/docs/Web/Events Function은 해당 이벤트가 발생했을 때 실행될 함수의 이름이 들어간다. 2. onblabla property EventTarget.onclick = Function1; EventTarget.onmouseover = Function2..

전제 자바스크립트를 html에 붙여넣기 or 안에 직접 쓰는 방법도 있을것임 getElementsByblabla와 querySelector(All)로 해당작업을 수행할 수 있다. 1. 해당 element의 id로 가져오기 const title = document.getElementById("title"); 그리고 해당 element에는 수많은 속성값들이 존재하며, 이는 .dir을 통해 확인 가능하다. 예를들어, innerText 값을 javascript로 수정해본다고 하자. title.innerText = "New Title"; 이런 식으로 js를 통해 html을 수정할 수 있다. 2. 해당 element의 class로 가져오기 const hello = document.getElementsByClassN..

처음에 문제를 예시까지 싹 읽고 든 생각은 먼 개소리야?(넝담ㅎ) 힌트를 보고서야 무슨 말인지 이해할 수 있었다. 1234567...n 까지의 오름차순의 수들을 스택에 push하는 것까지는 변하지 않는 고정된 상황. 여기서 pop하는 숫자들을 순차적으로기록해서 주어진 수열을 만족할 수 있냐는 소리였다. 43687521의 경우, 1234 push(++++) 4 pop(-) 3 pop(-) 56 push(++) 6 pop(-) 78 push(++) 87521 pop(-----) 이므로 조건을 만족한다. 12534의 경우 1 push(+) 1 pop(-) 2 push(+) 2 pop(-) 345 push(+++) 5 pop(-) 이후 무조건 4 pop만 가능하기에 조건을 만족하지 못한다. 12345...n까지..

적합한 괄호문법이란 몰까? 최종적인 형태에서 (와 )의 개수가 일치해야 할 것이다. 그치만 저 조건만 존재한다면 ))(( 도 적합하다고 판단해버릴 것이다. 우리가 원하는 건 (가 우선적으로 온 이후, )가 있어야한다. 이는 곧 문자 하나씩 검사하게 될 때, )의 개수가 (보다 많다고 판단되면 바로 NO로 결정을 내리면 되지 않겠는가? 정리해보았다. 1. [항시] ()((는 되지만, ()))는 성립하지 않음. 즉, (보다 )의 개수가 많음 2. [마지막에] (와 )의 개수가 일치하지 않음. 코드를 짜보았다. function solution(inputArray){ let count = +inputArray[0]; let resultLog = []; for(let i = 1; i < count+1; i++) ..

게시판 기능을 위해서는 DB도 좀 다룰줄 알아야 할 것 같아서 이거까지 공부하기로. bitnami를 통해 사용. 서버 스타트는 D:\Bitnami\wampstack-8.1.8-0 의 manager-windows.exe cmd에서 D:\Bitnami\wampstack-8.1.8-0\mariadb\bin의 mysql -uroot -p 명령어로 실행(root user 권한, 패스워드 입력) * 실제로 root권한 사용은 위험. 필요한 권한을 부여한 사용자로 이용하자 데이터베이스(database, schema) : 표들을 grouping한 집합 DB Server : 이러한 스키마들의 집합 CREATE DATABASE tutorials;//db 생성 DROP DATABASE tutorials;//db 삭제 SHO..