배열(array) 객체 데이터가 많아지면서 서로 연관된 데이터끼리 잘 정리정돈해서 담아 두는 수납상자로 주로 반복문과 같이 사용한다. 배열은 배열 요소의 값이 하나의 자료형이 아닌 여러 종류의 객체를 혼합해서 지정할 수 있다는 특징이 있다. Array Syntax get add count 배열 만들기(쓰기) 배열객체변수명 = new Array() 배열객체변수명 = new Array(배열크기) 배열객체변수명 = new Array(배열요소1, 배열요소2, ..., 배열요소n) : 초깃값을 지정하는 방식 배열객체변수명 = ["데이터값", "데이터값"] 배열 불러오기(읽기) 데이터 불러오기 : document.write(변수명[0]); 데이터 갯수 불러오기 : document.write(변수명.length); ..
ALL
리팩토링(Refactoring) 공장으로 다시 보낸다. 개선한다. 코딩을 하다보면 코드가 비효율적으로 작성된다. 그 때 코드의 효율성, 가독성을 높여서 유지보수 하기 편리하게 만들고 중복된 코드를 낮추는 방향으로 코드를 다시 개선하는 작업을 리팩토링이라고 한다. 리팩토링을 잘해야 복잡한 프로그램을 만들 때 좋은 프로그램으로 만들 수 있다. 조건문 리팩토링 문제점 1. 버튼을 추가로 넣을 때마다 ID값을 새로 만들어줘야 한다. 2. document.querySelector('body')가 중복으로 사용된다. 리팩토링 1. 자기자신을 가르키는 키워드인 this를 사용한다. document.querySelector('#night_day') 부분을 this로 수정하고 #night_day를 삭제. 2. 변수를 사..
조건문 하나의 프로그램의 여러 실행 경로 중에서 조건에 따라 하나의 경로를 선택하기 위한 문장으로 조건에 따라서 다른 순서대로 기능들이 실현된다. if문, if-else문 주어진 조건식의 참과 거짓에 따라 2개의 실행 경로 중 하나를 선택. if(boolean타입 조건식){ 문장(들); } else{ 문장(들);} IF-true IF-false switch문 하나의 표현식을 판단하여 다중 선택이 가능한 구조를 제공. 각 case문의 값과 비교해 일치하는 문장을 실행. switch(표현식){ case 값1 : 문장(들); break; case 값n : 문장(들); break; default : 문장(들) } 조건문으로 주/야간 모드 버튼 통합하기 선택자의 value값을 night로 변경 document.q..
이벤트(event) 이벤트(event) "마우스 버튼을 클릭하는 경우", "키보드를 누르는 경우" 등 어떤 특정한 사건이나 동작을 의미. 이벤트 핸들러(event handler) 이벤트가 발생 할 때 마다 적당한 처리가 이루어지기 위해 이벤트 핸들러가 필요하다. 이벤트에 대응하는 처리 내용을 이벤트 핸들러로 작성하고 등록하면 이벤트가 발생 시 자동으로 등록 된 이벤트 핸들러가 수행된다. 이벤트 이름 앞에 on을 붙여 표기하며, HTML 태그의 한 속성으로 사용된다. 형식 :
변수(variable) 데이터를 저장하는 공간 데이터를 저장할 때 쓰이는 '이름이 붙은 저장소' 변수 선언 let 키워드를 사용해 변수를 생성 let 변수명; 변수안에 데이터 할당 할당 연산자 = 사용 변수명 = '데이터값' 한 줄에 여러 변수 선언 가능 : let 변수1 = 값1, 변수2 = 값2, 변수3 = 값3; let 을 사용할 경우 변수 선언은 한 번만 가능(여러 번 선언시 에러 발생) use strict 없이 할당하면 let을 사용해서 변수선을 하지 않고, 단순 할당만으로 변수가 생성 됨 변수 명명 규칙 식별자(identifier)란 변수나 함수의 이름을 사용하기 위해 프로그래머가 만든 단어로 규칙이 있다. 이름의 첫 글자는 반드사 문자나, '_', '$'로 시작해야 하고 숫자로 시작 할 수 ..
코드 구조 문(statement) syntax structure, command 의미 코드엔 원하는 만큼 문을 작성 가능 가독성을 높이기 위해 서로 다른 줄에 작성 세미클론(semicolon) 서로 다른 문은 세미클론으로 구분하지만 생략 가능 줄 바꿈이 있으면 암시적 세미클론으로 해석 : 세미클론 자동 삽입 됨 세미클론 자동 삽입이 작동하지 않는 상황 도 있음 : 대괄호 앞에서는 줄바꿈을 세미클론으로 해석하지 않음 alert('에러 발생!') //세미클론을 붙이지 않으면 다음 문장 에러발생 [1,3].forEach(alert) 주석(comment) // 한 줄짜리 주석 이 주석을 만나면 그 줄은 다 주석처리 단축키 Ctrl + / (Mac : Cmd + /) /* */ 여러 줄 주석 /*를 만나면 */ ..
자바스크립트의 선언 1. 내부 스크립트 방식 : script 태그 2. 외부 스크립트 방식 : 외부파일(*.js) 불러오기 경로는 절대경로 현재 페이지에서의 상대경로 모두 사용 가능 URL 주소를 속성값으로 사용가능 한 페이지에서 복수의 스크립트 태그 사용 가능 단, src 속성을 사용할 경우 내부 스크립트는 사용 불가 3. 인라인 스크립트 방식 : 이벤트 속성값으로 JS코드 삽입하기 이벤트란? 웹브라우저 위에서 일어나는 일들을 이벤트라고 함 이벤트가 일어 날 때 속성을 실행하게 하는 것으로 on으로 시작하는 여러가지 이벤트가 존재함 이벤트 뒤에 속성값으로는 반드시 JS 코드를 사용해야 함 자바스크립트 개발 통합 개발 환경 (Integrated Development Environment, IDE) 프로젝..
JavaScript란?라이브스크립트 확장시킨 것넷스케이프사(라이브스크립트 만듦), 선 마이크로시스템사(자바 만듦)의 공동 프로젝트로 탄생웹페이지에 생동감을 붙여넣기 위해 탄생동적 웹페이지 : 사용자와 상호작용할 수 있도록 기능 추가해, HTML이 담고 있는 정보들을 움직이게 만들어 준다엔진(브라우저 일 경우 내장 엔진)이 스크립트 읽음 => 스크립트를 기계어로 전환 => 기계어 전환된 코드 실행JavaScript로 하는 일웹의 요소 제어 : 메뉴바, 탭화면 처럼 같은 공간에서 다른 콘텐츠를 보여줄 수 있다. 로그인, 회원가입시 유효성검사를 할 수 있다.웹 애플리케이션 : 지도길찾기서비스, 정보시각화 등 자바스크립트로 구현해서 동작하는 웹 사이트를 만들 수 있다.다양한 라이브러리 : 프레임워크 - Reac..
숫자 2개의 입력을 받고 2개를 더한 값을 출력하는 프로그램 사용하는 함수 - scanf(), printf() /* 홍정모의 따라하며 배우는 C언어 간단한 입출력 프로그램 만들기 */ #include int main() { int i = 0, j = 0, sum = 0; // 변수는 무조건 초기화하는것을 권장 printf("Input two integers\n"); scanf("%d%d", &i, &j); sum = i + j; printf("Your numbers are %d and %d\n", i, j); printf("%d \+ %d = %d\n", i, j, sum); return 0; } 원을 입력 받으면 달러로 변환해서 출력하는 프로그램 사용하는 함수 - scanf(), printf() /* ..
WEB2 - CSS WEB2 - CSS - 생활코딩수업소개 이 수업은 https://opentutorials.org 를 만들어가면서 CSS에 대한 지식과 경험을 동시에 채워드리기 위한 목적으로 만들어진 수업입니다. 수업대상 이 수업은 웹 페이지를 아름답게 디자인opentutorials.org 생활코딩에서 'WEB2 - CSS'강의를 수강했다. HTML강의를 통해 내가 만들고 싶은 웹서비스를 기획하고 웹 페이지를 만들었다. 내가 만든 웹 페이지에 디자인 효과를 추가하기 위한 CSS 수업을 들으면서, 수업을 통해 내가 하고 싶은 것은 크게 두가지였다. 반복된 효과를 사용하는데 같은 코드를 반복적으로 작성하면서 프론트엔드는 막노동 같다는 생각을 했기 때문에 이를 간편하게 적용시키고 싶었다. 다른 웹페이지들에..
