Programming/Java Script 33

[틈새 JS 기초] Mouseover - out Events

제목에서 " Q " 가 있는 경우는 해결하지 못한 궁금증이 있는 글들입니다. JavaScript 에서 Events 기능 정리 Scroll Events / Window Resizing / Key Down Events Submit + 태그의 action ■ Mouseover & Mouseout 하나의 element(변수)에 두개의 EventsListener 를 할당 할 수 있으며 JS는 두 가지를 함께 실행 한다. [ 준비 코드 ] Roll your mouse over the box 에 해당하는 빨간 box에 마우스를 가져다 대면 안의 글씨가 innerHTML = "The mouse is over the box"로 바뀜. 그런데 이렇게 코드를 작성하면 한번 마우스를 가져다 댄 이후 계속 " The mouse..

[Q-틈새 JS 기초] Submit Events + data 도착지 지정 : action

제목에서 " Q "가 있는 경우는 해결하지 못한 궁금증이 있는 글들입니다. JavaScript 에서 Events 기능 정리 Mouseover & Mouseout Scroll Events / Window Resizing / Key Down Events Coursera X K-mooc에서 Javascript basic 수강 중 따로 정리해두면 좋을 JS 기초들에 대해서 정리해보았습니다. 태그에서 data를 보내는 방식을 "GET" 방식으로 보내고 이때 보내지는 data들이 도착할 URL을 action을 이용해서 지정할 수가 있습니다. JavaScript Events //action ="url" - name을 보내고 그 data가 도착할 URL Your name : 그렇다면 데이터를 Get 방식으로 보낸다는 ..

[K-MOOC x Coursera ] JavaScript Basic - Module 3 : Events

JavaScript can listen for events and handle them, when they occur. 자바스크립트는 event가 발생 했을 때, 이를 수신하고 다룰 수 있다. ■ onclick : property 버튼 생성 후 눌렀을 때 경고 (alert)창을 뜨게 할 수도 있고 페이지가 열렸을 때 바로 메세지 창이 뜨게 할 수도 있다. 1. 버튼 눌렀을 때 메세지 창 뜨기 : 함수를 이름으로 참조 2. 페이지 열렸을 때 바로 메세지 창 뜨기 : 함수이름을 블록 - ( ) 로 참조해주면 된다. 1번의 경우는 ouch 옆에 ( ) 블록이 없음을 확인 할 수 있으니 주의하자요!! ■ addEventListener(); More morden way of capturing events meth..

[🍭JS 기초] 자바스크립트에서 Private 속성 + a

https://ui.toast.com/weekly-pick/ko_20200312 은닉을 향한 자바스크립트의 여정 ECMAScript 클래스 필드(class field) 명세중에 `Private field` 즉 `Private Property` (이하 Private 속성) 가 있다. 클래스 필드 스펙은 Stage 3(Candidate)까지 올랐으니 아마 곧 Stage 4(Finished)를 거쳐 표준 스펙이 될 ui.toast.com https://coryrylan.com/blog/javascript-module-pattern-basics JavaScript Module Pattern Basics A beginner tutorial on the ES5 JavaScript Module Design Patte..

[K-MOOC x Coursera ] JavaScript Basic - Module 3 : DOM

DOM : Document Object Model - 문서 객체 모델 >> 문서 객체 : 이나 같은 html문서의 태그들을 JS가 이용할 수 있는 객체로 만드는 것을 의미한다. >> Model : 모듈이라고 인식하면 되는데 여기서는 문서 객체를 " 인식하는 방법" 이라고 이해하면 된다. ∴ DOM은 웹 브라우저가 HTML 페이지를 JS가 이용할 수 있는 객체로 만들어서 "인식" 하는 방식 or 문서 객체와 관련된 객체의 집합을 의미 WebPage도 객체이다. 각각의 네모 칸은 node(노드) 이러한 형태의 자료구조를 tree 형 자료구조라고 한다. Window 는 부모 노드 맨 마지막 요소들은 root(뿌리) 노드 HTML 태그 : 요소 노드 요소 노드 안의 글자 : text 노드 HTML 태그 뿐만이 ..

