<html>
<head>
<script>
function listen_key()
{
key = event.keyCode;
h1 = document.getElementsByTagName('h1');
text = h1[0].innerHTML;
text = text + String.fromCharCode(key);
h1[0].innerHTML = text;
}
</script>
</head>
<body onkeydown='listen_key()'>
<h1> input key: </h1>
</body>
<html>
| 데이터 전달 (0) | 2018.02.20 |
|---|---|
| CGI(PHP) (0) | 2018.02.19 |
| 웹의이해 (JavaScript) (0) | 2018.02.12 |
| Apache 서버 (0) | 2018.02.12 |
| 웹의 이해(html) (0) | 2018.02.08 |
client side script language
- HTML, javascript, XML , ...
JavaScript
- client side script language
0. hello, javascript
출력 코드
- alert() //출력문 printf와 비슷함.
- console.log() //입력한 값이 콘솔 창에 출력
- document.write() //그 페이지에 보임
입력 코드
confirm
아래 그림에서 확인을 누르면 True 가 취소를 누르면 False가 입력된다.
document.write
홈페이지에 뜨게 된다.
prompt //scnaf와 같은 입력문
1. 연산자 : 산술 , 논리 , 비트 , 관계 , 증감
javascript 는 같다와 같지 않다를 == != 가 아닌
===와 !== 로 사용
이런식으로 다르기 때문이다.
2. 변수 : 일반(정수, 실수 , 문자)
배열
- 변수 선언 할 때 앞에 var 을 붙여 준다.
- 변수의 타입 확인 typof [대상]
3. 제어문 : 분기(if/sw), 반복(for,while)
4. 함수
기본 구조
<script>
</script>
한줄에 여러 코드를 사용할 경우 ;을 붙여야 한다.
위와 같은 경우가 아닐 때는 안붙여도 된다 붙이는 것을 추천
실습
야구게임 : 숫자 맞추기 게임
- 임의의 숫자 : 503
- 중복된 숫자는 없다.
숫자만 같으면 볼 자리 까지 같으면 스트라이크 아무 것도 없으면 OUT
ex ) input: 123 -> 2 out 1 strike
input: 052 -> 2 ball 1 out
소스
alert('야구 게임 시작!');
num = '503';
var snt = 0;
var bnt = 0;
var out = 0;
var ext = 5;
while(ext >0){
snt = 0;
bnt = 0;
out = 0;
input = prompt("숫자 입력:");
for(var i=0;i<=2;i++){
fout=0;
if(input[i] === num[i]){
snt ++; fout =1;}
for(var j=0;j<=2;j++){
if( (i!==j) && input[i] === num[j] ) {
bnt ++; fout =1;}
}
if(!fout){
out++;}
}
if(snt === 3){
alert("승리하셨어요^.^");
break; }
else{
alert(snt + 'strike' + bnt + 'ball'+out + 'out');
}
ext --;
alert(ext + "번 남았습니다.");
if(ext === 0){
alert("패배하셨습니다.");}
}
DOM(Document Object Model)
- 문서에 대한 모든 내용을 담고 있는 객체
많이 쓰는 객체
-document
-history
1. 요소에 대한 접근
-getElementsByTagName
document.getElementsByTagName('p');
p에 대한 태그 내용들을 가져온 것이다.
이런식으로 배열 형태로 그 값을 알 수 있다.
이런식으로 그 태그의 값을 변경할 수 있다.
style도 추가 할 수있다.
document로 다양한 표현
<!doctype html>
<html>
<head>
<script>
function mouse_over()
{
x= document.getElementsByTagName('h1');
x[0].setAttribute("style","color:red");
x[0].innerText = "클릭해줭";
}
function mouse_out(){
x= document.getElementsByTagName('h1');
x[0].setAttribute("style","color:black");
x[0].innerText = "Javascript Test";
}
</script>
</head>
<body>
<h1 onmouseover="mouse_over()" onmouseout="mouse_out()">Javascript Test</h1>
</body>
</html>
마우스를 글씨에 가져다 두었을 떄 밑에와 같이 변한다.
-getElementsById
-getElementsByClassName
BOM(Browser Object Model)
- 브라우저에 대한 모든 내용을 담고 있는 객체
| 데이터 전달 (0) | 2018.02.20 |
|---|---|
| CGI(PHP) (0) | 2018.02.19 |
| 키입력 받아서 화면에 출력 (0) | 2018.02.14 |
| Apache 서버 (0) | 2018.02.12 |
| 웹의 이해(html) (0) | 2018.02.08 |
Apache 다운
HTML -> WEB Server
#yum -y install httpd
service httpd start 로 실행시킨다.
netstat -ant 를 입력하여 포트번호 80번이 뜨면 열린 것이다.
확인해보기 위해 자신의 리눅스 ip를 url에 입력해본다
apache의 홈 디렉토리 확인
- /var/www
cat /etc/passwd 를 이용해 확인
cd /var/www로 이동
문서들의 홈 디렉토리 : html
이런식으로 html 안에 있는 모든 파일은 url을 통해 열 수 있다.
전에 만들어 두었던 내용들을 html 파일로 옮긴다.
index.html 라고 저장하면 그 저장한 페이지가 도메인을 쳤을 때 그 페이지가 뜬다.
다시 자신의 서버 아이피를 입력하면
자신이 만들었던 결과가 뜬다.
좀 더 쉽게 그냥 자기가 만든 파일을 rz를 이용해 옮기면 더 쉽다.
rz 패키지 다운
yum -y install lrzsz
| 데이터 전달 (0) | 2018.02.20 |
|---|---|
| CGI(PHP) (0) | 2018.02.19 |
| 키입력 받아서 화면에 출력 (0) | 2018.02.14 |
| 웹의이해 (JavaScript) (0) | 2018.02.12 |
| 웹의 이해(html) (0) | 2018.02.08 |
최초로 공개된 웹 페이지(1989년)
- 문서 공유를 위해 나옴.
1. WEB 1.0
1). HTML(Hyper-Text Markup-Language)
- 언어라고 하기에는 부족 : 분기, 반복 , 함수 . . . 존재x
- HTML5: html + javascript
- 문서 표준 : 태그로 표현
head : 화면에 보이지 않는 것들
body : 화면에 보여지는 내용들
2). 태그(tag) Vs. 요소(elements)
- 컨텐츠(화면에 보여지는 내용)의 타입을 정하는 용도
- <tag name> contents </tag name>
opening tag , begin tag , closing tag, end tag
- <tag name/> : self clsing
3). 문서 표준
1~2 : block tag
inline tag : img ...
3-1). 글자를 표현할 수 있는 태그
1. 제목 : heading
- <h1> ~ <h6> //번호가 높아질수록 작은 제목을 표현
확장자를 html로 변경하여 저장한 후, 웹브라우저를 실행 시키면 아래와 같이뜬다.
태그가 있고와 없고의 차이
아래 그림 처럼 표준제약을 지키지 않아도 되긴한다. 표준이라 쓴 것이다.
2. 본문,문단, 단락 , ..
paragraph : <p>
<span>
<div>
enter와 같은 것 : <br> 딱히 표준을 안지켜도 되지만
지키 려면 <br> </br> 같이 한쌍으로 표현
3. 목차 : list 항목 : list item -> <li>
1). 정렬된 리스트 : ordered list
<ol> </ol>
2). 비정렬된 리스트 : unordered list
<ul> </ul>
3-2) 그림을 표현할 수 있는 태그
이미지 : image -> <img>
<img> . . . <img>
<img / >
[속성] : attribute
- 오프닝(시작) 태그에 작성
- 요소별로 속성항목은 다를 수 있다.
<img src="path"> //이미지 삽입
<img width ="가로" height="높이" src="path">
<img src="path"> //이미지 삽입
<img width ="가로" height="높이" src="path">
1. 개별 속성
2. 글로벌 속성
- 이벤트 속성 : 마우스,키보드, . . .
- 스타일 속성 -> CSS(Casding Style Sheet )
- id, class
id 와 class
1. id : 유일한 요소를 표현
<p id="unique"> 어디에 기대 살아갈까 <br>
나를 스쳐가는 그 모든 것들이 상처인데</p>
이런식으로 id를 설정할 수 있다.
#을 이용하여 사용 한다.
#unique {
color : red;
}
2. class : 여러 요소를 표현
<p class="multi">내뱉는 숨마다<br>
가시 돋친 고통이어서 <br>
깊은 곳에 숨겨둔 사랑 또한<br>
그저 지워 내고</p>
이런식으로 class를 설정할 수 있다.
.을 이용하여 사용 한다.
.multi{
color : green;
}
CSS ( Cascading Style Sheet )
확장자명 .css로 저장
- link : 해당 문서와 연결된 정보
다른 메모장에 style의 정보를 입력하고 .css로 저장
원래 소스가 있는 메모장에서
style이 있던 head 부분을
<link type= "파일의 타입" href= "파일의경로" rel= "무엇을 표현하는지" />
<link type= "text/css" href= "style.css" rel= "stylesheet" />
로 변경
라이브러리 처럼 인식해 언제든지 꺼내 사용 가능
3-3) 표를 표현할 수 있는 태그
표 :table
<table>
<thead>
<tr> //표의 한줄
<td></td> //표의 한칸
</tr>
</thead>
<tbody>
</tbody>
<tfoot>
</tfoot>
</table>
속성을 추가 했을 때
(참고사이트https://www.w3schools.com)
table style ="테두리: 색 : 선 굵기"
rowspan ="칸" : 원하는 칸 만큼 합침
3-4). 링크를 표현할 수 있는 태그
링크 : anchor , link
- 하이퍼 링크
-anchor: <a href="path|url"> 링크문자 </a>
네이버를 클릭하게 되면 내가 적은 사이트로 이동되게 된다.
번외
1. style 속성을 이용한 스타일 지정
2. <style> 태그를 이용한 방법(head 부분에 사용 )
<style>
selector {
}
</style>
*selector: tag name , id , class
노래가사 페이지 만들기
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
color: blue;
text-align: center;
}
p {
color : white;
text-align: left;
}
body {
background-image:url("http://cphoto.asiae.co.kr/listimglink/6/2018020711081799066_1517969294.jpg");
background-repeat: no -repeat;
background-size : 120% 120%;
</style>
</head>
<body>
<h1> My Way</h1>
<p> 흐르는 물결이<br>
내 발목에 감겨 나가면 <br>
깊은 곳에 숨겨둔 아픈 기억<br>
모두 살아나고</p>
<p> 어디에 기대 살아갈까 <br>
나를 스쳐가는 그 모든 것들이 상처인데</p>
<p>그댈 그린 밤들이<br>
내게 욕심이란 걸 맘 아프게 알아 <br>
나를 택한 운명이<br>
행여 그댈 맴돌아 붙잡지 못하게 <br>
이제 그대 곁에서 떠나가 </p>
<p>내뱉는 숨마다<br>
가시 돋친 고통이어서 <br>
깊은 곳에 숨겨둔 사랑 또한<br>
그저 지워 내고</p>
<p>어디에 기대 살아갈까 <br>
나를 스쳐가는 그 모든 것들이 상처인데</p>
<p>그댈 그린 밤들이<br>
내게 사치라는 걸 맘 아프게 알아 <br>
나를 택한 운명이<br>
행여 그댈 맴돌아 붙잡지 못하게 <br>
이제 그대 곁에서 떠나가</p>
<p>언젠가 그대 곁에 다시 돌아갈 수 있다면<br>
그때가 언제라도 나를 잊지 않았다면 </p>
<p>그댈 그린 날들이<br>
내게 마지막 남은 기쁨이었단 걸 <br>
내가 택한 운명이<br>
다른 무엇이 아닌 그대뿐이라는 걸</p>
<p>이제 그대 곁에서 영원히</p>
</body>
</html>
2. 참고 사이트
1). 동영상 강의
- 생활코딩 (유튜브)
2). 코딩 교육 : codecademy.com
멋쟁이 사자처럼
부트 스트랩 , Materialize : 디자인에 관련된 사이트
| 데이터 전달 (0) | 2018.02.20 |
|---|---|
| CGI(PHP) (0) | 2018.02.19 |
| 키입력 받아서 화면에 출력 (0) | 2018.02.14 |
| 웹의이해 (JavaScript) (0) | 2018.02.12 |
| Apache 서버 (0) | 2018.02.12 |
