본문 바로가기

JS

(17)
document와 document.documentElement
string.split('') 그리고 array.join('') string.split() white space 없을 때, 'abc'.split(''); //['a','b','c'] split a string into an array of its character white space 있을 때, 'abc'.split(' '); //['abc'] 그 string 그대로 array의 원소로 넣어준다. array.join() white space 없을 때, ['a','b','c'].join(''); //'abc' array에 있는 원소를 합쳐서 하나의 string으로 white space 있을 때, ['a','b','c'].join(' '); //'a b c' 하나의 string으로 만들어주는 것은 같지만 array 원소와 원소 사이에 한 칸 공백
스크롤을 내리는지 올리는지 보호되어 있는 글입니다.
스크롤 할 때 특정 class 추가, 멈추면 제거 보호되어 있는 글입니다.
<select> 기본 스타일 없애고 내가 원하는 스타일 넣기 HTML Pick a Movie: Parasite Bando Avengers: Endgame Harry Potter CSS .form-container select { background: #fff; padding: 0.4rem; margin: 0 0.2rem; border: 0; border-radius: 0.3rem; font-size: 0.9rem; appearance: none; -moz-appearance: none; -webkit-appearance: none; } .form-container select:focus { outline: 0; } appearance:none을 해주면 아래로 향하는 화살표가 사라진다. :focus selector를 사용해서 를 사용자가 누른 후 생기는 outlin..
TIL3. A first splash into JavaScript 정리 1. 1과 100 사이 랜덤 숫자 하나를 생성한다. 2. 플레이어의 시도 횟수 설정 (일단 1로) 3. 플레이어에게 어떤 숫자인지 추측할 수 있는 방법을 제공 4. 플레이어가 숫자를 submit하면 그 기록을 띄움 (플레이어가 이전에 추측한 숫자가 무엇인지 알 수 있게) 5. 플레이어가 제출한 숫자가 맞는지 체크 6. 맞다면 6.1 축하 메시지 띄운다 6.2 Player가 더이상 숫자를 입력하지 못하게 한다. 6.3 게임 restart 버튼 display 7. 틀렸지만 여전히 시도 횟수가 남았다면 7.1 플레이어에게 추측이 틀렸다고 알려준다. 7.2 플레이어가 다른 숫자를 입력할 수 있도록 한다. 7.3 시도 횟수를 1 증가 시킨다. 8. 틀렸는데 남아있는 시도 횟수가 없다면 8.1 플레이어에게 게임이 ..
TIL1. Java Script란 무엇인가(1) (1*MDN Documentation을 읽으면서 혼자 정리하는 포스트입니다. (공책 낭비하면 나무가 너무 아까우니까요.. 그냥 블로그에 쓰려구요...) 영어 문장을 아주 어색하게 직역하고 있으며, 개인 사담이 많이 들어갑니다. 1. 자바스크립트란? 자바스크립트는 scripting or programming language로 웹 페이지를 동적으로 만들어 준다. 여기서 동적인 웹페이지란 정보를 단순히 나열해서 보여주는 식의 홈페이지가 아니라 (2000년대 초반에 많이 봤던 홈페이지들..) 사용자와 인터액티브하게 반응하는 (클릭을 하면 이미지가 어디서 슝-하고 나타난다거나, 스크롤링 할 때 여러 효과가 나타나고, 2D/3D 그래픽도 들어가는 등등..) 웹페이지라고 할 수 있다. 지금 볼 수 있는 대부분의 웹페..
JS에서 동적으로 생성한 태그에 클래스 만들어주기! const li = document.createElement("li"); const delBtn = document.createElement("button"); const span = document.createElement("span"); 클론 코딩한 ToDo리스트를 CSS로 다듬던 중 리스트나 버튼, span에 클래스 이름이 없어서 css로 꾸밀 수 없는 곤란한 상황이 발생했고 ! 검색결과 .setAttribute를 발견! li.setAttribute("class", "toDoList"); delBtn.setAttribute("class", "myBtn"); span.setAttribute("class", "toDoContent"); 리스트, 버튼, 스팬에 각각 클래스를 만들어 줄 수 있었고!!!!!..