Front-end 33

[JavaScript ES6]전역객체

✨전역객체란? 전역 객체 object 는 전역 범위 global scope(en-US) 에 항상 존재하는 객체를 의미합니다. 자바스크립트에는 전역 객체로 선언된 객체들이 항상 존재합니다. 웹브라우저에서 스크립트가 전역 변수를 생성할 때, 전역 객체의 멤버로서 생성됩니다. ( Node.js 에서는 예외.) 전역 객체의 interface 는 스크립트가 실행되고 있는 곳의 실행 컨텍스트에 의존합니다. 웹브라우저에 있는 스크립트가 특별히 백그라운드 작업으로 시작하지 않는 코드들은 그것의 전역 객체로써 Window 를 가집니다. 이것은 Web에 있는 자바스크립트 코드의 상당수가 그렇습니다. window 객체는 브라우저에서 전역 객체입니다. 어느 전역 객체나 함수는 window 객체의 프로퍼티로서 접근될 수 있습니..

[JavaScript] arguments

arguments 함수에는 arguments라는 객체가 존재한다. 함수 안에서 여러가지의 인자의 정보를 담고있는 객체이다. 사용법이 매우 배열과 유사하기 때문에 유사배열이라 볼 수 있다. 즉, 함수를 이용하는 사람이 매개변수에 집어 넣는 값을 의미한다. function sum(){ //현재 인자 값이 존재하지 않는다. 그 이유는 인자가 들어오는 수를 예측 할 수 없기 때문이다. //함수 안의 arguments객체 안에 존재하는 값들을 꺼낸 후 sum에 더해 return해주면 결과를 알 수 있다. var _sum = 0; for(var i = 0; i < arguments.length; i++){ document.write(i+' : '+arguments[i]+' '); _sum += arguments[i..

[JavaScript] 값으로서의 함수와 콜백

값으로서의 함수 함수는 객체이다. 일종의 값이라고 볼 수 있다. 거의 모든 언어가 함수를 가지고 있다. But, JavaScript의 함수가 다른 언어의 함수와 다른 점은 함수가 값이 될 수 있다는 점이다. ※ function a( ){ }를 다른 방식으로 표현 하면 var a = function() {}(변수 a의 값은 함수이다.)이라고 표현할 수 있다. a = { b:function(){ //여기서 함수는 값이고 객체에 저장될 수 있다. /* key = b ->변수와 같은 역할을 해주고 있다. value = function(){} key값을 속성,property라 부른다. 그리고 value값을 메소드라 부른다. 즉, 객체 안에 정의되어있는 함수를 메소드라 부른다. */ } } 상단의 코드의 key값을..

HTML과 CSS만을 이용해 유튜브 나만의 방식으로 해석하기

나만의 youtube page 만들기 HTML과 CSS의 감을 익히고자 여러 플랫폼의 페이지를 저만의 방법으로 만들어보았습니다. 우선적으로 제가 직접 만든 후 드림코딩 엘리님의 영상을 참고해 몇몇 부분들을 수정하였습니다! 제가 만든 페이지의 URL은 하단의 링크로 접속하시면 됩니다! (+)TMI, 그리고 나오는 영상은 제가 직접 편집한 유튜브 영상입니다😊 https://youtubeclone.y00nmin.repl.co/ Youtube_Mobile #Yoon Coding #Yoon Coder #Yoon Clone Coding: Youtube Mobile Website 유튜브 모바일 웹사이트 따라 만들기 | 프론트엔드 개발자 입문편: HTML, CSS, Javascript 드림코딩과 함께하는 프론트엔드 실..

Front-end 2021.10.27

[JavaScript ES6]유효범위 (지역변수와 지역변수), 정적 유효범위

✨유효 범위(Scope)란? 자바스크립트에서 객체나 함수는 모두 변수(variable)입니다. 변수의 유효 범위(scope)란 해당 변수가 접근할 수 있는 변수, 객체 그리고 함수의 집합을 의미합니다. 🌟지역(local) 변수와 전역(global) 변수 하단의 코드를 통해 지역변수와 전역 변수를 비교해보자 let vscope = 'global'; // 전역변수 // 애플리케이션 전역에서 접근 할 수 있는 변수 function fscope(){ let vscope = 'local'; // 지역변수 //함수의 중괄호 내에서만 접근 할 수 있는 변수 console.log(vscope); } fscope(); //fscope 함수는 같은 함수 안에 있는 vscope를 출력하게된다. 🟣전역 변수(global) l..

[WEB]API & UI & Interface

API: Application Programming Interface API(Application Programming Interface 애플리케이션 프로그래밍 인터페이스, 응용 프로그램 프로그래밍 인터페이스)는 응용 프로그램에서 사용할 수 있도록, 운영 체제나 프로그래밍 언어가 제공하는 기능을 제어할 수 있게 만든 인터페이스를 뜻한다 사전에서의 API 출처[위키피디아] 즉, API는 프로그램들이 서로 상호작용하는 것을 도와주는 매개체로 볼 수 있습니다. 기반이되는 시스템이 우리에게 제공한 interface를 응용해서 소프트웨어를 만드는 것입니다.(code의 형태를 띄고있는 interface.) ex) 응용프로그래밍 개발자가 alert이라는 명령어를 프로그래밍해서 웹브라우저에게 전달하면 우리는 alert..

Front-end 2021.10.23

[JavaScript ES6]객체(Object)

✨ JavaScript에서 객체(object)란? 객체는 데이터와 함수의 집합입니다. +) 일반적으로 객체는 여러 데이터와 함수로 이루어지는데, 객체 안에 있을 때는 이들을 프로퍼티와 메소드라고 부릅니다 자바스크립트는 객체 기반의 프로그래밍 언어이며, 자바스크립트를 구성하는 대부분의 모든 것은 객체입니다. 객체는 서로 연관되어있는 데이터를 담아내기 위한 그릇이라 생각해도되는데 이는 배열과 매우 유사한 모습을 보여준다. 🤔 그럼 그들의 차이점을 잠시 들여다보자 객체 배열 원하는 데이터 값(문자,숫자 등)을 지정 할 수 있다. index 값에 숫자를 저장 key = value의 쌍이 객체 안에서 저장될때 순서가 정해져있지 않다. index값의 순서가 정해져있다. 추가적으로 알아두면 좋은 정보로 인덱스로 문자..

[JavaScript ES6]배열(array)

✨배열(array)이란? 배열은 칸마다 촘촘히 박스가 모여있는 자료구조를 의미한다. 배열의 포인티는 각 칸(박스, 메모리)에 인덱스 값이 지정되어있다. ➕자료구조란? 자료구조는 비슷한 종류의 요소들을 모아서 분류한 것을 의미한다. 분류한다는 것을 예시로 몇 개 들어보겠다. 오브젝트는 서로 연관된 특징과 행동들을 묶어둔 것이라 생각하면 되며, 오브젝트들을 묶어둔 것을 자료구조라 한다. Type(문자열, 정수, 실수 등)이 있는 언어에서는 동일한 Type의 데이터만 담을 수 있다. BUT, Javascript는 타입이 동적으로 정의되기 때문에 한 자료구조에 여러 Type을 담을 수 있다. (그러나 그렇게 하진 않는다.) 👀index의 특징 배열은 요소 index로 문자열을 사용할 수 없습니다. 무조건 정수만..

[JavaScript] 함수[재사용성,입력(input), 출력(output)]

함수: 상자 함(函) 셈 수(數) function: 기능 함수란? 함수는 하나의 로직을 재실행 할 수 있도록 하는 것으로 코드의 재사용성을 높여준다 재사용성이란? 1.내가 작성한 코드를 여러 맥락에서 다시 사용 할 수 있도록 도와준다. 2. 코드 작성 시간을 단축 할 수 있다. 3. 코드 자체의 변화가 생기면, 모든 코드가 동시에 변화가 일어난다. 4. 코드의 가독성 증가 즉, 유지 보수의 용이한 특성을 가졌다. 함수(function)의 기본 문법틀 function 함수명([인자...[,인자]]){ 코드 return 반환값 } function numbering(){ document.write(1); } //함수를 정의(선언)함, (변수를 선언하듯) numbering(); //함수를 실행. 괄호()가 있기..

[JavaScript]반복문(while문 ,for문) 제어와 중첩

반복문 Loop,iterate 대표적인 문법으로 while문과 for문이 있다.(~하는 동안 반복적인 작업을한다.) while문 while의 문법(하단) while(조건){ 반복해서 실행할 코드 } 조건에 boolean값이 들어가야한다. 조건의 값이 true인 동안에 중괄호 사이의 반복하고자하는 코드가 false값이 될 때까지 반복한다. 무한루프(무한반복) 즉, 어떠한 반복이 실행될때, 끊임 없이 반복되어 컴퓨터에게 부담을 주는 상황 이를 해결하기 위해 반복문이 적절한 상황에서 false가되는 것이 중요하다. var i = 0; while(i < 10){ document.write("Codinglog "+ i +" "); i = i + 1; } while의 3가지 조건 1.초기화 var i = 0; 2...