hkuspdg의 등록된 링크

키자드에 등록된 총 382개의 포스트를 확인하실 수 있습니다.

Naver Blog

[jQuery] 문서 객체의 클래스 속성 추가/제거/확인 [addClass(), removeClass(), hasClass()], 문서 객체 제거 [remove()]

addClass() 메서드는 문서 객체에 클래스 속성을 추가할 때 사용하는 메서드입니다. 다음과 같이 코드를 작성하여 살펴보겠습니다.코드를 저장하고 실행하면 다음과 같습니다.두 개의 클래스가 추가되어 붉은색 글씨로 가운데 정렬되는 h1 태그를 확인할 수 있습니다. 요소 검사를 통해 요소를 확인하면, 이 h1 태그에 red-text와 header라는 class가 적용되었다는 것을 확인할 수 있습니다.이번에는 class를 제거하는 방법을 살펴보겠습니다. removeClass() 메서드를 이용하여 class를 제거할 수 있습니다. 이번에는 setTimeout()을 이용하여 class 속성 추가가 실행되고 2초 후에 class를 제거하는 코드를 작성하였습니다.코드.......

원문보기 내부링크
Naver Blog

[jQuery] 문서 객체 삽입과 이동 [append(), prepend(), after(), before()]

문서 객체가 이미 화면에 붙은 상태에서 다른 곳으로 넣게 되면 이동이 되는 것이며, 화면 밖에 있는 문서 객체를 화면에 추가하게 되면 문서 객체 삽입이 됩니다. 큰 틀에서는 같은 의미라고 생각해 주시면 되겠습니다. 문서 객체를 이동하거나 삽입할 때는 4가지 이름의 메서드를 2가지 형태로 사용합니다. 일단 이름을 살펴보면 before(), prepend(), append(), after()가 있습니다. 어떤 대상이 있을 때 이 내부의 앞쪽에 붙이는지, 뒤쪽에 붙이는지, 그리고 어떤 대상의 형제 위치의 앞에 붙이는지, 뒤에 붙이는 지로해서 4가지 방법이 있습니다.before()prepend()대상append()after()이 메서드들은 첫 번째로 다음과 같은 형태의 이.......

원문보기 내부링크
Naver Blog

[혼공스] 배열 [배열 만들기, 배열 요소 접근하기, 배열 요소 개수 확인하기]

#혼자공부하는자바스크립트숫자, 문자열, 불과 같은 자료는 하나의 값만 가질 수 있어 여러 개의 자료를 저장하려면 변수를 여러 개 선언해야 하는 불편함이 있습니다. 이러한 불편함을 해결하기 위해 나온 것이 배열입니다.배열array은 여러 자료를 묶어서 활용할 수 있는 특수한 자료입니다. 문자열을 알면 조금 더 쉽게 이해할 수 있습니다.문자열 인덱스와 length 속성은 배열에서도 똑같이 사용됩니다.배열 만들기배열은 여러 개의 변수를 한 번에 선언해 다룰 수 있는 자료형입니다. 배열은 대괄호[ ]를 사용해 생성하고 내부의 값을 쉼표(,)로 구분해 입력합니다. 배열 내부에 들어 있는 값을 요소element라고 합니다. 어떠.......

원문보기 내부링크
Naver Blog

[혼공스] 배열 요소 추가, 제거하기

#혼자공부하는자바스크립트배열 뒷부분에 요소 추가하기배열 뒷부분에 요소를 추가할 때는 push() 메서드를 사용합니다.배열.push(요소)배열을 만들고 push() 메서드를 사용해서 요소를 추가해보겠습니다.자바스크립트에서 배열의 길이는 고정이 아닙니다. 다음과 같이 3개의 요소를 가진 배열을 만든 뒤, 10번째 인덱스에 요소를 강제로 추가할 수 있습니다. 이때 4~9번째 인덱스는 아무것도 없는 empty가 됩니다.인덱스로 요소를 추가하는 방법을 활용하면 다음과 같이 length 속성을 사용하여 배열의 마지막 위치에 요소를 추가할 수 있습니다.배열 요소 제거하기배열에 요소를 추가하는 방법을 알아봤으니 이번에는 배.......

원문보기 내부링크
Naver Blog

[CSS] float 속성을 사용한 레이아웃 구성

float 속성을 사용하여 레이아웃을 구성해보겠습니다. 다음과 같은 레이아웃을 만들며 살펴보겠습니다.레이아웃을 구성할 때 자주 사용하는 공식은 다음과 같습니다.자손에 float 속성을 적용하면 부모의 overflow 속성에 hidden 키워드를 적용합니다.코드를 작성하며 알아보겠습니다. 우선 기본적인 페이지를 구성합니다.레이아웃의 내용을 입력합니다.코드를 저장하고 실행하면, 다음처럼 출력합니다.이번에는 스타일을 사용하겠습니다. body 태그에 width 속성을 사용하고 margin-left 속성과 margin-right 속성에 auto 키워드를 적용하면 자동으로 중앙 정렬됩니다.코드를 저장하고 실행하면 중앙 정렬된 웹 페이지를 출.......

원문보기 내부링크
Naver Blog

[CSS] clear: both를 사용한 레이아웃

레이아웃 구성 방법으로 clear: both가 있습니다. clear: both를 사용하면 float으로 일그러진 레이아웃을 쉽게 초기화할 수 있습니다.이전에 다뤘던 float 속성을 이용한 레이아웃과 같은 형태의 레이아웃을 만들어보겠습니다.다음 코드처럼 div 태그의 형태를 잡아줍니다. 이전의 float 속성을 사용했던 것과 차이점이라면 #aside 태그와 #section 태그를 따라 감싸주지 않았다는 점입니다. clear: both를 사용해 레이아웃을 잡을 때는 이처럼 사용할 수 있습니다.이어서 가로로 자를 수 있는 부분에<div class="clear"></div>를 넣어줍니다.이 태그들에 clear: both를 적용할 텐데요. 이전에 언급했던.......

원문보기 내부링크
Naver Blog

[CSS] shadow 속성 [text-shadow 속성, box-shadow 속성]

그림자 속성은 태그에 그림자를 부여해 주는 스타일 속성입니다.text-shadow 속성text-shadow 속성은 글자에 그림자를 부여하는 스타일 속성입니다. 다음과 같은 형태로 값을 적용합니다.코드를 입력해서 글자에 그림자를 생성해보겠습니다.코드를 실행하면 다음과 같습니다.box-shadow 속성box-shadow 속성은 박스에 그림자를 부여하는 속성입니다. 다음과 같은 형태로 값을 적용합니다.참고로 말씀드리면흐림도와 색상 사이에 inset 키워드를 적용하면 그림자가 태그 안쪽으로 생성됩니다. 잠시 후에 살펴볼 CSS3 Generator를 사용하면 쉽게 생성할 수 있습니다.코드를 입력하여 box-shadow 속성을 사용해보겠습니다........

원문보기 내부링크
Naver Blog

[CSS] 그레이디언트 [Ultimate CSS Gradient Generator]

그레이디언트는 2가지 이상의 색상을 혼합해서 채색하는 기능입니다. 예를 들어 아래의 그림을 보시면 위 부분은 빨간색이고 중간은 노란색 아래쪽은 파란색이 혼합되어 있습니다. 이를 그레이디언트라고 부릅니다.포토샵 같은 그래픽 툴이라면 그레이디언트 기능을 사용해 간단하게 만들 수 있습니다. 하지만 CSS3 이전의 웹은 그레이디언트를 지원하지 않았기에 그림을 그려 배경 이미지로 넣었습니다. 하지만 CSS3는 그레이디언트 기능을 지원합니다. 약간 어려운 내용이라서 그레이디언트를 간단하게 만들 수 있는 툴을 사용해 그레이디언트를 만들고 알아보겠습니다.Ultimate CSS Gradient Generator의 왼쪽에서 원하는 형태의 그레.......

원문보기 내부링크
Naver Blog

[jQuery] 문서 객체 조작 [Setter, Getter]

이전 포스팅에서 h1 태그를 만들고 선택자로 지정하여 css() 메서드와 html() 메서드를 활용하였습니다.css() 메서드, html() 메서드는 사용 방법이 굉장히 다양합니다. 간단하게 한 번 살펴보겠습니다. 우선 가장 먼저 기억해 주셔야 하는 것은 이 메서드들을 Setter 형태와 Getter 형태로 사용할 수 있다는 것입니다. 이전에 알아보았던 css() 메서드를 활용해서 알아보겠습니다.일단 Setter 형태는 값을 지정할 때 사용한다고 생각하시면 되겠습니다. 이전 포스팅에서 h1 태그의 color를 red로 바꾸기 위해 css 속성을 변경했습니다.여기에서 매개 변수를 하나 제거해 주시면 Getter로 작동해서 color 속성을 추출하여 출력하게 됩.......

원문보기 내부링크
Naver Blog

[jQuery] attr( ) 메서드

이번 포스팅에서는 attr() 메서드에 대해서 알아보겠습니다.attr은 attribute의 줄임말이라고 할 수 있습니다. 따라서 속성을 지정할 때 사용하는 메서드입니다. 이 attr 메서드를 h1 태그가 아닌 img 태그로 변경해서 살펴보겠습니다. 일단 img 태그에서 기본적으로 setter 할 수 있는 속성은 src 속성입니다. 우선 다음과 같이 코드를 작성하였습니다.그리고 Getter도 같이 사용하도록 하겠습니다. 이전에 살펴보았듯이 Getter는 매개변수를 하나 생략하면 됩니다.우선 코드를 저장해서 실행해보겠습니다.첫 번째로 경고창이 실행되고 다음으로 이미지도 3개가 src 속성이 들어가 있는 모습을 확인할 수 있습니다. 이것을 요소 검.......

원문보기 내부링크
Naver Blog

[jQuery] html( ) 메서드

이번 포스팅에서는 html() 메서드에 대하여 알아보겠습니다. html() 속성은 매개 변수를 하나만 지정하게 됩니다. h1 태그를 이용하여 알아보겠습니다. 다음과 같이 코드를 작성하면 모든 h1 태그가 동시에 변경되게 됩니다.코드를 실행하면 다음과 같습니다.html() 메서드는 문자열을 지정할 뿐이어서 객체로 지정하는 것은 불가능합니다. Getter 같은 경우에는 매개 변수를 하나 생략하면 되기 때문에, h1 태그에 html()을 바로 입력하시면 됩니다. 다음과 같이 코드를 입력하고 실행하면 첫 번째 Hello jQuery를 출력하게 됩니다.코드를 저장하고 실행합니다.Setter에는 함수도 입력할 수 있습니다. 이전 내용들과 마찬가지로.......

원문보기 내부링크
Naver Blog

[자바스크립트] 예외 강제 발생 [throw 키워드]

필요한 경우에는 예외를 강제로 발생시켜야 하는 상황이 있습니다. 예외를 강제로 발생시킨다는 것은 오류를 실행 중에 강제로 일으킨다는 뜻입니다.예를 들어 두 개의 alert() 사이에 throw를 입력하고 뒤에 문자열로 "Test Error"라고 입력하면 첫 번째 alert("Hello")를 실행하고 두 번째 alert("Hello")는 실행되지 않는 것을 확인할 수 있습니다.이것은 중간에 throw 키워드를 사용해서 예외를 강제로 발생시켰기 때문에 오류가 발생해서 뒤의 코드가 실행되지 않는 것이라고 할 수 있습니다.예외를 강제로 발생시킬 때는 throw 키워드를 사용한다는 것을 확인하였습니다. 그럼 이 throw 키워드를.......

원문보기 내부링크
Naver Blog

[자바스크립트] 외부 자바스크립트 파일

