'Front-End'에 해당되는 글 56건

  1. 2019.08.26 HTML 문서에 CSS를 사용하는 방법들
  2. 2019.06.21 JSON 문법 정리
  3. 2019.06.12 javascript - 함수와 콜백
  4. 2019.06.11 javascript - 유효범위 (전역변수, 지역변수)
  5. 2019.06.11 javascript - 정규표현식
  6. 2019.06.10 javascript - UI와 API
  7. 2019.06.09 javascript - 라이브러리 (jQuery)
  8. 2019.06.09 javascript - 모듈

HTML 문서에 CSS를 사용하는 방법들

Front-End/CSS 2019. 8. 26. 14:08

 

 

 

 

 



  HTML문서에 CSS를 적용하는 3가지 방법


  1. 외부 스타일 시트 


  2. 내부 스타일 시트


  3. HTML 태그내에 스타일 지정

 

 

 

-외부 스타일 시트-

 

css라는 확장자를 가진 스타일 시트 파일을 만들고 이 파일을 HTML 문서에 연결하여 사용하는 방법입니다.

 



  <head>


  <link rel="stylesheet" type="text/css" href="mystyle.css">

  </head>

 

장점 : 홈페이지 전체의 스타일을 일관성있게 유지할 수 있고, 변경시에도 일괄적으로 변경되므로 홈페이지 제작의 효율성을 극대화 할 수 있습니다.

 

단점 : 외부 스타일 시트 파일을 계속적으로 관리해주면서 HTML 문서를 만들어 나가야 하기에 불편한 경우가 있습니다.

그리고 외부 스타일 시트 파일이 지나치게 복잡해지면 곤란하므로 css파일을 관리하는 노하우가 필요합니다.

 

 

 

-내부 스타일 시트-

 

HTML 문서내에서 <head> 와 </head> 사이에 스타일을 정의하는 방법입니다.

 



  <head>


  <style type="text/css">

  <!--
  body {font-size:9pt;}
  //-->

  </style>

  </head>

 

HTML문서마다 스타일을 매번 지정해주어야 하지만, 한 문서에만 해당되는 스타일을 지정할때 사용하면 됩니다.

 

 

 

-HTML태그내에 스타일 지정-

 

위의 방법들에 비해서 적용범위가 더욱 좁하진 형태입니다.

 

스타일을 적용하고 싶은 HTML 태그안에서 정의하는 방법입니다.

 



  <p style="color:gray;">이 문단의 색상은 회색으로 지정됩니다.</p>

 

직관적으로 사용이 가능하다는 장점이 있다.

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

출처

http://www.homejjang.com/07/how_to.php

아래 책은 제가 공부할때 활용했던 책으로 추천드리는 책이니 한번씩 읽어보시는것을 추천드립니다!! ㅎㅎ

토비의 스프링 3.1 세트:스프링의 이해와 원리 + 스프링의 기술과, 에이콘출판

이 포스팅은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다.

저작자표시

'Front-End > CSS' 카테고리의 다른 글

CSS 기초 문법  (0) 2019.06.05
:

JSON 문법 정리

Front-End/json 2019. 6. 21. 19:44

[JSON]


JSON : JavaScript Object Notation의 약자이다.

JSON은 텍스트 정보를 저장하고 바꾸는데 사용되는 문법입니다.

XML과 매우 유사하죠.

JSON은 XML보다 작고, 더 빠르고 더 쉽게 파싱합니다.

 

[JSON의 예]

{

"employees" : [

{ "firstName" : "지은" , "lastName" : "이" },

{ "firstName" : "윤아" , "lastName" : "임" },

{ "firstName" : "수연" , "lastName" : "정" }

]

}

 

'employees' 오브젝트는 3명의 employee 레코드로 이루어진 배열입니다.


[JSON이란?]

- JSON은 JavaScript Object Notation의 약자입니다.

- JSON은 간단한 텍스트 데이터를 바꾸는 역할을 합니다.

- JSON은 다른 프로그래밍 언어에 독립적입니다.

JSON은 데이터 오브젝트를 기술하기 위해 Javascript 문법을 사용합니다.

하지만 JSON은 다른 언어나 플랫폼에 독립적입니다.

