본문 바로가기

💻 Deep Wide Programming/Javascript & Vanila JS

(10)

[조코딩]javascript- API 활용 연습하기(카카오API로 책검색 웹 만들기) API마다 정해진 '요청'과 '응답'의 형식이 있는데, 이 형식이 작성된 문서를 API 가이드라고 부른다. 1. html 기본 세팅 후, 2. 3. Boby 중 맨 하단에 복붙 4. jQuery를 이용한 AJAX 쓰기 (jQuery로 ajax 함수를 쓰면 서버와 좀더 쉽게 소통할 수 있다) api.jquery.com/jquery.ajax/ jQuery.ajax() | jQuery API Documentation Description: Perform an asynchronous HTTP (Ajax) request. The $.ajax() function underlies all Ajax requests sent by jQuery. It is often unnecessary to directly call t..

[생활코딩 JS] object inheritance 객체 상속 (자바스크립트 객체지향 프로그래밍 시리즈) 📌클래스를 통한 상속이 아닌, 객체를 통한 상속에 대해 알아보고자 한다. ✍️ 주류 클래스 기반 객체지향언어의 방식 객체의 속성은 클래스 단에서 이미 결정이 된다. 객체가 다른 객체의 속성을 상속받을 수 없다. 그러나 자바스크립트에서는 다르다! 자바스크립트에서는 가능하다. 객체가 직접 다른 객체로부터 상속받을 수 있고, 얼마든지 상속관계를 바꿀 수 있다는 것! 또 다른 객체로부터 상속받기를 원한다면, 링크 교체를 통해 간단하게 상속관계를 바꿀 수 있다. 이 링크를 'prototype link'라고 한다. 이 링크가 가리키고 있는 객체를 'prototype object'라고 부른다. 📌__proto__를 이용해서 상속받을 수 있다. or 📌Object.create(); 를 이용해서 상속받을 수 있다.

자바스크립트의 클래스와 오브젝트의 차이점 알아보기(feat. 파이썬이랑 뭐가 다를까?) 📌 클래스와 오브젝트 붕어빵 틀(template) : 클래스 object: 팥을 넣으면 팥붕어빵, 크림 데이터를 넣으면 크림 붕어빵! ✅파이썬에서의 클래스와 객체 개념과 같다. 둘다 객체지향언어! 📌자바스트립트에서 클래스 사용하는법 파이썬과 다르게 자바스크립트에서는, 클래스를 선언하기 위해 'constructor'가 필요하다. 파이썬에서는 def 와 self를 사용했다면, 자바스크립트에서는 'constructor/method와 this'를 이용한다. 구조는 유사하다. 또한 오브젝트를 생성할 때도 차이가 있다. 파이썬에서는 별다른 별도 코드 없이 그냥 생성하면 되는데, 자바스크립트에서는 const와 new를 써준다. 📌 Getter & Setter incapsulation => private 만드는 것 클..

[노마드코더] 바닐라 JS 2/ 백틱! 과거 자바스크립트는 다음과 같은 방식으로 코드를 작성했다. 바로 내가 생활코딩에서 배웠던 방식이다! 이 방식에서 문자열은 ' '든, " "든 같았다. 여기에 새로운 방식이 추가되었는데 바로 저 ``백틱이라는 것이다. 맥 키보드에는 눈을 씻고 찾아봐도 없었다. 알고 봤더니 백틱은 이미 죽은 키로.. option + ₩ 을 누르면 입력할 수 있다. ``을 이용해, 위의 코드를 다음과 같이 보다 편하게 만들어줄 수 있다. function sayHello(name, age){ console.log(`Hello ${name} you are ${age} years old`); } 이렇게! 이번에는 greetNicolas라는 새로운 변수를 선언해서 이 함수를 실행해보겠다. greetNicolas는 sayHello 함..

[노마드코더] 바닐라 JS 1~ 1-10 자바스크립트.. 너....Super Cool! 니콜라스의 바닐라 JS 시리즈를 시작했다. 그랬더니, 생활코딩의 js를 배울 때와는 또 다른 세계가 열렸다! 자바스크립트로 이렇게 멋지고 쿨한 것들을 할 수 있다니!! 그리고 자바스크립트는 그 어떠한 다른 언어로도 대체할 수 없는 강력한 언어였다니!! 아래의 사이트에는 자바스크립트로 만든 게임들이 있다. 멋지다......나도 자바스크립트를 이용해서 우리 우봉이로 게임 만들어야지!!! https://impactjs.com/games Impact Games impactjs.com 바닐라 자바스크립트란? 앞서서 자바스크립트를 공부할 때 그런 의문이 있었다. 구글에 검색해보면, 어떤 명령을 위해 쓰이는 코드가 포스팅마다 조금씩 다른거다. 나는 생활 코딩에서 docu..

[생활코딩] Javascript 객체(object) 쓰기와 읽기 함수 퀵 리뷰 function 함수이름(매개변수1, 매개변수2,...) { 함수가 호출되었을 때 실행하고자 하는 실행문; } 1. 객체 쓰기 2. 객체 읽기 3. 객체에 추가하기 4. 띄어쓰기 있는 객체 추가하고 읽기 for(var key in coworkers) { document.write(key+':'+coworkers[key]+' '); } (Array 배열 기초 참고: http://tcpschool.com/javascript/js_array_basic) 객체에 소속된 함수 = method 객체에 소속된 변수 = property 위의 내용으로 치면, coworkers에 걸려있는 함수인 function(){ }에 해당하는 내용이 바로 method이고, coworkers에 걸려있는 변수인 progra..

[생활코딩] 배열과 반복문의 활용 / 함수의 기본, 매개변수와 인자, 출력 배열과 반복문의 활용 함수 이렇게, 위에 two라는 이름의 함수를 지정해줬고, 이후에 two()라고만 적어주면, 길게 코드를 반복해줄 필요없이 해당 함수를 실행 시킬 수 있다! 매개변수와 인자 parameter & Argumnet 입력(매개변수)과 Parameter & Argument(인자) function sum(left, right){ document.write(left+rigth+' '); } 태그 안에서 함수의 내용을 위와 같이 정의해준다. sum(2,3); sum(3,4); 이렇게 실행시켜주면 왼쪽의 화면처럼 5와 7이 산출된 것을 볼 수 있다. 출력 Return 출력을 이용하면, 단순 덧셈 뿐 아니라, 더 추가적인 다양한 요소들을 출력해야할 때 유용하다. 이전에는 다음과 같은 방식으로 함수를 ..

[생활코딩] javascript - 배열과 반복문 배열 반복문 반복문은 while을 이용해주는 것! i=0 이라는 변수를 먼저 지정해주는 것이다. i

이전 1 2 다음

728x90

티스토리툴바