[Java/JavaScript] 생활코딩 오픈코딩 내용 정리

2019.04.04

 

var a=1; // var 처음만 쓰고 이후엔 생략 가능. Var 다음에 오는 변수는 숫자, 문자 모두 가능.

alert(a);  // 화면에 출력

변수와, 변하지 않는 부분을 구분해서 둬야, 유지보수가 쉬움. 버그발생률 감소

 

clear(); //화면 지울 때

 

1===”1” // False 출력됨. Strict Equal Operator 데이터 타입까지 같아야 True

1==”1” 데이터 타입은 달라도 정보가 같으면 True

 

Undefined: 정의되지않음. (넣어야하는데 안넣은 상황)

Null:  값이 없음. (의도적)

Undefined==null // True

Undefined===null // False

* JS에서 ===을 쓰는 것을 권장.

 

Prompt(‘당신의 나이는?’); // 사용자로부터 값을 받을 수 있는 기능.

 

<script type="text/javascript">

                  var i = 0;

                  for(var i=0; i <10 ; i++){

                                   for(var j=0; j<10; j++){

                                                     document.write("Let's learn javascrtip " +i+j+"<br/>" );

                                   }

                  }

</script>

l  함수: 구석구석 나오는 함수를 호출할 수 있음. 재사용성. 유지보수 쉬움

<script type="text/javascript">

                  function numbering(){   // 함수 정의

                                   document.write(1);

                  }

                  numbering(); //

</script>

<script type="text/javascript">

                  //              function get_member1(){

                  //                               return 'abc'

                  //              }

                  //              alert(get_member1());

                  function get_argument(arg){

                                   return arg;

                  }

                  alert(get_argument(1));

                  alert(get_argument(2));

                  </script>

 

                  <script type="text/javascript">

                  function get_argument(arg){

                                   return arg*1000;

                  }

                  alert(get_argument(1)); //1000

                  alert(get_argument(2)); //2000

                  </script>

>> arg 매개변수 (parameter)

>> 1, 2, 인자 argument  > 입력

>> return값 > 출력

 

자바스크립트 = 함수형 언어.

 

 

Var a = ‘egoing’;

a.toUpperCase(); // a를 대문자로 바꾸는 함수. Javascript가 제공하는 내장함수. 대소문자 구분조심!

 

alert(a.length); // a 배열의 길이

undefined

 

<script type="text/javascript">

                                   function get_members(){

                                                     return ['a','b','c','d'];

                                   }

                                   var members = get_members();

                                   for(i=0; i< members.length; i++){

                                   document.write(members[i].toUpperCase()+"<br/>");

                                   }

                  </script>

 

배열.push(   )  //(  ) 내에 있는 값이 배열에 추가됨 . push(‘f’);

li.concat([‘a’,’b’]); // 배열을 여러 개 추가할 수도 있음.

li.unshift(‘z’); // z를 앞에 추가하여 나머지는 뒤로 밀어냄.

li.splice (    , ,,)// 특정 구간을 추출 및 특정 배율을 추가함. Manual 참고

li.shift(); // 맨앞에있는 데이터 삭제

li.pop();// 맨뒤에있는 데이터 삭제

li.sort(); // 순서대로 정렬.

li.reverse(); // 역순으로 정렬. 매뉴얼 보고 직접 정렬 방법을 설정할 수 있음

 

 

l  객체

: 값을 담는 그릇. 로직을 만들 수 있는 단위. 인덱스를 문자로 사용하고 싶으면 객체를 사용!!

                                   var grades = {} ;  // 객체 생성

                                   new Object(); // 객체 생성. 위와 같은 결과

 

var arr = ['a','b','c'];

for(var name in arr){

console.log(name);

}

// 0,1,2 출력

for(var name in arr){

console.log(arr[name]);

}

// a,b,c 출력

 

var grades = {'egoing':10, 'k10':6, 'sori':80};

for(key in grades){

    console.log(key)

} // egoin, k10, sori 가 출력(key 값) . 10, 6, 80은 value

 

this. >> 약속되어있는 변수. 함수가 속해있는 객체가 가르키는 변수.

Grades란 변수 안에 List 객체, show 함수를 그룹화 à 객체 지향 프로그래밍

 

 

l  모듈

호스트환경에 따라 다름.

l  라이브러리

Jquery

 

l  함수와 콜백

Function a () {   } à 함수

객체 안에 들어 있는 함수 à method

 

var a 변수 = function(  ) {   }

