본문 바로가기

소프트웨어

 (47)
[JavaScript] .js 파일 추가하여 코드 수정을 편하게 오늘은 .js 파일을 추가하여 코드 수정을 더 편하게 하는 방법을 배웠다. 이전에 사용했던 코드이다. 객체 개념을 활용하여 코드를 쉽게 수정하도록 했지만 .html 파일이 더 많아졌을 때 색깔을 수정해야 된다면 또 번거로워진다. .js 파일을 추가하여 이를 해결할 수 있다. WEB HTML CSS JavaScript JavaScript //내용 생략 1. .js 파일 추가 var Links = { setColor: function(color){ var alist = document.querySelectorAll('a'); var i = 0; while(i
[JavaScript] 객체 개념 활용 - 야간모드 예제 간결하게 오늘은 객체의 개념을 활용하여 이전까지 만들었던 야간모드 예제 코드를 중복을 더욱 줄이고 수정이 편리한 코드로 만들었다. 아래 코드를 보면 if문과 else문에서 "target.style.글자색깔"이 반복되는 것을 알 수 있다. 코드가 더욱 길어질 경우 글자색깔을 변경하기 어려울 것이다. 중복된 코드를 함수로 독립시키면 편하게 수정 가능하다. 편하게 수정 하기위해 객체 개념을 이용하여 최대한 반복을 줄여보겠다. WEB HTML CSS JavaScript JavaScript JavaScript (/ˈdʒɑːvəskrɪpt/), often abbreviated as JS, is a programming language that is one of the core technologies of the World ..
[JavaScript] 객체 기본 개념 예제 오늘은 객체의 기본 개념에 대해서 배웠다. 객체란 무엇인지, 객체의 데이터를 추출하는 방법 (반복문), 메소드를 배웠다. 우리는 정보량이 많아 졌을 때 서로 연관된 정보를 순서대로 정리정돈 하기 위해 배열을 사용했다. 많은 정보를 순서와 상관없이 정리정돈을 하기 위해서는 객체를 사용한다. 객체란 무엇인가 배열은 대괄호 []를 사용했고, 객체는 중괄호 {}를 사용한다. 객체로 사용할 데이터를 출력할 때 띄어쓰기가 필요할 경우에 대괄호 []를 사용하면 된다. coworkers["data scientist"] = "taeho"; document.write("data scientist : " + coworkers["data scientist"]+" "); Object Create 반복문을 이용한 객체 데이터 출..
[JavaScript] 함수 활용한 refactoring - 야간 모드 예제 간결하게 오늘은 함수를 이용하여 야간모드 버튼을 간결하게 바꾸는 작업을 배웠다. 지금은 night / day 버튼을 사용하는 간단한 예제를 만들었지만 나중에 다양한 용도를 추가하기 위해 함수를 활용하고 코드가 더 길어진다면 최대한 반복을 줄인 효율적인 코드가 필요하다. 이전 포스팅에서 사용한 예제의 일부분이다. WEB 지금은 야간모드 전환 버튼이 한개지만 버튼이 여러개가 될 경우에는 수정이 번거로워진다. 따라서 부분의 반복을 줄이기 위해 nightDayHandler() 함수를 만들고 버튼에 자바스크립트 코드를 넣을 것이다. 1. nightDayHandler() 함수 만들기 태그를 추가하여 버튼의 자바스크립트 코드를 넣는다. 주의) onclick 이벤트 안에서 this는 더이상 이벤트가 소속된 태그를 가리키지 않기..
[JavaScript] 웹 페이지 주간모드 야간모드 링크 색깔 변경 오늘은 웹 페이지 주간모드, 야간모드 적용시 링크 색깔도 변경하는 방법을 배웠다. 이전 포스팅에서 만든 웹사이트의 주간모드와 야간모드의 모습이다. 야간모드를 적용했을 때 링크 색깔이 잘 보이지 않아서 더 선명한 색으로 변경하려고 한다. WEB 이전에 사용했던 코드이다. 방법은 if문과 else 문에 코드를 추가하는 것이다. 추가하는 코드는 아래와 같다. var alist = document.querySelectorAll('a'); var i = 0; while(i
[JavaScript] 중복 제거를 위한 refactoring - 야간모드 예제 코드 간결하게 오늘은 코드의 중복된 부분을 제거하여 수정을 편하게 하는 방법인 refactoring에 대해 배웠다. 요즘 배우고 있는 코드는 짧고 간결하지만, 코드가 더 길어질 경우 중복된 부분이 많으면 수정하는 과정이 번거롭다. 이전에 작성한 코드이다. 1. 코드를 보면 만약 버튼의 개수가 여러개로 늘어났을 때 id값인 night_day를 수정할 과정이 번거로울 것이다. 2. document.querySelector도 여러번 반복되고 있다. WEB 1번 문제를 해결 하는 방법은 onclick과 같은 이벤트 안에서 실행되는 코드는 현재 코드가 속해 있는 태그를 가리키도록 약속돼 있는 특수한 키워드(this)를 사용하는 것이다. document.querySelector('night_day')를 this로 변경한다.
[JavaScript] 웹 페이지 야간모드 만들기 기초 - 하나의 버튼으로 이전 포스팅에서 night / day 두 버튼을 만들어서 야간 모드 / 주간 모드를 변경하는 기초를 배웠다 두 버튼을 하나의 버튼으로 만든다면 좀 더 편하게 사용할 수 있다. 조건문을 사용해서 이를 구현하였다. 이전 코드 WEB 조건문을 추가하면 night버튼을 누르면 야간모드가 되고(버튼이 day로 변경됨), day버튼을 누르면 주간모드가 된다. if 문 조건 값에 들어 갈 element의 value 값을 알아내는 방법은 아래 코드를 console 창에 입력하면 된다. document.querySelector('#id 값 입력').value 'javascript element get value'를 검색하면 알 수 있다. (https://stackoverflow.com/questions/4173391/g..
[JavaScript] 웹 페이지 야간모드 만들기 기초 예제 오늘은 웹 페이지에서 특정 버튼을 눌러 야간모드를 전환하는 예제를 만들어봤다. night버튼을 누르면 배경색이 검은색, 글자색이 흰색이 되고, day버튼을 누르면 배경색이 흰색, 글자색이 검은색이 되도록 하는 간단한 예제를 만들었다. 1. 야간 모드 동작 버튼을 만든다. night 버튼을 누르면 야간 모드, day 버튼을 누르면 주간 모드로 전환 된다. 2. 버튼을 클릭하면 배경색이 검은색이 되도록 한다. (야간모드) CSS에서 글자색이나 배경색을 변경할 때는 태그에 스타일 속성을 변경하는 방법을 사용했다. 하지만 CSS로 넣은 태그는 단순히 디자인을 변경해서 상호작용을 하기에는 부족하다. 우리는 태그에 style 속성을 상호작용에 의해 넣고 싶기에 JavaScript 문법에 따라 웹 브라우저에게 태그를..

티스토리툴바