황진하 / 2017-1-WebServiceProgramming-2012104136

Go to a project
Toggle navigation Toggle navigation pinning
황진하
64ec87c6 1 parent 0977b72a

Java Script 기초

Inline Side-by-side
Showing 32 changed files with 647 additions and 38 deletions
......@@ -7,25 +7,31 @@ var http = require('http'),
var DOCUMENT_ROOT = "../../05_CSS/";
var server = http.createServer(function(req, res) {
var reqPath = url.parse(req.url).pathname;
if (reqPath == "/") {
var reqPath = url.parse(req.url).pathname; // 패스를 파싱함
if (reqPath == "/") { // / 면 path에 해당 파일을 할당을 하라.
reqPath = "ex01.html";
}
// FullPath는 Path의 Join, cwd 현재 워킹 디렉토리랑, 도큐먼트 루트, requirementPath를 Join
var fullPath = path.join(process.cwd(), DOCUMENT_ROOT, reqPath);
// 이후 파일을 리딩함
fs.readFile(fullPath, "binary", function(err, file) {
if(err) {
if (err) {
// 파일 없으면 에러
if (err.code == "ENOENT") {
console.log("SEND 404 for " + req.url);
res.writeHeader(404, {"Content-Type": "text/html"});
res.writeHeader(404, { "Content-Type": "text/html" });
res.write("<h1>Not found</h1>");
res.end();
} else {
console.error("Error", err);
res.writeHeader(500, {"Content-Type": "text/plain"});
res.writeHeader(500, { "Content-Type": "text/plain" });
res.write(err + "\n");
res.end();
}
} else{
} else {
// 에러가 아닐경우 그대로 처리
console.log("SEND 200 for " + req.url);
res.writeHeader(200);
res.write(file, "binary");
......
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="./01_hello.js">
</script>
</head>
<body>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = Date();
</script>
</body>
</html>
\ No newline at end of file
document.write("<h1>Hello, World</h1>");
console.log("hello, world!!!");
function message() {
alert("Alert Message!!");
}
// 이거 잘 기억하기.
function test() {
document.getElementById('demo').innerHTML="message";
}
window.onload = test;
new Date();
document.write(Date()+"<br>");
var cur_time = new Date();
document.write(cur_time);
\ No newline at end of file
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="./02_Browser.js">
</script>
</head>
<body>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = Date();
</script>
</body>
</html>
\ No newline at end of file
alert("test"); // 메시지창띄움
var mywindow = window.open('','','width=200,height=100'); // 새창띄우기
if (confirm("Are you sure?")) {// Yes/No를묻는다이얼로그창띄움. Yes일때만true
console.log("Yes~");
}else{
console.log("No~");
}
varname = prompt("Enter name"); // 사용자의입력받는창띄움
console.log(varname);
mywindow.close();
history.back();
console.log(window.location.hostname);
//location.assign("http://www.naver.com");
//location.reload();
\ No newline at end of file
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="./Pr01_Math.js">
</script>
</head>
<body>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = Date();
</script>
</body>
</html>
\ No newline at end of file
var value = Math.PI;
document.write("<p>"+value+"</p>");
value = Math.sqrt(value);
document.write("<p>"+value+"</p>");
value = Math.round(value);
document.write("<p>"+value+"</p>");
\ No newline at end of file
"use strict"
var http = require('http');
var path = require('path');
var url = require('url');
var fs = require('fs');
var DOCUMENT_ROOT = "../Responsive_Web_Design/"; // 상대경로로 루트를 설정함.
// 서버를 생성함
var server = http.createServer(function(req, res) {
var reqPath = url.parse(req.url).pathname;
if (reqPath == "/") {
reqPath = "Responsive_Design_Quiz_2012104136.html";
}
var fullPath = path.join(process.cwd(), DOCUMENT_ROOT, reqPath);
fs.readFile(fullPath, "binary", function(err, file) {
if (err) {
// 파일 없으면 에러
if (err.code == "ENOENT") {
console.log("SEND 404 for " + req.url);
res.writeHeader(404, { "Content-Type": "text/html" });
res.write("<h1>Not found</h1>");
res.end();
} else {
console.error("Error", err);
res.writeHeader(500, { "Content-Type": "text/plain" });
res.write(err + "\n");
res.end();
}
} else {
console.log("SEND 200 for " + req.url);
res.writeHeader(200);
res.write(file, "binary");
res.end();
}
})
});
server.listen(3000, function() {
console.log("Server listening on http://localhost:3000");
});
\ No newline at end of file
# Logs
logs
*.log
# Runtime data
pids
*.pid
*.seed
# Directory for instrumented libs generated by jscoverage/JSCover
lib-cov
# Coverage directory used by tools like istanbul
coverage
# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
.grunt
# node-waf configuration
.lock-wscript
# Compiled binary addons (http://nodejs.org/api/addons.html)
build/Release
# Dependency directory
# https://docs.npmjs.com/cli/shrinkwrap#caveats
node_modules
# Debug log from npm
npm-debug.log
var express = require('express');
var path = require('path');
var favicon = require('serve-favicon');
var logger = require('morgan');
var cookieParser = require('cookie-parser');
var bodyParser = require('body-parser');
var sassMiddleware = require('node-sass-middleware');
var index = require('./routes/index');
var users = require('./routes/users');
var app = express();
// view engine setup
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'ejs');
// uncomment after placing your favicon in /public
//app.use(favicon(path.join(__dirname, 'public', 'favicon.ico')));
app.use(logger('dev'));
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));
app.use(cookieParser());
app.use(sassMiddleware({
src: path.join(__dirname, 'public'),
dest: path.join(__dirname, 'public'),
indentedSyntax: true, // true = .sass and false = .scss
sourceMap: true
}));
app.use(express.static(path.join(__dirname, 'public')));
app.use('/', index);
app.use('/users', users);
// catch 404 and forward to error handler
app.use(function(req, res, next) {
var err = new Error('Not Found');
err.status = 404;
next(err);
});
// error handler
app.use(function(err, req, res, next) {
// set locals, only providing error in development
res.locals.message = err.message;
res.locals.error = req.app.get('env') === 'development' ? err : {};
// render the error page
res.status(err.status || 500);
res.render('error');
});
module.exports = app;
#!/usr/bin/env node
/**
* Module dependencies.
*/
var app = require('../app');
var debug = require('debug')('app02:server');
var http = require('http');
/**
* Get port from environment and store in Express.
*/
var port = normalizePort(process.env.PORT || '3000');
app.set('port', port);
/**
* Create HTTP server.
*/
var server = http.createServer(app);
/**
* Listen on provided port, on all network interfaces.
*/
server.listen(port);
server.on('error', onError);
server.on('listening', onListening);
/**
* Normalize a port into a number, string, or false.
*/
function normalizePort(val) {
var port = parseInt(val, 10);
if (isNaN(port)) {
// named pipe
return val;
}
if (port >= 0) {
// port number
return port;
}
return false;
}
/**
* Event listener for HTTP server "error" event.
*/
function onError(error) {
if (error.syscall !== 'listen') {
throw error;
}
var bind = typeof port === 'string'
? 'Pipe ' + port
: 'Port ' + port;
// handle specific listen errors with friendly messages
switch (error.code) {
case 'EACCES':
console.error(bind + ' requires elevated privileges');
process.exit(1);
break;
case 'EADDRINUSE':
console.error(bind + ' is already in use');
process.exit(1);
break;
default:
throw error;
}
}
/**
* Event listener for HTTP server "listening" event.
*/
function onListening() {
var addr = server.address();
var bind = typeof addr === 'string'
? 'pipe ' + addr
: 'port ' + addr.port;
debug('Listening on ' + bind);
}
{
"name": "app02",
"version": "0.0.0",
"private": true,
"scripts": {
"start": "node ./bin/www"
},
"dependencies": {
"body-parser": "~1.17.1",
"cookie-parser": "~1.4.3",
"debug": "~2.6.3",
"ejs": "~2.5.6",
"express": "~4.15.2",
"morgan": "~1.8.1",
"node-sass-middleware": "0.9.8",
"serve-favicon": "~2.4.2"
}
}
body
padding: 50px
font: 14px "Lucida Grande", Helvetica, Arial, sans-serif
a
color: #00B7FF
var express = require('express');
var router = express.Router();
/* GET home page. */
router.get('/', function(req, res, next) {
res.render('index', { title: 'Express' });
});
module.exports = router;
var express = require('express');
var router = express.Router();
/* GET users listing. */
router.get('/', function(req, res, next) {
res.send('respond with a resource');
});
module.exports = router;
<h1><%= message %></h1>
<h2><%= error.status %></h2>
<pre><%= error.stack %></pre>
<!DOCTYPE html>
<html>
<head>
<title><%= title %></title>
<link rel='stylesheet' href='/stylesheets/style.css' />
</head>
<body>
<h1><%= title %></h1>
<p>Welcome to <%= title %></p>
</body>
</html>
# Logs
logs
*.log
# Runtime data
pids
*.pid
*.seed
# Directory for instrumented libs generated by jscoverage/JSCover
lib-cov
# Coverage directory used by tools like istanbul
coverage
# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
.grunt
# node-waf configuration
.lock-wscript
# Compiled binary addons (http://nodejs.org/api/addons.html)
build/Release
# Dependency directory
# https://docs.npmjs.com/cli/shrinkwrap#caveats
node_modules
# Debug log from npm
npm-debug.log
var express = require('express');
var path = require('path');
var favicon = require('serve-favicon');
var logger = require('morgan');
var cookieParser = require('cookie-parser');
var bodyParser = require('body-parser');
var index = require('./routes/index');
var users = require('./routes/users');
var app = express();
// view engine setup
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'jade');
// uncomment after placing your favicon in /public
//app.use(favicon(path.join(__dirname, 'public', 'favicon.ico')));
app.use(logger('dev'));
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));
app.use(cookieParser());
app.use(express.static(path.join(__dirname, 'public')));
app.use('/', index);
app.use('/users', users);
// catch 404 and forward to error handler
app.use(function(req, res, next) {
var err = new Error('Not Found');
err.status = 404;
next(err);
});
// error handler
app.use(function(err, req, res, next) {
// set locals, only providing error in development
res.locals.message = err.message;
res.locals.error = req.app.get('env') === 'development' ? err : {};
// render the error page
res.status(err.status || 500);
res.render('error');
});
module.exports = app;
#!/usr/bin/env node
/**
* Module dependencies.
*/
var app = require('../app');
var debug = require('debug')('app03:server');
var http = require('http');
/**
* Get port from environment and store in Express.
*/
var port = normalizePort(process.env.PORT || '3000');
app.set('port', port);
/**
* Create HTTP server.
*/
var server = http.createServer(app);
/**
* Listen on provided port, on all network interfaces.
*/
server.listen(port);
server.on('error', onError);
server.on('listening', onListening);
/**
* Normalize a port into a number, string, or false.
*/
function normalizePort(val) {
var port = parseInt(val, 10);
if (isNaN(port)) {
// named pipe
return val;
}
if (port >= 0) {
// port number
return port;
}
return false;
}
/**
* Event listener for HTTP server "error" event.
*/
function onError(error) {
if (error.syscall !== 'listen') {
throw error;
}
var bind = typeof port === 'string'
? 'Pipe ' + port
: 'Port ' + port;
// handle specific listen errors with friendly messages
switch (error.code) {
case 'EACCES':
console.error(bind + ' requires elevated privileges');
process.exit(1);
break;
case 'EADDRINUSE':
console.error(bind + ' is already in use');
process.exit(1);
break;
default:
throw error;
}
}
/**
* Event listener for HTTP server "listening" event.
*/
function onListening() {
var addr = server.address();
var bind = typeof addr === 'string'
? 'pipe ' + addr
: 'port ' + addr.port;
debug('Listening on ' + bind);
}
{
"name": "app03",
"version": "0.0.0",
"private": true,
"scripts": {
"start": "node ./bin/www"
},
"dependencies": {
"body-parser": "~1.17.1",
"cookie-parser": "~1.4.3",
"debug": "~2.6.3",
"express": "~4.15.2",
"jade": "~1.11.0",
"morgan": "~1.8.1",
"serve-favicon": "~2.4.2"
}
}
body {
padding: 50px;
font: 14px "Lucida Grande", Helvetica, Arial, sans-serif;
}
a {
color: #00B7FF;
}
body
padding: 50px
font: 14px "Lucida Grande", Helvetica, Arial, sans-serif
a
color: #00B7FF
var express = require('express');
var router = express.Router();
/* GET home page. */
router.get('/', function(req, res, next) {
res.render('index', { title: 'Express' });
});
module.exports = router;
var express = require('express');
var router = express.Router();
/* GET users listing. */
router.get('/', function(req, res, next) {
res.send('respond with a resource');
});
module.exports = router;
<h1><%= message %></h1>
<h2><%= error.status %></h2>
<pre><%= error.stack %></pre>
extends layout
block content
h1= message
h2= error.status
pre #{error.stack}
<!DOCTYPE html>
<html>
<head>
<title><%= title %></title>
<link rel='stylesheet' href='/stylesheets/style.css' />
</head>
<body>
<h1><%= title %></h1>
<p>Welcome to <%= title %></p>
</body>
</html>
extends layout
block content
h1= title
p Welcome to #{title}
doctype html
html
head
title= title
link(rel='stylesheet', href='/stylesheets/style.css')
body
block content
html{
html {
background-color: white;
color: black;
padding: 20px 0;
font: 14px/28px "맑은 고딕", "Malgun Gothic", "굴림", "Gulim", Verdan, Arial, Tahoma;
}
p.Screen_Text{
p.Screen_Text {
color: green;
}
......@@ -21,22 +21,22 @@ h1.title {
color: black;
}
h3.subtitle{
h3.subtitle {
font-size: 1.5em;
white-space:nowrap;
background-color:lightgoldenrodyellow;
white-space: nowrap;
background-color: lightgoldenrodyellow;
text-align: center;
border-radius: 20px;
width: 99%;
}
img.mainimage{
img.mainimage {
display: block;
margin: auto;
width: 40%;
}
ul.squre{
ul.squre {
list-style-type: square;
}
......@@ -45,24 +45,24 @@ table {
margin: 15px;
}
table, th, td {
table,
th,
td {
border: 1px solid black;
}
@media only screen and (min-width : 768px) {
@media only screen and (min-width: 768px) {
div.image {
display: inline-block;
vertical-align: top;
}
div.academic{
div.academic {
width: 40%;
display: inline-block;
vertical-align: top;
padding-left: 1em;
box-sizing: border-box;
}
div.description {
width: 99%;
display: inline-block;
......@@ -70,47 +70,40 @@ table, th, td {
padding-left: 1em;
box-sizing: border-box;
}
p.Screen_Text{
p.Screen_Text {
color: red;
}
}
div.description p {
margin-top: 0;
}
.member ul > li {
.member ul>li {
width: 25%;
}
}
@media only screen and (min-width : 1025px) {
@media only screen and (min-width: 1025px) {
div.image {
width: 30%;
}
div.description {
width: 50%;
padding-right: 1em;
}
div.academic {
width: 19%;
float:right;
float: right;
box-sizing: border-box;
display: inline-block;
vertical-align: top;
}
p.Screen_Text{
p.Screen_Text {
color: blue;
}
div.member > h3.subtitle{
}
div.member>h3.subtitle {
font-size: 20pt;
width:70%;
width: 70%;
}
.member ul > li {
.member ul>li {
font-size: 14pt;
width: 100%;
}
......
......@@ -34,9 +34,8 @@
<h3 class="subtitle">소개</h3>
<ul class="squre">
<li>
<p> 본인을 소개하는 소개란 입니다. 아래는 소개용 텍스트 예시입니다. 텍스트 예시 텍스트 예시 텍스트 예시 텍스트 예시 텍스트 예시 텍스트 예시 텍스트 예시 텍스트 예시 텍스트 예시 텍스트
예시 텍스트 예시 텍스트 예시 텍스트 예시 텍스트 예시 텍스트 예시 텍스트 예시 텍스트 예시 텍스트 예시 텍스트 예시 텍스트 예시 텍스트 예시 텍스트 예시 텍스트 예시 텍스트
예시 텍스트 예시 텍스트 예시 텍스트 예시 텍스트 예시 텍스트 예시 텍스트 예시 텍스트 예시</p>
<p> 본인을 소개하는 소개란 입니다. 아래는 소개용 텍스트 예시입니다. 텍스트 예시 텍스트 예시 텍스트 예시 텍스트 예시 텍스트 예시 텍스트 예시 텍스트 예시 텍스트 예시 텍스트 예시 텍스트 예시 텍스트 예시 텍스트 예시 텍스트 예시 텍스트 예시 텍스트 예시 텍스트 예시 텍스트 예시 텍스트 예시 텍스트 예시 텍스트 예시 텍스트 예시 텍스트 예시 텍스트 예시 텍스트 예시 텍스트 예시 텍스트 예시 텍스트 예시 텍스트 예시
텍스트 예시 텍스트 예시 텍스트 예시</p>
</li>
<li>
<p class="Screen_Text"> Witdh가 768px 이하 일시 모바일 화면이며, 해당 글씨가 초록색으로 표시됩니다.</p>
......