본문 바로가기

개발자 꿈나무/JavaScript15

함수(function) 기초 - 매개변수(parameter), 인자(argument), 리턴(return) 아래와 같은 스크립트가 있다. 일정한 규칙성이 있다면 반복문을 사용하면 되지만, 그렇지 않은 경우에 우리는 함수(function)로 풀어낼 수 있다. 아래와 같이 함수식을 작성하여 표현할 수 있다. 첫번째 코드와 두번째 코드의 결과는 똑같이 보여진다. 매개변수(parameter)와 인자(argument) 아래 두개의 코드는 같은 값을 출력한다. 그렇다면 아래와 같은 결과값을 갖고 싶다면 어떻게 하는 것이 좋을까? sum에 숫자 2와 3이 들어있다면 결과값으로 5를 출력하고, 3과 4가 들어있다면 결과값으로 7을 출력하게 하는 것이다. 위와 같이 코드를 작성하면 결과값으로 의도한 5, 7을 각각 얻을 수 있다. 여기에서 함수이름인 sum 옆의 괄호()안에 있는 left, right를 매개변수(paramet.. 2020. 10. 8.
함수(function) 기초 함수란? 함수 기초를 쉽고 자세하게 다룬 페이지가 있어서 url을 공유한다. (내가 설명하는 것보다 그게 나을듯=_=) http://tcpschool.com/javascript/js_function_basic 코딩교육 티씨피스쿨 4차산업혁명, 코딩교육, 소프트웨어교육, 코딩기초, SW코딩, 기초코딩부터 자바 파이썬 등 tcpschool.com 요약하자면 함수(function)란... 하나의 특별한 목적의 작업을 수행하도록 설계된 독립적인 블록을 의미하여, 이러한 함수는 필요할 때마다 호출하여 해당 작업을 반복 수행할 수 있다. -> 자바스크립트에서 블록이란 함수나 실행문의 {중괄호}로 묶여진 부분을 가리킴 함수 문법 function 함수이름(매개변수1, 매개변수2,...) { 함수가 호출되었을 때 실행하.. 2020. 8. 20.
반복문에 배열 활용하기 반복문에 배열을 활용하는 방법을 알아보자! Loop & Array Co workers egoing heina luna yunsisters 직원(co workers)이 이고잉, 해이나, 루나, 윤시스터즈 - 총 4명이 있다. 만약 co workers의 목록이 일억개이고 가 매우 빈번하게 수정되는 긴 코드라면 유지보수에 상당한 어려움을 겪을 것이다. Loop & Array Co workers 위와 같이 배열을 사용하여 직원 명단을 반복적으로 추출할 수 있다. 만약 멤버가 한명 추가되면, coworkers에 요소를 추가하고 반복문의 조건값도 i < 5 로 수정하면 된다. 만약 멤버가 두명 삭제된다면 빈 값 만큼 undefined로 추출된다. 매번 멤버의 수를 맞추어 주어야 하기 때문에 번거롭다. 데이터가 바뀌.. 2020. 8. 18.
반복문(Loop) 반복문이란? 컴퓨터 프로그래밍에서 반복문은 제어문 중의 하나로, 프로그램 소스 코드 내에서 특정한 부분의 코드가 반복적으로 수행될 수 있도록 하는 구문이다. 직접 활용해보자! Loop 위의 스크립트를 실행하면 1,2,3,4가 순서대로 추출된다. 그런데 만약 2,3을 1억번 반복해서 추출해야 한다면? 물론 위의 소스를 1억번 복사 붙여넣기 해도 같은 결과값을 얻을 수 있지만, 수정할 부분이 생기면... OTL 유지보수가 몹시 불편할 것이다. 그래서 우리는 반복문을 사용한다. 변수 i의 값을 이용하여 2,3이 3번 반복 추출되도록 만들었다. 반복문을 사용할 때에는 반복문이 '언제 종료될 것인가'를 꼭 지정해 주어야 한다. ※생활코딩 > WEB > WEB2 - JavaScript 강의를 통해 공부한 내용입니다. 2020. 8. 15.
배열(Array) 배열(Array)이란? 프로그래밍을 하면 성격이 모두 다른, 굉장히 많은 데이터를 다루게 됨 -> 점점 늘어나면 감당이 안됨 -> 데이터 중에 서로 연관되어 있는 것들을 잘 정리정돈해서 담아두는 수납상자 = 배열 (Array) 좀 더 자세한 설명이 필요한 듯 하여 구글 서치를 해 보았다. 더보기 배열은 같은 종류의 데이터를 많이 다뤄야 하는 경우에 사용할 수 있는 가장 기본적인 자료 구조로서 같은 타입의 변수들로 이루어진 유한 집합으로 정의된다. 배열을 구성하는 각각의 값을 배열 요소(element)라고 하며, 배열에서의 위치를 가리키는 숫자는 인덱스(index)라고 한다. 인덱스는 언제나 0부터 시작하며, 0을 포함한 양의 정수만을 가진다. 활용해보자! Array Syntax - coworkers 안에.. 2020. 8. 6.
리팩토링(refactoring) 코드의 가독성을 높이고, 유지보수 하기 편리하도록 만들고, 중복된 코드를 제거하는 방향으로 코드를 다시 효율적으로 개선하는 작업 var target = document.querySelector('body'); id="night_day"와 document.querySelector('#night_day')는 this를 사용하여 보다 효율적인 운영이 가능하다. document.querySelector('body')의 중복을 target을 설정하여 제거 -> 이제 target을 변경하면 코드 속의 모든 target이 동시에 바뀐다. ※생활코딩 > WEB > WEB2 - JavaScript 강의를 통해 공부한 내용입니다. 2020. 7. 13.
조건문 조건문이란? if (boolean 데이터 타입이 오면, 조건에 따라서) {true일 경우에 실행되는 코드} else {false일 경우에 실행되는 코드} Conditional statements Program if-true if-false If-true : 1, 2, 4가 차례로 출력됨 If-false : 1, 3, 4가 차례로 출력됨 조건문의 활용 => 클릭 시에 배경이 검정색, 폰트가 흰색으로 변경되며, 같은 버튼을 한 번 더 누르면 배경이 흰색, 폰트가 검정색으로 변경되는 토글 버튼 [검색 tip] 자바스크립트의 요소 중에서 value값을 얻으려면, - 검색어 : Javascript element get value - 검색결과 : document.getElementById("myText").valu.. 2020. 7. 11.
비교 연산자와 Boolean 데이터 타입 === : 비교연산자, 이항연산자(=좌항과 우항을 비교해서 어떠한 데이터를 만듬) Boolean : True, false로 구분되는 데이터 타입 - 참, 거짓 두개의 데이터로만 이루어져 있음 ※데이터 타입의 종류 : number, string, boolean, ... Comparison operator & Boolean === 1===1 1===2 1<2 1===1 : 왼쪽에 있는 것과 오른쪽에 있는 것이 같으냐는 질문, true가 출력됨 1===2 : false가 출력됨 1<2 : 1 WEB > WEB2 - JavaScript 강의를 통해 공부한 내용입니다. 2020. 7. 11.
프로그램, 프로그래밍, 프로그래머 자바스크립트, html은 모두 컴퓨터 언어이다. 자바스크립트는 컴퓨터 언어이면서 동시에 프로그래밍 언어이지만 html은 프로그래밍 언어는 아니다. 프로그램 은 '순서'라는 의미를 가지고 있다. 순서를 만드는 것을 '프로그래밍' 이라고 하며, 순서를 만드는 사람을 '프로그래머' 라고 한다. 자바스크립트는 시간의 순서에 따라서 웹브라우저의 여러 기능이 실행되어야 하기 때문에 프로그래밍의 형태를 띄고 있다. ex) 조건에 따라 다른 순서의 기능이 실행, 반복해서 특정 기능이 실행, 복잡해진 순서를 단순하게 정리정돈하는 방법을 고안 등 ※생활코딩 > WEB > WEB2 - JavaScript 강의를 통해 공부한 내용입니다. 2020. 7. 11.
자바스크립트에서 태그 선택하기 구글에서 자바스크립트 태그 선택할 때 검색 tip Javascript select tag by css selector Element = document.querySelector(selectors); 예시) var el = document.querySelector(".myclass"); Javascript element style Javascript style background color → css 태그와 자바스크립트 태그는 다를 수 있음 (background-color vs backgroundColor) 활용해보자! → night 와 day 라고 되어 있는 버튼이 2개 생성됨 → night 클릭시 body 부분의 배경이 검정, 폰트가 흰색으로 변경(야간모드) → day 클릭시 body 부분의 배경이 흰.. 2020. 6. 7.