메모장

출력은 return 이라는 것과 관련이 있습니다. return을 배우기 전에 표현식(expression)이라는 것이 무엇인지 설명하겠습니다. sum()이라는 함수를 실행하면 document.write(left + right + ''); 이 실행되겠지만 이번에는 sum()을 실행했을때 2+3의 계산결과인 5를 받도록 표현식을 만들고 싶습니다.  계산이라는 기능만을 sum2() 함수에 구현함으로써 원자화 된 기능을 다양한 맥락에서 사용할 수 있는 자유가 생깁니다. 이것이 바로 return이 우리에게 해주는 엄청난 혜택입니다. 매개변수를 통해 들어간 값을 return 을 통해 출력함으로써 다양한 용도로 함수를 활용할 수 있게 된다는 무척이나 중요한 이야기를 전해줍니다.

수학에서 함수는 입력과 출력으로 이뤄져 있다고 했는데, 입력에 해당하는 것을 매개 변수 (parameter) 또는 인자(argument)라고 합니다. 출력에 해당하는 것은 return과 관련이 있습니다.  이처럼 onePlusOne() 함수는 언제나 똑같이 동작하는 함수 입니다. 입력값에 따라 다른 결과를 출력하는 함수로 만들기첫번째 자리엔 left, 두번째 자리엔 right 변수를 정의 , 이러한 변수를 매개하는 변수라 해서 매개 변수 (parameter)라고 합니다. 이때 함수로 전달하는 2,3이라는 값을 인자 (argument)라고 하며 이 값을 받아서 함수안으로 매개하는 변수를 매개변수라 합니다. 즉, 매개변수와 인자는 함수로 들어오는 입력값과 관련된 용어라는 것을 기억해 두시면 됩니다.

함수의 기본적인 문법을 배우고, 매개변수(parameter)와 인자(argument)를 배운 다음, return 키워드에 대해 배웁니다.  반복이 되는 코드에 반복문을 사용하려고 하는데 반복문을 쓸 수 없는 경우가 있습니다. 연속적으로 반복되는 것이 아니라 연속되지 않게 반복된다면 반복문을 사용하는 것이 어렵거나 불가능해집니다. 만약 중복이 1억 번이며 연속적이지 않다면 반복문으로는 불가능합니다. 이때 함수라는 것이 등장합니다. ... 생략 ... ... 생략 ... two();를 보면 웹브라우저는 'two라는 함수를 실행하고 싶구나' 라는것을 알게 됩니다. 그래서 two 함수의 코드를 two();가 위치하는 곳에 있는 것처럼 실행 하게 됩니다. 이것이 바로 함수의 기본적인 문법 입니다.

함수는 영어로 function 이라고 하는데, 함수라고 했을때 떠오르는 이미지는 수납상자 입니다. 코드가 많아지면 그 코드를 잘 정리 정돈 하기 위한 도구가 필요합니다. 첫 번째로 생각할 수 있는 아주 간단하며 강력한 도구가 함수 이고, 그것보다 좀 더 큰 도구는 객체 입니다. ... 생략 ... // self 추가해주기 function nightDayHandler(self) { var target = document.querySelector('body'); if(self.value === 'night') { target.style.backgroundColor = 'black'; target.style.color = 'white'; self.value = 'day'; var..

웹 페이지에 있는 모든 태그 가져오기 document.querySelectorAll('a');모든 태그를 가져와서 alist 변수에 넣고 출력하기 var alist = document.querySelectorAll('a');console.log(alist[0]);console.log(alist[1]);console.log(alist.length);반복문으로 모든 링크 출력하기 var alist = document.querySelectorAll('a');var i = 0;while( i console.log( alist[i] ); i = i + 1;}이것들을 이제 적용 해보자 ! 예시) 야간모드일 경우에는 태그의 글자 색을 'powderblue'로 만들고, 주간모드일 경우에는 태그의 글자 색을 '..

