본문 바로가기

분류 전체보기

 (79)
jQuery todo 리스트 페이지 동적 화면 적용 JSONJavascript Object Notation 의 약자자바스크립트 객체를 자바스크립트 외부로 전송하기 위해 문자열 형태로 표현데이터가 간결하고 사람이 이해하기 쉬움JSON.parse 를 이용해 JSON 을 자바스크립트 객체로 변환JSON.stringify 를 이용해 자바스크립트 객체를 JSON 으로 변환Data 어트리뷰트HTML 엘리먼트에 데이터를 저장$().data(‘key’, ‘value’) 로 값 저장$().data(‘key’) 로 값 접근1. Todo 리스트가 갖춰야 할 기능1. 할 일을 입력할 수 있어야 한다.2. 입력된 할 일을 목록에 표시해야 한다.3. 삭제 버튼으로 항목을 제거할 수 있어야 한다.4.체크박스를 이용해 완료 상태를 표시할 수 있어야 한다.Todo 앱은 이 네 가지 기..
jQuery todo 리스트 기초 활용 Todo list 기능할 일을 기록할 수 있다저장된 일을 목록으로 보여준다할 일을 삭제 할 수 있다완료 상태로 만들 수 있다CSS 파일 추가하기CSS는 HTML에 스타일을 적용하기 위해 사용한다.HTML 내부 Todo list스타일을 HTML 내부에 직접 작성한다.구조와 디자인이 섞여 관리가 불편하다.외부 CSS 파일 방식todo.css.red { color: #ff0000;}HTML 연결Todo listCSS를 별도 파일로 분리한다.HTML과 스타일을 따로 관리할 수 있다.여러 페이지에서 동일한 CSS를 재사용할 수 있다.외부 CSS 방식을 사용하는 이유HTML과 디자인이 분리되어 구조가 깔끔해진다.여러 페이지에서 재사용 가능하다.유지보수와 수정이 쉽다.Todo 화면 구성사용자가 할 일을 입력할 ..
JQuery 소개 및 기본함수 jQuery정의Jquery는 또 다른 하나의 언어가 아님자바스크립트 단순화 라이브러리특징빠르고,작고,기능이 많은 JavaScript라이브러리HTML문서 조작,이벤트 처리,애니메이션,Ajax와 같은 것들을 간편하게사용하게 함업계에서는 표준에 가까운 점유율을 가지고 있음라이브러리자주 사용되는 함수,기능들을 재활용 가능하도록 만든 묶음javascript는 다양한 라이브러리를 보유(jQuery,React,Moment,lodash 등)jQuery는 javascript 프로그래밍 시에 도움이 되는 여러 함수들을 제공jQuery vs JavaScript$("#continue").text("NextStep...");document.getElementById("continue").innerHTML ="Nextstep....
4회차 오답 노트 getElementByClassName 는 class 속성에 해당 클래스 이름을 가진 태그를 여러 개를 선택한다. 객체는 키, 값으로 구성된다 filter()는 조건을 만족하는 값만 골라서 새 배열을 만든다.function(value) numbers 배열에서 값을 하나씩 꺼낼 때 그 값을 value라는 이름으로 받아 처리함
자바스크립트 반복문(while문, For문) 반복문While문조건이 참인 동안 코드블록을 반복반복 횟수가 불 명확한 경우 주로 사용For문while(조건){ … 코드블록 … }배열안의 요소를 하나씩 꺼내며 반복배열의 길이만큼 처럼 반복 횟수가 명확한 경우 주로 사용for(var{변수}of{배열}){ //코드 블록 }배열안의 요소를 하나씩 꺼내 {변수}에 저장하고 코드 블록을 실행반복문의 활용퀴즈 프로그램 알고리즘덧셈 결과를 맞추는 프로그램 작성임의의 두 수 생성정답을 맞출 때까지 계속 시도function max(arr) { var _max = -99999; // 아주 작은 수 for (var i of arr) { if (i > _max) { _max = i } } return _..
자바스크립트 조건문(if, if~else, switch, break문) 제어문프로그램의 실행 흐름을 제어할 때 사용대표적으로 조건문과 반복문이 있음조건문조건에 따라 코드 블록의 실행 여부 결정if(조건){//코드 블록 }switch(조건) { //코드 블록 }if ... else 문형식조건이 참인 경우 코드 블록 1만 실행조건이 거짓인 경우 코드블록 2만 실행If(조건){//코드 블록1}else{//코드 블록2}else if문을 추가함으로 써 여러 조건문을 연결 할 수 있음형식조건 1이 참인 경우: (1)만 실행조건 2가 참인 경우:(2)만 실행…(생략)…모두 거짓인 경우:(3)만 실행if (조건1){(1)}elseif(조건2){(2)}….(생략)….else{(3)}switch형식switch(조건) {case조건1:…,case조건2:…,case조건3:…default: 수식}..
자바스크립트 함수(정의, 호출, 배열 객체, 이벤트) 함수특정 기능을 하는 구문(알고리즘,로직)을 독립된 형태로 만드는 것변수에 저장할 수 있는 한가지 자료형함수 구조 형식var {함수명}=function(){//저장할 코드 }- 축약 형식 : function{함수명}(){//저장할 코드 }함수 실행{함수명}()로 저장된 코드를 실행var sayHello = function() { condole.log('Hello~');}sayHello();//같은 코드function sayHello(){ console.log('Hello~');}함수에 값 전달하기함수에 저장된 코드를 실행할 때 값을 전달할 수 있음매개변수 사용 함수 형식function{함수명}(값1,값2,…){}값1,값2,…매개변수라고 함코드 블럭 안에서 전달 받은 값 사용 가능함수에 전달하는 값을 ..
자바스크립트 객체, 외장객체, 내장객체(Math, Date) 객체기능이 유사한 것들 모아둔 집합체객체의 구성:속성(Property)메써드(Method)ex) 자동차 객체속성 : 차의 색깔, 차의 모양(오픈카, …) …메써드 : 전진, 후진, 좌회전, 우회전 …하나의 배열에 복합 데이터를 저장예 : 학생정보학생 이름 뿐만 아니라 학생의 학번, 성별, 주소 등을 같이 저장객체는 키와 값의 쌍으로 복합 정보를 저장객체 저장 형식{ “키1”: “값1”, “키2”: “값2”, … (생략) }객체의 요소에 접근 방식{객체명}.{키} 형식객체의 한 키/값 쌍을 프로퍼티라 함괄호 표기법객체의 프로퍼티에 접근하는 방법{객체명}[’{프로퍼티명}’]중첩 객체객체의 프로퍼티의 값으로 객체를 가질 수 있음객체 안에 다른 객체 저장 가능예제 : 학생 객체이름 프러퍼티 안에 성 프러퍼티와 ..

티스토리툴바