'Front-End'에 해당되는 글 28건
-
JS 소스코드 작성방법
2017.03.07 -
JS 기본 문법
2017.03.07 -
자바스크립트 정체
2017.03.04 -
JavsScritp - onload 방식
2017.01.29 -
JavaScritp - 외부 파일 로드
2017.01.29 -
JavaScritp - Script 태그
2017.01.29 -
JavaScritp - inline 방식
2017.01.29 -
JavaScript - 소개
2016.12.07
JS 소스코드 작성방법
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<meta http-equiv="x-ua-compatible" content="IE=edge">
<title>template</title>
<link href="../../_common/css/style.css" rel="stylesheet" type="text/css">
</head>
<body>
<header>
<div class="header-contents">
<h1>제목</h1>
<h2>부제목</h2>
</div><!-- /.header-contents -->
</header>
<div class="main-wrapper">
<section>
</section>
</div><!-- /.main-wrapper -->
<footer>JavaScript Samples</footer>
<script>
console.log('많이 먹는 손님이다');
</script>
</body>
</html>
다이렉트 작성방법
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<meta http-equiv="x-ua-compatible" content="IE=edge">
<title>2-02_tag</title>
<link href="../../_common/css/style.css" rel="stylesheet" type="text/css">
</head>
<body>
<header>
<div class="header-contents">
<h1>자바스크립트는 어디에 작성하나?</h1>
<h2>자바스크립트 파일 읽기</h2>
</div><!-- /.header-contents -->
</header>
<div class="main-wrapper">
<section>
<p>브라우저의 콘솔을 열어주세요.</p>
</section>
</div><!-- /.main-wrapper -->
<footer>JavaScript Samples</footer>
<script src="script.js"></script>
<script>
console.log('많이 먹는 손님이다');
</script>
</body>
</html>
script.js // 파일
// 외부 자바스크립트 파일
/*
외부 자바스크립트 파일은
읽은 후 바로 실행된다
*/
console.log('옆 손님은');
<scritp src="HTML 파일 위치를 기준으로 한 경로"></scritp>
외부파일 작성방법
HTML5
'Front-End > JavaScript' 카테고리의 다른 글
| 자바스크립트 문법 - IF 문 (0) | 2017.03.08 |
|---|---|
| 요소 가져오기 (0) | 2017.03.08 |
| JS 기본 문법 (0) | 2017.03.07 |
| 자바스크립트 정체 (0) | 2017.03.04 |
| JavsScritp - onload 방식 (0) | 2017.01.29 |
JS 기본 문법
무언가 실행하고 싶을때는 oo를 xx해라 명령
console은 '테스트'를 log해라
Console.log('테스트')
자바스크립트로 브라우저에게 무언가 시키려면 ○○는 △△를 XX해라
▷ ○○는 에 해당하는 것을 객체(Object)라고 한다
▷ XX해라에 해당하는 것을 메서드(Method)라고 한다.
▷ △△를 에 해당하는 것을 매개변수(parameter)라고 한다.
console . log ('테스트');
객체 메서드 매개변수
(지시대상) (지시내용) ()안에 텍스트나 수식을 표시한다 .dir() .error()
반드시 () 실행 의미
() 중요함
매개변수(파라미터) ~ 지시에 필요한 정보
'테스트' 기호 = 문자열
16+15 수식 = 31 숫자
'16+15' 16+31 문자열
기호에 따라 숫자로 인식 or 문자열 인식함
'Front-End > JavaScript' 카테고리의 다른 글
| 요소 가져오기 (0) | 2017.03.08 |
|---|---|
| JS 소스코드 작성방법 (0) | 2017.03.07 |
| 자바스크립트 정체 (0) | 2017.03.04 |
| JavsScritp - onload 방식 (0) | 2017.01.29 |
| JavaScritp - 외부 파일 로드 (0) | 2017.01.29 |
자바스크립트 정체
자바스크립트 기능 2가지
1. HTML & CSS 실시간 변경하는 기능
2. 비동기 통신(AJAX)이라고 하는 웹 페이지와 웹서버 간이 데이터 전송 기능
(웹 페이지 전체를 다시 불러오지 않고도 새로운 데이터를 가져올 수 있음으로 페이 내에 있는 콘텐츠를 바로 갱신 함)
HTML 웹 문서
CSS 디자인
JavaScritp 제어
정적인 데이터(HTML CSS) 를 실시간으로 변경해서 일부 콘테츠를 변경하거나 이미지 슬라이드 쇼같은 동작을 구현 함
★자바스크립트 핵심 기능★
브라우저에 표시된 HTML 이나 CSS를 변경함
브라우저에 표시된 HTML 이나 CSS에서 원하는 정보를 읽음
자바스크립트 프로그래밍 동작구조
프로그래밍 단계
입력 > 가공 > 출력
단가를 가져온다 단가 X 수량 HTML 변경
수량을 가져온다
이벤트 처리 시작
이벤트 발생
ㅣ입력 > 가공 > 출력
rs = 이벤트, 입력, 가공, 출력
'Front-End > JavaScript' 카테고리의 다른 글
| JS 소스코드 작성방법 (0) | 2017.03.07 |
|---|---|
| JS 기본 문법 (0) | 2017.03.07 |
| JavsScritp - onload 방식 (0) | 2017.01.29 |
| JavaScritp - 외부 파일 로드 (0) | 2017.01.29 |
| JavaScritp - Script 태그 (0) | 2017.01.29 |
JavsScritp - onload 방식
demo1.html
<!DOCTYPE html>
<html>
<head>
<script src="scritp2.js"></script>
</head>
<body>
<input type="button" id="hw" value="Hello world" >
</body>
</html>
window.onload = function(){ 태그를 통해서 <body> 태그 안에 hw 를 미리 로드를 해서 브라우저가 해석하는데 빠르게 핵석할수 있도록 한다
script2.js
window.onload = function(){
var hw = document.getElementById('hw');
ht.addEventListener('click', function(){
alert('Hello world');
})
}
'Front-End > JavaScript' 카테고리의 다른 글
| JS 기본 문법 (0) | 2017.03.07 |
|---|---|
| 자바스크립트 정체 (0) | 2017.03.04 |
| JavaScritp - 외부 파일 로드 (0) | 2017.01.29 |
| JavaScritp - Script 태그 (0) | 2017.01.29 |
| JavaScritp - inline 방식 (0) | 2017.01.29 |
JavaScritp - 외부 파일 로드
demo1.html
<!DOCTYPE html>
<html>
<head>
<title>JavaScript inline 방식 </title>
</head>
<body>
<!-- HTML 코드에 Script 코드 -->
<input type="button" id="hw" value="Hello world" >
<script src="./scritp.js"></script>
</body>
</html>
script.js
<script type="text/javascript">
var hw = document.getElementById('hw');
hw.addEventListener('click', function(){
alert('Hello world');
})
브라우저에 있는 캐쉬를 통해서 scritp.js 를 미리 다운로드 받음
똑같은 scritp.js 를 요청하면 서버에 요청해서 받는것이 아니라
이미 받아져있는 캐쉬 파일을 읽음으로 인하여 부화를 줄일수 있음(Latency)
'Front-End > JavaScript' 카테고리의 다른 글
| 자바스크립트 정체 (0) | 2017.03.04 |
|---|---|
| JavsScritp - onload 방식 (0) | 2017.01.29 |
| JavaScritp - Script 태그 (0) | 2017.01.29 |
| JavaScritp - inline 방식 (0) | 2017.01.29 |
| JavaScript - 소개 (0) | 2016.12.07 |
JavaScritp - Script 태그
<!DOCTYPE html>
<html>
<head>
<title>JavaScript inline 방식 </title>
</head>
<body>
<!-- HTML 코드에 Script 코드 -->
<input type="button" id="hw" value="Hello world" >
<script type="text/javascript">
var hw = DOCTYPE.getElementById('hw');
hw.addEventListener('click', function(){
alert('Hello world');
})
</script>
</body>
</html>
'Front-End > JavaScript' 카테고리의 다른 글
| 자바스크립트 정체 (0) | 2017.03.04 |
|---|---|
| JavsScritp - onload 방식 (0) | 2017.01.29 |
| JavaScritp - 외부 파일 로드 (0) | 2017.01.29 |
| JavaScritp - inline 방식 (0) | 2017.01.29 |
| JavaScript - 소개 (0) | 2016.12.07 |
JavaScritp - inline 방식
<!DOCTYPE html>
<html>
<head>
<title>JavaScript inline 방식 </title>
</head>
<body>
<!-- HTML 코드와 JavaScript 코드 -->
<input type="button" onclick="alert('Hello world')" value="Hello world" >
</body>
</html>
'Front-End > JavaScript' 카테고리의 다른 글
| 자바스크립트 정체 (0) | 2017.03.04 |
|---|---|
| JavsScritp - onload 방식 (0) | 2017.01.29 |
| JavaScritp - 외부 파일 로드 (0) | 2017.01.29 |
| JavaScritp - Script 태그 (0) | 2017.01.29 |
| JavaScript - 소개 (0) | 2016.12.07 |
JavaScript - 소개
HTML = 웹문서
CSS = 웹 문서를 디자인(예쁘게~)
JavaScritp = 웹문서를 제어
J-Query = JavaScritp 를 편하게 사용하기 위한 프레임워크 (적케 코드를 작성하고 많이 사용한다)
통칭해서 JavaScritp 는 서버 사이트 스크립트 언어 그리고 웹 브라우저
현재는 자바스크립트가 웹 브라우저를 제어만 하는것이 아니라...
웹서버로 사용한다
JavaScritp - Ajax = 비동기 통신방식
JavsScritp - angular.js
JavsScritp - Node.js
웹서버 <- 요청 <- 웹 브라우저
웹서버 -> 응답 -> 웹 브라우저
기존에 웹서버 백엔드 사용 언어 = Java, php, python가 있는데... 현재 웹서버를 제어할수 있게 발전된 언어가 Node.js
그 동안 java, php, python 언어들이 하던것을 javaScript로 가능하게 되었다 - 핵심
개발툴 : http://www.sublimetext.com/3
개발툴 : https://atom.io/
자바 스크립트는 프로그래밍 적으로 웹 브라우저를 제어한다.
onclick="alert('Hello World')"
탈 웹브라우저
웹서버를 동작하게 한다.
서버 사이드 스크립트
(자바스크립가 웹 브라우저에서 사용하는것은
클라이언트 사이드 스크립트)
웹서버 <----요청---- 웹 브라우저
웹서버 ----응답----> 웹 브라우저
PHP 웹
JAVA
PYTHON
JavaScritp
기존에는 웹 브라우저를 제어했었던 자바스크립트
현재는 웹 서버를 제어하는 자바스크립트
= 자바스크립트를 웹 서버에서 사용하게 하는 기술의 대표가
Node.js
자바스크립트가 브라우저에서 벗어나서 서버 언어로 발전 = 탈웹
출처 : 생활코딩
https://www.youtube.com/watch?v=PZIPsKgWJiw
'Front-End > JavaScript' 카테고리의 다른 글
| 자바스크립트 정체 (0) | 2017.03.04 |
|---|---|
| JavsScritp - onload 방식 (0) | 2017.01.29 |
| JavaScritp - 외부 파일 로드 (0) | 2017.01.29 |
| JavaScritp - Script 태그 (0) | 2017.01.29 |
| JavaScritp - inline 방식 (0) | 2017.01.29 |