위에서 부터 아래로 순서대로 코드를 실행 하는 것이 프로그램의 기본적인 실행 순서 입니다. 필요에 따라서는 여러번 반복해야 할 경우가 있습니다. 먼저 반복문의 기본 문법을 사용해 보겠습니다.  while 괄호 안에 boolean 데이터 타입이 들어옵니다. 따라서 true 나 false 중 하나가 들어갈 수 있습니다. 이때 while 괄호 안에 내용이 true 인 동안에는 while문 안의 코드가 반복적으로 실행 됩니다. while 괄호 안의 내용이 false가 될 때 까지 입니다. 즉, 반복문이라는 것은 순서대로 실행되는 프로그램의 흐름을 제어하는 제어문이라고 할 수 있습니다.디버깅 표를 그려보자 !!!첫번째두번째 세번째 네번째var i = 0;0123while( i 참참참거짓document.write(..

데이터가 많아짐에 따라 그 많은 데이터를 그냥 둘 수 없기때문에 데이터 중에서 서로 연관된 데이터를 잘 정리 정돈해서 담아두는 일종의 수납상자 를 배열 (array) 이라고 생각하면 됩니다. 문자열은 어떤 기호로 시작해서 어떤 기호로 끝나나요 ? 따옴표로 시작해서 따옴표로 끝나게 됩니다. 배열은 대괄호로 시작해서 대괄호로 끝납니다. 그리고 대괄호 안에 값들을 적는데 , 여러개의 값을 적을 수 있습니다. 새로운 수납상자를 갖다 넣으면서 그안에 물건을 두개 넣은 것과 같습니다. 그러면 배열을 만드는 것을 해봤으니 , 배열에 들어있는 항목을 가져오는 방법을 살펴 보겠습니다. 배열에 첫번째로 들어가있는 데이터를 꺼내고 싶은 경우 coworkers[0] 이라고 쓰면 'egoing' 이 나옵니다. 즉 , 첫번째 자..

저번시간에 이어서 버튼을 클릭했을 때 웹페이지에 있는 모든 링크에 대해 style 속성의 값을 조절해서 밝게 바꾸도록 코드를 작성해도 되겠지만 , 링크가 1억개 라면 1억번의 반복적인 작업을 해야합니다. 그럼 코드의 양이 늘어나며, 유지보수가 매우 힘들어집니다. 이번시간엔 반복문을 배우기 위한 개요를 알아보자. 먼저 반복문을 적용한 결과부터 보여드리고, 반복문을 도입하기 위해 필요한 것들을 다음시간에 살펴 봅시다.  var alist = document.querySelectorAll('a');var i = 0;while(i 코드의 대략적인 내용은 이 웹페이지의 모든 태그를 가져온다음 , 태그 하나하나에 대해 반복적으로 powderblue 색상을 지정하는 것입니다. 이 코드를 이해하기 위해 필요한 부품들..

리팩터링이란 단어에서 팩토리(factory)는 '공장'이며 , 리(re)는 '다시' 라는 뜻으로 리팩터링이란 공장으로 다시 보내 개선한다는 느낌으로 생각 하면 됩니다. 코딩을 하고 나면 코드에 비효율적인 면이 생기기 마련인데 코드 자체를 효육적으로 만들어서 그 코드의 가독성을 높이고 , 유지보수를 편리하게 만들고, 중복된 코드를 줄이는 방향으로 코드를 개선하는 작업을 리팩터링 이라고 합니다. .. 생략 .. WEB .. 생략 ..JavaScript란 무엇인가? .. 생략 .. 이런 코드를 같은 원리로 1억개의 버튼을 1억개 모두 바꿔야 하는 불편함을 겪게 될 수 있습니다. 그러한 불편함이 있기 때문에 onclick과 같은 이벤트 안에서 실행되는 코드에서는 현재 코드가 속해 있는 태그를 가리키도록 약속돼 ..

비교 연산자, 불리언 , 조건문 이라는 도구들이 얼마나 현실에서 구체적인 도움을 주는지 알아 봅시다.장황한 두 버튼이 필요 없이 하나의 기능으로 합칠 수 있다.