본문 바로가기

코딩36

자바스크립트 JavaScript 배열 array 만들기, 값 불러오기, 값 개수 세기, 값 추가하기 배열 array는 특정 변수를 선언한 후 해당 변수에 순차적으로 여러 개의 값 data를 저장합니다. 값의 종류가 수백, 수천 개씩 많아지면 관리가 어렵습니다. 특정 변수로 값을 모으고 배열 array를 지정하여 값을 추가하거나 제거하는 등 다양한 방법으로 관리할 수 있습니다. 배열 array에 저장된 값 data들은 작성된 순서에 따라 0, 1, 2, 3 등 인덱스를 갖습니다. 배열 array의 개념을 이해하기 위해 예제 코드를 만들어 보겠습니다. 자바스크립트 array 배열 만들기 배열 array는 자바스크립트의 html 버전 태그인 자바스크립트 array 값 가져와 웹페이지에 출력하기 변수를 지정해 만든 배열의 값을 불러와 사용해보겠습니다. 값을 불러와서 웹페이지에 출력하는 자바스크립트 명령의 ht.. 2020. 9. 8.
리팩토링 - 중복 제거하여 코드 효율화하기 - this , var 키워드 활용 좋은 프로그램은 간결한 코드로 이루어집니다. 코드에 중복된 내용을 제거하고 간결한 구조로 유지 보수하는 것을 리팩터링이라 합니다. 아래 예시는 버튼 한 개를 클릭할 때마다, 배경화면 및 본문의 글자색을 변경하는 코드입니다. 버튼의 값이 night 일 때 클릭하면, 배경이 네이비색으로 바뀝니다. 글자색은 노란색으로 바뀌며 버튼 안의 값 night는 day로 변경됩니다. sample text 반면에 버튼의 값이 day일 때 클릭하면, 배경색은 하늘색으로 바뀝니다. 글자색은 검정이 되며 버튼 안의 값은 night로 변경됩니다. 이 버튼을 2개 더 추가해보겠습니다. 태그를 복사해서 2 군데에 붙여 넣습니다. 버튼을 클릭해보면 처음 버튼은 문제없이 잘 작동합니다. 그러나 두 번째, 세 번째 버튼의 속성 값 nig.. 2020. 9. 6.
html onclick 속성과 자바스크립트를 활용해 서식 변경 버튼 만들기 night 버튼을 클릭하면 배경색은 검정, 글자색은 흰색으로 변경됩니다. 다시 한번 클릭해도 변함없이 페이지가 그대로 출력됩니다. 기본적인 태그를 우선 작성합니다. night가 적힌 버튼을 생성합니다. 버튼을 클릭하면 동적 언어인 자바스크립트 문법이 작동하며 배경을 검은색으로, 글자는 흰색으로 변경합니다. 본문 텍스트는 text text text로 간단히 작성해놓겠습니다. text text text if 조건문 사용하여 배경색 및 글자 서식 바꾸는 버튼 활성화하기 배경이 검은색이고 본문의 글자가 흰색인 타입 A와 배경이 흰색이고 본문의 글자가 검은색인 타입 B를 버튼 하나로 변경할 수 있도록 하겠습니다. night 버튼을 누르면 배경이 검은색, 본문의 글자는 흰색인 타입 A로 변경되면서 버튼 안의 글자는.. 2020. 9. 6.