본문 바로가기

javascript

 (47)
(생활코딩) Javascript 배열 (array) 문자는 "로 시작해서 "로 끝나게 된다. 배열은 [로 시작해서 ]로 끝나게 된다. 대괄호 안에는 여러 개의 값을 적을 수 있다. 위의 코드는 coworker라는 변수에 배열이라는 새로운 데이터 타입이 담긴 것이다. 그리고 coworker[0]을 출력한다. 여기서 배열의 첫 번째 자리에 있는 값은 0번째로 "yeony"가 출력이 된다. index 0 은 yeony가, index 1 은 sunny가 된다. 배열을 만들고, 값을 입력하고 가져오는 것에 대해서 살펴 보았는데 여기서 또 하나 핵심적인 내용인 들어있는 값이 몇개인가를 체크해보자. 추천검색어 : javascript array count 로 검색해보면 변수.length를 사용하면 된다고 나와있다. coworker.length를 사용하니 배열 안에 들어..
(생활코딩) Javascript 리팩토링 중복의 제거 이번에는 리팩토링이라는 것에 대해 살펴보자. 리팩토링(Refactoring)이라고 하는 것은 공장으로 다시 보내서 좀더 개선한다는 느낌이다. 코딩을 하고나면 코드가 좀 비효율적인 면들이 생기기 마련이다. 동작하는 것은 그대로 두고 코드 자체를 아주 효율적으로 만들어서 그 코드의 가독성을 높이고 유지보수를 하기 편리하게 만들고 중복된 코드를 낮추고 이러한 방향으로 코드를 다시 개선하는 작업을 리팩토링이라고 하고, 소프트웨어가 커지고 복잡해지면서 틈틈이 리팩토링을 해야 좋은 프로그램을 만들 수 있다. 전에 만들었던 조건문 코드에서 비효율적인 것들을 좀 제거하는 리팩토링의 사례를 한번 봐보자. toggle되는 버튼의 코드를 살펴보자. 이 버튼을 여러 개 만들고 싶어서 코드를 똑같이 복사했을 때 이 기능이 제대..
(생활코딩) Javascript 조건문의 활용 전 예제를 봤을 때, night와 day의 버튼을 누르면 각 기능들을 실행하게 작성하였다. 여기서 버튼을 하나로 만들어 백그라운드색=검정일 때 버튼을 누르면 하얀색으로, 백그라운드색=하양일 때 버튼을 누르면 검정색이 되도록 작성해보자. 이러한 기능을 토글(toggle)이라고 부른다. 조건문을 활용하여 value=night일때 day에 대한 기능이 실행되고, night이 아닌 경우에는 night에 대한 기능이 실행되게 작성해보자. 위와 같이 작성 후, 이제 상황에 따라 if의 조건부분이 true 또는 false가 되게 조건을 주어야한다. 조건을 주려면 현재 해당 버튼의 value값이 무엇인가를 알아낼 수 있어야 된다. 알아내기 위해서 Console을 이용하자. (그 전에 버튼의 id값을 night_day로..
(생활코딩) 비교 연산자와 불리언(boolean) 비교연산자와 그 비교 연산자를 통해 만들어지는 불리언(boolean)이라는 새로운 데이터 타입, 그리고 조건문에 대해서 살펴보자. 이 세가지는 아주 깊은 관련성이 있다. 일단 1과 1, 1과 2를 서로 비교해봤을 때, 동등 비교 연산자('===')로 비교를 한다. document.write() : 웹 페이지에 저 괄호 안에 있는 정보를 출력 a===b : 동등 비교 연산자, 왼쪽의 값 a 와 오른쪽의 값 b이 같은지 비교 (결과 값은 참 true / 거짓 false) 좌항과 우항의 관계에 따라서 true, false 둘 중 하나의 값을 만들어 내는 연산자. 여기서 true, false의 값을 Boolean 데이터 타입이라고 부른다. (자료형 중 무한한 개수의 number, string과 달리 2개의 값으..
(생활코딩) JavaScript 조건문 조건문이라고 하는 것은 하나의 프로그램이 하나의 흐름으로 가는 것이 아니라 조건에 따라서 다른 순서의 기능들이 실행되도록 하는 것이라 할 수 있다. 예제를 한번 봐보자. 일단 program 제목 아래에 1234를 출력되게 작성한다. 그리고 IF-true 제목 아래에 if와 else를 사용해 조건문을 만든다. if(조건)에서 조건에 해당되면 if의 괄호 안에있는 명령을 실행, 조건에 해당되지 않으면 else의 괄호 안에 있는 명령을 실행한다. 여기서 if의 조건이 true로 항상 참으로 조건에 해당되어 if 괄호 안에있는 명령을 실행하고, else괄호 안에 있는 명령은 무시한다. 그리고 IF-false 제목 아래에도 if와 else를 사용해 조건문을 만든다. 위와같이 if(조건)에서 조건에 해당되면 if의..
(생활코딩) JavaScript_제어할 태그 선택하기 웹 페이지에 night, day 버튼을 만들어보자. 버튼만 생성하고 이벤트 내용은 없기 때문에 버튼을 눌러도 아무 일도 발생하지 않는다. 여기서 클릭에 대해서 이벤트가 필요한데, onclick 속성으로 원하는 이벤트 내용을 JavaScript(JS)코드로 작성하면 된다. 버튼을 클릭했을 때 태그의 style 속성을 동적으로, 프로그래밍적으로, 또 상호작용에 의해 넣으려고 한다. 그러려면 JS의 문법에 따라서 웹브라우저에게 이 태그를 선택하도록 해야한다. 이를 위한 검색을 해보자. 추천 검색어 : Javascript select tag by css selector 찾아보면 document.querySelector(".myclass")이 나오며, 이 내용은 웹페이지에 있는 모든 태그 중에 클래스명이 mycl..
자바스크립트(JavaScript) 란? 자바스크립트 (JavaScript) 우리가 매일 접속하는 웹사이트는 크게 3가지 요소로 구성된다. ‘HTML(Hyper Text Markup Language)’, ‘CSS(Cascading Style Sheets)’, ‘자바스크립트(Javascript)’다. HTML은 웹페이지의 큰 뼈대를 제공하고, CSS는 색깔이나 글씨체와 같은 디자인 요소를 관리한다. 자바스크립트는 웹을 풍부하게 만들어주는 작고 가벼운 언어이며, 크로스 플랫폼(cross platform), 객체지향 스크립트 언어로 웹페이지의 동작을 담당한다. 웹 페이지에서 사용자로부터 특정 이벤트나 입력 값을 받아 동적인 처리를 목적으로 고안된 객체 기반의 스크립트 프로그래밍 언어. 프로그래밍 입문자들은 자바스크립트와 자바(Java)가 서로 비슷한..

티스토리툴바