다양한 프로그래밍 언어를 위한 JSON 라이브러리가 존재합니다.

- JSON은 (XML처럼) 오브젝트 이름 등을 프로그래머가 마음대로 지어낼 수 있어서 이해하기 쉽습니다.


[JSON 문법의 규칙]

JSON 문법은 javascript 오브젝트 표기법의 부분집합입니다.

데이터는 name/value 쌍으로 되어 있습니다.

데이터는 ‘,’로 분리합니다.

중괄호로 오브젝트를 묶습니다.

대괄호로 배열을 묶습니다.

 

[JSON Name/Value Pairs]

JSON 데이터는 name/value 쌍으로 적습니다.

Name/Value 쌍은 필드명으로 이루어집니다.(큰따옴표 사용)

 

“firstName" : "태연"

 

이해하기 쉽게 javascript 문장으로 바꾸면 다음과 같습니다.

 

firstName = "김"

 

[JSON Values]

JSON 값은 다음이 될 수 있습니다.

숫자

문자열

Boolean

배열

오브젝트

null

 

[JSON Objects]

JSON 오브젝트는 중괄호로 둘러싸여집니다.

오브젝트는 여러 개의 name/value 쌍을 포함시킬 수 있습니다.

 

{ “firstName" : "태연" , "lastName" : "김" }

 

이해하기 쉽게 javascript 문장으로 바꾸면 다음과 같습니다.

 

firstName = "태연"

lastName = "김"

 

[JSON Arrays]

JSON 배열은 대괄호로 둘러싸여집니다.

배열은 다음의 예처럼 여러 개의 오브젝트를 포함할 수 있습니다.

 

{

“employees" : [

{ "firstName" : "지은" , "lastname" : "이" },

{ "firstName" : "윤아" , "lastname" : "임" },

{ "firstName" : "수연" , "lastname" : "정" }

]

}

 

위의 예처럼, 오브젝트 “employees"는 3개의 오브젝트를 포함하고 있는 배열입니다. 각 오브젝트는 성과 이름으로 이뤄진 사람의 기록입니다.

 

[JSON은 Javascript 문법을 사용합니다]

JSON은 Javascript 문법을 사용하기 때문에, JSON으로 작업할 때 별도의 소프트웨어가 필요없습니다.

Javascript를 사용해서 다음과 같이 오브젝트 배열을 생성하고 데이터를 할당할 수 있습니다.

 

var employees = [

{ "firstName" : "지은" , "lastName" : "이" },

{ "firstName" : "윤아" , "lastName" : "임" },

{ "firstName" : "수연" , "lastName" : "정" }

];

 

Javascript 오브젝트 배열에서 첫 번째 엔트리에 다음과 같이 접근할 수 있습니다.

 

employees[0].lastName;

 

반환된 내용은 다음과 같을 것입니다.

 

이

 

또한 데이터는 다음과 같이 수정할 수 있습니다.

 

employees[0].lastName = "수영";


[JSON Files]

JSON 파일의 형식는 “.json"입니다.

JSON 텍스트의 MIME 타입은 “application/json"입니다.



출처

http://blog.naver.com/PostView.nhn?blogId=topsaga&logNo=140161357115&parentCategoryNo=&categoryNo=19&viewDate=&isShowPopularPosts=true&from=search


저작자표시
:

javascript - 함수와 콜백

Front-End/javascript 2019. 6. 12. 22:34

javascript에서는 함수도 객체이다.

 

다시 말해서 일종의 값이고, javascript의 함수가 다른 언어의 함수와 다른 점은 함수가 값이 될 수 있다는 점이다.

 

 

-예시-

 

  var a = function( ){ }    // a라는 변수안에 함수function( )을 넣을 수 있다.

 

 

또한 함수는 객체의 값으로 포함될 수 있다.

이렇게 객체의 속성 값으로 담겨진 함수를 메소드(method) 라고 부른다.

 

 

-예시-

 

  
  a = {  // a라는 변수 안에 객체를 생성
        b : function( ) {  // 객체 안에 b라는 키(key)값에 function( ) 함수를 생성한다. 이러한 함수를 메소드라고 부른다.
        }
  };

 

