줄라이퍼스트

api key를 안받으신분은 2020/02/27 - [ajax 수업] - ajax - API 활용-1 (unsplash.com와 nytimes.com) 가셔서 api key를 발급받으세요! ※ 1. unsplash와 nyt - API 사용하여 이미지 검색하기(jQuery활용) index.html What are you interested in today? what are you interested in today? style.css html { box-sizing: border-box; } *, *::before, *::after { box-sizing: inherit; } body { background: #fafbfc; font-family: OpenSans, sans-serif; margin: 0;..

※ 1. unsplash - API 사용하여 이미지 검색하기 https://unsplash.com/developers 사이트에 접속을하여 회원가입! 회원 가입을 한 후 https://unsplash.com/oauth/applications 접속을 하여 애플리케이션을 만든후 api key를 발급받는다 index.html What are you interested in today? what are you interested in today? style.css html { box-sizing: border-box; } *, *::before, *::after { box-sizing: inherit; } body { background: #fafbfc; font-family: OpenSans, sans-seri..

CRUD 실습 예제 ※ 1. 데이터 요청방식 (get()) CRUD_html GET POST PUT DELETE input name : price : output server.js // 모듈 추출 var http = require('http'); var express = require('express'); var cors = require('cors'); var bodyParser = require('body-parser'); // 변수를 선언합니다. var items=[{ name: '우유', price: '2000' },{ name:'홍차', price: '5000' },{ name:'커피', price:'5000' }]; // 웹 서버 생성 var app = express(); app.use(exp..

AJAX란?Asynchronous JavaScript and XML의 약자로, 말 그대로 JavaScript와 XML을 이용한비동기적 정보 교환 기법이다. CRUD 실습 예제 ※ 1. 데이터 요청방식 (get()) GET POST PUT DELETE input name : price : output server.js (서버 파일 하나로 계속 유지) // 모듈 추출 var http = require('http'); var express = require('express'); var cors = require('cors'); var bodyParser = require('body-parser'); // 변수를 선언합니다. var items=[{ name: '우유', price: '2000' },{ name:..

※ 1. node.js 실습 - 레스토랑 메뉴 // 모듈 추출 var http = require('http'); var express = require('express'); var bodyParser = require('body-parser'); // 변수를 선언합니다. var resmenu=[{ name: '뉴욕 스트립 스테이크', price: '37,000' },{ name:'엠파이어 스테이크', price: '67,000' },{ name:'시그니처 스테이크 & 쉬림프', price:'41,000' }]; // 웹 서버 생성 var app = express(); app.use(express.static('homepage')); app.use(bodyParser.urlencoded({extended:..

AJAX란? Asynchronous JavaScript and XML의 약자로, 말 그대로 JavaScript와 XML을 이용한 비동기적 정보 교환 기법이다. ※ 1. Ajax 요청을 활용한 동적 요소 생성 - html data_html_async.html server.js // 모듈 추출 var http = require('http'); var express = require('express'); var cors = require('cors'); var bodyParser = require('body-parser'); // 변수를 선언합니다. var items=[{ name: '우유', price: '2000' },{ name:'홍차', price: '5000' },{ name:'커피', price:'..

※ 1. 요청 형식에 따른 웹 서비스 - put/products:id형태 // 모듈 추출 var http = require('http'); var express = require('express'); var bodyParser = require('body-parser'); // 웹 서버 생성 var app = express(); // 변수를 선언합니다. var items=[{ name: '우유', price: '2000' },{ name:'홍차', price: '5000' },{ name:'커피', price:'5000' }]; app.use(bodyParser.urlencoded({extended: false})); app.get('/products', function(request,response){..

※ 1. 응답형식에 따른 웹 서비스 - html형태 // 모듈 추출 var http = require('http'); var express = require('express'); // 웹 서버 생성 var app = express(); // 변수를 선언합니다. var items=[{ name: '우유', price: '2000' },{ name:'홍차', price: '5000' },{ name:'커피', price:'5000' }]; app.all('/data.html', function(request,response){ var output =''; output += ''; output += ''; output += ''; output += ''; items.forEach(function(item){ ..

※ 1. add적용-before(), after() Insert before Insert after ※ 1. 실행화면 ※ 2. add적용-afeter(text) Click the button to insert text after the image. Insert after ※ 2. 실행화면

※ removeClass() 사용 Heading 1 Heading 2 This is a paragraph. This is another paragraph. Remove class from elements ※ 실행화면