본문 바로가기

WebApp/JavaScript

(20)
JavaScript의 이해 - object(객체) 1.object(객체) 함수나 변수가 많아지면 복잡해진다 그렇기에 서로 연관된 함수나 여관된 변수를 잘 그룹핑해서 정리정돈하기 위한 수납상자 같은 도구를 객체라고 함 배열이라는것은 정보를 담는 그릇이면서 동시에 정보가 순서대로 저장된다는 특징이 있다 그렇다면 순서없이 정보를 저장하는 것도 있지 않을까? 그게 바로 객체이다 객체란 이름이 있는 정리정돈 상자이다 변수에 객체를 담고싶다 객체를 만들떄 사용하는기호 오브젝트리터럴은 중괄호 {};이건 비어있는 객체 객체 안에다 정보를 넣고 싶다 대신 그냥 넣으면 안되고 넣고싶음 정보에 대한 이름이 있어야함 그러면 coworkers라는 객체에 egoing이라는 정보를 programmer라는 딱지를 붙여서 저장한 것 var coworkers = { 'programme..
JavaScript의 이해- 함수의 활용 1,2 함수의 활용 array&loop편에 있던 코드에서 onclick 내부에 있던 코드를 nightdayHandler라는 함수로 표현하여 코드를 추상화한 것 *script 안의 함수에게 매개 변수를 주지 않으면 this 는 전역객체?라는 아직은 이해할 수 없는 무언가를 가리키게 된다. 때문에 매개변수를 아무거나 지정하여(여기서는self) this를 그 매개변수로 바꾸어 주어야 하며, 핸들러를 정상적으로 작동시키기 위해서는 input 태그 안의 함수의 argument 로 this 를 지정해주면 된다. 어쨌거나 this는 그런 해당 태그를 가리키는 기능을 하니까
JavaScript의 이해 - function 1. function(함수)의 이해 웹브라우져는 function을 보고 {}를 본 이후 사용자가 two라는 함수를 만드려고 하는구나 그리고 그 함수는 {}안의 코드구나 라고 기억하고 있다가 two()를 보면 이것은 two라는 함수의 이름이었고 사용자가 two라는 함수를 실행하고 싶구나 라고 인식하고 실행한다 2. parameter(매개변수)와 argument(인자) 함수는 입력과 출력으로 이루어져 있으며 입력에 해당하는 것이 parameter(매개변수)와 argument(인자)이고 출력은 return(리턴)과 관련이 있다 목표: 함수를 실행할때 어떤 입력값을 주면 함수가 그 입력값에 따라서 다른값을 출력하게 하고싶다 예제2에서 미리만든 sum함수를 활용하기 위해 작성한 코드 sum(2,3)에서 2,3 그..
JavaScript의 이해 - array & loop 중점pointwhile(i
JavaScript의 이해 - Loop 1. Loop 순서대로 실행되는 것이 프로그램의 기본적인 순서이다 loop(반복문)을 사용할때 while(true or false){ } 즉 while()의 ()값을 보고 true이면 {}안에 있는 것을 순서대로 하나하나 실행시키고 그 끝에 다다르면 다시 ()안의 값이 true인지 false인지 보고 true이면 또다시 {}안의 코드를 반복하며 ()의 값이false가 될때까지 반복한다 *if문과 같이 while문의 ()안에는 true or false를 나타내는 boolean data types(,==등)이 온다
JavaScript의 이해 - array * 를 로 바꾸어도 인식이 됨 1. array 배열? 데이터가 많아짐에 따라 그 많은 데이터를 그냥 둘수 없기에 서로 연관된데이터를 정리해서 담아두는 수납장을 배열 이라고 한다 *배열안의 각각의 값을 원소(element)라고 하며 예를 들어 0번째 원소값을 get할때는 index 0 이라고 표현한다 *관려추천검색어 Javascript array add, get
JavaScript의 이해 - 리펙토링 1.리팩토링 - 중복의제거 document.querySelector('input')은 자기 자신의 태그를 가르키는 것으로 this로 대체가능 document.querySelector('body')는 변수를 주어 var target 으로 대체가능 *변수를 주는 위치는 해당 태그 안에서 동작하는 JavaScript의 언어가 오는 부분 상단 tip) 같은 레터 동시 드래그 단축키 = ctrl + D
JavaScript의 이해- Conditional statements(조건문) 예제1if(true){실행 type1}else{실행 type2}해석-if()의 괄호내용이 true라면 true절 내용인 type1을 실행하고 false인 else절은 무시한다 예제2if(false){실행 type1}else{실행 type2}해석-if의 괄호내용이 false라면 false절의 내용은 무시하고 else절인 type2를 실행한다 *조건문의 if()안에는 반드시 true or false 즉 Boolean data type이 들어와야하고 그렇기에 Boolean을 만드는 비교연산자들(==,===,,=,!==,!=== 등)을 사용하여 if () 안의 내용을 삽입해야한다. 활용예제1의 tag 해석1.type은 button이고 value는 night인 input을 생성, 그리고 그것을 onclick 했을..