지금까지는 자바스크립트 코드를 모두 HTML 페이지 내부에 작성했습니다. 간단한 프로그램은 HTML 페이지 내부에 스크립트를 적는 것이 문제가 되지 않지만, 프로그램의 규모가 커질수록 파일을 잘 구분해 정리해야 합니다. 이럴 때 사용하는 것이 바로 외부 자바스크립트 파일입니다.우선, 새 파일을 만들 때 HTML 페이지 이외에 다음과 같이 JavaScript 파일을 만듭니다.HTML 페이지와 마찬가지로 저장합니다. JavaScript 파일 이름을 script.js로 현재 HTML 페이지가 있는 폴더에 저장합니다.자바스크립트 파일을 만들면 빈 페이지가 뜨는데, 이곳에 다음처럼 코드를 입력합니다.이제 HTMLPage.html 페이지를 작성합니다.외.......

원문보기 내부링크
Naver Blog

[jQuery] 사용 설정

jQuery를 사용하기 위해서는 jQuery.com 사이트로 접속이 필요합니다.사이트에 접속하면 화면 오른쪽에 다운로드 버튼이 있습니다. 버튼을 클릭하시면 jQuery를 다운로드하실 수 있습니다.compressed 버전과 uncompressed 버전을 제공하고 있습니다.파일의 종류compressed production 같은 경우는 소스 코드를 보셨을 때 아래와 같이 압축이 되어 있어서 용량을 굉장히 줄인 파일이라고 보시면 되겠습니다. 이렇게 소스 코드가 모두 붙어 용량을 줄이는 것을 지핑(Zipping)이라고 합니다.반대로 uncompressed development 같은 경우는 소스 코드를 보시면 들여 쓰기가 정상적으로 되어 있고 변수 이름 등도 압축이 이루어지지 않.......

원문보기 내부링크
Naver Blog

[jQuery] 객체 [문서 객체 선택과 생성]

자바스크립트에서 문서 객체를 알아볼 때 script 태그에서 문서 객체를 조작하기 위해서는 두 가지 방법이 있다고 알아보았습니다.첫 번째는 window.onload = function () {} 사용하고 두 번째는 script 태그를 body 태그의 가장 아래쪽에 입력해서 마지막에 실행되게 하는 것이었습니다.제이쿼리에서는 이를 활용하기 위해서 다음과 같은 형태를 사용하게 됩니다. 아직 제이쿼리를 배워보진 않았지만, 아래의 두 코드는 같은 기능을 한다는 것을 기억해 주시면 좋겠습니다.제이쿼리 객체에 대하여 알아볼 텐데요. 제이쿼리 객체는 $ 이 달라 표시 함수로 만들게 되는 리턴 값을 의미합니다. 참고적으로 $ 이 기호는 jQuery 코.......

원문보기 내부링크
Naver Blog

[CSS] 위치 속성 [ position 속성, absolute 키워드, z-index 속성 ]

프로그램을 개발할 때는 요소의 위치를 2가지 방법으로 설정합니다.→ 절대 위치 좌표 : 요소의 X 좌표와 Y 좌표를 설정해 절대 위치를 지정합니다.→ 상대 위치 좌표 : 요소를 입력한 순서를 통해 상대적으로 위치를 지정합니다.위치 속성을 처음 접하면 머릿속이 복잡할 수 있습니다. 일반적인 예를 들어보면 절대 위치 좌표는 드래그해서 만들 수 있으므로 상대 위치 좌표보다 개발하기가 수월합니다. 하지만 상대 위치 좌표가 더 많이 사용됩니다. 그 이유는 안드로이드폰은 다양한 회사에서 만들므로 화면의 해상도가 다양합니다. 따라서 안드로이드는 상대 위치 좌표를 사용해 개발합니다. HTML 페이지도 사용자가 다양한 화면 크기로.......

원문보기 내부링크
Naver Blog

[CSS] 위치 속성 [ 위치 속성과 관련된 공식 ]

위치 속성을 사용할 때는 몇 가지 공식이 있습니다. 이번 포스팅에서는 그러한 공식에 대하여 알아보겠습니다. 중요한 공식이라서 기억해 주시면 좋겠습니다. 위와 같이 코드를 작성하고 실행하면 다음과 같은 결과가 나오게 됩니다.위 결과물에는 2가지 문제가 있습니다.1. h1 태그 2개가 붙어 있습니다. (div 태그도 대표적인 블록 레벨 엘리먼트인데 영역을 차지하고 있지 않습니다.)2. 색상이 적용된 상자가 자신의 부모를 기준으로 위치를 잡지 않습니다.position 속성에 absolute 키워드를 적용하면 부모 태그가 영역을 차지하지 않습니다. 따라서 자손의 position 속성에 absolute 키워드를 적용할 경우는 부모 태그에 몇 가.......

원문보기 내부링크
Naver Blog

[CSS] 위치 속성 [ overflow 속성 ]

overflow 속성은 내부의 요소가 부모의 범위를 벗어날 때 어떻게 처리할지 지정하는 속성입니다. overflow 속성은 다음과 같은 키워드를 사용할 수 있습니다.이번에는 아래의 두 가지 키워드를 알아보겠습니다.이전에 작성했던 코드를 계속해서 사용하겠습니다.이 코드의 실행 결과는 다음처럼 나왔습니다.그림을 보시면 색상이 적용된 사각형이 부모의 범위를 벗어나 있습니다. 이러한 div 태그의 overflow 속성에 hidden 키워드를 적용해보겠습니다.코드를 실행하면 다음과 같이 나옵니다.부모의 영역을 벗어난 부분이 모두 숨겨지는 것을 확인할 수 있습니다.이번에는 overflow 속성에 scroll 키워드를 적용해보겠.......

원문보기 내부링크
Naver Blog

[CSS] float 속성 [ float 속성 개요, float 속성을 사용한 수평 정렬 ]

float 속성은 웹 페이지를 만들 때 자주 사용되는 스타일 속성입니다. float 속성은 다음과 같은 키워드를 사용합니다.float 속성 개요float 속성은 부유하는 대상을 만들 때 사용하는 스타일 속성입니다. 예제를 위해 코드를 작성해 보겠습니다.p 태그의 내용을 코드의 내용보다는 더 길게 작성하였습니다. 위의 코드는 줄여서 작성하였음을 참고해 주세요. 코드를 실행하면 다음과 같습니다.img 태그는 inline 형식의 태그이고 p 태그는 block 형식의 태그이므로 그림과 글자를 분리하여 출력합니다.처음 float 속성을 개발했을 때는 img 태그에 사용하는 것을 기본으로 했습니다. img 태그에 float 속성으로 left 키워드를 사.......

원문보기 내부링크
Naver Blog

[자바스크립트] 표준 이벤트 모델

표준 이벤트 모델은 웹 표준을 만드는 단체인 W3C에서 공식적으로 지정한 이벤트 모델입니다. 다만, 구 버전의 인터넷 익스플로러에서는 표준 이벤트 모델이 동작하지 않기 때문에 구 버전의 인터넷 익스플로러를 고려해야 하는 상황이라면 사용할 수 없습니다. 하지만 이후에 알아볼 jQuery가 이런 것을 보완해 준다 정도로 생각해 주시면 되겠습니다. 표준 이벤트 모델은 이후에 살펴볼 Node.js에서도 비슷한 형태로 사용되고 다른 라이브러리들도 대부분 이와 같은 형태로 사용하게 설계가 되어 있기 때문에 기억해 두시면 도움이 되실 거예요. 그럼 간단하게 <h1> 태그에 이벤트를 연결하는 모습을 보면서 표준 이벤트 모델에 대하여.......

원문보기 내부링크
Naver Blog

[혼공스] if 조건문 활용

#혼자공부하는자바스크립트사용자에게 숫자를 입력받아 양수, 0, 음수를 구분하는 프로그램사용자에게 숫자를 입력받아 홀수와 짝수를 구분하는 프로그램현재가 몇 월인지 확인하고, 계절을 구분하는 프로그램#JavaScript#if조건문활용“파트너스 활동을 통해 일정액의 수수료를 제공받을 수 있음"

원문보기 내부링크
Naver Blog

[혼공스] switch 조건문

#혼자공부하는자바스크립트기본 형태다음은 switch 조건문의 기본 형태입니다. default 키워드는 생략할 수 있습니다.switch 조건문으로 홀수와 짝수를 구분하는 예제 코드를 살펴보겠습니다.break 키워드는 switch 조건문이나 반복문을 빠져나가기 위해 사용하는 키워드입니다. 코드를 읽다가 break 키워드를 만나면 break 키워드를 감싼 switch 조건문이나 반복문을 완전히 빠져나갑니다.switch 조건문의 괄호 안에는 비교할 값을 입력합니다. 이때 입력한 값을 기준으로 특정 코드를 실행합니다. 만약 입력한 표현식과 case 키워드 옆의 표현식이 같다면 case 키워드 바로 다음에 오는 문장을 실행합니다. 진행과정을 그려보면.......

원문보기 내부링크
Naver Blog

[혼공스] 조건부 연산자(삼항 연산자), 짧은 조건문

자바스크립트에는 조건문과 비슷한 역할을 하는 연산자가 있습니다. 바로 조건부 연산자이고 기본 형태는 다음과 같습니다.조건부 연산자 기본 형태자바스크립트에서 항을 3개 갖는 연산자는 조건부 연산자가 유일해서 삼항 연산자라고 부르기도 합니다. 예제 코드를 한 번 살펴보겠습니다.위 예제 코드는 입력하는 숫자에 따라 결과가 다르게 나옵니다. 0보다 큰 값을 입력하면 '양수입니다.'가 출력되고, 0보다 작은 값을 입력하면 '음수입니다.'가 출력됩니다.짧은 조건문짧은 조건문은 논리 연산자의 특성을 조건문으로 사용하는 것입니다.논리합 연산자를 사용한 짧은 조건문표현식을 먼저 살펴보.......

원문보기 내부링크
Naver Blog

[혼공스] 짝수와 홀수 구분하기

#혼자공부하는자바스크립트홀수와 짝수를 구분할 때 어떤 방법을 사용하나요? 일반적으로 끝자리가 0, 2, 4, 6, 8이면 짝수고 1, 3, 5, 7, 9면 홀수라고 배웠습니다. 이를 기반으로 짝수와 홀수를 구분하는 프로그램을 만든다면 다음과 같습니다.코드를 저장하고 실행하여 입력창에 20을 입력하면 다음과 같이 나오게 됩니다.프로그램은 문제없이 짝수와 홀수를 구분하는 것을 확인할 수 있습니다.하지만, 컴퓨터는 모든 것을 숫자로 계산하므로 문자열 연산보다 숫자 연산이 훨씬 빠릅니다. 숫자를 사용하는 형태로 프로그램을 변경하면 다음과 같습니다.코드를 저장하고 실행 후 입력창에 이번에는 25를 입력하겠습니다.&#.......

원문보기 내부링크
Naver Blog

[자바스크립트] 예외(Exception)

구문 오류자바스크립트 코드에서 괄호를 열었는데 닫는 과정이 없다면 구문 오류라는 것이 발생하게 됩니다. 구문 오류의 가장 큰 특징은 alert() 메서드를 실행했을 때 해당 블록 자체가 아예 실행되지 않고 그냥 SyntaxError만 발생하는 것을 확인할 수 있습니다. 이처럼 실행 전에 발생해버리는 것을 구문 오류라고 부르게 됩니다. 예외구문 오류와는 다른 형태의 오류가 있습니다. 프로그램 시작 전에 발생하는 게 아니라 프로그램 시작 후에 발생하는 것이 있습니다. 이를 '예외'라고 부르게 되며, 사실 예외도 오류의 일부이긴 하나 일반적으로 SyntaxError를 Error라고 부르는 경우가 많고 프로그램 실행 후에 발생하는.......