a(객체)  = { b (key, 변수 역할à 속성 ) : function () { } >>속성 안에 함수가 들어있으면 그 함수를 method라 함.  }

 

first-class citizen/object : 변수, 매개변수, 리턴값

 

콜백 함수

console.log(numbers.sort(sortfunc));

내부적으로 호출.

Function

numbers.sort();

numbers-객체. 배열 / sort() 함수

 

Ajax : asynchronous javascript and XML 비동기 처리

웹페이지가 바뀌지 않고 어떠한 동작을 하는 기술. (클릭 시 메뉴 나타내기)

$.get(‘./datasource.json.js’, fun

 

 

 

 

<input type = "button" value = "click me" onclick="alert('hi')">

On~  .>event

Keyword: Javascript keydown event attribute

 

Console에서 계산 가능

‘문자 ~~~’.length 

‘Hellow world’.indexOf(‘0’) > 4

'helloworld'.indexOf('world')

 

'        hello    world'.trim()

"hello    world"

 

MDN web docs 참고

 

Keyword: Javascript element get value

Document.getElementByID(id).value;

 

querySelector(‘   ‘)   >> ‘ ‘에 들어오는 element 검색

 

Keyword: Javascript get element by css selector multiple

querySelect All

 

 

 

입력 parameter 매개변수

출력 return

 

함수에 객체를 담다. Set color, setBackgroundcolor는 속성. 객체의 속성과 속성 사이는 , 찍음

 

 

Java script library : jQuery

CDN Content Delivery Network

그들의 서버에 저장한 걸 사용.

 

Ctr + / 누르면 블록처리된 아이들 모두 주석처리됨

//Web page에 있는 모든 a태크를 jQuery로 처리하겠다.

jQuery css 검색 >> .css()  //css라는 하수를 쓰면 됩니다.

자바스크립트를 이용해서 우리 대신 만들어준 함수를 사용.

 

순서대로 실행하는 것을 통해서

문법에 따라, 문법의 코드에 따라

앱을 만들기 위해서 사용하는 조작장치 à  Application Programing Interface (API)

 

 

정규표현식

Var str = “a”   // 문자열임을 표현

리터럴:  Var pattern = /a/  //  슬래쉬 사이의 대상을 patttern의 변수에 담음

정규표현식 객체 생성자: Var pattern = new RegExp (‘a’);   // 정규표현식 객체 만듬.() 안은 찾고자 하는 a문자

Pattern.exec : 대상에서 패턴을 찾아 배열로 리턴하는 메소드 > 필요한 정보 추출

Pattern.test: 대상에서 패턴이 있으면 true, 없으면 false > 필요한 정보 있는지 확인해보는 메소드

 

Vvar pattern = /a/;

Pattern.exec(‘abcde’); // [“a”] 출력

Pattern.exec(‘a.”); // [“a와 그 다음 문자 한개”] 출력  /// ab

 

Str.match()

String.replace()

옵션

패턴 뒤에 i붙이면 대소문자 상관없이 검색해줌.

var g = /a/ g     // g를 붙이면 a가 들어간 게 모든 문자를 찾아 리턴함.

 

캡처

 

치환

정규식 이용하여 기존 링크를 하이퍼링크 포함한 링크로 치환하여 사용할 수도 있음

var urlPattern = /'/

                                   var content = '    ' ;

                                   var result = content.replace(urlPattern, function(url)){

                                                     return '<a href="+url"'> +url+ '</a>';

                                   });

console.log(result);

/’ ‘/은 정규식. 인터넷 서칭해보기

 

 

전역객체(Global Object)

모든 함수와 전역변수는 window라는 객체의 프로퍼티다. 객체를 명시하지 않으면 암시적으로 window의 프로퍼티로 간주.  

Node.js 서버기반의 웹브라우저

객체가 windows가 아니라 global임.

 

갖고싶은거솝다 가지고 있는걸 중요하게 생각해라

 

 

 

 

유효범위(scope)

var vscope ='global';

function fscope(){

    var vscope = 'local';

    alert(vscope);

}  // local 호출

전역변수: application 내에 변수

지역변수 : 함수내에서만 선언한 변수

자신과 가까운쪽의 변수 받음

함수 밖에 있는 변수 > 전역변수

함수 안에서 Var 쓰지 않고 변수 호출하면 전역변수로 호출.

함수 안에서 var 변수 선언하면 지역변수로 호출.

var vscope ='global';

function fscope(){

    var vscope = 'local';

 }

fscope();

alert(vscope);

//global 호출

