본문 바로가기

자바스크립트21

자바스크립트 자료형 타입(Java Script - Data type) 파이썬 기초 강의를 다 듣고 나서 중급 강의를 듣기 전, 자바 스크립트 기초 강의를 먼저 듣기로 했다. 아직 5~6강 밖에 듣지 않았지만 목차를 보니 데이터 타입, 조건문 등 파이썬 강의에서 다루었던 내용과 유사한 것이 많을 것 같다는 느낌적 느낌(!)이 들었다. 겹치는 부분이 있더라도 복습을 한다는 마음으로 열심히 듣고, 정리가 필요하다고 생각되는 부분들은 블로그에 기록해 두려고 한다. 자바스크립트 자료형 타입(Data type) 자바스크립트 뿐만 아니라 다른 프로그래밍 언어에 공통적으로 적용되는 개념이니 꼭 이해하고 넘어가는 것이 좋을 것 같다. 숫자(Number) 정수(Interger) 타입과 소수(Floating point) 타입으로 다시 나눌 수 있다. 정수 타입은 음의 정수, 0, 양의 정수를.. 2021. 7. 12.
함수(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.
조건문 조건문이란? 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.
변수와 대입 연산(variable vs constant) / 변수를 사용하는 이유 위와 같은 코드에서 x와 y는 변수(variable)이고 1은 연결해주는 '='는 대입 연산자이다. x는 대입 연산자에 의해서 값이 바뀔 수 있다는 의미를 가지고 있는 '변수'이지만 숫자 1은 항상 동일하기 때문에 항상 상(常)자를 사용하여 '상수'라고 부른다. 따라서 상수인 1에 2를 대입하려고 하면 (1=2;) 오류가 발생한다. 변수를 사용하는 이유는? 아무말 대잔치 문장이 있다. 예시로 든 문장은 짧지만 만약에 아주 긴 문장이 있고, 해이나가 1억번 사용되었다고 가정한다. 만약 문장 내의 '해이나'라는 단어를 모두 'heina'로 바꾸고 싶다면... 난감하다. 때문에 name 값으로 '해이나'를 인식시킨 후에 "+name+"을 사용하여 문장을 작성한다. -> 실행을 유보하고 싶을 때는 shift 키.. 2020. 5. 23.
자바스크립트 데이터 타입(JavaScript Data Type) - 숫자(Number), 문자열(String) 자바스크립트에는 여러가지 형태의 데이터 타입들(Boolean / Null / Undefined / Number / String / Symbol)이 있는데, 이 중에서 문자열(String)과 숫자(Number)에 대해서 살펴보도록 하겠다. 문자열(String) 큰 따옴표, 혹은 작은 따옴표로 감싸서 표시한다. ex) "Hello world" / 'hello world' 문자를 처리할 때 사용할 수 있는 명령들은 정말 정말 정말~~~ 많다. 그 중에서 몇가지만 직접 해보자! ※참고 사이트 : https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/String (구글에서 Javascript string 이라고 검색) .leng.. 2020. 5. 17.
JavaScript 기초(2) - 콘솔(console) 사용하기 우리가 자바스크립트를 실행하고자 할 때 매번 파일을 생성해야 한다면 이건 여간 귀찮은 일이 아니다. 그래서 이 포스팅에서는 파일을 만들지 않고도 자바스크립트 코드를 즉석에서 실행할 수 있는 방법에 대해서 설명하고자 한다. 브라우저 창에 마우스 커서를 두고 우클릭 - 검사(개발자 도구) 선택 - Console 탭을 선택 - 코드를 입력 활용해 보자! 아래와 같은 글이 있다고 친다 -_-; "안녕, 나는 해이나야. 나는 지구라는 별에서 살고 있어. 지구는 물이 매우 풍족하고, 낮과 밤이 있으며, 매일 햇살과 바람을 느낄 수 있는 아름다운 별이야. 기회가 되면 꼭 놀러와. 우리 함께 놀자." 이 문장의 전체 글자수가 궁금하다면? 위 경로를 통해 console에 들어간다. 문자를 작은 따옴표(' ')로 감싸고,.. 2020. 5. 17.
자바스크립트 이벤트 종류(HTML Event Attributes) 지난 시간(포스팅?)에 on으로 시작하는 친구들~ 자바스크립트 이벤트(event)와 관련된 공부를 했다. 내가 요녀석을 이해한 바로는... 이벤트는 '사건'이 일어났을 때에 동작하는 것으로 웹브라우저가 자바스크립트 코드를 기억해두었다가, 사용자가 특정 행동을 했을 때 동작한다. 이벤트에는 다양한 종류들이 있는데 찾아보다가 유익한 페이지가 있어서 링크를 공유한다. https://www.w3schools.com/tags/ref_eventattributes.asp HTML Event Attributes HTML Event Attributes Global Event Attributes HTML has the ability to let events trigger actions in a browser, like s.. 2020. 5. 1.