JavaScript 7

[javascript/HTML] input checkbox readonly 시키기

input에서 사용자는 수정을 못하게 하려면 readonly라는 옵션을 이용하면 된다. 최근 프로젝트에서 input check box도 readonly를 시키려고 아래 코드를 넣었으나, 동작하지 않았다. 📌input type checkbox readonly 오류 코드 readonly="true"로 변경을 해봤지만 그 부분도 적용이 안되고, disable="true"는 작동이 되고 뭐일까 하고 찾아봤다. 🍒input type checkbox readonly 성공 코드 확인해보니, checkbox의 readonly는 먹지 않아서 위처럼 onClick 이벤트에서 return false를 걸어주면 된다고 한다. 실제로 적용해보니 잘 작동한다.

FrontEnd/Javascript 2022.10.27

[javascript] 빈객체 if문으로 확인하는 방법 ({} check / Object.keys 주의사항)

자바스크립트에서 default 객체를 선언하는 방법은 아래와 같다. const obj = {}; 이후 로직에서 obj 객체에 key,value가 세팅이 되었는지 아닌지 체크하는 방법이 필요해서 찾아보게되었다. 🧡Object.keys 이용하기 Object.keys()를 이용하면 주어진 객체의 key 이름을 배열로 반환한다. Object.keys(obj) //빈객체일 경우 [], key가 있는경우 [id,name] 해당 기능을 이용해서 if문처리가 가능하다. 예시코드 let obj = {} obj ={ id:1, name:one } if(Object.keys(obj).length !== 0) { alert("빈객체아님!") } 위 예시로 빈객체인지 아닌지 확인이 가능하다! ✅사용시 주의사항 만약 obj객체에..

FrontEnd/Javascript 2022.07.19

Javascript URL 리다이렉트 시키기 (vue.js router push)

Vue $router.push 오류가 나서 수정 방법을 찾다가 못 찾아서 일단은 Javascript로 Redirect 하는 소스로 변경해놨는데 오늘은 Javascript redirect와 Vue 에서 redirect를 하는 방법 정리하기로! 🧐Vue.js에서 page redirect 하는 방법 this.$router.push('/') Vue.js 에서 page를 이동하는 방법은 this.$router.push('경로')를 이용한다. 문제는 해당코드가 모바일에서 해당 코드가 작동하지 않는 이슈가 발생했다. 이것저것 코드를 바꾸다가 못 찾아서 :( 일단 Javascript 코드로 변경하기로 했다. 🐳Javascript에서 Page redirect 하는 방법 window.location.href = `${wi..

FrontEnd/Javascript 2022.05.11

[자바스크립트] 세미콜론(;)을 꼭 안찍어도되는 ASI 알아보기

✔️자바스크립트의 세미콜론(;) 자바스크립트에서는 세미콜론을 찍어주는 이유는 내가 쓰는 구문이 종료가 되었다 라는 의미이다. 프로그래밍 문법에 맞게 작성한 코드를 적고 해당 코드가 완료되면 그 뒤에 종료가 되었다는 의미로 세미콜론을 찍어준다. let a = 1; console.log(a); 하지만, 개발을 하다 보면 세미콜론을 정확히 찍을 때도 있지만, 개발을 하다보면 세미콜론을 까먹고 안 찍는 경우도 있다. 하지만 보통 세미콜론을 안찍어도 오류가 난적이 없다! 그런데도 꼭 세미콜론을 찍어야하는건가? 하지만 오류가 안나는 이유는 바로 ASI 때문이다! 🎇ASI(Automatic Semicolon Inserion, 자동 세미콜론 삽입) ASI는 자바스크립트 엔진에서 자동으로 ASI를 찍어주는 기능이 있기 ..

FrontEnd/Javascript 2022.04.11

[Javascript] Math 객체를 이용해서 랜덤 값 만들기(Math.random)

🤔Math 객체란? Math객체는 자바스크립트에 내장되어 있는 객체이다. 주로 숫자를 다루는 수학에 관련된 함수들이 들어가 있다. 그중 오늘은 내가 자주 사용하는 Math.random()에 대해 공부하겠다. 📈Math Random 함수를 사용할 때 대시보드나 그래프를 그려줄 때 가끔 데모 사이트를 만들 때 랜덤 값들이 필요한 경우가 있다. 이럴 때 나는 주로 Math.random()을 이용해서 특정 범위의 랜덤 값을 만들어서 연동한다. 📕Math Random 이용하기 실행화면 실행을 해보면 알겠지만 0 이상 1 미만이 난수를 발생해준다. 1️⃣최소 최대값 사이의 난수 생성하기 0,1 사이 난수가 아니라 가끔은 내가 원하는 정수의 난수가 필요할 때도 있다. 이때는 min과 max 값을 설정해서 아래와 같이..

FrontEnd/Javascript 2022.03.14

[javaScript]JSON 과 javascript의 Object 차이 바로 알기

javascript를 작성하다 보면 JSON과 javascript에서 Object가 매우 흡사한 형태를 가지고 있다는 사실을 알 수 있다. 형태가 비슷하기 때문에 똑같아고 생각하는 분들도 있을 테지만 엄연하게 두개는 다르다. 그럼 오늘은 JSON과 javascript의 Object의 차이를 알아보겠다. 📄JSON이란? JSON은 Javascript Object Notation의 약자로 서버와 데이터를 교환할 때 사용하는 Data 형태이다. JSON은 단순히 데이터를 표시하는 포맷일 뿐이고 프로그래밍 문법은 아니다. JSON은 서버와 클라이언트 데이터를 주고받을 때 현재 많이 사용되는 데이터 표시방식이며, 자바스크립트의 Object와 굉장히 비슷하게 작성이 되지만 이는 단순한 텍스트일 뿐이다. JSON형태..

FrontEnd/Javascript 2022.03.07

[JavaScript/Vue] 자바스크립트로 크롬 전체 화면 실행 및 종료하기

웹 애플리케이션을 구축할 때 모니터링 기능이 주요 기능이라면 전체 화면으로 하여 커다란 TV에 프로그램을 띄워놓고 보는 경우가 있다. 크롬에서는 사실 F11을 누르면 전체 화면이 되는 단축키가 있지만, 인터넷 환경에 익숙하지 않은 분들은 해당 기능이 있는지도 모르는 경우가 많다. 이런 분들을 위해서 애플리케이션에 내 크롬 전체 화면을 만들어주는 버튼으로 넣어줄 수 있다. 🌵버튼으로 크롬 전체 화면 만들어주기 샘플 코드 전체 화면 켜기 전체 화면 끄기 vue.js에서 data에 전체 화면을 감지하는 fullPage라는 data를 만든 뒤 버튼에서 전체 화면일 경우 버튼을 각 상황에 맞게 보여준다. 해당 버튼 클릭 시 document.fullscreenElement상태를 확인한다. 만약 전체 화면 상태이면 ..

FrontEnd/Javascript 2021.05.25