옛날 신입이 시절에 정리해야지 라고 생각하고 임시저장 해놨던 걸 이제서야 정리해본다. 그때 구현했던 게, 클릭한 텍스트에 fontWeight를 두껍게 주는 기능이었는데.. 해당 코드는 현재 VueJs의 클래스바인딩으로 변경되었으니, 올려도 되겠지 싶어 그냥 올린다. 1년이 넘어 기억은 안나지만, 대충 아래와 같은 기능을 구현하려고 짠 코드 같음.. 1. 제이쿼리 선택자를 활용한 CSS 변경 2. Event.target을 활용한 Style 변경 그래서 오늘은 2가지에 대해 알아보자. 그럼 바로 시작해보자. testFile.html 클릭해보세요 이 html을 가지고 연습해보자. 1. 제이쿼리 선택자를 활용한 CSS 변경 기본문법 $([클래스명 or 아이디명]).css([propertyName], [value..

HTML에 모듈을 import하여 해당 HTML에서 Vue에서 인스턴스나, 컴포넌트에서 사용하듯 접근하여 사용하고 싶어 구글링을 하다가 방법을 찾아서 정리한다. import한 모듈 ( 여기서는 common )을 window에 module이라는 객체를 추가하여 넣어준다. window.module = common { alert(makKind); } } mapFunc = new mapFunc(); export var mapFunc = mapFunc; common.js // basisMap.js, mapFunc import import {basicMap} from './components/basisMap.js'; import {mapFunc} from './components/mapFunc.js'; export..

DOM이 랜더링 되면 바로 해야 할 작업 ( 변수 생성, 함수 호출 ... )이 있을 때 자주 사용하는 녀석인데 제이쿼리 : Ready 순수자바스크립트 : DOMContentLoaded 둘의 차이점은 아래와 같다. 1. Ready가 DOMContentLoaded보다 먼저 실행된다. 2. Ready는 여러번 실행되지만, DOMContentLoaded는 단 한번만 실행된다. 필요한 녀석을 골라쓰자. 아래 샘플 코드를 적어놓음 ( 근데 Ready는 사용을 피하는 게 좋다고 한다.. ) JQuery버전 $(document).ready(function(){ // 실행할 기능을 정의해주세요. }); 순수 javascript 버전 document.addEventListener("DOMContentLoaded", fu..

기본문법 배열명.join(); 예제 let array = [ 'a', 'b', 'c', 'd', 'e' ]; let result = array.join(); --결과 : 'a,b,c,d,e' // join 함수안에 특정 문자를 넣으면 해당 문자로 연결할 수 있음 // 없으면 default로 , 이 들어감 let result = array.join('/'); --결과 : 'a/b/c/d/e'

javascript에서 객체를 생성하는 3가지 방법에 대해서 정리해보려 한다. 1. Object 생성자 함수 사용 2. 객체 리터널 방식 사용 3. 생성자 함수 사용 이렇게 3가지 방법이 있는데, 내가 객체를 생성할 때 가장 많이 쓰는 방식은 객체 리터럴 방식이다. 각 장단점이 있겠지만, 가장 좋은 방식은 객체 리터널 방식이지 않을까 싶다. 우선 직관적인 게 첫번째 이유, 그리고 객체를 생성함과 동시에 프로퍼티를 할당하기 때문에 속도가 빠르다는 게 두번째 이유이다. 그럼 각 방식에 대해서 자세히 알아보자. 1.Object 생성자 함수 사용 //비어있는 객체 생성 var student = new Object(); //student 객체의 프로퍼티를 할당 student.name = 'michelle' stu..

코드만 필요한 사람은 아래 코드를 갖다가 쓰도록 하자. 브라우저의 종류 및 버전 확인 위의 코드 실행결과는 아래와 같다.. ( 크롬이랑 엣지밖에 설치되어 있지 않아, 2개로만 테스트 해봄.. ) 해당 코드를 사용하려는 사람은 가져다 쓰되, 반드시 설정에서 실제 버전과 맞는 지 확인 하길 바람! 크롬 엣지