D3는 SVG(Scalable Vector Graphics)를 통해 시각적 요소를 생성하고 조작하는 일을 하는데 무척 유용하다.
| [JSP] JSP 페이지로 Web 에서 Linux 의 tail -f 명령어와 같이 Log 를 보여주는 방법 (0) | 2015.11.28 |
|---|---|
| 프론트엔드(Front-end) 와 백엔드(back-end) (0) | 2015.10.14 |
| 자바 스크립트 핵심 개념 (0) | 2015.09.11 |
| JSON 이란?? (0) | 2015.09.11 |
| 웹 기초 (0) | 2015.09.09 |
1. 동적 타입
-> 변수에 저장할 정보가 어떤 타입인지 사전에 지정할 필요가 없다
tip) 변수 타입이 궁금할때는 typeof를 이용하면 됨
2. 변수 호이스팅(hoisting)
-> 자바스크립트는 보통 위에서 아래 순서대로 진행될거라 기대하지만, 실제로 그렇지는 않다.
-> 반복문에 변수가 선언 되었을 경우 변수가 속한 함수 컨텍스트의 최상단으로 끌어올려진다.
이 때문에 변수 명이 충돌하는 문제가 발생 할 수 있다.
ex) var numLoops =100;
for(var i =0 ; i < numLoops; i++){
console.log(i);
}
위와 같은 코드를 짜면
다음과 같이 동작한다.
var numLoops =100;
var i;
for(i=0 ; i < numLoops; i++){
console.log(i);
}
3. 함수 단위의 유효범위
프로그램에서 변수 유효범위(variable scope)은 어떤 변수가 어떤 컨텍스트에서 접근 가능한지를 알려 주는 개념이다.
일반 적인 프로그램 언어는 {} 단위로 블록을 설정 하지만 자바스크립트는 함수레벨에서 유효범위를 갖는다. 즉 자바스크립트는 블록이 아니라 변수가 속한 함수 기준으로 접근을 제한한다.
4. 전역 네임스페이스
-> 네임 스페이스 개념 http://www.joy24.net/78
프로젝트가 복잡해지면 네임스페이스 충돌 문제가 발생할 수 있다
이를 해결 하기 위한 방안은 다음과 같다.
- 함수 안에서만 변수를 선언한다. 보통은 실현하기 어렵지만, 함수 레벨 유효 범위는 다른 변수와의 충돌을 막아 준다.
-전역 객체를 하나 선언하고, 그 객체에 필요한 전역 변수를 모두 추가 한다.
| 프론트엔드(Front-end) 와 백엔드(back-end) (0) | 2015.10.14 |
|---|---|
| SVG 가 뭦지?? (0) | 2015.09.11 |
| JSON 이란?? (0) | 2015.09.11 |
| 웹 기초 (0) | 2015.09.09 |
| python 간단한 웹서버 (0) | 2015.09.08 |
JSON ( JavaScript Object Notation)
-> 데이터를 자바스크립트 객체로 최적화 시키는 문법 명세
JSON 은 XML과 비슷한 개념이라고 보면된다.
쉽게 생각하면 자바스크립티의 객체 형태이고, 이름 여러 사람이 쓸 수 있도록 만든 것이다.
var jsonFruit = {
"kind": "grade",
"color": "red",
"quantitiy":12,
"tasty": true
}
대표 적인 예로 GeoJSON이 있는데 이는 지리 정보를 저장할 목적으로 최적화한 JSON객체의 특정한 형태이다.
| 프론트엔드(Front-end) 와 백엔드(back-end) (0) | 2015.10.14 |
|---|---|
| SVG 가 뭦지?? (0) | 2015.09.11 |
| 자바 스크립트 핵심 개념 (0) | 2015.09.11 |
| 웹 기초 (0) | 2015.09.09 |
| python 간단한 웹서버 (0) | 2015.09.08 |
1. https://www.codecademy.com/learn ==> javascirpt 공부
2. URL, URI 차이점
3. HTML5 에서는 </> 생략해도 된다.
4. DOM 이란?
DOM ( Document Object Model) 이란 단어는 HTML의 계층적 구조를 나타내며, 한 쌍의 각 태그들은 계층구조상의 구성요소가 된다.
웹 브라우저는 문서 콘텐츠의 의미를 이해하기 위해서 DOM을 해석한다
<html>
<body>
</body>
</html>
5. CSS
CSS(Cascading Style Sheets)는 DOM의 시각적 표현을 꾸미는데 사용한다.
ex)
selector {
property: value;
property: value;
}
body {
background-color: white;
color: black;
}
CSS 스타일은 selector 와 property로 구성된다. 선택자 뒤에는 중괄호로 감싼 프로퍼티 목록이 따라오며, 프로퍼티 명과 그 값은 콜론(:)으로 구분하고 각 라인은 세미콜론(;)으로 끝난다.
같은 프로퍼티 묶음은 콤마로 구분한 선택자에 한 번에 적용 가능
ex)
p,
li {
font-size: 12px;
line-height: 14px;
color: orange;
}
CSS를 HTML에 넣기
<html>
<head>
<style type="text/css">
p{
font-size: 24px;
font-weight: bold;
background-color: red;
color: white;
}
</style>
</head>
<body>
<p> hello world
</p>
</body>
</html>
스타일시트 파일을 HTML에서 참조하기
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<p> hello world
</p>
</body>
</html>
** 일반적으로 나중에 선언된 스타일 규칙이 이전 규칙을 덮어쓴다. **
| 프론트엔드(Front-end) 와 백엔드(back-end) (0) | 2015.10.14 |
|---|---|
| SVG 가 뭦지?? (0) | 2015.09.11 |
| 자바 스크립트 핵심 개념 (0) | 2015.09.11 |
| JSON 이란?? (0) | 2015.09.11 |
| python 간단한 웹서버 (0) | 2015.09.08 |