프로그래밍 언어 & 데이터베이스/JavaScript31 배열(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 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. 변수와 대입 연산(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. 이전 1 2 3 4 다음
