memostack
article thumbnail
HTML 문서에 javascript 추가시 주의할 점 (브라우저 구문분석 순서)
Frontend/HTML, CSS, JS 2021. 12. 28. 19:25

HTML 문서에 js 추가시 주의할 점 브라우저는 html 문서를 위에서부터 아래로 한줄 씩 읽어 내려간다. 브라우저에서 아직 읽지 않은 요소를 js에서 참조하려고 하면, 해당 요소를 찾지 못하게 된다. 예를들어, 아래 코드를 보면 initial value 만약, head 태그 내부와 같이 상단에 javascript를 추가 하게되면, 그 아래에 위치한 요소들은 (js를 읽는 시점에) 아직 브라우저에서 읽지 못했기 때문에 js 파일에서 특정 요소를 참조할 수 없다. 그래서 '개발자 도구'를 열어서 확인해보면 아래와 같이 참조할 수 없다는 오류를 확인할 수 있다. Uncaught TypeError: Cannot set properties of null (setting 'innerHTML') 이 문제를 해결하..

article thumbnail
웹(Web)에서 HTML, CSS, JS의 역할
Frontend/HTML, CSS, JS 2021. 10. 27. 21:16

웹 개발을 위한 기초 언어 3가지 웹개발에서 사용하는 언어는 대표적으로 HTML, CSS, Javascript 3개가 있습니다. 프론트엔드(Front-end) 개발자라면 반드시 알아야 하는 언어중 하나입니다. 다른 프로그래밍 언어에 비해 쉽다고 생각할 수도 있지만, 또 그렇게 쉽지도 않아서 우습게봐선 안됩니다. 항상 기초가 튼튼해야한다는 것을 기억해야합니다. HTML 웹의 구조를 담당하는 HTML은 Hyper Text Markup Language의 약자입니다. 단순히 웹 페이지의 구조(뼈대)를 만들기 위해 사용하기 때문에 HTML만으로는 디자인적으로 예쁘게(?) 만들 수 없습니다. 애초에 용도가 꾸미기 위한 용도가 아니기 때문입니다. HTML과 HTML 태그에 대한 상세정보는 아래 링크 참고 2021.1..

Javascript 연, 월, 일 계산하기 (날짜 조작)
Frontend/HTML, CSS, JS 2020. 7. 3. 21:31

Javascript 에서 날짜 조작하기 현재 시간 가져오기 // 오늘 const today = new Date(); console.log(today.toLocaleString()); // 특정 날짜 const date = new Date(2020, 7, 2); console.log(date.toLocaleString()); 연도 더하기/빼기 setFullYear()와 getFullYear()를 활용 // 내년 const nextYear = new Date(2020, 7, 2); nextYear.setFullYear(nextMonth.getFullYear() + 1); console.log(nextYear.toLocaleString()); 월 더하기/빼기 setMonth()와 getMonth()를 활용 /..