*전역변수보다 지역변수를 사용하도록 프로그래밍 하는게 중요. 타인/자신에 의해 다른의미로 변수가 쓰일수 있으므로. 전역변수 죄악시.

*같은 이름의  전역변수를 사용할 경우, 충돌날 수 있음.

디렉토리와 같은 개념. 같은 디렉토리에서 파일 이름 같으면 문제되는 것처럼.

 

 

익명함수: 함수를 선언하고 곧바로 함수를 호출함. 전역변수를 허용하지 않고 사용할 수 있음. 재활용하기 쉬움. 모듈화 기법

(Function(){

}())

 

자바와 다르게 자바스크립트에서는 if/for 안에서 선언된 변수는 지역변수로 보지 않음

자바에선 for문 밖에있는 변수 호출 (system.out.print.ln())시, 유효한 값이 아니지만,

자바스크립트에선 for 문 밖에서 변수 호출해도 (consol.log();) 해당 변수값 호출됨.

 

정적유효범위 (lexical scoping; 어휘적 유효범위)

: 사용될 때가 아닌 정의될 때의 변수가 사용됨.

 

 

함수

 

함수는 일종의 값. 자바스크립트에서는   함수 자체가 값이 될 수 있음. 변수에 담을 수 있음.

함수는 배열에도 저장할 수 있음.

è 함수는 변수, 매개변수, 리턴값 모두 사용할 수 있다.

First-class citizen(or object)

 

콜백:

기본적으로 가지고 있는 메소드 >> 내장객체

우리가 만든>>사용자정의객체

비동기 처리에서도 유용하게 사용 (동기적: 순차적으로 진행)

Ajax(asynchoronous 비동기 javascrip and XML): 웹브라우저랑 통신해서 정보를 가져옴. 웹페이지가 바뀌지 않고 정보만 가져옴.  비동기적 제어(나머지 화면은 freezing되고 컨텐츠만 보임)

<script src=”//code.jquery.com/jquery-1.11.0.min.js”></script>

$.get // &는 jQuery 객체

$.get(‘url’, function(result){

Consol.log(result)} } //server랑 통신 끝난 후 보여줌.

 

클로저(Closure)

내부함수: 함수 안에서 또 다른 함수를 선언

내부함수를 포함하고 있는 외부함수가 종료된 이후에도 외부함수에 접근할 수 있음

 

Private variable (비밀변수) >아무나 수정하는걸 막음.

               <script type="text/javascript">

                                 function factory_movie(title){

                                                   return{

                                                                    get_title: function(){

                                                                                      return title;

                                                                    },

                                                                    set_title: function(_title){

                                                                                      title = _title;

                                                                    }

                                                   }

                                 }

                                 ghost =factory_movie('Ghost in the shell');

                                 matrix = factory_movie('Matrix');

                                 alert(ghost.get_title());

                                 alert(matrix.get_title());

                                 alert(matrix.set_title('Dog'));

                                 alert(matrix.get_title());

               </script>

