본문 바로가기

Spec UP - Frontend/생활코딩_JavaScript22

함수 함수는 영어로 function이라고 하며 다양한 코드를 정리정돈 하기 위한 도구라고 할 수 있습니다.(좀 더 큰 도구는 객체) 함수의 개념은 이전시간에 학습했던 마지막 예제(반복문을 활용한 주간/야간모드 style 지정)를 이용해 보겠습니다. 지난번 학습을 통해 최종적으로 위와같은 코드를 작성하였습니다. 만약 이 내용에서 태그를 1억개 작성하면서 powderblue라는 색상을 다른 색으로 변경해야한다고 하면 매우 번거롭고 실수할 가능성이 높습니다. 이럴 때에 함수를 활용하면 어떻게 되는지 확인해봅시다. 아래 예제가 위와 동일한 기능을 구현하되 함수를 이용하여 작성된 방식입니다. 먼저 태그 안에 함수를 선언합니다. 함수는 function 함수명() { 함수를 통해 실행하고 싶은 기능} 형태로 선언하면됩니다.. 2021. 9. 15.

배열과 반복문_2 배열과 반복문의 활용법에 대해 알아보기에 앞서 querySelectorAll에 대해 알아봅시다. 위 예시는 웹페이지내의 태그를 불러오는 방법에 대한 예제입니다. 첫번째로 실행한 document.querySelector('a');로 웹페이지내의 모든 태그를 불러오려고 하였으나 실제 결과를 보면 태그 하나만 가져오는 것을 볼 수 있습니다. 왜냐하면 querySelector는 태그 중 맨처음 등장한 태그만 가져오기때문입니다. 그렇다면 전체 태그를 불러오기위해서는 어떻게해야할까요? - google에서 "javascript get element by css selector multiple"이라고 검색하여 내용을 참고하시기 바랍니다. 위와 같이 검색해보면 querySelectorAll 이라는 메소드가 있을 것입니다.. 2021. 9. 15.

배열과 반복문 집에 시간이지날수록 살림은 늘어나고 살림이 늘어날 수록 정리가 힘들어집니다. 때문에 사물들을 잘 정리할 수 있도록 옷장, 책장, 냉장고 등을 구입하기도 하고, 방이 많은 집을 선호합니다. 프로그래밍 역시 코딩할때 굉장히많은 데이터를 관리하게되고 데이터의 종류도 매우 다양하기 때문에 이러한 데이터를 정리할 수 있는 수납공간을 만들어 나누게 됩니다. 데이터중에서도 서로 연관되어있는 데이터끼리 잘 묶어서 담아두는 일종의 수납상자가 배열(array)이라고 할 수 있습니다. 기본적인 배열의 문법은 [ 대괄호로 시작해서 대괄호로 끝나며 ] , 배열안에는 여러 값을 입력할 수 있고 값과 값 사이는 콤마( , )로 구분합니다. 또한 배열은 그자체로는 이용하기 어렵기때문에 주로 변수에 담아 사용합니다. 이렇게하면 cow.. 2021. 9. 9.

중복의 제거를 위한 리팩토링(this,변수활용) 리팩토링(Refactoring) 이란 비효율적으로 코딩된 코드에 대하여 동작하는 것은 그대로 유지하되 코드자체를 효율적으로 만들어서 그 코드의 가독성을 높이고, 유지보수를 편리하게 만들고, 중복된 코드를 줄이는 방향으로 코드를 개선하는 작업을 의미하며, 소프트웨어의 규모가 커지고 복잡해질수록 리팩토링의 역할을 매우 중요합니다. https://nossodia.tistory.com/119?category=921581 조건문 (feat. 조건문을 이용한 주간모드,야간모드 전환 버튼 생성) 조건문이란, 주어진 조건에 따라서 애플리케이션을 다르게 동작하도록 하는것이다. 조건문은 if로 시작하며, if 뒤의 괄호 안에 조건을 기입한다. (조건이 될 수 있는 값은 Boolean이다.) IF 뒤의 괄 nossodia... 2021. 9. 8.

조건문 (feat. 조건문을 이용한 주간모드,야간모드 전환 버튼 생성) 조건문이란, 주어진 조건에 따라서 애플리케이션을 다르게 동작하도록 하는것이다. 조건문은 if로 시작하며, if 뒤의 괄호 안에 조건을 기입한다. (조건이 될 수 있는 값은 Boolean이다.) IF 뒤의 괄호 안에 조건이 true 이면, IF문 뒤의 중괄호 { } 구간이 실행되고, IF 뒤의 괄호 안에 조건이 false 이면 else문 뒤의 중괄호 { } 구간을 실행한다. 이 조건문을 이용하여 이전 "제어할 태그 선택하기" 강의에서 학습하였던 주간모드/야간모드 버튼을 하나로 통합하여 생성해보자. https://nossodia.tistory.com/117 제어할 태그 선택하기 (야간모드,주간모드 버튼 생성) https://www.w3schools.com/js/tryit.asp?filename=tryjs_d.. 2021. 9. 8.

