천천히, 꾸준히

😺 Study/JavaScript, jQuery

'버튼' 클릭 > 알림창 나타남 '닫기' 클릭 > 알림창 사라짐 알림창임 닫기 버튼 function close(){ document.getElementById('alert-box').style.display = 'none'; } btn()은 실행이 되는데, close()는 반응이 없었다. 혹시나 해서 함수 이름을 바꿨더니 제대로 실행됨; 알림창임 닫기 버튼 자바스크립트에서 close는 window.close(), self.close()...등에서 특정 개체에서만 적용되는 메소드이다. 단순히 결과를 반환하는 독립적인 함수가 아닌 window와 self라는 특정 개체에서 반응한다는 의미로 이해된다. 나는 일단 함수 이름을 단순히 close라고 지었더니, 무반응에 에러도 안 떠서 난감; 함수와 메소드의 차이를..

2022. 12. 9.

😺 Study/JavaScript, jQuery

*원페이지에서 메뉴를 클릭하면 해당 영역으로 스크롤되어 이동하는 코드 - a링크의 hash를 이용하여 이동 - hash는 페이지의 내부 링크를 목적으로 사용 (id를 지정하지 않는 경우, 클릭시 페이지의 최상단으로 이동) //클릭할 메뉴 메뉴1 메뉴2 메뉴3 메뉴4 //이동할 영역 메뉴1 메뉴2 메뉴3 메뉴4 //메뉴 클릭시 해당 영역으로 이동하는 jQuery $(function () { $('li > a').click(function (){ $('html, body').animate({scrollTop: $(this.hash).offset.top}, 300); }); }); >> 메뉴를 클릭하면 html, body의 scrollTop(스크롤바의 수직 위치값)이 $(this.hash) -> (클릭한 해당..

2021. 12. 22.

😺 Study/JavaScript, jQuery

HTML width와 height 속성을 통해 생성할 도형의 크기를 설정 Welcome to JS_Drawing Zone :) 방향키로 도형을 움직여보세요! JavaScript 변수 설정 // canvas에 그림을 그리려면 먼저 context를 가져와야 함 // context에 대한 참조는 getContext() 메서드에 context 이름을 넘김 // 좌표는 canvas 요소 왼쪽 위에서 시작하며, 이 지점을 (0, 0)으로 간주 // x는 오른쪽, y는 아래쪽으로 픽셀 단위로 증가 let canvas = document.getElementById("canvas"); let ctx = canvas.getContext("2d"); // canvas 가로 및 세로의 반값 > 150 let x = canva..

2021. 8. 17.

😺 Study/JavaScript, jQuery

- 회사에서 JS, React 관련 과제가 주어졌다. 아직 맨땅에 헤딩이지만, 좋은 레퍼런스가 많아서 무사히 완료(?) 온라인 스터디에서 배운 내용과 연관성이 있어서 정리할 겸 기록 각 작업순서와 관련된 상세 포스팅을 따로 게시할 예정이다. 진행된 작업순서: NodeJS > React > Babel > Webpack > Material-ui > qrcode NodeJs 브라우저 외부에서 JS를 실행 할 수 있는 환경 (=런타임 환경) $ npm init -y React 가상돔을 이용하여 돔의 변화 처리 → 실제돔에 변화를 일으키지 않고 변화를 가상돔에 기록한 후 그리는 방식 Create React App은 새 React 싱글 페이지 어플리케이션을 만들기에 적합 React를 사용할 때는 생산성을 높이기 위..

2021. 8. 9.

😺 Study/JavaScript, jQuery

/* 사용자가 이름을 입력하면 저장되고 인사말이 출력되는 페이지를 만들어 보자 */ 먼저, 이름을 입력할 form과 input을 만든다. css에서 .form, .sayHello를 display: none; 해준다. //사용자가 이름을 입력하면 창이 안 보여야 하기 때문에 사용자가 이름을 입력하면 다시 창이 보일 수 있도록 .showing { display: block; } 을 추가한다. *로컬 스토리지 local storage : 저장되는 데이터 각 이름들은 내가 알아보기 쉽게 변경할 수 있다. (nameForm, nameInput, sayHello, userName, SAVE_NAME, SHOWING_CLASS) 1. 사용자의 이름을 저장하는 함수 localStorage.setItem은 로컬 스토리지..

2020. 12. 9.

😺 Study/JavaScript, jQuery