참고 : key는 속성이나 property 라고 부르기도 한다.

 

 

함수는 값이기 때문에 다른 함수의 인자(매개값) 으로 전달 될수도 있다.

 

 

-예시-

1
2
3
4
5
6
7
8
9
10
function a (cal, num){
return cal(num) //a라는 함수는 cal과 num을 매개값으로 받고 cal이라는 함수에 num을 매개값으로 준 값을 리턴
}
 
function increase (num){
return num*2 //increase이라는 함수는 num을 매개값으로 받고 num*2를 리턴한다.
}
 
console.log(a(increase,5)); //함수 a의 매개값으로 increase함수와 5를 매개값으로 주고, increase함수가 실행되서 num*2의 값인 10이 리턴된다.
10
 cs

 

 

변수, 매개변수, 리턴값과 같이 다양한 용도로 사용될 수 있는 데이터를 first-class citizen (object)라고 한다.

javascript에서 function(함수)는 first-class에 해당이 된다.

 

 

함수는 함수의 리턴 값으로도 사용할 수 있다.

 

-예제-

1
2
3
4
5
6
7
8
9
function cal (mode) {
    var funcs = {
        'plus' : function(left,right){return left + right},
        'minus' : function(left,right){return left - right}
    }
    return funcs[mode];    
}
alert(cal('plus')(2,1)); //cal함수에 'plus'값을 메소드로 주면 funcs의 객체중 'plus'와 맞는 키가 실행되고 그 안에 있는 함수가 실행되서 3이 리턴된다.
alert(cal('minus')(2,1)); //cal함수에 'minus'값을 메소드로 주면 funcs의 객체중 'minus'와 맞는 키가 실행되고 그 안에 있는 함수가 실행되서 1이 리턴된다.
 cs

 

 

또한 함수는 배열의 값으로도 사용할 수 있다.

 

-예제-

1
2
3
4
5
6
7
8
9
10
11
12
var process = [
    function(input) {return input + 10;} //input가 1이므로 11이 리턴
    function(input) {return input * input;}, //input가 11이므로 121이 리턴
    function(input) {return input / 2;} //input가 121이므로 60.5가 리턴
];
 
var input = 1;
for (var i = 0; i < process.length; i++){ 배열의 길이는 0~2까지 이므로 length=0,1,2까지
    input = process[i](input); //함수가 한번 호출될때마다 input값이 변화됨
}
 
alert(input);
 cs

 

 

콜백

 

처리의 위임

 

값으로 사용될 수 있는 특성을 이용하면 함수의 인자로 함수를 전달할 수 있다.

 

값으로 전달된 함수는 호출될 수 있기 때문에 이를 이용하면 함수의 동작을 완전히 바꿀 수 있다.

 

인자로 전달된 함수 sortNumber의 구현에 따라서 sort의 동작방법이 완전히 바뀌게 된다.

 

 

아래 책은 제가 공부할때 활용했던 책으로 추천드리는 책이니 한번씩 읽어보시는것을 추천드립니다!! ㅎㅎ

토비의 스프링 3.1 세트:스프링의 이해와 원리 + 스프링의 기술과, 에이콘출판

이 포스팅은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다.

저작자표시

'Front-End > javascript' 카테고리의 다른 글

null 체크 함수 (공통함수)  (8) 2020.11.11
javascript - 유효범위 (전역변수, 지역변수)  (0) 2019.06.11
javascript - 정규표현식  (0) 2019.06.11
javascript - UI와 API  (0) 2019.06.10
javascript - 라이브러리 (jQuery)  (0) 2019.06.09
:

javascript - 유효범위 (전역변수, 지역변수)

Front-End/javascript 2019. 6. 11. 23:49

-유효범위-

 

유효범위 (Scope)는 변수의 수명을 의미한다.

 

 

 

-전역변수와 지역변수-


(c언어나 java에서의 의미와 동일)

 

 



  
  전역변수


  함수 바깥쪽에 선언되어서 모든 함수에서 접근이 가능한 변수


  지역변수


  함수 안쪽에 선언되어서 그 함수내에서만 사용할 수 있는 변수

 

 



  
  참고


  함수 안쪽에서 변수 앞에 var(데이터타입) 이 붙으면 함수 안쪽에 있으면 지역변수, 함수 바깥쪽에 있으면 전역변수이다.
 

 

 

