본문 바로가기

JavaScript13

0036. JavaScript 공부하기 11 - 원시 데이터 타입, 레퍼 객체, 복제, 참조 섹션 25. 객체지향 - 데이터 타입 1강. 원시 데이터 타입과 객체 원시(기본) 데이터 타입 vs 객체(참조) 데이터 타입 원시 데이터 타입(primitive type) 숫자 → Number 문자열 → String 불리언(true/false) → Boolean null → X undefined → X 이게 아니면 모두 객체 데이터 타입, 참조 데이터 타입이다. 2강. 레퍼 객체 객체 접근 연산자(Object access operator) - str.length 에서 "."으로 점찍은 것을 말한다. 자바스크립트에서 문자열을 객체처럼 사용하려고 하면 자바스크립트가 그것을 객체처럼 만들어 버린다. 래퍼 객체(wrapper object) 원시데이터 타입이 있을 때, 원시 데이터 타입을 감싸주는 객체 원시데이터.. 2024. 1. 9.
0035. JavaScript 공부하기10 - 객체지향 상속, prototype, 표준 내장 객체, Object 섹션 22. 객체지향 - 상속 1강. 상속이란? 상속(inheritance) 객체지향에서 아주 중요한 개념 객체의 로직을 그대로 물려받는 또 다른 객체를 만드는 기능을 의미한다. 다만, 그대로 물려받는 것이 아니라 기존 로직을 수정하고 변경한 파생된 새로운 객체를 만들게 해 준다. 로직 재활용 가능 //original function Person(name) { this.name = name; this.introduce = function() { return 'My name is ' +this.name; } } var p1 = new Person('innovation'); document.write(p1.introduce()+" "); function Person(name) { this.name = nam.. 2024. 1. 9.
0034. JavaScript 공부하기9 - 객체지향 프로그래밍, 추상화, 부품화, 생성자와 new, 전역객체, apply와 this 섹션 18. 객체지향 - 객체지향 프로그래밍 소개 1강. 객체지향 프로그래밍 오리엔테이션 1) 객체지향 프로그래밍(OOP, Object-Oriented Programming) 좀 더 나은 프로그램을 만들기 위한 프로그래밍 패러다임 로직을 상태(state)와 행위(behave)로 이루어진 객체로 만드는 것 2) 핵심 : 객체(Object) 객체는 레고블록처럼 객체+객체로 조립해서 프로그램을 만들 수 있다. 이런 기법을 OOP라고 한다. 프로그램이 커지면서 발생하는 막장을 해결하기 위해 Grouping, Categorizing이 쓰이는데, 그룹핑된 하나하나의 단위들을 객체라고 생각하면 된다. 객체끼리 구획화시키고 분류해서 생각한다. 재활용성에 객체가 기여한다. 여기서 쓰던걸 저기에 쓰니 여러 문제가 발생하는.. 2024. 1. 8.
0033. JavaScript 공부하기8 - 클로저, 내부함수, 외부함수, private variables, 함수지향, argument, parameter, apply 섹션 15. 함수지향 - 클로저 1강. 내부함수, 외부함수 1) 클로저(closure) 내부함수가 외부함수의 맥락(context)에 접근할 수 있는 것을 말한다. JavaScript를 이용한 고난도의 테크닉을 구사하는데 필수적인 개념이다. 외부 함수 outter의 내부에는 내부 함수 inner가 정의되어 있다. 내부함수는 외부함수의 지역변수에 접근할 수 있다. function outter() { var title = 'coding everyday'; function inner() { alert(title); } inner(); } outter(); inner에 title에 대한 정의가 없기 때문에 outter에서 title = 'coding everyday'를 가져온다. 2강. 클로저란? 외부함수가 더 .. 2024. 1. 5.
0032. JavaScript 공부하기7 - (시즌2) 유효범위, 전역변수, 지역변수, 함수지향, 콜백, 비동기적 처리, Ajax 섹션 13. 함수지향 - 유효범위 (시즌2 시작) 1강. 전역변수와 지역변수 JavaScript : 함수형 언어, 함수가 매우 중요하다. 유효범위(Scope) : 변수의 수명 1) 지역(local) 변수와 전역(global) 변수 지역변수는 함수의 안( { 와 } 사이)에서 먼저 변수를 찾고, 없으면 밖에서 변수를 찾는다. 전역에서 접근할 수 있다는 의미로 전역변수라고 칭한다. 함수 안에서만 접근 가능한 변수가 지역변수이다. 로컬 변수를 만들 때 var이라는 키워드를 쓰게 되면 var 뒤에 따라오는 변수는 local 변수가 된다. var를 사용하지 않으면 전역 변수로 인식하기 때문에 전역 변수로서의 결괏값이 출력된다. var vscope = 'global'; function fscope() { var v.. 2024. 1. 5.
0031. JavaScript 공부하기6 - UI, API 소개 및 JavaScript 정규표현식 섹션 11. UI와 API 그리고 문서 보는 법 1강. UI와 API 수업 소개 API란? Application Programming Interface 프로그램이 동작하는 환경을 제어하기 위해서 환경에서 제공되는 조작 장치 프로그래밍 언어를 통해 조작할 수 있음 https://opentutorials.org/course/743/6533 UI와 API 그리고 문서보는 법 - 생활코딩 API란? Application Programming Interface의 약자로 프로그램이 동작하는 환경을 제어하기 위해서 환경에서 제공되는 조작 장치이다. 이 조작 장치는 프로그래밍 언어를 통해서 조작할 수 있다. 아래 영 opentutorials.org 2강. UI와 API 소개 UI : User Interface API .. 2024. 1. 4.
0030. JavaScript 공부하기5 - 모듈(Module), 라이브러리(Library), jQuery 섹션 10. 모듈 1강. 모듈이란? 1) 모듈 부품을 의미 재사용할 수 있는 단위로 구획화하여 모듈화 하고, 다른 프로그램에 사용한다. 자주 사용하는 코드를 별도의 파일로 만들어서 필요할 때마다 재활용 코드 수정 시에 필요한 로직을 빠르게 찾을 수 있다. 2) 호스트 환경 자바스크립트가 구동되는 환경을 의미한다. 2강. 모듈화 src : 속성 main.html 파일 greeting.js 파일이 모듈이다. function welcome(){ return 'Hello World^_^'; } 이 모듈은 여러 군데에서 쓰일 수 있다. sub.html 파일 위의 예시에서는 greeting.js가 main, sub에서만 쓰였지만 실제로는 더 복잡한 함수를 더 많은 페이지에 넣기 때문에 일을 훨씬 간편하게 할 수 있.. 2024. 1. 3.
0029. JavaScript 공부하기4 - 함수(Function), 배열(Array), 객체(Object) 섹션 7. 함수 1강. 함수란? 함수(function) : 하나의 로직을 재실행할 수 있도록 하는 것으로 코드의 재사용성을 높여준다. 1) 함수의 형식 function 함수명( [인자...[,인자]] ) { 코드 내용 return 반환값 } numbering 뒤에 ()는 함수라는 뜻 함수를 정의하고 함수를 원하는 만큼 호출하면 앞에서 정의한 함수를 찾아서(1번) 2번에서 원하는 만큼 함수가 호출됨 2) 함수의 재사용성 함수는 정의가 잘 되어 있으면 재사용하기가 쉽다. 2강. 함수의 효용 만일, 함수가 없다면? 반복문 : 일정한 반복을 그 자리에서 실행할 때 용이함 함수 : 반복적으로 실행되는 로직이 여러가지 맥락에서 반복되어 사용될 때 용이함 (재사용성 ↑) 재사용성이 높아지면? 유지보수(Maintana.. 2024. 1. 3.
0028. JavaScript 공부하기3 - 반복문(while, for, break, continue) 섹션 6. 반복분 1강. 반복문 기본 문법 - while 컴퓨터에게 반복적인 작업을 지시하는 방법 1) 반복 : loop, iterate 반복문과 조건문은 매우 중요하다. 조건문 : 컴퓨터를 똑똑하게 함 반복문 : 컴퓨터를 강력하게 함 2) 반복문의 문법 : while, for while (조건, Boolean) { 반복해서 실행할 코드 } 조건이 true에서 false가 될 때까지 반복해서 실행 2강. 반복조건 반복 조건을 설정해주지 않으면 while(true)가 무한적으로 생성(무한루프)되기 때문에 과부하가 걸린다. 그래서 반복 조건을 설정해서 적당히 끊어줘야 한다. i라는 변수를 설정해서 0부터 카운트하게 하고, 9까지만 실행되도록 설정했다. 그리고 출력값에는 몇 개가 출력되었는지 나타나도록 넘버링.. 2024. 1. 3.
0027. JavaScript 공부하기2 - 연산자, 부정, 부등호, 조건문, Boolean (Feat. 잘못된 코딩 공부순서) 섹션 4. 비교 1강. 연산자 연산자 : 어떤 작업을 컴퓨터에 지시하기 위한 기호 예 : a=1 a : 변수 = : 대입연산자 (좌항에 있는 값에 우항을 대입한다) 1 : 값 (상수, 변수에 대항되는 개념) 비교 연산자 : >, = : 좌항이 우항보다 크거나 같다. DOCTYPE html> var id = prompt('아이디를 입력해주세요.'); if(id == 'egoing'){ var password = prompt('비밀번호를 입력해 주세요.'); if(password == '111111'){ alert('로그인 되었습니다. '+id+'님 반갑습니다!') } else { alert('비밀번호가 다릅니다.') } } else { alert('아이디가 일치하지 않습니다.'); } 4강. 논리 연산자 .. 2024. 1. 2.