[🍭JS 기초 ] : 객체 (Object)

이번 시간에는 Java Script의 객체에 대해 요약 정리해보도록 하겠습니다. 공부하면서 적은 블로그라 틀린 점이 있다면 언제든지 지적 부탁드립니다. ◆ 객체 (Object) Java Script는 객체 지향 프로그래밍 언어이지만 엄밀히 말하자면 "프로토타입 기반의 객체지향 언어" 이다. "Class 기반의 객체지향 언어" 인 JAVA나 C 와는 조금 다른면이 있다는 것이다. Class 기반의 객체지향 언어는 객체를 생성하기 위해 (class를 생성하고, new 연산자를 사용해서 인스턴스를 생성) 하는 과정이 필요하다. 다만, Java Script에서는 간단하게 몇 가지 방법을 사용해서 객체를 생성할 수 있는데 다음과 같다. 1. 객체 리터럴 2. Object 생성자 함수 3. 생성자 함수 4. Obj..

[K-MOOC x Coursera ] JavaScript Basic - Module 2

이 수업에서는 Visual Studio Code 프로그램을 사용한다. 우선 시작하기 앞서 나같은 Window 사용자들은 파일들의 확장자 명을 볼 수 있게 설정해두도록 하자. >> TIP : VS 새 폴더 만들 때 파일 이름에 공백은 없도록 하자. ## JS에서의 undefined / null / 0 는 FALSE 아래와 같이 코드를 작성해보면 chrome 화면 출력 결과는 False가 나온다. 여기서 green은 값이 undefiend인 변수여서 출력하면 값은 false 이기 때문에 if문의 else 블록의 출력문이 출력된다. Undefined resolves this flase Java Script. (Undefined는 잘못된 JS를 해결해준다.) >> JS는 undefined / null / 0 /..

[ 우테코 ] - 1주차 완료 후 리뷰 < 업데이트 중>

▣ 우테코 1주차 완료 후 느낀 점 굉장히 정신 없이 지나간 1주 였다. 아무래도 JS는 공부하기 시작한지 얼마 되지 않은 상황이라 다른 사람들이 하는 질문하고 올리는 것 조차 이해하지 못한 점들이 많다. 남들보다 늦게 시작한 만큼 따라 잡아야 할 부분도 많다는 것을 절실히 느꼈다. 하지만 스스로 고민하고 해결해나가는데에 재미를 느꼈고 시간 가는 줄 몰랐다. 남은 2주차, 3주차, 4주차도 끝까지 포기하지 않고 어떻게든 끝자락이라도 따라잡을 수 있다면 그것만으로도 내게는 큰 의미가 있다고 생각한다. ▣ 1주차 관련 이론 정리 slice(), split() 배열, 객체 배열 node.js git hub / commit 문제2 : 중복 문자 문제6 : 문제7 : ▣ 1주차 코치님들로의 피드백 커밋 + git..

[우테코 프리코스] 1주차 : 코치님들로의 피드백 <업데이트중>

▣ 1주차 코치님들로의 피드백 ※≫▶ ▷ Git 에 대하여,, 2020년 7월 이후부터 깃헙 정책의 변경으로 인하여 기존의 PW 인증방식에서 토큰 인증 방식이 필수가 되었다. 생성 방법은 권한 지정을(생성 이후 변경 가능) 하고 토큰 생성을 하며 생성한 토큰은 안전한 곳에 보관을 해야 한다. 이 토큰은 터미널이나 여러 소스트리같은 프로그램에서 PW대신 사용하게 된다. 「토큰 생성」: 개인 Setting → Developer Settings → Personal Access Token → Tokens ( 생성) ※ 주의 : 토큰 생성 후 토큰 번호는 바로 어딘가에 (메모장) 복사해두자. 페이지를 벗어나면 다시 볼 수 없다. 잃어버리면 차라리 토큰 삭제하고 재 생성하는 것이 답.. CLI : Command L..