-예제-

1
2
3
4
5
6
var a = 'korea';
function f(){
a = 'corea'; //여기서 a는 전역변수인 a를 가리키고 전역변수의 값을 'corea'로 변경
}
f();
alert(a); //위에서 바꾼 a의 값인 'corea'가 출력
 cs

 

1
2
3
4
5
6
var a = 'korea';
function f(){
var a = 'corea'; //여기서 a는 지역변수이다.
}
f();
alert(a); //지역변수는 함수내에서만 사용할 수 있고, 전역변수가 선언되어있기 때문에 전역변수 a의 값인 'korea'가 출력
 cs

 

 

전역변수의 사용

 

불가피하게 전역변수를 사용해야 하는 경우는 하나의 객체를 전역변수로 만들고 객체의 속성으로 변수를 관리하는 방법을 사용

 

 

-예제-

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
function(){
    var MYAPP = {} //객체를 생성
    MYAPP.calculator = { //객체 안에 들어있는 속성(객체안에 있는 변수) calculator에 객체를 생성하고 left와 right 값을 null로 선언
        'left' : null,
        'right' : null
    }
    MYAPP.coordinate = { //객체 안에 들어있는 속성(객체안에 있는 변수) corrdinate에 객체를 생성하고 left와 right 값을 null로 선언
        'left' : null,
        'right' : null
    }
    MYAPP.calculator.left =  10; //calculator의 left값을 10으로 설정
    MYAPP.calculator.right = 20; //calculator의 right값을 20으로 설정
    function sum(){
        return MYAPP.calculator.left + MYAPP.calculator.right; //10과 20을 더한값 30을 sum에 리턴
    }
    document.write(sum()); //30이 출력됨
}
 cs

 

요약 : 위 예제는 전역변수를 함수안에 집어넣고, 전역변수의 객체를 생성해 그 객체안에 새로운 변수를 만들어서 사용하는 예제

 

 

 

-유효범위의 대상 (함수)-

 

자바스크립트는 함수에 대한 유효범위만을 제공한다.

많은 언어들이 블록 (대체로{ }) 에 대한 유효범위를 제공하는 것과는 다른 점이다.

(즉, 자바에서는 for문 안에서 변수가 선언된것도 지역변수라고 하는데, 

자바스크립트에서는 오직 함수내에서만 선언된 변수를 지역변수라고 한다. (for문,while문 등은 포함하지 않는다))

 

 

 

-정적 유효범위-

 

자바스크립트는 함수가 선언된 시점에서의 유효범위를 갖는다.

이러한 유효범위의 방식을 정적 유효범위 (static scoping), 혹은 렉시컬 (lexical scoping)이라고 한다.

 

 

-예제-

1
2
3
4
5
6
7
8
9
10
11
var i = 5;
function a(){
    var i = 10;
    b();
}
 
function b(){
    document.write(i);
}
 
a();
 cs

 

출력값은 전역변수인 i가 출력이 되서 5가 출력된다.

왜냐하면 사용될때가 아니고 정의될때의 전역변수가 사용이 되기때문에 함수 a에 있는 지역변수인 i가 아니라 함수 바깥쪽에 있는 전역변수인 i가 출력이 되는 것이다. 

이런범위를 정적 유효범위라 한다.

아래 책은 제가 공부할때 활용했던 책으로 추천드리는 책이니 한번씩 읽어보시는것을 추천드립니다!! ㅎㅎ

토비의 스프링 3.1 세트:스프링의 이해와 원리 + 스프링의 기술과, 에이콘출판

이 포스팅은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다.

저작자표시

'Front-End > javascript' 카테고리의 다른 글

null 체크 함수 (공통함수)  (8) 2020.11.11
javascript - 함수와 콜백  (0) 2019.06.12
javascript - 정규표현식  (0) 2019.06.11
javascript - UI와 API  (0) 2019.06.10
javascript - 라이브러리 (jQuery)  (0) 2019.06.09
:

javascript - 정규표현식

