Javascript
[프로그래머스 Level1] 크레인 인형뽑기 게임 - 우수 코드 분석(Javascript, reduce, map 사용)
☺️ 나의 코드 https://hoyashu.tistory.com/254 [프로그래머스] 크레인 인형뽑기 게임 - 나의 코드(Javascript) 🚨문제 https://programmers.co.kr/learn/courses/30/lessons/64061?language=javascript 🔅예제 이해 입출력 예 board moves result [[0,0,0,0,0],[0,0,1,0,3],[0,2,5,0,1],[4,2,4,4,2],[3,5,1,3,1]] [1,5,3,5,1.. hoyashu.tistory.com 👍우수 코드 프로그래머스에서 제공하는 다른 사람들의 코드 중 좋아요가 가장 높은 코드 const transpose = matrix => matrix.reduce( (result, row) => ..
[프로그래머스 Level1] 크레인 인형뽑기 게임 - 나의 코드(Javascript)
🚨문제 https://programmers.co.kr/learn/courses/30/lessons/64061?language=javascript 🔅예제 이해 입출력 예 board moves result [[0,0,0,0,0],[0,0,1,0,3],[0,2,5,0,1],[4,2,4,4,2],[3,5,1,3,1]] [1,5,3,5,1,2,1,4] 4 [[0,0,0,0,0],[0,0,1,0,3],[0,2,5,0,1],[4,2,4,4,2],[3,5,1,3,1]] 가 어떻게 생긴 건지 이해가 잘 안 되었는데, 이런저런 경우의 수로 생각해보니까 row값으로 생각하면 되더라! 00000 00103 02501 .. 이런식으로 말이다. 아래 그림을 보면 더 이해하기 쉽다. 입출력 예에 대한 설명 인형의 처음 상태는 문제..
ECMAScrip(에크마 스크립트), Ajax
Ajax 동기 --1이 완료해야 2를 완료하고 2가 완료해야 3이 실행된다. 그래서 1이 되어야 2가 되고 2가 되어야 c가된다. 비동기 --동기작업이 오래걸린다면 비동기 방식이 더 좋다. --1이 되던말던 2도 실행하고 2가 되던말던 3이 실행된다. 웹 환경에서 비동기를 사용할때는 웹소켓아니면 ajax를 사용한다. 웹소켓은 서버와의 연결이 길어야하면 쓰고, 짧으면 ajax를 쓴다. 처음에는 xml을 썻는데, 메타태그가 많아서 무거워지다보니, json을 쓰기 시작함 Arrow function - 화살표 함수 공부하러가기 // 매개변수 지정 방법 () => { ... } // 매개변수가 없을 경우 x => { ... } // 매개변수가 한 개인 경우, 소괄호를 생략할 수 있다. (x, y) => { .....
[Javascript] 자바스크립트로 form 폼체크 후 submit하기
1️⃣ html form태그에 action을 지운다. > onsubmit="return false;" 을 적어준 이유 : 폼체크 후 input내 내용이 삭제되지 않게 하기 위함임! (참고링크) 2️⃣ if문으로 폼태그의 정보를 확인한다. 3️⃣ form 프로퍼티를 활용하여 값을 준다. form.action = 'http://www.naver.com'; form.mothod = 'GET'; form.submit(); form 프로퍼티 action form데이터를 보낼 곳 elements 폼 안에 있는 요소를 선택할 때 사용함 설명 enctype application/x-www-form-urlencoded 기본값으로, 모든 문자들은 서버로 보내기 전에 인코딩됨을 명시함. multipart/form-data ..
[Javascript] 기본동작 멈춰! (e.preventDefault())
가끔 a태그가 a태그의 역할을 안해줬으면 하는때가 있다 (응?🤷♀️) a href에 #를 하고 onclick을 준다던가, a링크로 인식되면 좋겠지만 링크가 작동되지 않았으면 할때가 있다. 당장은 "이런걸 언제써ㅋㅋ" 싶겠지만 언젠간 한번은 필요한 순간이 온다. See the Pen 기본동작 제어 - e.preventDefault() by hoyashu (@hoyashu) on CodePen. dom객체의 click이벤트가 실행되는 순간 해당 이벤트의 정보를 e에 받아와서 e.preventDefault() 해주면 해당 클릭으로 실행되었어야하는 기본동작이 실행되지 않는다. 이러한 기능은 기본적으로 실행되어야하는 모든 기본동작에 해당된다. a태그, file버튼, submit버튼 등..
[Javascript] 이벤트 버블링(bubbling) 공부해보자🛁, 그리고 버블링 멈춰!보자(.stopPropagation())
버블링.. 매번 공부하고 의미는 대충 알고 있는데 확실히 정리해두고 싶다. (매번 까먹음;;🤦♀️) 일단 버블링을 글로 설명하자면, 본인의 자식요소까지 부모요소의 이벤트가 전파되는 것이다. 즉, 자식의 이벤트를 실행시켰는데 부모의 이벤트도 함께 실행되어 버리는 상황이다. 작동되는 상황을 보자면 아래와 같다. See the Pen 이벤트 버블링(bubbling) by hoyashu (@hoyashu) on CodePen. div3을 누르면 div3의 이벤트만 실행되었으면 하는데, div1, div2의 이벤트가 모두 발생한다. (= 자식의 이벤트뿐만 아니라 부모의 이벤트까지 실행되는 상황) 이러한 상황을 이벤트 버블링(bubbling)이라고 하는 것이다. 이러한 버블링을 막고, 자식을 클릭하면 자식요소의 ..
[ajax] 클릭시 데이터 가져오기
function getRecentComment() { $.ajax({ type: 'POST', url: './realtime_comment_ajax.php', data: 'lid=715', success: function(html) { document.getElementById("comment_wrap").innerHTML = html; } }); } $(document).ready(function() { getRecentComment(); }); document.onreadystatechange = function() { if (document.readyState === "complete") { if ($('#comment_wrap dd').length >= 5) { var passList = func..
[javascript/jquery] 오늘의 궁금점. 제이쿼리와 자바스크립트를 혼재하여 쓰면 어떤 문제가 있을까
오늘의 궁금점. 제이쿼리와 자바스크립트를 혼재하여 쓰면 어떤 문제가 있을까? 제이쿼리가 가장 잘하는건 다큐멘트 안에있는 오브젝트(dom)을 잘 찾아간다. 그 외에는 별로 없다. 자바스크립에 quearySelector가 생김으로 사용 빈도가 줄어들고 있다. 원래 제이쿼리는 jQuery(".green")이렇게 적는게 정석인데, $로 줄여서 쓰곤하는것이다. 제이쿼리 호출시에는 제이쿼리 호출 후에 사용해야한다. dom을 읽어와서 호출해야한다. 그래서 사용하는 방식이 $(document).ready(function(){}) => “dom이 다 로드되고 찾아라”라는 의미를 가지고 있다. 스크립트를 dom로드 후에 호출하고 싶을 때, 위치가 아닌 html코드만으로도 가능한데, ‘defer’가 있다. defer 는 j..
css애니메이션 시작 종료 시점 이벤트/트리거
var ani = document.querySelector(".ani"); ani.addEventListener("animationstart", function(e) { console.log("시작"); }, false); ani.addEventListener("animationend", function(e) { console.log("종료"); }, false); pilot376.tistory.com/49 CSS 애니메이션 시작 종료 시점 이벤트 CSS 애니메이션 구동 시 자바스크립트에서 시작 종료 시점을 알 수 있다. html css div { width: 100px; height: 100px; background: red; position: relative; animation: mymove 2s l..