누구나 접근 가능 / title을  get_title, set_title이라는 변수를 중복해서 사용해도 영향을 끼치지 않음> title이 안전하게 변경 및 설정 가능함.  (from Close(3/4)

-Closerue 4/4는 어려워서 패스 > 추후 다시 진행

 

 

Arguments (1/2)

유사 배열 (배열기 비슷하지만 다름.

자바스크립트에서는 매개변수가 정의되지 않은 상태여도 인자의 수를 마음대로 지정해도 에러가 나지 않음.

Sum()   (  XXX) / XXX를 매개변수(parameter)라 함.

arguments.length // auruments라 하는 유사 배열이 담겨 있음. Js와 약속된 변수. 사용자가 전달한 인자가 들어있음.  약속되어 있는 특수한 배열.

function sum(){

                                 var i, _sum = 0;

                                 for (var i=0; i<arguments.length;i++){

                                                   document.write(i+ ': '+ arguments[i] +'<br/>');

                                                   _sum += arguments[i];

                                 }

               return _sum;

               }

               document.write('result:' + sum(1,2,3,4));

 

매개변수 (2/2)

매개변수는 1개이지만 인자(arugbments)는 2개

 

함수의 호출 (1/2)

Func.call

Func.apply

(2/2) apply의 활용   > hard to understand.

 

객체지향 (이전에 프로젝트에서 수강함)

 

 

 

 

생성자와 New:

객체란 서로 연관된 변수와 함수를 그룹핑한 그릇이라고 할 수 있다. 객체 내의 변수를 프로퍼티(속성), 함수를 메소드라고 부른다.

두 가지 방법 모두 객체 생성할 수 있음

(함수가 속해있는 객체를 지칭할 때 this.)

 

생성자(constructor)는 객체를 만드는 역할을 하는 함수다. 자바스크립에서 함수는 재사용 가능한 로직의 묶음이 아니라 객체를 만드는 창조자.

 

var p = new Person()

함수호출 시 New 붙이면 새로운 객체를 마든 후에 이를 리턴.

Cf. JS에서는 클래스 존재하지 않음. 함수가 독립적으로 존재. 함수에서 생성자 만들어 객체 선언 가능

 

Function person() { } 객체가 생성될때마다 반보되어 사용됨 > 그 후 초기화됨. (Initialize)

 

함수 리터럴(Literal)

Var o = {} > 객체 리터럴

Var a = [1,2,3]; > 배열 리터럴

Apply ….. 어렵다..졸려zz

함수가 누구냐에 따라 this가 가르키는 객체가 달라짐. Js는 유연하다.

 

 

 

상속(inheritance)

객체의 속성을 그대로 상속받음.

 

 

Prototype

생성자는 함수다.

New를 붙이면 그 함수는 생성자가 됨.

생성자를 통해 만든 객체가 o라는 변수에 들어감

 

객첼ㄹ 호출했을 때 없으면 그 객체의 protoype에서 검색

Sub.prototype = new Super(); 상속받을 때는 상속받으려는 객체의 porotype이 아니라 새롭게 생성하기.

 

 

표준 내장 객체(standard built-in object)

Js에 내장되어있는. 기본 객체: Object, Function, Array, string, Boolearn, Number, Math, Date, RegExp(정규표현식)

Js가 제공하는 호스트환경은 이보다 더 많음.

우리가 만든 객체 -> 사용자 정의 객체.

Js가 가지고 있는 내장되어있는 객체에 우리가 만든 객체 추가하는 방법 (하이브리드. prototype이용)

Math.floor() 소수점 밑에 자리를 버리는 함수

 

Prototype확장해서 모든 배열이 공통적으로 가지고 있는 api, 로직을  정의하는 방법.

//Array는 배열을 만들기 위한 생성자 . random은 Array의 method

함수 혼자있을 때 vs 객체 안에있을 때  이름이 차이남.

random이라고 있는 객체를 추가하는 개념

 

 

Object

객체의 가장 기본적인 형태를 가지고 있는 객체. 아무것도 상속받지 않는 순수한 객체

모든 객체의 프로토타입은 object이다. 원형이다.object객체의 기능은 모든 객체가 이용할 수 있는 기능이다, 모든 객체가 사용하려하는 기능을 원형에 추가할 수 있다.

 

MOZILAR DEVELOPER NETWORK – JavaScript Reference – Fundamantal Objects – Object  / Method 보기

 

Object.keys() // 값이 아닌 키 값만 출력되는 method

Object.prototype.toString() // 사람이 보기 편하게 값만 출력되는 method

Prototype 소속

Object = new Object(); 객체는 protytpe의 원형을 가ㅣㅈ고

Object라는 객체를 생성한 후, 그 객체를 원형으로 to string이라는 method 적용

Object는 표준내장객체 중 하나. Js에 있는 모든 객체들의 최초의 조상. Proto가 껴있는 애들이 상속받고 있는 공통 분모.

반대로, 모든 객체가 공통적으로 가지고 있어야 할 기능을 추가한다면 /.prototype/을 추가하여 기능을 추가하기!!

객체.CONTATION(NAME) // 객체 안에 NAME이 있는지 확인. 있으면 T or 없으면 F

Object에 포함할때는 주의해야함. 광역객체에 넣으면 모두 상속되서.

a.hasOwnProperty(name) // name에 있는걸 어느 객체가 가지고 있는지 확인 . T OR F

 

데이터 타입

원시 데이터 타입(primitive type): 숫자, 문자열, 불리언, null, undefined .// 객체가 아닌 것들

나머지는 참조 데이터 타입

. // object access operator   . 앞에 있는 아이가 객체

레퍼 객체 (Wrapper Object)

임시로 객체를 만들어준다?

Var str = ‘coding’

new str = new String(‘coding’);

consol.log(str.length);

console.log(str.charAt(0));

str.prop를 하는 순간에 자바스크립트 내부적으로 String 객체가 만들어진다. 이 객체에 저장되고 곧 제거됨. 원시데이터를 wrap. 원시데이터처럼 사용 가능.