Front-End/javascript 2019. 6. 11. 21:46

  -정규표현식-

 

  문자열에서 특정한 문자를 찾아내는 도구이다.

 

  이 도구를 이용하면 수십줄이 필요한 작업을 한 줄로 끝낼 수 있다.

 

 

 

  -정규표현식 생성-

 

  정규표현식은 두가지 단계로 이루어진다.

 

  하나는 컴파일 (compile) 다른 하나는 실행 (execution) 이다. 

 

 

 

  -컴파일-

 

  컴파일은 검출하고자 하는 패턴을 만드는 일이다.

 

  우선 정규표현식 객체를 만들어야 한다.

 

  객체를 만드는 방법은 두가지가 있다.

 

  a라는 텍스트를 찾아내는 정규표현식의 2가지 방법이다.

 

 

 



  -패턴을 만드는 방식-


  1. 정규표현식 리터럴


  var pattern = /a/    //  "/"와 "/" 사이의 문자열을 pattern에 넣는다. (이것을 사용해 문자 찾기 가능)


  2. 정규표현식 객체 생성자


  var pattern = new RegExp('a');     // RegExp 객체를 만들어서 찾고자 하는 문자 'a'를 넣어서 pattern에 넣는다.

 

 

 

  -실행-

 

  컴파일로 만든 패턴을 가지고 패턴을 실행해서 문자를 찾는것.

 

 

 

  -정규표현식 메소드 실행-

 

 

  
  RegExp.exec( ) 메소드 (해당 문자열 추출) : 해당하는 문자열이 있으면 그 문자열을 값으로 하는 배열을 리턴하고 없으면 null을 리턴한다.


  RegExp.test( ) 메소드 (해당 문자열 있는지 테스트) : 패턴에 해당되는 문자열이 있으면 true, 없으면 false를 리턴한다.

 

 

 

 -정규표현식 메소드 사용 예제-

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
var pattern = /a/ //pattern 변수에 a라는 패턴을 넣음.
undefined
 
console.log(pattern.exec('sdfsdf')); //exec( ) 메소드를 사용해서 'sdfsdf' 안에는 'a'라는 문자열이 없기 때문에 null을 리턴한다.
VM1136:1 null
undefined
 
console.log(pattern.exec('basd')); //exec( ) 메소드를 사용해서 'basd' 안에는 'a'라는 문자열이 있기 때문에 ["a"] 배열을 리턴한다.
VM1211:1 ["a", index: 1, input: "basd", groups: undefined]
undefined
 
console.log(pattern.test('bjxs')); //test( ) 메소드를 사용해서 'bjxs' 안에는 'a' 라는 문자열이 없기 때문에 false 를 리턴
VM1286:1 false
undefined
 
console.log(pattern.test('ards')); //test( ) 메소드를 사용해서 'ards' 안에는 'a' 라는 문자열이 있기 때문에 true 를 리턴
VM1340:1 true
 
 cs

 

  

 

-정규표현식 (문자열) 메소드 사용 예제-

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
var a = /2/ //a라는 변수에 2라는 패턴을 넣는다.
undefined
 
console.log('asdj2'.match(a)); // 변수 a안에 있는 2라는 패턴이 'asdj2' 안에 있기 때문에 ["2"] 를 출력
VM1486:1 ["2", index: 4, input: "asdj2", groups: undefined]
undefined
 
console.log('sndqa'.match(a)); //변수 a안에 있는 2라는 패턴이 'sndga' 안에 없기 때문에 null을 출력
VM1521:1 null
undefined
 
console.log('asdfa22'.replace(a,'11')); //변수 a안에는 2라는 패턴이 1개 들어있기 때문에 'asdfa22'에서 앞에 있는 2만 '11'로 교체해준다.
VM1653:1 asdfa112
undefined
 
console.log('asdfa55'.replace(a,'11')); //변수 a안에 있는 2라는 패턴이 'asdfa55'에는 없기 때문에 'asdfa55' 가 그대로 출력된다.
VM1681:1 asdfa55
undefined
 
 cs

 

 

-옵션-

 

정규표현식 패턴을 만들 때 옵션을 설정할 수 있다.