원문보기 내부링크
Naver Blog

[자바스크립트] 기본 예외 처리

프로그램이 실행되는 동안 문제가 발생하면 프로그램이 자동으로 중단됩니다. 이때, 프로그램이 대처할 수 있게 처리하는 것을 예외 처리(Exception handling)라고 합니다.예외가 발생하는 이유는 다양합니다. 개발자가 잘못된 코드를 작성했을 수도 있고, 사용자가 개발자가 원하지 않는 방향으로 프로그램을 사용했을 수도 있습니다. 어떤 경우든 예외는 예견하고 깔끔하게 해결해야 합니다. 그러나 사실 말처럼 쉽지는 않습니다.예외는 기본 예외 처리와 고급 예외 처리 두 가지 방법으로 처리합니다. 이번 포스팅에서는 기본 예외 처리를 알아보겠습니다.기본 예외 처리이전 포스팅에서 사용하던 코드로 기본 예외 처리를 알아보겠습.......

원문보기 내부링크
Naver Blog

[자바스크립트] 고급 예외 처리 [try catch finally 구문]

고급 예외 처리는 try 키워드, catch 키워드, finally 키워드로 예외를 처리하는 방법입니다. 이를 try catch finally 구문이라고 부르며, 형태는 다음과 같습니다.try 구문 안에서 예외가 발생하면 이를 catch 구문에서 처리합니다. finally 구문은 필수 사항은 아니며 예외 발생 여부와 상관없이 수행돼야 하는 작업이 있을 때 사용합니다.기본 예외 처리에서 사용한 코드를 살펴보면서 어떠한 부분이 다른지 알아보겠습니다.예외 처리를 하다 보면 위 코드에서처럼 확실하게 이유를 알 수 있는 경우도 있지만, 확실하게 모든 경우를 예측할 수 없는 경우도 존재합니다. 예를 들면 네트워크로 요청을 했는데, 그 네트워크가 중간에.......

원문보기 내부링크
Naver Blog

[자바스크립트] 문서 객체의 style 속성, 문서 객체 제거 메서드 [removeChild()]

문서 객체의 스타일 조작문서 객체의 style 속성을 사용하면 해당 문서 객체의 스타일을 변경할 수 있습니다.이전 포스팅에서 짧게 알아보았는데요. 조금 더 알아보도록 하겠습니다.위 코드에서 <h1> 태그를 가져오는 방법은 변수를 만들고 querySelector() 메서드나 getElementById() 메서드를 사용한다고 알아보았었습니다.이때 스타일을 조작할 때는 변수를 입력하고 점(.)을 입력했을 때 나오는 스타일 속성을 사용하면 됩니다. 스타일 속성의 속성들은 전부 다 CSS와 같기 때문에 사용하는데 어려움은 크게 없습니다. 다만 입력할 때 주의할 점이 있습니다. CSS에서 스타일 속성은 다음과 같이 적을 수 있습니다.자바스.......

원문보기 내부링크
Naver Blog

[자바스크립트] 문서 객체 이동하기 [appendChild() 메서드]

문서 객체 이동을 위해 <hr /> 태그로 구분해서 두 개의 <div> 태그를 만들겠습니다.첫 번째 <h1> 태그를 아래쪽 <div> 태그로 이동하도록 해볼게요.위 쪽의 <div> 태그에 id 속성값으로 "first-div"로 지정하고, 아래쪽은 "second-div"로 지정하겠습니다. 참고로 자신이 소속된 팀에 따라서 다를 수 있는데요. CSS style을 입력할 때 font-family처럼 특수기호 '-'로 구분된 속성을 사용하게 됩니다. 그래서 html에서도 id나 class 속성값을 보통 특수기호'-'를 사용합니다. 그리고 다양한 라이브러리를 살펴보셔도 특수기호'-'를 사용하여 단어를 구.......

원문보기 내부링크
Naver Blog

[자바스크립트] 문서 객체를 이용한 시계 [1초마다 시간 표시]

문서 객체를 이용한 시계문서 객체로 현재 시각을 표시하는 시계를 만들어보며 문서 객체 만들기를 연습해보겠습니다. 간단한 예제지만 어떤 방식으로 문서 객체를 사용하는지 살펴볼 수 있습니다.다음과 같이 코드를 작성하여 <h1> 태그에 현재 시각을 지속적으로 표시할 것입니다.<script> 태그에서 문서 객체를 가져옵니다.setInterval() 함수로 1초마다 clock 문서 객체의 innerHTML 속성을 현재 시각으로 변경합니다.setInterval() 함수를 사용하여 1초마다 시간이 바뀌게 됩니다. 그리고 조금 자세히 보시면 F5를 눌러 새로 고침을 해보시면 1초 동안 화면에 아무것도 안 나오다가 1초 후부터 나오는 모습을 확.......

원문보기 내부링크
Naver Blog

[자바스크립트] 문서 객체를 사용한 움직임 [동적 애니메이션] 구현

궤도를 따라 이동하는 지구와 달을 구현하며 문서 객체 만드는 법을 연습해보겠습니다. 코드가 좀 많은데요. 차근차근 코드를 작성해보면 충분히 이해되실 거예요.<body> 태그에 <h1> 태그 3개를 만들어 각각 id 속성값으로 sun, earth, moon을 지정합니다.<body> 태그에서 생성했던 각각의 태그를 변수에 할당합니다.이제 문서 객체에 스타일을 지정합니다. 스타일 시트를 따로 만드셔서 설정하셔도 됩니다.이어서 회전을 위한 변수 earthAngle과 moonAngle을 선언합니다. 그리고 움직임 구현을 위해 setInterval () 함수로 1초에 30번 함수를 실행합니다.움직임을 1초에 30번 함수를 반복 실행하는 것은 어.......

원문보기 내부링크
Naver Blog

[자바스크립트] 문서 객체와 객체지향을 사용한 움직임-화면 안에서 돌아다니는 글자 구현(1)

이번 내용은 자바스크립트의 기본 문법부터 객체까지의 내용을 전체적으로 복습해보는 코드를 작성해보겠습니다. 코드의 내용이 많아서 오늘은 전체 코드 내용을 먼저 확인하고 다음 포스팅에서 좀 더 알아보도록 하겠습니다.실행 결과를 먼저 살펴보시면, 다음과 같이 글자들이 마구 돌아다니게 만드는 코드를 작성해볼게요.각 부분을 나눠서 설명하기 위하여 <script> 태그를 3부분으로 나누어 작성하도록 하겠습니다.실제로 개발을 할 경우에는 상황에 따라서 코드를 이렇게 분리하거나, 그냥 합쳐질 수도 있다는 것을 기억해 주시면 좋겠습니다.앞서 말씀드렸다시피 오늘은 전체 코드 부분만 먼저 작성해보고, 다음 포스팅.......

원문보기 내부링크
Naver Blog

[자바스크립트] 문서 객체와 객체지향을 사용한 움직임-화면 안에서 돌아다니는 글자 구현(2)

이전 포스팅의 코드를 분할해서 한 번 살펴보겠습니다.위 코드에서 첫 번째 내용은 어떠한 값 이하의 어떤 값을 얻는 코드입니다.예를 들어서Math.random() 을 사용하게 되면 0 ~ 1.0 사이의 값을 얻을 수 있습니다. 이때 0은 포함되고 1.0은 포함되지 않습니다. ( 0 <= X < 1.0) 그래서 이 값에 limit이라는 값을 곱하여 0부터 limit이라는 사이의 값을 얻게 됩니다.(0 <= X < limit) 여기서 마지막 값이 포함이 안 되는 것에 대해서 의문이 생길 수 있는데요. 일반적으로 배열에서는 0부터 length-1까지 접근할 수 있습니다. 그래서 대부분의 프로그래밍 언어가 랜덤을 했을 때는 이와 같은 동작을 하게 구현.......

원문보기 내부링크
Naver Blog

[자바스크립트] 이벤트 [종류, 용어, 고전 모델 이벤트, this 키워드, 이벤트 객체, 디폴트 이벤트, 이벤트 전달, 이벤트 전달 해제]

이벤트의 종류이벤트는 키보드를 이용해 버튼을 입력하거나 마우스 클릭과 같이 다른 것에 영향을 미치는 것을 의미합니다. 이벤트는 애플리케이션 사용자가 발생시킬 수도 있고 애플리케이션이 스스로 발생시킬 수도 있습니다. 자바스크립트에는 다음과 같은 이벤트가 있습니다. 마우스 이벤트 키보드 이벤트 HTML 프레임 이벤트 HTML 입력 양식 이벤트 유저 인터페이스 이벤트 구조 변화 이벤트 터치 이벤트이벤트 관련 용어 정리이벤트에는 크게 4종류의 모델이 있습니다. 고전 이벤트 모델 인라인 이벤트 모델 인터넷 익스플로러 이벤트 모델 표준 이벤트 모델고전 이벤트 모델고전 이벤트 모델은 자바.......

원문보기 내부링크
Naver Blog

[자바스크립트] 인라인 이벤트 모델

인라인 이벤트 모델에 대해서 살펴보겠습니다.인라인 이벤트 모델은 HTML 페이지의 가장 기본적인 이벤트 연결 방법입니다. 사용 방법은 <h1> 태그가 있을 때 내부에 onclick과 같은 이벤트를 부여합니다.지금까지는 <h1> 태그가 있다면 document.querySelector("h1")을 이용해서 <h1> 태그를 가져올 수 있고, 이것을 var header 안에 넣은 뒤에 header.onclick을 사용해서 이벤트를 연결해 사용했습니다. 이때 이 함수 내부의 기능을 <h1 onclick=""> 여기에 끼어 넣은 것을 인라인 이벤트라고 부르게 됩니다. 에디터의 자동완성 기능을 살펴보시면 다양한 인라인 이벤트 속성들을.......

원문보기 내부링크
Naver Blog

[자바스크립트] 새로운 window 객체 생성 [open() 메서드], window 객체의 기본 메서드 [상대적, 절대적 구분하기]

window 객체는 open() 메서드로 새로운 window 객체를 생성합니다.window 객체의 open() 메서드는 네 개의 매개변수가 있습니다. 입력해도 되고 입력하지 않아도 되는 매개변수를 옵션이라고 합니다. open() 메서드의 모든 매개변수는 옵션입니다. 우선 open() 메서드의 옵션을 사용하지 않고 아래처럼 코드를 사용해 보겠습니다.코드를 실행하면 아래처럼 새로운 웹 브라우저 윈도우가 만들어집니다.현재 코드는 별다른 옵션을 설정하지 않아 웹 브라우저별로 실행 결과의 차이가 있을 수 있습니다. open() 메서드의 모든 옵션을 사용하면 아래처럼 코드를 구성할 수 있습니다.코드를 실행하면 자동으로 naver의 팝업창이 뜹니.......

원문보기 내부링크
Naver Blog

[자바스크립트] 문서 객체 만들기 [innerHTML, createElement, createTextNode, appendChild, setAttribute]

문서 객체 모델은 웹 브라우저가 HTML 페이지를 인식하는 방법이며, 브라우저 객체 모델(BOM)의 document 객체와 관련된 집합들을 문서 객체 모델이라고 부릅니다.간단한 용어 정리위와 같이 html 페이지가 있을 때 <html>, <head>, <body>와 같은 각각의 태그들을 요소 노드라고 부르며, 태그 안의 글자를 텍스트 노드라고 할 수 있습니다. 텍스트 노드는 텍스트 노드를 갖는 요소 노드와 텍스트 노드를 갖지 않는 요소 노드가 있습니다. 예를 들어 <title> 태그나 <h1> 태그는 텍스트 노드를 가질 수 있습니다. 반대로 <img> 태그는 내부에 src나 alt 속성을 사용하며, 내부에 글자를 입력하는.......