비교연산자와 블리언 비교연산자는 좌항과 우항의 값을 비교하여 True나 False를 출력한다. 비교연산자에는 ===와 >이 있다. === 은 동등비교 연산자라고 하며, 좌항과 우항을 비교하여 같은값이면 True, 다른 값이면 False를 출력하는 연산자이다. html에 1===1, 1===2를 입력하면 입력한 그대로의 문자를 출력하지만, 자바스크립트에서 비교연산자를 기입하면 두값을 비교하여 True나 False를 출력한다. (Ex. 1===1 -> 1과 1은 같은값이므로 True, 1===2 -> 1과 2는 다른 값이므로 False를 출력.) 다음은 비교연산자 중 둘의 크기값을 비교하는 부등호를 살펴봅시다. 부등호에 대한 예시를 살펴보기에 앞서 미리 html의 문법 한가지를 참고하기 바랍니다. 보통 부등호는 로 표현하죠. .. 2021. 9. 8.

제어할 태그 선택하기 (야간모드,주간모드 버튼 생성) https://www.w3schools.com/js/tryit.asp?filename=tryjs_default Tryit Editor v3.7 Click the button to change the layout of this paragraph Click Me! function myFunction() { let x = document.getElementById("demo"); x.style.fontSize = "25px"; x.style.color = "red"; } www.w3schools.com 자바스크립트 공부 중 별도로 앱 구동하지 않고도 사이트 내에서 자바스크립트를 작성하고 바로 결과를 확인할 수 있다. 오늘의 학습목표 : 주간모드와 야간모드 전환 Night 버튼 클릭 시 야간모드 실행 : 배경은.. 2021. 9. 8.

CSS 기초 : 선택자 CSS 선택자 관련 상세 내용은 부스트코스 포스팅 참고할 것. https://nossodia.tistory.com/31?category=802521 CSS_ 선택자(selector) 1. 요소 선택자 선택자 중에 가장 기본이 되는 선택지이며, 태그 선택자라고도 합니다. 요소 선택자는 선택자부분에 태그 이름이 들어갑니다. 문서 내에 선택자에 해당하는 모든 요소에 스타일 nossodia.tistory.com https://nossodia.tistory.com/32?category=802521 CSS_문서 구조 관련 선택자 선택자 중에는 문서의 구조를 이용하여 요소를 선택하는 선택자도 있습니다. 문맥이나 요소의 구조를 기반으로 하여 선택자를 조합하는 것을 "조합자" 또는 "결정자" 라고 부릅니다. 이 조합자 .. 2021. 9. 8.

변수와 대입 연산자 콘솔에서 x와 y라는 변수를 생성하여 예를 들어보자. 예를 들어 콘솔에서 x=1, y=2을 입력했을 때 x+y를 실행하면 결과는 3이 된다. 그리고 다시 x=1000이라고 입력했을 때 x+y는 1002가 된다. 여기서 x, y를 변수(Variable)라고 하고 '='은 대입연산자 라고부른다. 그렇다면 '1=2;'를 대입하면 어떻게 될까? 숫자 1과 2는 변하지 않는 값, 상수(Constant)이기 때문에 오류가 발생된다. 변수는 왜 이용하는가? 예를들어 아래와 같은 내용의 alert창을 만들었다고 가정해보자. "Ester"이라는 이름이 중복해서 등장하도록 프로그래밍을 하였는데 이 Ester이라는 값이 수시로 변경되는 값이라면 어떻게될까? 변경될때마다 기존 "Ester"의 위치를 찾고 값을 수정해주어야한다.. 2021. 9. 6.

데이터타입-문자열과 숫자 https://developer.mozilla.org/ko/docs/Web/JavaScript/Data_structures 자바스크립트의 자료형 - JavaScript | MDN 모든 프로그래밍 언어는 내장 자료형이 있지만, 종종 이러한 내장 자료형은 언어마다 다르다. 이 문서에서는 자바스크립트의 내장 자료형과, 내장 자료형에서 사용할 수 있는 속성들에 대해 알 developer.mozilla.org 자바스크립트에는 6가지데이터 유형(Undefined, Boolean, Number, string, BigInt, Symbol)이 있다. 이 중 Number와 String에 대해 알아보자. - 웹페이지에서 마우스 우클릭 [검사]-[console] 탭에서 확인. 숫자(Number) 숫자(Number) 데이터의 .. 2021. 9. 5.

이전 1 2 3 다음

티스토리툴바