이진욱의코딩

DOM(DOCUMENT OBJECT MODEL) 문서 객체 모델(DOM)은 HTML, XML 문서의 프로그래밍 인터페이스이다. DOM은 문서의 구조화된 표현을 제공하여 그들의 문서 구조 및 스타일, 내용 등을 변경할 수 있게 돕니다. DOM은 구조화된 노드와 프로퍼티와 메서드를 갖고 있는 OBJECT로 문서를 표현한다. 이들은 웹 체이지를 스크립트 또는 프로그래밍 언어들에서 사용될 수 있게 연결시켜주는 역할을 담당한다. ※특징 웹페이지는 일종의 문서이다. 이 문서는 웹 브라우저를 통해 그 내용이 해석되어 웹 브라우저 화면에 나타나거나 HTML 소스 자체로 나타나기도 한다. 동일한 문서를 사용해 이처럼 다른 형태로 나타날 수 있다는 점에 주목할 필요가 있다. DOM은 동일한 문서를 표현하고 서저장, 조작하..

저번 시간에 했던 내용의 연장선으로 설명해 드리겠습니다. Loop & array js jongho jinwook undong seyeon Sanggeol 만약 태그 대신 목록이 아주 복잡한 태그입니다. 이처럼 서로 연관된 대이터들을 담는 방법이 배열입니다. 그리고 그 배열에 담긴 데이터를 순차적으로 꺼내서 라는 태그를 만드는 역할을 반복문이 할 수 있습니다. co workers 코드 실행을 4번 반복하는 코드를 작성했습니다. 0부터 시작해서 while문의 중괄호 안의 코드가 실행될 때마다 i값을 1씩 증가하게 합니다. 이번에는 co workers라는 변수에 할당된 배열에서 반복문이 실행될 때마다 원소 값을 하나하나 가져와 태그 안에 배치하기만 하면 됩니다. i라는 변수를 사용해서 i는 0부터 1씩 증가해..

배열(array)란 데이터가 많아짐에 따라 그 많은 데이터를 그냥 둘 수 없기 때문에 데이타 중에서 서로 연관된 데이터를 잘 정리 정돈해서 담아두는 일종의 수납상자라고 생각하면 된다. 배열은 대괄호로 시작해 대괄호로 끝이난다. 예를 들어 ["banana", "tomato"]로 둘 수 있으며 값과 값사이는 콤마(,)로 구분이 가능합니다. var coworkers = ["engoing", "leezche"] coworkers라는 변수에 배열이라는 새로운 데이터 타입이 담긴 것입니다. 이제는 배열에 들어있는 항목을 가져오는 방법에 대해 설명드릴게요. get 첫 번째 자리에 있는 값은 0번째라는 뜻입니다. 이를 인덱스(index)라고 합니다. 인덱스0번은 engoing이 되고 인덱스1은 leezche라는 데이터..

이번 시간에는 리 펙터 링(refactoring)에 대해 살펴보겠습니다. 리 펙터 링이란 코드의 가독성을 높이고, 유지보수를 편리하게 만들고, 중복된 코드를 줄이는 방향으로 코드를 개선하는 작업을 뜻합니다. 앞서 만든 코드에서 비효율적인 측면들을 제거하는 사례를 보여드릴게요. 앞서 작성한 코드입니다. 만약 night버튼의 기능을 페이지 하단에도 보이게 하고 싶을 수 있습니다. 이를 위해 하단에 불어넣기를 하겠습니다. web html css js javascript란 무엇인가? 웹 페이지에서 사용자로부터 특정 이벤트나 입력 값을 받아 동적인 처리를 목적으로 고안된 객체 기반의 스크립트 프로그래밍 언어. 사용자 경험을 향상시키기 위한 방법으로 주로 사용된다. 일반적으로 HTML 문서에 내재되며, 브라우저에서..

지금까지 비교 연산자, 불리언, 조건문이라고 하는 보기에 따라 상당히 관념적으로 볼 수 있는 도구들을 살펴봤는데, 이번 수업에서는 이러한 관념적인 도구들이 얼마나 현실에서 구체적인 도움을 주는지 알아보겠습니다. 일단 기본코드부터 살펴봅시다. 여기서 아래에 버튼을 한 개 더 만들어 봅시다. 위의 코드를 밑에 불어넣기를 하면 됩니다. 여기서 이번 포스팅의 주인공인 if문을 써서 조건을 줘 봅시다. if night document.querySelector('body').style.backgroundColor = 'black'; document.querySelector('body').style.color = 'white'; else document.querySelector('body').style.backgro..

이번 시간에는 불리언과 비교연산자를 어디에 쓰는지 살펴보겠습니다. 우선 코드를 먼저 봅시다. program True&False 에 적힌 코드를 먼저 살펴보면 차례대로 출력이 되는 것을 볼 수 있습니다. 밑의 부터 코드를 보시면 if문을 이용해서 작성을 했습니다. 결과를 살펴보자면 코드가 순서대로 출력은 되지만 '3'은 출력이 되지 않는모습을 볼 수 있습니다. 즉, 코드의 실행 순서가 바뀐 것을 알 수 있는데 else에 적힌 코드를 무시하는 방향으로 진행됐습니다. 이번에는 true대신 false를 넣어 프로그램을 실행시켜 봅시다. '1'을 출력하는 부분이 먼저 실행되고 if문에 지정한 값이 false이므로 else안의 코드가 실행되고, 이어서 '4'가 출력되는 모습을 볼 수 있습니다. 즉, if문의 뒤에 ..