원문보기 내부링크
Naver Blog

[혼공스] 조건문 [if 조건문, if else 조건문, 중첩 조건문, if else if 조건문]

#혼자공부하는자바스크립트자바스크립트의 코드들은 위에서 아래로 차례차례 실행됩니다. 그러나 조건문을 사용하면 조건에 따라 코드를 실행할 수도 있고, 실행하지 않을 수도 있습니다. 이처럼 코드가 실행되는 흐름을 변경하는 것을 조건 분기라고 부릅니다.if 조건문은 조건에 따라서 코드를 실행하거나 실행하지 않을 때 사용하는 구문입니다. 이때 조건은 불 자료형을 의미합니다. 비교 연산자와 논리 연산자를 활용해 조건을 만들고, 이 조건을 사용하여 조건 분기를 합니다.다음 조건들의 결과를 예측해봅니다.첫 번째 코드는10 < 100 이 되어 true입니다.두 번째 코드는5 < 10 && 10 < 15true && .......

원문보기 내부링크
Naver Blog

[자바스크립트] 문서 객체 만들기 [innerHTML]

문서 객체를 생성하는 방법으로 노드를 만들어 연결하는 방법을 알아보았습니다. 이 방법도 쉽지만, 일반적으로 좀 더 쉬운 방법을 사용합니다. 이전 포스팅에서 잠깐 알아보았던 문서 객체 innerHTML 속성을 사용하는 것입니다.document 객체의 body에도 innerHTML이 존재합니다. document.body도 이전에 있던 요소 노드와 같기 때문에 document.createElement("h1") 태그를 만들었을 때 나오는 innerHTML과 큰 차이가 없다고 보셔도 괜찮습니다.첫 번째는 <body> 태그의 innerHTML이 되고 두 번째는 <h1> 태그의 innerHTML이 됩니다.이렇게 코드를 입력하면 자동으로 태그가 생성됩니다.반복문을 사용해.......

원문보기 내부링크
Naver Blog

[자바스크립트] 문서 객체 가져오기 [getElementById(), getElementsByTagName()]

문서 객체를 가져온다는 의미는 이미 html로 만들어져 있는 태그를 가져온다는 의미입니다. 위와 같은 <h1> 태그를 가져와서 사용하는 방법을 알아보겠습니다.getElementById() 메서드첫 번째로 알아볼 메서드는 getElementById() 메서드입니다. "Id를 사용하여 Element를 get(가져온다) 한다"이런 의미가 있습니다. 즉, document 객체의 getElementById() 메서드는 id 속성을 갖는 태그만 가져올 수 있습니다. <h1> 태그에 id 속성을 부여하겠습니다.이렇게 id 속성을 부여하면 document.getElementById() 사용하여 문서 객체를 가져올 수 있습니다.helloA와 helloB는 문서 객체이므로 뒤에 점을 찍어주.......

원문보기 내부링크
Naver Blog

[자바스크립트] 문서 객체 가져오기 [querySelector(), querySelectorAll()], 문서 객체의 style 속성 [.style]

이번에는 HTML5에서 document 객체에 추가된 querySelector() 메서드를 알아보겠습니다.querySelector는 querySelector() 메서드와 querySelectorAll() 메서드가 있습니다. querySelector() 메서드는 객체를 하나만 가져오고 querySelectorAll() 메서드는 객체를 전부 다 가져오게 됩니다. 두 가지 메서드의 매개 변수는 선택자를 지정하게 되어 있습니다.querySelector ()예를 들어서 CSS 선택자에서 태그를 선택할 때는 해당 태그를 선택하시면 되며, id 속성값을 가져오고 싶다면 #속성값을 넣어주시면 됩니다.또한, class나 title 속성값으로 hello를 가지고 있다면 다음과 같은 방식으로 선택할 수 있습니다.선택자에 대한 내.......

원문보기 내부링크
Naver Blog

[덕배 생각] 블로그 평균 사용시간이 Excellent?

프로그래밍 공부를 지금도 혼자서 골방에서 하고 있는 덕배입니다. 공부는 계속하지만 왠지 느낌이 모르는 것이 계속 누적되고 있는 느낌이네요. 지금도 공부해야 하는데... 왠지 하기 싫어서 이렇게 글을 쓰고 있습니다.기왕 노는 김에 내 블로그는 요새 상태가 어떤가 해서 블로그 평균 데이터를 한 번 봤는데요. 놀라운 결과가 있더군요.다른 건 다 고만고만한데요. 게시글 평균 사용시간이 왠지 찢었다는 느낌은 저만 드는 걸까요. 근데 한편으로는 저걸 계속 보고 있으니 이런 생각도 들어요. "내 글이 이해가 너무 안 되나..." 사실. 솔직히. 저도 100% 알고 쓰는 내용이 아니다 보니 그럴 수도 있겠다는 생각이 듭.......

원문보기 내부링크
Naver Blog

[혼공스] 단위 변환, 원의 넓이와 둘레 구하기, 환율 변환

#혼자공부하는자바스크립트inch 단위를 cm 단위로 변경하기원의 넓이와 둘레 구하기환율 변경하기(1달러 = 1,112원)“파트너스 활동을 통해 일정액의 수수료를 제공받을 수 있음"#JavaScript#자바스크립트#단위변환#원의넓이#원의둘레#환율변환

원문보기 내부링크
Naver Blog

[금값, 은값] 시세 확인하세요

2021년 2월 23일 금, 은 시세입니다.지난 1년간 금시세 변화입니다.지난 1년간 은시세 변화입니다.출처 : #금모아1만 원 이상부터금, 은 구매 가능합니다.혹시라도 가입하시면hkuspdg친구 추천 부탁드립니다.#금값시세조회#은값시세조회#금시세조회#은시세조회#현재금값#현재은값#지난금값#지난은값#과거금값#과거은값#금값조회#은값조회#금구매#은구매#금테크#은테크#금값#은값#Gold#Silver#Price행운이란, 준비가 기회를 만나는 지점에 있다.인생은 곱셈이다.아무리 기회가 와도 내가 제로(0) 면결과는 제로인 법이다.하지만 내가 준비가 되어 있다면기회는 우리에게 곱빼기로 더 나은 삶을선물해 줄 것.......

원문보기 내부링크
Naver Blog

[자바스크립트] 파괴적 메서드, 비파괴적 메서드, 메서드 체이닝

비파괴적 메서드비파괴적 메서드는 자기 자신을 파괴 시키지 않고사용되는 메서드입니다.위의 코드에서 보시는 것처럼문자열 변수가 있을 때string 뒤에 점을 찍으시면 다양한 메서드를확인할 수 있습니다.다양한 메서드 중에서toUpperCase에 대해서 살펴보겠습니다.toUpperCase 메서드를 사용하면대문자화된 문자를 얻을 수 있습니다.이 내용을 출력할 때 아래와 같이 코드를 쓰면string이 모두 uppercase로 바뀌어서 출력된다고생각할 수 있는데요.우선 저장하고 실행해보겠습니다.아무런 변화가 없는 것을 확인할 수 있습니다.이것은string.toUpperCase() 메서드가 비파괴적 메서드라서 자기 자신을 직접적으로건.......

원문보기 내부링크
Naver Blog

[덕배 생각] 속 좁은 덕배 씨

매일같이 보던 사람이로또에 당첨됐다면기분이 어떠실까요?퇴근 무렵 대표님께서 김대리에게어제 산 로또 번호 맞춰봤어?이렇게 말씀하시길래무슨 일인가 했더니대표님께서 번호 꿈을 꿔서김대리에게 번호를 알려주면서로또를 사달라고 부탁하셨다고 합니다.그러면서 김대리도 같은 번호로 사고요.김대리는 아직 확인을 안 했다고 하는데...갑자기 기분이 쎄~합니다.뭔가 김대리가 위로 올라갈 것만 같은기분이 들었습니다.대표님이 2, 12... 이렇게 말씀하셔서급하게 당첨번호를 확인하는데...헐... 당첨 번호가 2, 12...로 시작합니다.뭔가 표현할 수 없는 감정들이저를 감쌉니다.순간 생각합니다.김대리 당첨되.......

원문보기 내부링크
Naver Blog

[자바스크립트] underscore 라이브러리

underscore.js 라이브러리는 자바스크립트의기본적인 유틸리티 기능을 모아놓은라이브러리라고 할 수 있습니다.화면 아래 Downloads 부분에서Development 부분을 다른 이름으로 저장하여html 파일이 있는 곳에 같이 넣어주시면사용 준비가 완료됩니다.라이브러리 가져오기라이브러리는 가져오는 방법을 살펴보겠습니다.가장 기본적인 방법은<head> 태그 내부의 가장 위쪽에 <script> 태그를입력해 주시고, src 속성으로 방금 가져왔던 자바스크립트 라이브러리의 경로를 입력합니다.같은 폴더에 삽입되어 있기에 파일 이름을 적어주시면 되는데요.만약에현재 폴더에 있는 다른 폴더 안에 파일을저장하셨다면.......

원문보기 내부링크
Naver Blog

[덕배 생각] 블로그 시작부터 첫 수입까지

블로그를 시작한 지 4개월 정도 되었는데요.오늘 제 통장으로 네이버에서 블로그 수익을입금해 주었네요.2020년 11월 12일부터 시작해서 하루도 빠짐없이프로그래밍 공부 내용을 올리고 있는데요.블로그 시작 이유가 프로그래밍 공부를 중단하지말자라는 목표성을 가지고 있었습니다.지금껏 유지하고 있으니, 좋은 방법을 선택한 것같네요.애드 포스트라는 것도 모르고그냥저냥 지내다가 어느 날 타인의 블로그에서자꾸만 킹콩 낚싯배가 나오는 이유가 궁금해졌습니다.검색 결과 애드 포스트라는 것을 알게 되었고,아... 블로그로도 수익을 낼 수가 있구나를알았습니다.요즘처럼 수입이 줄어든 시국에 참으로좋은 아이템이었습니다.......

원문보기 내부링크
Naver Blog

[자바스크립트] underscore.js, 개미 수열(look and say sequence)

이전 포스팅에서 계속 오류가 발생해서 진행을 멈췄는데요.오늘 확인해보니 다운로드한 파일이 호환성의문제가 있는 거 같아요.가장 위쪽의 ESM(Development) 버전을사용했더니 계속 오류가 발생했습니다.그래서 아래쪽은 UMD(Development) 버전을사용하니 정상적으로 실행되었습니다.이어서 계속 진행해볼게요.이 코드를 출력하시면 다음과 같이 가격이 정렬되어 콘솔 창에 출력됩니다.가격을 기준으로 정렬했기 때문에 400, 500, 600이 나오는 것을 확인할 수 있습니다.참고적으로 return 값 뒤에는 수식을 입력할 수도 있습니다.예를 들어item.가격 / 2를 해주시면 가격을 2로 나눈 값으로계산하게 됩니다.예전에 위.......

원문보기 내부링크
Naver Blog

[자바스크립트] 브라우저 객체 모델(BOM), window.onload 이벤트

브라우저 객체 모델 BOM(Browser Object Model)은 웹 브라우저와 관련된 객체의 집합을 의미합니다.대표적인 브라우저 객체 모델로는 window, location, navigator, history, screen, document 객체가 있습니다.브라우저라는 단어가 들어가는 것처럼 웹 브라우저에서 사용하는 자바스크립트 객체라고 할 수 있습니다.브라우저에서 사용할 수 있는 자바스크립트의 코드 중에 모든 객체는 window 객체에 귀속됩니다.window를 입력하고 점을 입력하면 많은 속성이 나오게 됩니다.지금까지 그냥 단순하게 사용했던 alert()도 window.alert()로 window라는 객체 아래에 들어있는 메서드입니다.prompt()도 window.prompt()로 window라는 객.......

