Code Playground

< h1 > Code Playground </ h1 >

-HTML 제어(2)- #요소 제어 ...javascriptvar myimg = document.getElementById("img요소의 id"); my img.src = "이미지 파일 경로";myimg.width = "200px";myimg.height = "100px";... #요소 제어 요소의 객체 획득하기 id 속성값으로 접근하는 경우var myform = document.getElementById("form_id"); name 속성값으로 접근하는 경우var myform = document.form_name; 획득한 안의 요소 접근 id 속성값으로 접근하는 경우var hello = document.getElementById("input_id"); name 속성값으로 접근하는 경우var myform..

-URL 제어하기- 브라우저의 현재 URL 조회var now_url = location.href; 브라우저의 현재 페이지를 지정된 URL로 이동한다.window.location = 'URL'location.href = 'URL' 현재 페이지를 새로고침한다.location.reload(); 웹 브라우저 history의 이전 페이지로 이동한다.history.back(); 웹 브라우저 history의 다음 페이지로 이동한다.history.forward(); -웹 브라우저의 정보 조회- : 웹 브라우저의 이름, 버전정보, 운영체제 정보 등이 포함된 문자열 값 var agent = navigator.userAgent; 이 값에 특정 단어가 포함되어 있는지 여부를 판단하여 브라우저나 운영체제 종류, 모바일/PC 여..

-해당 문제는 codewars사이트의 level6 문제입니다.(1~8단계 중 8단계가 가장 쉬운 레벨)- [문제] Polycarpus works as a DJ in the best Berland nightclub, and he often uses dubstep music in his performance. Recently, he has decided to take a couple of old songs and make dubstep remixes from them. Let's assume that a song consists of some number of words (that don't contain WUB). To make the dubstep remix of this song, Polycarpus ..

-해당 문제는 codewars사이트의 level7 문제입니다.(1~8단계 중 8단계가 가장 쉬운 레벨)- [문제] Simple, given a string of words, return the length of the shortest word(s).String will never be empty and you do not need to account for different data types. Test.describe("Example tests",_=>{Test.assertEquals(findShort("bitcoin take over the world maybe who knows perhaps"), 3);Test.assertEquals(findShort("turns out random test cas..

오늘부터 시간이 날 때마다 https://www.codewars.com/의 알고리즘 문제들을 풀어보고 문제를 풀며 나의 굳은 뇌를 쥐어짜는 과정에서 우러나오는 온갖 고뇌를 글로 적어보려고 한다... 알고리즘 서적을 찾아보면 죄다 파이썬이나 자바 기반으로 되어있는데 난 내가 할 줄 아는 자바스크립트로 풀어볼 예정이다. codewars는 해외 사이트라 문제가 죄다 영어다. 한국에도 프로그래머스라는 유명한 알고리즘 사이트가 있는데 문제는 이노무 프로그래머스에서 문제 푸는 사람들을 죄다 천재로 보는건지 문제 수준이 너무 높다. 분명 레벨1이라고 해서 즐거운 마음으로 문제를 읽었는데 문제 읽는데만 5분 해석하는데 10분 문제 푸는 데 하루가 소요되는 기적... 문제의 수도 해외 사이트에 비해 적을 뿐더러 레벨도 ..

회사에서는 대부분 jQuery를 사용해서웬만한 이벤트 구현을 하다보니그냥 자바스크립트로는 아무것도 할 수 없게 되었다. 아주 간단한 기능인데도순수하게 자바스크립트로만 구현하려니꽤나 머리가 아프다..ㅠㅠ 이렇게 제이쿼리에 의존하고 있었다니..많이 반성하며 요즘 열심히 공부하고 있는 중이다. 매주 일요일에 자바스크립트 스터디를 하고 있는데지난번 스터디 때 Dom에 대해서 배웠고 그 부분을연습해보고자 간단한 To Do List를 구현해보기로 하였다! 일단 아래와 같이 모양을 만들어주었다.예제지만 괜히 이쁘게 만들고 싶은 마음에 웹폰트도 검색해서 나름 예뻐보이는 걸로 넣어보았다ㅋㅋ To Do List 추가 check To do List 청소하기 숙제하기 선택 삭제 마지막 항목 삭제 전체 삭제 이제 구현해야될 사..

조금 더 아래에 밑줄이 생깁니다 원래 밑줄입니다 .underline1 { text-decoration: underline; text-underline-position: under; } .underline2 { text-decoration: underline; } 보통의 경우 디자인적으로 밑줄 간격을 띄우기 위해서text-decoration: underline보다는 border-bottom을 쓰거나 아니면 가상클래스 :after를 걸어서 작업하는데이번 프로젝트에서는 글자가 2줄로 떨어지는 경우가 있어 맨 밑에 있는 줄에만 밑줄이 생기는 문제가 생겼다. 그래서 text-decoration: underline;으로 작업하고text-underline-position: under; 속성을 주어 최대한 밑으로 떨어..

$(document).bind('keypress', function(event) { if( event.which === 65 && event.shiftKey ) { alert('you pressed SHIFT+A'); } }); shift, ctrl, alt, meta 키와 일반 키를 동시에 눌렀을 때 위와 같은 방식으로 이벤트를 줄 수 있다.event.shiftKeyevent.ctrlKeyevent.altKeyevent.metaKey [keyCode 표] KeyCodebackspace8tab9enter13shift16ctrl17alt18pause/break19caps lock20escape27(space)32page up33page down34end35home36left arrow37up arrow38..

@font-face { font-family: 'pass'; font-style: normal; font-weight: 400; src: url(data:application/font-woff;charset=utf-8;base64,d09GRgABAAAAAATsAA8AAAAAB2QAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAABGRlRNAAABWAAAABwAAAAcg9+z70dERUYAAAF0AAAAHAAAAB4AJwANT1MvMgAAAZAAAAA/AAAAYH7AkBhjbWFwAAAB0AAAAFkAAAFqZowMx2N2dCAAAAIsAAAABAAAAAQAIgKIZ2FzcAAAAjAAAAAIAAAACAAAABBnbHlmAAACOAAAALkAAAE0MwNYJ2hlYWQAAAL0AAAAMAAAADYPA..

변수를 영어로 하면 Variable이다.그리고 variable은 "다양한, 변화할 수 있는"이라는 뜻을 가지고 있다,즉, 변수(變數)는 수학에서 수식에 따라서 변하는 값을 의미한다, w3schools에서 variable에 대해 검색하면 다음과 같이 나온다. "JavaScript variables are containers for storing data values." 즉, 자바스크립트의 변수는 데이터 값을 저장하는 데 쓰이는 공간이다.그리고 그 값은 계속해서 변할 수 있다. 변수는 variable의 앞 3글자를 따서 var라는 형태로 선언된다. var x = 1; 저렇게 선언하는 순간 컴퓨터의 메모리에는 x라는 공간이 생겨나고 그 공간에 1이라는 숫자가 할당된다. 변수의 종류에는 기본형(원시형)과 참조형..