초기 페이지 구현 해시 (frag identifier) : 사용자에게 url 통해 접근하고 싶을 때 사용 (북마크 기능) (예) 세 번째 문단으로 가게 하고 싶을 때 three . . . . 해시뱅 Hash Bang (!#) 강의만으로는 이해가 되지 않는 부분이 있어 구글에 검색해 보았다. 나중에 아래 글들 다시 한 번 더 읽어보기. 해시뱅(#!)에 대해서... :: Outsider's Dev Story 해시뱅을 처음 본 것은 작년에 트위터가 새로운 웹사이트를 선보였을 때입니다.제 트위터 계정인 http://twitter.com/outsideris로 접속하면 http://twitter.com/#!/outsideris로 리다이렉트 되는데 URL의 중간에.. blog.outsider.ne.kr 해시뱅(Has..
생활코딩/JavaScript
fetch API 기본 사용법 1) 경고창 fetch('html') ; html 파일에 있는 내용 경고창으로 띄우고 싶으면 ' alert(text) ; 모든 작업이 끝난 후 호출. text 변수 안에는 서버가 응답한 데이터가 들어있음 2) 웹페이지의 내용 바꾸고 싶을 때 fetch API의 요청과 응답 fetch('html'); : fetch 함수 ; 첫 번째 인자로 전달된 데이터를 서버에게 요청. → Asynchronous (비동기적) ; 동시에 실행. 병렬적. fetch API - response 객체 1) 둘 다 같은 의미의 함수. function callmeback() { console.log('response end'); } callmeback = function(){ console.log('r..
: colors.js 파일에 겹치는 부분 저장해놓고, 위 코드 이용해 파일 불러오기. (웹페이지에 포함시키기) => 캐싱, 시간과 돈 절감 가능! 라이브러리와 프레임워크 라이브러리 : 땡겨와서 쓰는 느낌 (JQuery) 프레임워크 : 안에 들어가서 쓰는 느낌 공통점 - 다른 사람과 협력할 때 사용 JQuery를 쓰고 싶을 때 (예1) $('a').css("color", color); $('a') : 모든 a 태그를 JQuery로 제어하겠다는 의미 css라는 함수를 JQuery가 대신 만들어 둔 것 아래 코드와 같은 의미 (아래 코드처럼 반복문 안 쓰고, 한 줄로 대체 가능) var alist = document.querySelectorAll('a'); var i = 0; while(i < alist.le..
객체 객체 ; 폴더의 관점. (이름이 있는 정리정돈 상자). 중괄호 { } 써줌 (배열에서는 대괄호[ ]) 메소드 : 객체에 소속된 함수 프로퍼티 : 객체에 소속된 변수 (예) document.querySelector('body').style.color = color; ① 객체 만들기 (예1) var coworkers = { "programmer" : "egoing", "designer" : "leezche" }; coworkers → object access operator. programmer, designer → key (배열에서는 index) egoing, leezche → coworkers[key] (예2) var Body = { setColor:function(color){ document.q..
함수 예1) function onePlusOne(){ document.write(1+1+' '); } => 호출 시 : onePlusOne(); 예2) function sum(left, right){ document.write(left+right+' '); } => 호출 시 : sum(2, 3); left, right -> 매개변수 (parameter) 2,3 -> 인자 (argument) 생활코딩 WEB2 JavaScript
배열 1) 배열 생성 var coworkers = ["egoing", "leezche"]; 2) .push ; 배열 끝에 데이터 추가 coworkers.push('duru'); 3) .length ; 배열 안의 데이터 갯수 세기 document.write(coworkers.length); 배열과 반복문 1) 배열과 반복문 var i = 0; while(i
제어할 태그 선택하기 1) 선택 document.querySelector('body') 2) 자바스크립트 style. (body 태그에 적을 때는 ) document.querySelector('body').style.backgroundColor = "black"; 비교 연산자와 Boolean 데이터 타입 1) === : 둘이 같나 비교 1 === 1 // output : True 2) < ; less than ( : value가 'night'일 때 클릭하면, id가 'night_day'인 value를 'day'로 바꿈 리팩토링 (refactoring) ; 코드의 효율성 좋고, 읽기 좋게 개선 1) this 이용해 코드 간단히 작성 가능 2) target 변수 이용해 중복 코드 처리 가능 생활코딩 WE..
HTML과 JavaScript의 만남 2 (이벤트) 이벤트(event) ; 웹브라우저에서 일어나는 사건들 中 사용자에게 유용할 만한 것들 정의. (상호작용 가능) - onclick, onchange, onkeydown 등의 속성 onclick="alert('hi')" : 뒤에 속성값이 반드시 자바스크립트가 와야 함. 버튼 눌러야 " " 안의 내용 수행. HTML과 JavaScript의 만남 3 (콘솔) 보고 있는 웹페이지에 대해 JavaScript 파일 만들지 않고 콘솔 이용해 JavaScript 즉석 실행 가능 1) Ctrl+Shift+I (또는 오른쪽 마우스 누르고 '검사' 누르기) 2) Console 탭 누르기 (또는 Esc 누르기) ex. alert(' '.length) 치고 Enter 누르면 '..
수업의 목적 태그 이용해 버튼 만들기 가능 - type 속성 - value 속성 - onclick 속성 : 속성의 값으로 JavaScript가 와야 함. onclick 속성이 위치하고 있는 버튼을 클릭했을 때, 자바스크립트 코드 실행함. ∴ '자바스크립트는 HTML을 제어하는 언어다.' HTML과 JavaScript의 만남 1 (script 태그) ① HTML은 정적. ② CODE JavaScript 1+1 OUTPUT 1+1 2 (자동 계산) 태그 HTML 코드로 자바스크립트 시작. 태그 안에 자바스크립트 와야 함. 생활코딩 WEB2 JavaScript 수업 시작! 수업의 목적 - 생활코딩 수업의 목적 2017-12-01 03:17:47 opentutorials.org HTML과 JavaScript의 ..