원문보기 내부링크
Naver Blog

[혼공스] 자료형 변환 [숫자 자료형 변환 Number(), 문자열 자료형 변환 String(), 불 자료형 변환 Boolean()]

#혼자공부하는자바스크립트자바스크립트는 "10" * 10을 하면 100을 출력합니다.이것은 자바스크립트가 내부적으로 자료형을 변환하기 때문입니다.자료형 변환에 대하여 알아보겠습니다.숫자 자료형으로 변환하기다른 자료형을 숫자 자료형으로 변환할 때는 Number() 함수를 사용합니다.숫자가 적혀 있는 문자열을 숫자로 변환합니다.예를 들어 "273"이라는 문자열을 Number() 함수에 넣으면 273이라는 숫자로 변환됩니다.다른 문자가 들어있어서 숫자로 변환할 수 없는 문자열의 경우 NaN(Not a Number)라는 값을 출력합니다.NaN은 자바스크립트에서 숫자이지만, 숫자로 나타낼 수 없는 숫자를 뜻합.......

원문보기 내부링크
Naver Blog

[금값, 은값] 시세 확인하세요

2021년 2월 19일 금, 은 시세입니다.지난 1년간 금시세 변화입니다.지난 1년간 은시세 변화입니다.출처 : #금모아1만 원 이상부터금, 은 구매 가능합니다.혹시라도 가입하시면hkuspdg친구 추천 부탁드립니다.#금값시세조회#은값시세조회#금시세조회#은시세조회#현재금값#현재은값#금값조회#은값조회#금구매#은구매#금테크#은테크#금값#은값#Gold#Silver#Price확신은 거짓말보다 더 위험한진리의 적이다.가장 머리가 둔한 사람에게도 그 사람이어떠한 선입견도 없다면 가장 어려운 문제를 설명할 수 있다.그러나 가장 명석한 사람에게도가장 단순한 문제를 명확히 설명하지 못 할 수 있다.그 사람이.......

원문보기 내부링크
Naver Blog

[자바스크립트] 참조 복사와 값 복사 [얕은 복사, 깊은 복사]

참조 복사와 값 복사값 복사는 깊은 복사라고도 부릅니다.기본 자료형을 가지고 깊은 복사라고 부르지는않지만, 거의 같은 용어이기 때문에 설명에도 그렇게 사용하고 있습니다.기본 자료형의 값 복사 - 깊은 복사코드의 실행 내용을 한 번 알아보겠습니다.간단하고 코드 내용을 분석해 보면,10이라는 값을 originalValue에 넣고 originalValue에 있는 값을 newValue에 넣은 후에originalValue에 있는 값을 273으로 변경하고각각의 값을 출력합니다.originalValue는 273으로 바꿨으니첫 번째는 273이 출력됩니다.newValue 같은 경우는originalValue에 값을 넣었을 때 10을 넣었습니다.그래서newValue에도 10이 들어가기에.......

원문보기 내부링크
Naver Blog

[금값, 은값] 시세 확인하세요

2021년 2월 20일 금, 은 시세입니다.지난 1년간 금시세 변화입니다.지난 1년간 은시세 변화입니다.출처 : #금모아1만 원 이상부터금, 은 구매 가능합니다.혹시라도 가입하시면hkuspdg친구 추천 부탁드립니다.#금값시세조회#은값시세조회#금시세조회#은시세조회#현재금값#현재은값#지난금값#지난은값#과거금값#과거은값#금값조회#은값조회#금구매#은구매#금테크#은테크#금값#은값#Gold#Silver#Price기꺼이 불편함을 감수하라기꺼이 불편함을 감수하라.편안한 게 불편한 것이다.불편함을 받아들이는 것은어려울 수 있다.하지만불편함은 꿈대로 살아가는 데 대한작은 대가일 뿐이다.-피터 맥 윌리엄.......

원문보기 내부링크
Naver Blog

[자바스크립트] 배열의 깊은 복사 [clone]

앞전 포스팅에서 다음 코드는 얕은 복사가 된다고 알아보았습니다.프로그래밍에서는 originalArray가 참조 복사, 얕은 복사가 되는 게 아니라 깊은 복사가 되게만드는 방법이 굉장히 중요한 문제가 됩니다.복사를 할 때 새로운 배열을 만들어 주어야만새로운 주소값이 들어가게 됩니다.첫 번째 주소를 0x10이라 가정하고두 번째 주소를 0x20이라 가정해보겠습니다.그러면 이 두 주소는 전혀 다른 값을 가지게 됩니다.이다음에 내부에 있는 기본 자료형을하나하나 옮기는 과정을 거쳐야 합니다.newArray의 [i]에 originalArray의 [i]를 하나하나 복사해 주시면, 내부의 값들은기본 자료형이기 때문에 하나하나 복사가 됩니다........

원문보기 내부링크
Naver Blog

[금값, 은값] 시세 확인하세요

2021년 2월 21일 금, 은 시세입니다.지난 1년간 금시세 변화입니다.지난 1년간 은시세 변화입니다.출처 : #금모아1만 원 이상부터금, 은 구매 가능합니다.혹시라도 가입하시면hkuspdg친구 추천 부탁드립니다.#금값시세조회#은값시세조회#금시세조회#은시세조회#현재금값#현재은값#지난금값#지난은값#과거금값#과거은값#금값조회#은값조회#금구매#은구매#금테크#은테크#금값#은값#Gold#Silver#Price반드시 해야 하는 일을 사랑하기행복의 비밀은자신이 좋아하는 일을 하는 것이 아니라,자신이 하는 일을 좋아하는 것이다.내가 변할 때 삶도 변한다.-괴테“파트너스 활동을 통해 일정액의 수수료를.......

원문보기 내부링크
Naver Blog

[혼공스] 상수와 변수