옵션에 따라서 검출되는 데이터가 달라진다.

 

i

 

i를 붙이면 대소문자를 구분하지 않는다.

 

 

 

g

 

g를 붙이면 검색된 모든 결과를 리턴한다.

 

 

또한 i와 g를 같이 사용할 수도 있다.

(대문자, 소문자 구분하지 않고 모든 문자를 리턴한다는 뜻)

 

 

 

-옵션 사용 예제-

 

1
2
3
4
5
6
7
8
9
10
11
12
var a = /a/i // 패턴에 'i'를 붙여서 대소문자 구분하지 않고 출력되게 함.
undefined
 
"Aadnsh".match(a); // 대소문자를 구분하지 않고 'a'가 한개이기때문에 가장 앞에있는 'A'를 배열에 담아 출력함
["A", index: 0, input: "Aadnsh", groups: undefined]
 
var b = /b/g // 패턴에 'g'를 붙여 검색된 모든 결과를 리턴 (즉, 모든 'b'를 검색해서 리턴한다는 뜻.. 개수에 관계없이)
undefined
 
"bBBASb".match(b); // 'b'가 들어간 것이 2개이므로 'b'가 2개 출력된다.
(2) ["b", "b"]
 
var c = /c/ig // 패턴에 'i'와 'g'를 붙여서 대소문자를 구분하지 않고, 'c'에 개수에 상관없이 모든 'c'를 리턴한다는 뜻.
undefined
 
"cCsjJDJcCc".match(c); //대문자 'c'와 소문자 'c' 가 모두 리턴되는것을 확인할 수 있다.
(5) ["c", "C", "c", "C", "c"]
 
 cs

 

 

-캡처-

 

괄호안의 패턴은 마치 변수처럼 재사용할 수 있다. 이 때 기호 $를 사용하는데 순서를 역전시킬때도 사용한다.

 

 

-예제-

1
2
3
4
5
6
7
8
 
var a = /(\w+)\s(\w+)/; // \w는 한개의 문자열을 의미, // +는 그 문자열의 개수를 의미, //\s는 공백을 의미한다.
undefined
 
var str = "Java Spring"; //str변수에 문자열을 저장
undefined
 
var result = str.replace(a,'$2-$1'); //replace는 치환할때 사용하는 메소드, a변수에 담긴 패턴을 사용하고 $를 사용해 문자순서를 뒤바꾼다.
undefined //그리고 공백은 '-' 로 치환되서 출력 된다.
 
console.log(result); //result 변수에 담긴 값을 출력함
 
VM547:1 Spring-Java
 
 cs

 

 

-치환-

 

URL을 링크 html 태그로 교체한다. (이건 나중에 정규표현식만 설명한 강의 따로봐야될듯. 어려움)

아래 책은 제가 공부할때 활용했던 책으로 추천드리는 책이니 한번씩 읽어보시는것을 추천드립니다!! ㅎㅎ

토비의 스프링 3.1 세트:스프링의 이해와 원리 + 스프링의 기술과, 에이콘출판

이 포스팅은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다.

저작자표시

'Front-End > javascript' 카테고리의 다른 글

javascript - 함수와 콜백  (0) 2019.06.12
javascript - 유효범위 (전역변수, 지역변수)  (0) 2019.06.11
javascript - UI와 API  (0) 2019.06.10
javascript - 라이브러리 (jQuery)  (0) 2019.06.09
javascript - 모듈  (0) 2019.06.09
:

javascript - UI와 API

Front-End/javascript 2019. 6. 10. 21:02

-UI (User Interface)-


사용자가 지정한 인터페이스 (화면)

 

 

-API (Application Programming Interface)-


응용 프로그램 프로그래밍 인터페이스)는 응용 프로그램에서 사용할 수 있도록, 운영 체제나

 

프로그래밍 언어가 제공하는 기능을 제어할 수 있게 만든 인터페이스를 뜻한다.

 

 

-레퍼런스와 튜토리얼-

 

튜토리얼 : 언어의 문법을 설명

 

레퍼런스 : 명령어의 사전을 의미

 

 

-자바스크립트의 API-

 

자바스크립트의 API는 크게 자바스크립트 자체의 API와 자바스크립트가 동작하는 호스트 환경의