변수, 상수, 대입 연산자에 대해 알아보자. 변수: 바뀔 수 있는 값 (variable) 상수: 바뀌지 않는 값 (constant) 예를 들어, 텍스트가 많을 때 특정 값만 텍스트를 바꾸고 싶은 경우. 변수로 설정한다. var name='hello'; alert("lorem ipsum blabla"+name+"lorem ipsum blabla"); - 변수 name 위치에 hello가 할당되어 경고창이 뜬다. - 변수 name을 다른 값으로 할당해도 적용된다. (대입 연산자) - 텍스트가 많은 경우, 변수에 다른 값으로 할당하면 되기 때문에 유용하다. 참고: edwith [부스트코스] 자바스크립트의 시작 by 생활코딩 www.edwith.org/boostcourse-web-106/joinLectures/..

2020. 11. 23.

😺 Study/JavaScript, jQuery

자바스크립트 데이터 타입 중에 숫자(Number)와 문자열(String)에 대해 알아보자. (총 6개의 타입과 객체가 있다.) 콘솔창에 숫자와 연산를 이용해보면. 1+1 2 2-1 1 2*4 8 6/2 3 - 더하기, 빼기, 곱하기, 나누기로 연산된다. "1"+"1" "11" - 문자열 타입은 작은 따옴표(' ') 또는 큰 따옴표(" ")를 사용한다. - 문자열 + 문자열이기 때문에 실행값도 문자열이다. - 문자열의 길이를 구한다면, 'Hello world'.length -> 11이 출력된다. 'Hello world'.indexOf('world'); 6 - world의 배열 값을 검색하는 코드 - 0부터 시작, 6번째에 위치한다는 것을 알 수 있다. 참고: edwith [부스트코스] 자바스크립트의 시작 ..

2020. 11. 23.

😺 Study/JavaScript, jQuery

콘솔을 통해서 간단한 javascript 코드를 실행시킬 수 있다. 브라우저의 개발자 모드 - console 메뉴에서 바로 적용하기 예를 들어, 텍스트의 글자 수를 알고 싶다면. alert('글자'.length) - 2라는 경고창이 뜬다. - 작은 따옴표(' ')안의 내용은 문자열로 인식한다. - 문자열의 길이를 구할 땐, .length *이렇게 콘솔창에 직접 입력한 자바스크립트는 해당 웹 페이지를 대상으로 실행된다. *콘솔을 이용하면 웹 사이트에서 간단한 문제를 간편하게, 자바스크립트를 실행시켜서 해결할 수 있다. 참고: edwith [부스트코스] 자바스크립트의 시작 by 생활코딩 www.edwith.org/boostcourse-web-106/joinLectures/52258

2020. 11. 23.

😺 Study/JavaScript, jQuery

자바스크립트가 실행되는 원리는 html에서 onclick 속성의 명령을 기억했다가, 사용자가 해당 태그와 상호작용하면 (예를 들어, 클릭한다면) 기억했던 명령을 브라우저가 실행하는 것이다. 웹 브라우저에서 일어나는 유용한 사건을 이벤트(event)라고 한다. 예를 들면, - 버튼 타입의 hi를 누르게 되면 onclick이 실행되면서 hi라는 경고창이 뜨게 된다. - onclick 이벤트: 사용자가 어떤 것을 클릭하는 사건 - 그 외의 다른 이벤트 속성들: onchange, onkeydown, onmouseover 등등 참고: edwith [부스트코스] 자바스크립트의 시작 by 생활코딩 www.edwith.org/boostcourse-web-106/joinLectures/52258

2020. 11. 23.

😺 Study/JavaScript, jQuery

자바스크립트를 처음부터 다시 공부해보니 언어를 받아들여야 한다는 거부감이 들었다. 무엇보다 어떻게 읽히고 동작하는지부터 알아야 훨씬 쉽게 받아들일 수 있을 것 같았다. 그래서 찾다가 알게된 edwith 사이트..! edwith은 네이버와 네이버커넥트재단이 제공하는 온라인 교육 플랫폼이다. 강의를 무료로 이용한 뒤 실무자에게 코드리뷰를 받을 수도 있다. 참고로 코드리뷰는 유료다. 자세한 내용은 아래 링크 참고// https://www.edwith.org/ 에듀케이션위드 : edwith 에드위드(edwith)는 네이버(NAVER)와 네이버 커넥트재단(NAVER Connect)이 제공하는 온라인 강좌(MOOC : Massive Online Open Course) 교육 플랫폼입니다. 에듀케이션위드(educati..

2020. 11. 23.