상수는 '항상 같은 수'라는 의미로 값에 이름을한 번 붙이면 값을 수정할 수 없습니다.반면 변수는 '변할 수 있는 수'로 값을 수정할 수 있습니다.즉 상수는 한 번 값을 넣으면 꺼낼 수 없는모든 면이 막힌 단단한 유리 상자라고생각하면 좋고,변수는 위가 뚫려 있어서 값을 꺼내서 버리고다시 넣을 수 있는 유리 상자라고 생각하면 좋습니다.이렇게 말하면 기능이 더 많은 변수가 좋아 보이지만, 실제로는 상수가 훨씬 많이사용됩니다.모든 면이 막힌 유리 상자와 같은 상수는쌓아서 저장할 수 있으므로 저장 효율(성능)이 좋지만, 변수는 넣고 빼는 기능이 포함되어야 하니쌓아 둘 수가 없어서 저장 효율(성능.......

원문보기 내부링크
Naver Blog

[자바스크립트] 프로토타입 (prototype)

이전 포스팅에서 createstudent를 사용하여객체를 만들고 이 객체에 getSum(), getAverage(),toString() 메서드를 넣어주었습니다.이 객체에는이름, 국어, 수학, 영어 속성과 getSum(), getAverage(), toString() 메서드가모두 있습니다.즉,각 객체를 생성할 때마다 동일한 함수를계속 생성하는 것입니다.지금은 메모리가 넘쳐나는 시대지만,예전에는 메모리가 귀했기에메모리를 쓸데없이 잡아먹는 굉장히 비효율적인 일이었습니다.그래서 생각한 것이이름, 국어, 수학, 영어는 각각의 객체가 가지며,이때 이 객체들이 모두 공유하는 공간을따로 만들어서 이 공유하는 공간에getSum(), getAverage(), toString() 메서드를.......

원문보기 내부링크
Naver Blog

[금값, 은값] 시세 확인하세요

2021년 2월 17일 금, 은 시세입니다.지난 1년간 금시세 변화입니다.지난 1년간 은시세 변화입니다.출처 : #금모아1만 원 이상부터금, 은 구매 가능합니다.혹시라도 가입하시면hkuspdg친구 추천 부탁드립니다.#금값시세조회#은값시세조회#금시세조회#은시세조회#현재금값#현재은값#금값조회#은값조회#금구매#은구매#금테크#은테크#금값#은값#Gold#Silver#Price내 마음이 메마를 때면내 마음이 메마르고 외롭고 부정적인 일이 일어날 때면,나는 늘 남을 보았습니다.남 때문인 줄 알았기 때문입니다.그러나이제 보니 남 때문이 아니라내 속에 사랑이 없었기 때문이라는 것을알게 된 오늘,내 마음에 사.......

원문보기 내부링크
Naver Blog

[자바스크립트] 클래스 기반의 객체지향 언어 [클래스 선언과 생성자 함수 선언, 메서드 선언]

자바스크립트라는 프로그래밍 언어는 프로토타입을 기반으로 객체지향 프로그래밍을할 수 있게 만들어진 프로그래밍 언어입니다.프로토타입을 기반으로 객체지향 프로그래밍을구현하는 프로그래밍 언어가 유명한 게현재는 자바스크립트뿐입니다.이름을 좀 들어본 프로그래밍 언어라면대부분 클래스 기반의 객체지향 언어입니다.그래서자바스크립트도 ECMAScript 6부터'클래스 기반의 객체지향 언어' 이념을도입했습니다.클래스 기본이전 포스팅에서 프로토타입은 객체를 조금 더효율적으로 선언할 수 있게 만든 것이라고했습니다.클래스도 크게 다르지 않습니다.객체를 조금 더 효율적으로 선언할 수 있게만든 것입.......

원문보기 내부링크
Naver Blog

[자바스크립트] 캡슐화 [밑줄 활용, 클로저 활용, Getter, Setter]

세상에는 다양한 사람이 있습니다.그로 인해 특정한 목적과 규칙을 갖고 무언가를 만들어도 그것을 그 목적과 규칙에 상관없이 사용하는 사람이 많습니다.이렇듯 세상에 다양한 사람들이 있기에만들어진 기술이 캡슐화입니다.사각형을 의미하는 Rectangle 객체를생성자 함수를 이용하여 만들어보겠습니다.그리고 사각형의 넓이를 구하는 데 필요한width 속성과 height 속성을 지정하겠습니다.코드를 보시면Rectangle의 첫 글자가 대문자로 시작하는 걸로생성자 함수를 생성할 것이 목적임을 알 수있습니다.내부에서는 this.너비와 this.높이를 사용해서두 가지 속성을 가지고 있습니다.메서드는 getArea() 하나를 만들어서.......

원문보기 내부링크
Naver Blog

[혼공스] undefined 자료형 소개, 변수에 적용할 수 있는 연산자 [복합 대입 연산자, 증감 연산자]

#혼자공부하는자바스크립트undefined 자료형상수와 변수를 사용하면 undefined 자료형을 확인할 수 있습니다.undefined 자료형이 나오는 경우는다음과 같습니다.상수와 변수로 선언하지 않은 식별자상수와 변수로 선언하지 않은 식별자의 자료형을 확인해보면 undefined가 나옵니다.다음 코드의 "abc"와 "그냥식별자"라는 식별자는선언하지 않고 사용했으므로 undefined 자료형으로 나옵니다.값이 없는 변수변수를 선언하면서 값을 지정하지 않은 경우에 해당 식별자는 undefined 자료형이 됩니다.참고로 상수는 선언할 때 반드시 값을 지정해야 하므로 값이 없는 상수는 존재하지 않습니다.undefin.......

원문보기 내부링크
Naver Blog

[금값, 은값] 시세 확인하세요

2021년 2월 18일 금, 은 시세입니다.지난 1년간 금시세 변화입니다.지난 1년간 은시세 변화입니다.출처 : #금모아1만 원 이상부터금, 은 구매 가능합니다.혹시라도 가입하시면hkuspdg친구 추천 부탁드립니다.#금값시세조회#은값시세조회#금시세조회#은시세조회#현재금값#현재은값#금값조회#은값조회#금구매#은구매#금테크#은테크#금값#은값#Gold#Silver#Price기본 예의를 갖추는 것이 동기부여의 첫걸음이다.동기부여의 열쇠는 기본 예의를 갖춰 사람을 대하는 데 있다.공을 들여 키워야 하는 화초보다 인간은 더 민감한 존재다.화초를 대하듯 사람들을 대하라.그러면그들은 활짝 피어날 것이다.-조.......

원문보기 내부링크
Naver Blog

[혼공스] 자료형 입력 [문자열 입력 prompt(), 불 입력 confirm()]

#혼자공부하는자바스크립트문자열 입력문자열 자료형을 입력할 때 사용하는 함수는 prompt()입니다.다음과 같은 형태로 사용합니다. prompt() 함수 매개변수의 역할코드를 실행하면 사용자에게 입력을 요구하는 입력창이 나타납니다.입력창을 보시면 prompt() 함수의 매개변수들이어디에 출력되는지 알 수 있습니다.입력 양식에 글자를 입력하고 [확인] 버튼을클릭합니다.입력한 글자가 경고창에 출력됩니다.사용자가 입력창에 값을 입력하고 [확인] 버튼을 클릭하면 prompt() 함수는 입력한 문자열을 input에 저장합니다.'안녕하세요!'라는 문자열을 입력하면 다음처럼 코드가 변경됩니다.따라서 i.......

원문보기 내부링크
Naver Blog

[혼공스] 기본 자료형 [불 자료형]

#혼자공부하는자바스크립트불 자료형불은 영어로 Boolean이며 '불린'으로 발음됩니다.그래서 불린 이라고도 표기합니다.문자열과 숫자는 일상생활에서 자주 볼 수 있는 자료들이라 익숙하지만,불 boolean은 처음 보는 자료형이라익숙하지 않아 어려움을 느낄 수 있습니다.불 만들기자바스크립트에서는 참과 거짓 값을 표현할 때불 자료형을 사용합니다.문자열 자료형과 숫자 자료형은 만드는 방법에따라 수많은 형태로 표현할 수 있지만,불 자료형은 true와 false 2가지입니다.불은 단순하게 true와 false를 입력하면만들 수 있습니다.또한 두 대상을 비교할 수 있는비교 연산자를 사용해도 불을 만들 수 있습니다.......

원문보기 내부링크
Naver Blog

[금값, 은값] 시세 확인하세요

2021년 2월 14일 금, 은 시세입니다.지난 1년간 금시세 변화입니다.지난 1년간 은시세 변화입니다.출처 : #금모아1만 원 이상부터금, 은 구매 가능합니다.혹시라도 가입하시면hkuspdg친구 추천 부탁드립니다.#금값시세조회#은값시세조회#금시세조회#은시세조회#현재금값#현재은값#금값조회#은값조회#금구매#은구매#금테크#은테크#금값#은값#Gold#Silver#Price고난이여 다시 오라만일 뱀에게 물린 상처와동료들에게 버림받은 불행과이 섬에서 겪어야 했던 처절한 고독이없었더라면나는 마치 짐승처럼 생각도 없고근심 걱정도 없었을 것이다.고통이 내 영혼을 휘어잡아 깊은 고뇌에 빠뜨렸을 때비로소.......

원문보기 내부링크
Naver Blog

[자바스크립트] 객체의 속성 추가와 제거 [동적 속성 추가/제거, delete 키워드, toString() 메서드]

프로그래밍을 하다 보면정적으로 무언가를 생성한다 또는동적으로 무언가를 생성한다는 말을많이 듣게 됩니다.의미에 좀 변화가 있기는 하지만정적과 동적을 구분하자면 처음 무언가를 생성할 때 함께 생성하는 것을 정적으로 생성했다고표현할 수 있는데요.위의 코드는이름을 김춘봉이라고 지정을 하고생성하였는데요.이것을 정적으로 이름이라는 속성을 생성했다고 표현할 수 있습니다.반면에처음 생성할 때가 아닌 이후에 추가를 하게 되면 그것을동적으로 생성했다고 표현할 수 있습니다.속성 추가빈 객체를 하나 만들고, 이후에 내부에속성을 추가해보겠습니다.자바스크립트는 객체가 항상 자신이 원할 때속성.......

원문보기 내부링크
Naver Blog

[자바스크립트] 객체와 배열을 사용한 데이터 관리, 함수를 사용한 객체 생성

객체와 배열 조합하기객체를 사용하면 지금까지 배웠던문자열, 숫자, 불을 합쳐서 조금 더 큰 형태의데이터를 만들 수 있습니다.객체를 사용해서 사람의 이름과국어, 수학, 영어 성적을 나타냈습니다.참고적으로사람은 굉장히 다양한 속성을 가지고 있습니다.이름도 있고, 나이도 있고, 성별도 있고, 좀 더 깊게 들어가면 생김새의 특징도 데이터로 나타낼 수 있을 것입니다.하지만실제로 프로그램을 만들 때는프로그램에 필요한 것들이 따로 있습니다.예를 들어서성적관리 프로그램을 만든다면사람의 생김새까지 알아야 할 필요는 없습니다.그래서 이름과 과목에 대한 성적 정보만가지고 있으면 됩니다.이렇게현실.......

원문보기 내부링크
Naver Blog

[금값, 은값] 시세 확인하세요

2021년 2월 15일 금, 은 시세입니다.지난 1년간 금시세 변화입니다.지난 1년간 은시세 변화입니다.출처 : #금모아1만 원 이상부터금, 은 구매 가능합니다.혹시라도 가입하시면hkuspdg친구 추천 부탁드립니다.#금값시세조회#은값시세조회#금시세조회#은시세조회#현재금값#현재은값#금값조회#은값조회#금구매#은구매#금테크#은테크#금값#은값#Gold#Silver#Price가장 큰 공부는 남의 허물을뒤집어쓰는 것이다.수행이란,안으로는 가난을 배우고밖으로는 모든 사람을 공경하는 것이다.가장 어려운 것은알고도 모른 척하는 것이다.용맹 가운데 가장 큰 용맹은옳고도 지는 것이다.공부 가운데 가장 큰 공부는.......

원문보기 내부링크
Naver Blog

[혼공스] 템플릿 문자열, ==연산자와 !=연산자

#혼자공부하는자바스크립트과거에 자바스크립트는 문자열 내부에 표현식을 삽입할 때 다음과 같이 문자열 연결 연산자(+)를 사용해야 했습니다.이렇게 코드를 작성한다고 문제가 있는 것은아니지만, 표현식을 많이 결합하면 코드가복잡해집니다. 사용하고 있는 자바스크립트에서는 템플릿 문자열이라는 기능이 추가되어이러한 코드를 간단하게 작성할 수 있습니다.템플릿 문자열템플릿 문자열은 백 틱(`) 기호로 감싸 만듭니다.(백 틱 기호는 키보드 숫자 1 왼쪽에 있습니다.)문자열 내부에 `${표현식}` 기호를 사용하여표현식을 넣으면 표현식이 문자열 안에서계산됩니다.템플릿 문자열(`기호)을 사용하.......

원문보기 내부링크
Naver Blog

만두 빚기 [고기만두, 김치만두]

중국에서는 음력 12월 31일 00시에 만두를 먹는 풍습이 있다고 합니다.그래서우리 마눌님께서도 저녁부터 만두를빚으셨습니다.우선 만두소를 준비하고, 만두피를 직접 준비하십니다.보통 만두피는 사서 쓰기도 하는데...마눌님께서는 언제나 직접 만드시지요.솔직히 먹어보면...직접 만든 게 더 쫄깃하고 맛이 좋습니다.반죽을 길게 펴서만두피 하나 만들 정도로 자릅니다.일렬로 죽 자르지 않고...돌려가면서 자르던데요.뭔가 이유가 있을 거예요. ᄒᄒ;;그리고 자른 반죽을 손으로 살짝씩 눌러줍니다.점점 힘들어지면서 두 손으로 막 누르...c그리고 밀대로 만두피 모양으로 돌려가면서펴줍니다.사실.......

원문보기 내부링크
Naver Blog

[금값, 은값] 시세 확인하세요

2021년 2월 16일 금, 은 시세입니다.지난 1년간 금시세 변화입니다.지난 1년간 은시세 변화입니다.출처 : #금모아1만 원 이상부터금, 은 구매 가능합니다.혹시라도 가입하시면hkuspdg친구 추천 부탁드립니다.#금값시세조회#은값시세조회#금시세조회#은시세조회#현재금값#현재은값#금값조회#은값조회#금구매#은구매#금테크#은테크#금값#은값#Gold#Silver#Price아직 큰 실패가 없다면 안주하고 있다는 증거다.살면서 당신이 실패를 경험해보지 않았다면,당신은 스스로를 당신의 한계 속에밀어 넣어 본 적이 없다는 뜻입니다.스스로를 한계 속에 밀어 넣지 않으면,스스로가 가진 잠재력 또한 폭발시킬 수가없.......

원문보기 내부링크
Naver Blog

font 속성 [size, family, style, weight, line-height, text-align, text-decoration]

폰트 속성은 글자와 관련된 스타일 속성을 의미합니다.HTML 페이지는대학에서 원격으로 논문을 제출하고확인하는 용도로 만들어졌습니다.따라서HTML 페이지에는글자와 관련된 속성이 굉장히 많습니다.font-size 속성font-size 속성은 글자의 크기를 지정하는스타일 속성입니다.font-size 속성에는 크기 단위 또는 키워드를 사용합니다.웹 브라우저는 기본적으로16픽셀로 지정되어 있습니다.코드를 작성하여 살펴보겠습니다.결과는 다음과 같습니다.결과를 보시면3문단의 글자들의 크기가 같은데요.위에서 웹 브라우저는 기본적으로글꼴 크기가 16픽셀로 지정되어 있다고했는데요.<p>태그는 각각의 문.......

원문보기 내부링크
Naver Blog

[자바스크립트] 객체 속성과 메서드

객체의 생성과 객체 요소 접근을다시 한번 적어보겠습니다.위 코드와 같이 작성할 수 있습니다.그리고 객체 내부의 왼쪽을 속성이라 부르고,객체 내부의 오른쪽을 속성값이라고 부릅니다.이러한 속성 중에서 함수 자료형을 가진 속성을메서드 method라고 부르게 됩니다.위 코드의 내용을 살펴보면person이라는 객체가 있고name과 eat라는 속성이 있습니다.이때eat 속성은 함수 자료형이 들어있기 때문에특별히 메서드라고 부르게 됩니다.eat이라는 속성은 메서드이기 때문에person.eat를 입력한 뒤 함수를 호출하듯뒤에 괄호를 붙여서 호출하게 됩니다.person.eat();매개변수에는 food를 전달하게 됩니다.한 번.......

원문보기 내부링크
Naver Blog

[자바스크립트] 객체와 관련된 키워드[in 키워드, with 키워드]

우선 예제로 객체를 만든 다음in 키워드와 with 키워드에 대하여알아보겠습니다.in 키워드in 키워드는 다음과 같은 형태로사용하게 됩니다.<문자열> in <객체>이렇게 입력하면객체 내부에 해당 문자열을 가진키가 있는지 확인하게 됩니다.예를 들어서이름이라는 키가 student라는 객체에 있는지확인할 때는 다음과 같이 사용합니다."이름" in studentin 키워드의 결과는 불로 나오게 됩니다.위의 내용을 출력한다면 true가 나오게될 건데요.코드를 저장해서 출력해보겠습니다.첫 번째는 현재 객체 내부에 '이름'이라는 키가 있어true가 출력됨을 확인할 수 있습니다.두 번째는현.......

원문보기 내부링크
Naver Blog

[혼공스] 기본 자료형 [문자열 자료형]

#혼자공부하는자바스크립트프로그래밍 언어는 자료를 쉽게 다룰 수 있도록 자료 형태에 따라 구분하여 관리합니다.이러한 자료의 종류를 '자료형'이라고 부릅니다.기본 자료형에서는 자바스크립트의 가장 기본적이면서도가장 많이 사용되는 자료형에 대해알아보겠습니다.프로그래밍에서 프로그램이 처리할 수 있는모든 것을 자료 data라고 부르며, 자료 형태에따라 나눠놓은 것을 자료형 data type이라고합니다.자바스크립트는 다양한 종류의 자료형을제공합니다.가장 기본적이면서도 많이 사용하는 자료형은숫자 number, 문자열 string, 불 boolean자료형입니다.문자열 자료형alert( ) 함수 또는 console.log( ) 메서드.......

원문보기 내부링크
Naver Blog

[혼공스] 기본 자료형 [숫자 자료형]

#혼자공부하는자바스크립트숫자 자료형자바스크립트는 소수점이 있는 숫자와없는 숫자를 모두 같은 자료형으로 인식합니다.숫자를 입력하면 숫자 자료가 만들어집니다.숫자 연산자숫자 자료형을 사용하면 숫자 연산자로기본적인 사직 연산을 할 수 있습니다.+ 더하기 연산자- 빼기 연산자* 곱하기 연산자/ 나누기 연산자자바스크립트는 숫자 자료형을 연산할 때연산자 우선순위를 고려합니다.5 + 3 * 2위의 표현식에서 덧셈을 먼저 계산하고 싶으면다음과 같이 괄호를 사용합니다.(5 + 3) * 2콘솔에서 직접 확인해보겠습니다.연산자 우선순위로 두 표현식의 결과가다르다는 것을 확인할 수 있습니다.나머지 연산자.......

원문보기 내부링크
Naver Blog

[금값, 은값] 시세 확인하세요

2021년 2월 12일 금, 은 시세입니다.지난 1년간 금시세 변화입니다.지난 1년간 은시세 변화입니다.출처 : #금모아1만 원 이상부터금, 은 구매 가능합니다.혹시라도 가입하시면hkuspdg친구 추천 부탁드립니다.#금값시세조회#은값시세조회#금시세조회#은시세조회#현재금값#현재은값#금값조회#은값조회#금구매#은구매#금테크#은테크#금값#은값#Gold#Silver#Price스스로 칭찬할 줄 아는사람이 되자'나는 ~이 충분한 사람이다'라는 말은대단히 강력한 힘이 있다.자신이 여러 면에서 충분한 사람이라는것을 믿으면자신감을 손상시키는 불필요한 불안감으로부터 자유로워질 수 있다.자신이 부족하다는.......

원문보기 내부링크
Naver Blog

[금값, 은값] 시세 확인하세요

2021년 2월 13일 금, 은 시세입니다.지난 1년간 금시세 변화입니다.지난 1년간 은시세 변화입니다.출처 : #금모아1만 원 이상부터금, 은 구매 가능합니다.혹시라도 가입하시면hkuspdg친구 추천 부탁드립니다.#금값시세조회#은값시세조회#금시세조회#은시세조회#현재금값#현재은값#금값조회#은값조회#금구매#은구매#금테크#은테크#금값#은값#Gold#Silver#Price동의를 구하는데연연하지 말라.과학자들의 세계에 회자되는금언이 하나 있다.적어도노벨상 수상자 세 명으로부터당신이 틀렸다는 얘기를 듣기 전까지는당신이 정말 좋은 아이디어를 가지고 있다고확신할 수 없다.-폴 로터버(노벨 의학상 수.......

원문보기 내부링크
Naver Blog

[금값, 은값] 시세 확인하세요

2021년 2월 9일 금, 은 시세입니다.지난 1년간 금시세 변화입니다.지난 1년간 은시세 변화입니다.출처 : #금모아1만 원 이상부터금, 은 구매 가능합니다.혹시라도 가입하시면hkuspdg친구 추천 부탁드립니다.#금값시세조회#은값시세조회#금시세조회#은시세조회#현재금값#현재은값#금값조회#은값조회#금구매#은구매#금테크#은테크#금값#은값#Gold#Silver#Price넓고 평탄한 길은사람을 약하게 만든다.삶에는 두 가지 길이 있다.그중 하나는 넓고 평탄한 길이다.대부분의 사람들이 선택하는 이 길을 걸어가면어디에도 도달하지 못한다.넓고 평탄한 길은사람들에게 이렇게 약속한다."이 길은 무난해! 걷는.......

원문보기 내부링크
Naver Blog

[자바스크립트] 화살표 함수(Arrow Function)

프로그래밍 언어는 시간이 지나면서'기능 추가'라는 발전도 있지만,'기존의 코드를 더 쉽게 사용할 수 있는문법의 추가'라는 발전도 합니다.화살표 함수는 후자의대표적인 예라고 할 수 있습니다.기존에 익명 함수를function ( ) { }이러한 형태로 선언했습니다.이 형태를( ) => { } 이렇게 변형한 것이ECMAScript 6에서 추가된화살표 함수입니다.특징이 있다면한 줄이라면 { } 중괄호를 사용하지않아도 되며,한 줄을 사용할 경우에는마지막에 놓은 값이리턴값이 됩니다.( ) => 10예를 들어두값을 곱하는 함수를 만든다면이렇게 사용할 수 있습니다.자바스크립트에서.......

원문보기 내부링크
Naver Blog

[자바스크립트] 함수에서의 전개 연산자

매개변수 만들 때전개 연산자전개 연산자는 다음과 같이(...) => { }점을 3개 찍은 것을 전개 연산자라고부르게 됩니다.전개 연산자는 객체 또는 함수에 활용할 수 있습니다.함수의 매개변수에 활용하게 되면가변 매개변수 함수를 만들 때활용할 수 있습니다.매개변수로 들어온 인자들을 더하는함수를 한 번 만들어 볼게요.점을 3개 입력하고 식별자(numbers)를 입력하게 되면 ...numbers 전체가매개변수가 됩니다.이렇게 만들어진 매개변수는 함수가되는데요.한 번 출력해볼게요.이 만들어진 매개변수는 자료형이 배열입니다.그래서반복문을 사용하여 활용할 수 있습니다.전개 연산자를 사용할 때.......

원문보기 내부링크
Naver Blog

[자바스크립트] 매개변수를 제곱하는 함수, 매개변수를 모두 곱하는 함수, 사용자의 입력값이 숫자인지 확인 함수

매개변수를 제곱하는 함수매개변수가 하나일 경우매개변수를 두 개 넣으면<첫 번째 매개변수>의 <두 번째 매개변수> 제곱만큼 해주는 경우매개변수를 모두 곱하는 함수매개변수로 넣은 값을 모두 곱하는 경우사용자의 입력값이 숫자인지확인하는 함수이 코드...제가 만든 건데요.뭔가...허뎝한 느낌이 좀 있네요.좀 더 공부하겠습니다.고맙습니다.#JavaScript#function#parameter#자바스크립트#함수#매개변수

원문보기 내부링크
Naver Blog

[혼공스] 기본 용어 [표현식과 문장, 키워드, 식별자, 주석, 출력]

#혼자공부하는자바스크립트표현식과 문장자바스크립트에서 값을 만들어내는간단한 코드를 표현식 expression이라고부릅니다.예를 들면 다음 코드가 표현식입니다.27310 + 20 + 30 * 2'RintIanTta'하나 이상의 표현식이 모이면문장 statement이 됩니다.문장 끝에는 마침표를 찍듯이 세미콜론(;) 또는 줄바꿈을 넣어서문장의 종결을 알려줍니다.다음과 같이 줄바꿈과 세미콜론을2가지 모두 입력하는 경우도 많습니다.하나의 표현식도 문장의 종결을 의미하는세미콜론 또는 줄바꿈을 넣으면문장이라고 부르고, 이러한 문장이 모여서프로그램 program을 이룹니다.일반적인 '문장'은 영어로 sentence입니다.하지만 프.......

원문보기 내부링크
Naver Blog

[금값, 은값] 시세 확인하세요

2021년 2월 10일 금, 은 시세입니다.지난 1년간 금시세 변화입니다.지난 1년간 은시세 변화입니다.출처 : #금모아1만 원 이상부터금, 은 구매 가능합니다.혹시라도 가입하시면hkuspdg친구 추천 부탁드립니다.#금값시세조회#은값시세조회#금시세조회#은시세조회#현재금값#현재은값#금값조회#은값조회#금구매#은구매#금테크#은테크#금값#은값#Gold#Silver#Price당연히 누리는 것들에대해서 감사하며 살자자기가 선택한 인생을마치 남이 선택해 준 것처럼불평하면스스로도 불행하고 옆 사람도 지칩니다.감사하며 살 때 행복이 왔어요.우리가 당연히 누리는 것들에새롭게 감사하고,새롭게 감탄하는,그래서.......

원문보기 내부링크
Naver Blog

[자바스크립트] 객체 object [객체 생성, 객체 요소 접근, 객체 요소 출력, 객체 forin 반복문 사용]

객체 개요자바스크립트의 기본 자료형은숫자, 문자열, 불, 객체, 함수, undefined가있습니다.지금까지 자주 나왔던 배열은 어디에 속하는지typeof()를 활용해서 배열이 어떠한 자료형에 속하는지 알아보겠습니다.배열 복습저장하고 실행해 보면object라고 나오는 것을 볼 수 있습니다.이 object가 바로 객체를 의미하게 됩니다.배열이 object라는 것은배열이 object의 속성을 굉장히 비슷하게갖고 있다는 뜻입니다.따라서배열에 대해서 한 번 다시 살펴보고그 배열을 객체로 변환해서 살펴보겠습니다.배열을 생성하는 방법과 배열의 대괄호 안에숫자를 넣어서 각각의 요소에 접근할 수 있었습니다.그리고for 반.......

원문보기 내부링크
Naver Blog

[금값, 은값] 시세 확인하세요

2021년 2월 11일 금, 은 시세입니다.지난 1년간 금시세 변화입니다.지난 1년간 은시세 변화입니다.출처 : #금모아1만 원 이상부터금, 은 구매 가능합니다.혹시라도 가입하시면hkuspdg친구 추천 부탁드립니다.#금값시세조회#은값시세조회#금시세조회#은시세조회#현재금값#현재은값#금값조회#은값조회#금구매#은구매#금테크#은테크#금값#은값#Gold#Silver#Price'감사'라는 말은만병통치약이다.16년간 지켜본 결과'감사'를 습관화한 학생의 연평균 수입이그렇지 않은 학생보다 2만 5천 달러가 많았다.그뿐 아니라'감사'를 습관화한 사람의 평균 수명이그렇지 않은 사람보다.......

원문보기 내부링크
Naver Blog

집 밥 메뉴 [배추된장국, 찹스테이크, 삼치구이, 양배추 쌈밥] 추천해요

제가 양배추 쌈을 잘 먹으니까마눌님께서 이렇게 말하시네요."이렇게 해야 야채를 먹는구만!"그래서오늘도 양배추 쌈밥입니다.c양배추와 그리고 두부 쌈장정말밥 반찬으로 이만한게 없는거 같아요.쌈에 고기가 빠지면 서운하지요.그래서오늘은 색다르게삼치구이를 준비하셨네요.저는 이렇게살 많고, 가시 바르기 편한 생선이 좋아요.먹기 편하니까요.예전에는 삼치구이에 막걸리 먹으로자주 다녔는데...코로나가 얼른 끝나길 기원하며...한 점 먹어볼까요.살이 아주 큼직하니 좋네요.소금간도 적당하게 배여있어서맛이 좋습니다.그럼 이녀석들과의 조화를한 번 봐야겠지요........

원문보기 내부링크
Naver Blog

[자바스크립트] 콜백 함수와 반복문

이전 포스팅에서자바스크립트의 실행 순서에 대해알아보았는데요.자바스크립트의 실행 순서 때문에발생하는 문제를 살펴보겠습니다.일반적으로는for 반복문을 통해서 i에 0, 1, 2가 들어가고이거를 0초 후에 실행한다고 예약을 걸기 때문에0, 1, 2가 출력을 한다고 생각합니다.하지만실행해보면3, 3, 3이 출력됩니다.이것의 이유를 알아보면요.var 키워드가 전역 변수를 선언하는키워드라는 것을 알아야 합니다.예를 들면위 코드와 같이var i = 0;으로 선언해도반복문 밖에서 alert(i)로 출력할 수 있습니다.코드를 저장하고 실행하면그냥 3만 출력됩니다.이게 자바스크립트의 var 키워드의문제라고 할.......

원문보기 내부링크
Naver Blog

[금값, 은값] 시세 확인하세요

2021년 2월 7일 금, 은 시세입니다.지난 1년간 금시세 변화입니다.지난 1년간 은시세 변화입니다.출처 : #금모아1만 원 이상부터금, 은 구매 가능합니다.혹시라도 가입하시면hkuspdg친구 추천 부탁드립니다.#금값시세조회#은값시세조회#금시세조회#은시세조회#현재금값#현재은값#금값조회#은값조회#금구매#은구매#금테크#은테크#금값#은값#Gold#Silver#Price프란치스코 교황이젊은이들에게 드리는 글젊은이들이여, 잘 들으시오.시류에 거슬러 가시오!마음이 든든해집니다.하지만시류에 거슬러 가려면용기가 필요합니다.곤란이나 시련이나몰이해나 무서울 것이 없습니다.올곧은 사람들은역류를 헤쳐 올.......

원문보기 내부링크
Naver Blog

집 밥 메뉴 [갈비탕] 추천해요

가끔 진한 갈비탕이 생각날 때가 있어요.근데식당에서 먹으면왠지 강한 조미료 맛에입안이 떨떠름 해지기도 합니다.그래서 마눌님께서직접 만드셨네요.음식을 보자마자아 요새 계란 비싼데...진짜 비싼 갈비탕이네...이런 생각이 들더군요.뭐 암튼마눌님께서 손수 갈비의 지방을떼어내시고 깔끔한 국물을 위해노력하신 갈비탕입니다.갈비탕용 소갈비는 아닌데요.그래도 소갈비는 소갈비네요.맛이 좋습니다.그리고얼마나 오래 삶으셨는지...살이 슥~ 빠질 정도네요.이 살을 간장과 고추냉이를 섞은 소스에 찍어 먹으면...절로 소주 한 잔 생각이 납니다.그래서 저는...마눌님께서 당면을 사 오.......

원문보기 내부링크
Naver Blog

집 밥 메뉴 [참돔 찜, 동파육, 콩나물무침, 얼갈이 무침] 추천해요

오늘은 식탁에서 보기 힘든 식자재가올라와 있네요.참돔 찜입니다.뭔가...사진이 이상한 거 같아요...마눌님께서너무 징그러워 머리를 자르려고 했는데도저히 안 잘린데요...섬뜩하네요.그래서 머리가 저렇게...하지만 그 맛은 정말...살이 얼마나 통통한지...참돔을 일단 한 번 찜기에서 찌고,뜨거운 기름을 부어서 조리하셨데요.기름과 간장이 자체적으로 소스가 되어찍어 먹어도 잘 어울려서 좋습니다.계속 먹으면서 문제가 하나 있었는데요...절 계속 쳐다보는 거 같아요...기분 탓이겠지요...참돔의 반대편은 살을 떼어내어데리야키 소스로 조리를 하셨다고 합니다.이게 또 단짠단짠하니..........

원문보기 내부링크
Naver Blog

[자바스크립트] 기본 매개변수

기존의 기본 매개변수일반적으로는위 코드와 같은 형태로 매개변수를 입력해서 실행하게 됩니다.만약에test ( ); 이렇게 함수를 호출해도자동으로a = 10b = 20c = 30값이 들어가게 기본 값을 가진 매개변수를 만드는 방법에 대하여알아보겠습니다.매개변수를 입력하지 않으면해당 매개변수에 undefined가 입력된다고알고 있는데요.그러면a가 undefined 일 때 a = 10b가 undefined 일 때 b = 20c가 undefined 일 때 c = 30이러한 코드를 작성해 주면 되겠네요.기본적으로 3가지의 방법이 있는데요.첫 번째는 typeof () 함수를 활용하는 것두 번째는 논리 부정 연산자(!)를 이.......

원문보기 내부링크
Naver Blog

[금값, 은값] 시세 확인하세요

2021년 2월 8일 금, 은 시세입니다.지난 1년간 금시세 변화입니다.지난 1년간 은시세 변화입니다.출처 : #금모아1만 원 이상부터금, 은 구매 가능합니다.혹시라도 가입하시면hkuspdg친구 추천 부탁드립니다.#금값시세조회#은값시세조회#금시세조회#은시세조회#현재금값#현재은값#금값조회#은값조회#금구매#은구매#금테크#은테크#금값#은값#Gold#Silver#Price히말라야는 자만을받아들이지 않는다.1950~2006년 히말라야 등정에성공한 2,864명 중9%에 가까운 255명이추락사했다.추락사가 가장 많은 시점은정상을 밟은 직후(48%)였다.최고가 되기 무섭게 곧바로나락으로 떨어지고 만 것이다.그래서인지히.......

원문보기 내부링크
Naver Blog

배경 속성 [background-image, size, repeat, attachment, position]

배경 속성은 특정 태그의 배경 이미지 또는색상을 지정하는 스타일 속성입니다.background-imagebackground-image 속성은배경에 넣을 그림을 지정하는스타일 속성입니다.속성값으로 다양한 키워드를 넣을 수 있습니다.저는 url 단위를 사용해볼게요.이미지 파일은 제가 첨부할게요.결과는 다음과 같습니다.CSS3 이전에는 배경 이미지를 1개씩만적용할 수 있었습니다.하지만,CSS3부터는 여러 개의 배경 이미지를적용할 수 있습니다.결과는 다음과 같습니다.여러 개의 배경을 적용할 경우에는왼쪽에 위치한 이미지가 앞으로 나옵니다.background-size그림의 크기를 조절할 때 사용하는속성입니다.background.......

원문보기 내부링크
Naver Blog

2021년 2월 5일 매매일지

드디어 월급날입니다.오늘도 규칙적으로 매매를 진행합니다.1년간 보유했던한미글로벌HDC현대산업개발대양제지모두 매도하였습니다.약간의 수익이 있네요.매우 소소합니다.c그리고KG이니시스슈피겐코리아디알젬매수하였습니다.사자마자 떨어지는...개인적인 투자 기록입니다.참고만 해주세요.매수 중1회차2회차3회차4회차#KG이니시스시장 : 코스닥종가 : 17,900PER : 12.15ROA : 3.79%EPS : 1,474BPS : 10,051PBR : 1.78ROE : 14.66%시총 : 499,489산업명 : 정보처리 및 기타 컴퓨터 운영 관련업결산월 : 12월#슈피겐코리아시장 : 코스닥종가 : 62,800PER : 6.25ROA : 15.47%EPS : 10,052B.......

원문보기 내부링크
Naver Blog

[자바스크립트] 자바스크립트 실행 순서 [스레드(Thread)]

자바스크립트의 실행 순서프로그래밍 언어에는스레드(Thread)라는 개념이 있습니다.스레드(Thread)는 간단하게 표현하면코드를 읽어 내려간다는 것입니다.위와 같은 코드를위에서 아래로 쓸어 내려가며 읽는 것을스레드(Thread)라고 생각하셔도좋겠습니다.운영체제나 별도로 공부를 하여야좀 더 자세히 알 수 있다고 하네요.다른 프로그래밍 언어는이 코드를 읽어 내려가는 스레드(Thread)를수백, 수천 개로 여러 개 만들 수 있습니다.하지만,자바스크립트는 이 스레드(Thread)를개발자가 따로 만들 수 없습니다.무조건 코드를 읽어 내려가는 스레드(Thread)는 단 한 가지 방법이라고기억하시면 됩니다.위 코드의 출.......

원문보기 내부링크
Naver Blog

[금값, 은값] 시세 확인하세요

2021년 2월 6일 금, 은 시세입니다.지난 1년간 금시세 변화입니다.지난 1년간 은시세 변화입니다.출처 : #금모아1만 원 이상부터금, 은 구매 가능합니다.혹시라도 가입하시면hkuspdg친구 추천 부탁드립니다.#금값시세조회#은값시세조회#금시세조회#은시세조회#현재금값#현재은값#금값조회#은값조회#금구매#은구매#금테크#은테크#금값#은값#Gold#Silver#Price잃지 말아야 할 가치는무엇인가?우리가 투자한 회사 사장들에게2년에 한번 다음 메시지를 전달한다."여러분은 돈을 잃어도 상관없습니다.많은 돈이어도 괜찮습니다.하지만평판을 잃지 마십시오.인격을 잃지는 마십시오.우리에겐 돈을 잃을 여.......

원문보기 내부링크
Naver Blog

집 밥 메뉴 [해물탕, 양배추 쌈, 불고기] 추천해요

가끔 입맛이 없을 땐쌈밥만큼 입맛을 돋우는 것도 없지요.그래서 오늘은 양배추 쌈밥을 한 번 먹었습니다.일단 양배추와쌈밥이니...쌈장이 필요하지요.쌈장은 두부를 넣고 만들었는데요.너무 짜지 않고, 두부의 부드러움이 있어서맛도 좋고 식감도 좋았습니다.그리고쌈밥에는 고기가 빠질 수 없겠지요.그냥...뭐 소소하게불고기를...불고기는 먼저 한 점 먹어봤어요...고기니까요c이렇게 가볍게 한 쌈해주면...쌈을 정신없이 싸먹다...약간 국물이 필요하다 느낄 때쯤...해물탕을 한 숟갈 떠서 먹어줍니다.해산물이 엄청나네요...그리고 쑥갓도 들어있어서국물이 개운.......

원문보기 내부링크
Naver Blog

집 밥 메뉴 [ 월남쌈, 소 불고기, 굴전 ] 추천해요

쌈 시리즈는 계속됩니다.이번에는 월남쌈을 한 번 먹었습니다.이게 참 그냥 먹을 때는 몰랐는데요.마눌님이 집에서 하는 걸 보면...참 대단하다는 생각이 들 만큼손이 많이 가는 요리더라고요.이렇게 다양한 야채와...요새 잊고 있었던...그 햄이 다시 등장합니다.c저 햄의 존재는저의 집 밥 포스팅을 보신 분이시면다 아실 거예요.뭐 암튼...혹시라도 쉬워 보인다고"오늘 월남쌈이나 먹을까"이런 말씀 하시면 안 돼요...저거 준비하는 거 진짜 힘든 거예요.!!그리고너무 야채만 있으면 간을 맞추기 어려우니...고기 등장!소 불고기인데요.간을 약간 짭짤하게 하셨네요.월.......

원문보기 내부링크
1 2 3 4