API로 구분된다.

 

 

자바스크립트 API 문서

 


* ECMAScript (표준문서)

 

* 자바스크립트 사전 (생활코딩)

 

* 자바스크립트 레퍼런스 (MDN)

 

* jscript 레퍼런스 (MSDN)

 

 

 

호스트 환경의 API 문서

 

 

* 웹브라우저 API

 

* Nods.js API

 

* Google Apps Script API

 

 

 

출처 (생활코딩)

https://opentutorials.org/module/532/6533

 

 

아래 책은 제가 공부할때 활용했던 책으로 추천드리는 책이니 한번씩 읽어보시는것을 추천드립니다!! ㅎㅎ

토비의 스프링 3.1 세트:스프링의 이해와 원리 + 스프링의 기술과, 에이콘출판

이 포스팅은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다.

저작자표시

'Front-End > javascript' 카테고리의 다른 글

javascript - 유효범위 (전역변수, 지역변수)  (0) 2019.06.11
javascript - 정규표현식  (0) 2019.06.11
javascript - 라이브러리 (jQuery)  (0) 2019.06.09
javascript - 모듈  (0) 2019.06.09
javascript - 객체  (0) 2019.06.09
:

javascript - 라이브러리 (jQuery)

Front-End/javascript 2019. 6. 9. 20:37

-라이브러리-

 

라이브러리는 모듈과 비슷한 개념이다.

모듈이 프로그램을 구성하는 작은 부품으로서의 로직을 의미한다면 라이브러리는 자주 사용되는 로직을 재사용되기

편리하도록 잘 정리한 일련의 코드들의 집합을 의미한다고 할 수 있다.

 

라이브러리가 무엇인지를 보여주기 위해 jQuery를 잠깐 사용

 

jQuery 다운로드

http://jquery.com/

 

jQuery 메뉴얼을 이용해서 사용법을 파악한다.

http://api.jquery.com/

 

 

jQuery를 다운받고 jQuery에 자바스크립트 코드를 다운로드 받아서 그것을 읽어보면 된다.

 

 

1. 제이쿼리 홈페이지에 접속후 다운로드 버튼 클릭

 

 

 

2. 빨간색 네모부분 클릭

 

 

3. 클릭후 코드를 전체 복사

 

 

4. sublinetext에 복사한 코드를 jquery.js 파일을 만들고 그 안에 붙여넣기

 

5. jQuery.demo.html 파일 만들기

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!DOCTYPE html>
<html>
<head>
    <script type="text/javascript" src="jquery.js"></script>
 
jquery.js 파일을 불러온다.
</head>
<body>
    <ul id="list">
        <li>empty</li>
        <li>empty</li>
        <li>empty</li>
        <li>empty</li>
        <li>empty</li>
    </ul>
    <script type="text/javascript">
    $('#list li').text('coding everybody');
 
$('#list li')는 id값이 list인 태그를 가리키고, li는 그 list태그 안에 있는 li태그를 가리킨다.
그리고 .text('coding everybody')는 그 li태그 안에 있는 문자열인 'empty'를 'coding everybody'로 바꾼다는 의미이다.
그래서 출력결과는 'coding everybody' 가 5번 출력되게 된다.
 
    </script>
</body>
</html>
 
 
 cs

 

궂이 jQuery 코드를 사용하는 이유는 브라우저를 사용해서 <li>태그 안에 있는 값을 바꾸려면 너무 코드가 복잡해지기 때문에

보여주기 위해서 jQuery를 사용한 것이다.

아래 책은 제가 공부할때 활용했던 책으로 추천드리는 책이니 한번씩 읽어보시는것을 추천드립니다!! ㅎㅎ

토비의 스프링 3.1 세트:스프링의 이해와 원리 + 스프링의 기술과, 에이콘출판

이 포스팅은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다.

저작자표시

'Front-End > javascript' 카테고리의 다른 글

javascript - 정규표현식  (0) 2019.06.11
javascript - UI와 API  (0) 2019.06.10
javascript - 모듈  (0) 2019.06.09
javascript - 객체  (0) 2019.06.09
javascript - 배열  (0) 2019.06.01
:

javascript - 모듈

Front-End/javascript 2019. 6. 9. 20:05

-모듈-

 

코드의 재활용성을 높이고, 유지보수를 쉽게 할 수 있는 기법

 

코드를 여러개의 파일로 분리하는 것. 

 

 

 

-모듈의 장점-

 

1. 자주 사용되는 코드를 별도의 파일로 만들어서 필요할 때마다 재활용 할 수 있다. (마치 함수처럼 여러군데에서 사용할 수 있음)

 

2. 코드를 개선하면 이를 사용하고 있는 모든 애플리케이션의 동작이 개선된다.

 

3. 코드 수정 시에 필요한 로직을 빠르게 찾을 수 있다.

 

4. 필요한 로직만을 로드해서 메모리의 낭비를 줄일 수 있다.

 

5. 한번 다운로드된 모듈은 웹 브라우저에 의해서 저장되기 때문에 동일한 로직을 로드 할 때

   시간과 네트워크 트래픽을 절약 할 수 있다. (브라우저에서만 해당)

 

 

 

-모듈이란?-

 

순수한 자바스크립트에서는 모듈이라는 개념이 분명하게 존재하지는 않지만, 자바스크립트가 구동되는 

 

호스트 환경에 따라서 서로 다른 모듈화 방법이 제공되고 있다. 

 

자바스크립트의 대표적인 호스트 환경인 웹브라우저에서 로직을 모듈화하는 방법이 있다.

 

 

  
  호스트 환경이란?




  호스트 환경이란 자바스크립트가 구동되는 환경을 의미한다.


  자바스크립트는 브라우저를 위한 언어로 시작했지만, 더 이상 브라우저만을 위한 언어가 아니다.


  예를들어 node.js는 서버 측에서 실행되는 자바스크립트다. 이 언어는 자바스크립트의


  문법을 따르지만 이 언어가 구동되는 환경은 브라우저가 아니라 서버측 환경이다.

 

 

 

<관련 예제>

 

호출할 함수를 별도의 파일로 분리시킴.

파일을 불러와서 그 파일안에 있는 함수를 호출해서 출력시킴

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <script src="greeting.js"></script>
</head>
<body>
    <script>
        alert(welcome());
    </script>
</body>
</html>
 cs 

 

 

greeting.js

1
2
3
function welcome(){
    return 'Hello world';
}
 cs

 

 

웹브라우저가 화면에 출력될때 src속성이 있는지 없는지 확인하고 그 값이 있다면

 

그 값에 해당되는 파일이 있다면 "greeting.js" 를 <script>~</script>사이에 넣어서 출력한것과 같이 된다.

 

출력 결과는 greeting.js 파일의 welcom( ) 메소드가 호출이 되어서 "Hello world" 가 출력된다

 

이렇게 함으로써 코드가 간결해지고, main.html의 용량을 줄여준다.

 

 

sub.html

1
2
3
4
5
6
7
8
9
10
11
12
13
<!DOCTYPE html>
<html>
<head>
    <script type="text/javascript" src="greeting.js"></script>
</head>
<body>
<script type="text/javascript">
    welcome();
</script>
</body>
</html>
 cs

 

sub파일에서도 main.html 파일처럼 greeting.js 파일을 불러서 welcome() 메소드를 호출할 수 있다.

그리고 출력 결과는 "Hello world" 가 출력이 된다.

 

아래 책은 제가 공부할때 활용했던 책으로 추천드리는 책이니 한번씩 읽어보시는것을 추천드립니다!! ㅎㅎ

토비의 스프링 3.1 세트:스프링의 이해와 원리 + 스프링의 기술과, 에이콘출판

이 포스팅은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다.

저작자표시

'Front-End > javascript' 카테고리의 다른 글

javascript - UI와 API  (0) 2019.06.10
javascript - 라이브러리 (jQuery)  (0) 2019.06.09
javascript - 객체  (0) 2019.06.09
javascript - 배열  (0) 2019.06.01
JavaScript - 함수  (0) 2019.06.01
:
◀ PREV : [1] : [2] : [3] : [4] : [5] : [6] : [7] : NEXT ▶

티스토리툴바