뇌운동일지

javascript 과제 참고 자료 본문

JavaScript

javascript 과제 참고 자료

purpleduck 2020. 9. 8. 13:38

- javascript 기본개념 

이해해야 하는 개념들은 

10 11 12 14 15 16 17 18 19 20 29 30 31 32 33강에 있다. 

poiemaweb.com/coding

 

Progmamming | PoiemaWeb

프로그래밍은 수행되어져야 하는 명령을 컴퓨터에 전달하는 일종의 커뮤니케이션이다. 이때

poiemaweb.com

위의 포스팅에서 객체 delete 연산자 설명에 이해가 안되는 부분이 있었다. 

developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/delete

 

delete 연산자

delete 연산자는 객체의 속성을 제거합니다. 제거한 객체의 참조를 어디에서도 사용하지 않는다면 나중에 자원을 회수합니다.

developer.mozilla.org

이 포스팅을 참고했다. 

 

- 개념 이해 참고 자료2 

www.zerocho.com/category/JavaScript/post/5b0645cc7e3e36001bf676eb

 

(JavaScript) 자바스크립트의 this는 무엇인가?

안녕하세요. 이번 시간에는 자바스크립트 this에 대해 알아보겠습니다. 사실 이미 실행 컨텍스트 강좌 에 다 설명해둔 것이긴 한데요. 그 강좌는 실행 컨텍스트(전체적인 흐름)에 더 집중해서 쓰�

www.zerocho.com

 

- 개념 이해 참고 자료3

programmer-seva.tistory.com/60?category=615259

 

[스터디_자바스크립트] 47. DOM 심화 - DocumentFragment 노드

1. DocumentFragment 개체 개요 DocumentFragment 노드를 생성해서 사용하면 라이브 DOM  트리 외부에 경량화된 문서 DOM을 만들 수 있다. DocumentFragment는 마치 라이브 DOM 트리처럼 작동하되, 메모리상에..

programmer-seva.tistory.com

 

아래로는 구현이 필요한 기능별 예제 

- select 박스 선택에 따라 두번째 select 박스 변화 

imivory.tistory.com/9

 

[javascript] selectbox 선택에 따라 두번째 selectbox 값 변화

[javascript] selectbox 선택에 따라 두번째 selectbox 값 변화 selectbox의 선택에 따라 두번째 selectbox의 값이 변해야하는 경우가 있습니다. 지역 선택을 해야할 때나 품목 선택을 해야할 때가 그런 경우죠.

imivory.tistory.com

 

- table search 

www.it-swarm.dev/ko/javascript/html-%ED%85%8C%EC%9D%B4%EB%B8%94%EC%97%90%EC%84%9C-%EC%8B%A4%EC%8B%9C%EA%B0%84-%EA%B2%80%EC%83%89-%EB%B0%8F-%ED%95%84%ED%84%B0%EB%A7%81%EC%9D%84-%EC%88%98%ED%96%89%ED%95%98%EB%8A%94-%EB%B0%A9%EB%B2%95/942780130/

 

javascript — HTML 테이블에서 실시간 검색 및 필터링을 수행하는 방법

다음은 모든 테이블 , (테이블의 모든 td, tr을 다루면서 HTML 테이블 내부를 검색하는 가장 좋은 솔루션입니다. ), 순 자바 스크립트 및 short 가능한 : Apple Green Grapes Green Orange Orange function searchTable()

www.it-swarm.dev

 

- checkbox 모두 선택/해제

aosceno.tistory.com/435

 

checkbox 전체선택, 전체해제.... 한 페이지에 아이템이 여러개 있을 경우 / 여러페이지 일괄 적용 ��

javascript로만 checkbox를 전체선택하고 전체해제 하기. 1) 전체선택 체크시 > 해당 부모에 해당하는 자식 체크박스들 전체 선택 2) 전체선택 해제시 > 해당 부모에 해당하는 자식 체크박스들 전체 해�

aosceno.tistory.com

 

- table 선택한 row 색깔 바꾸기 

m.blog.naver.com/PostView.nhn?blogId=tkddlf4209&logNo=220614050551&proxyReferer=https:%2F%2Fwww.google.com%2F

 

[html] javascript를 이용하여 클릭한 Table tr에 하이라이트 효과주기.(=포커스효과)

* 선택한 tr에 하이라이트(포커스) 효과를 줍시다 12345678910111213141516171819202122232425262728293031...

blog.naver.com

 

- table 번호 자동 증가 

: table 을 object 로 만들어 출력했으므로, table을 만드는 JavaScript 에서 Number() 를 활용했으므로, 결국 적용하지 않았다. 

jhnyang.tistory.com/78

 

[티스토리 tistory]자바스크립트 사용해서 테이블 자동증가 하는 법(javascript, autoincrement)

[티스토리 tistory] javascript 파일 등록해서 테이블 번호 자동증가 활용하기 안녕하세요~~오늘은 티스토리에 자바스크립트 파일 등록해서 테이블 자동증가하는 법을 알아볼게요~ 테이블 번호 자동�

jhnyang.tistory.com

 

- javascript 로 html 테이블 생성 (for문 활용) 

gooya17.tistory.com/entry/%EB%B0%B0%EC%97%B4%EC%9D%98-%EA%B0%92%EB%93%A4%EC%9D%84-%EC%9B%90%ED%95%98%EB%8A%94-%EC%88%9C%EC%84%9C%EB%8C%80%EB%A1%9C-%EC%B6%9C%EB%A0%A5%ED%95%98%EA%B8%B0

 

배열의 값들을 원하는 순서대로 출력하기

 

gooya17.tistory.com

 

- select option에 따라 div 변경 

: 이렇게 하는 게 아닌 것 같지만, 화면에만 제대로 나오게 했다. 

gist.github.com/mechander/01723a8d5635fe57b4b3

 

자바스크립트 select에따른 div변경

GitHub Gist: instantly share code, notes, and snippets.

gist.github.com

mainia.tistory.com/2710

 

자바스크립트(Javascript) display 속성 이용해서 접거나 펴는 방법

자바스크립트(Javascript) display 속성 이용해서 접거나 펴는 방법 함수 하나로 화면 영역을 보이게 하거나 사라지게 토클 기능을 구현할 수 있습니다. 흔히 내용이 많아서 더보기 버튼을 구현할 때

mainia.tistory.com

unabated.tistory.com/entry/displaynone-%EA%B3%BC-visibilityhidden-%EC%9D%98-%EC%B0%A8%EC%9D%B4

 

display:none 과 visibility:hidden 의 차이

div 태그로 만든 Layer를 안보이게 하는 두가지 방법  1. display:none block     아예 사라지게 하는것. 보이지도 않고 해당 공간도 존재하지 않게 됨 2. visibility:hidden visible    보이지만 않고 해..

unabated.tistory.com

 

- .getElementById() 와 .getElementsByClassName() 의 서로 다른 사용법 

electronic-moongchi.tistory.com/79

 

[javascript] .getElementById(), .getElementsByName(), .getElementsByTagName(), .getElementsByClassName() 사용하는 방법

[javascript] .getElementById(), .getElementsByName(), .getElementsByTagName(), .getElementsByClassName() 사용하는 방법 자바스크립트에서 HTML 문서의 객체를 가져올때 사용되는 함수는 .getElementById(..

electronic-moongchi.tistory.com

 

 

- 메뉴 검색 

: 적용했으나 이해하지 못함 

thisisspear.tistory.com/40

 

[JavaScript] 검색 기능 만들기

결과물 사용 에디터 Atom Editor 요구사항 1. 키를 입력할 때마다 검색 결과가 동적으로 변하기 HTML Search A Apple O Orange M Mandarin S Strawberry W Watermelon G Grape P Pear C Cherry CSS body{ margin:..

thisisspear.tistory.com

 

- 테이블 ascending, descending 정렬 

: 이해는 못함 

stackoverflow.com/questions/14267781/sorting-html-table-with-javascript

 

Sorting HTML table with JavaScript

I'm after a table sorting solution (in JavaScript) but I can't seem to find a suitable one yet. I just need it to sort each column alphabetically. It doesn't need to ignore any code or any numbers ...

stackoverflow.com

 

- table td 안의 text 가져오기 

m.blog.naver.com/PostView.nhn?blogId=jw43834&logNo=120179712736&proxyReferer=https:%2F%2Fwww.google.com%2F

 

자바 스크립트.

태그의
안의 텍스트 값(데이터 값) 가져오기

 

출처 : http://blog.naver.com/PostView.nhn?blogId=ruvbada&logNo=10026917445&redirect=Dlo...

blog.naver.com

 

- 테이블 행 전체 삭제 구현 시, 참고 

zetawiki.com/wiki/%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8_HTML_%ED%85%8C%EC%9D%B4%EB%B8%94_%ED%96%89_%EC%B6%94%EA%B0%80/%EC%82%AD%EC%A0%9C

 

자바스크립트 HTML 테이블 행 추가/삭제 - 제타위키

다음 문자열 포함...

zetawiki.com

 

 

(적용하지 않음)

- 팝업에 post 방식으로 전달 

www.webmadang.net/script/script.do?action=read&boardid=3001&page=2&seq=16

 

웹마당넷 |팝업창에 Post방식으로 값넘기기

 

- form 으로 데이터 전달 

www.codingfactory.net/11576

 

HTML / form / 데이터를 전달하는 양식 만들기

form form은 데이터를 입력 받고 전송할 때 사용하는 태그입니다. 문법

...
method : 값을 전송하는 방법입니다. get 또는 post를 입력합니다. action : 값을 전달할 페이지를

 

www.codingfactory.net

 

- 선택한 내용을 input에 입력시키기 

www.webmadang.net/javascript/javascript.do?action=read&boardid=8001&page=17&seq=147

 

웹마당넷 |[SELECT] SELECT BOX 선택시 내용을 텍스트박스에 출력해 줍니다.

 

www.webmadang.net

 

( 개념 이해 참고용 ) 

 

- javascript 에서 " 와 ' 의 사용 

stackoverflow.com/questions/944081/what-is-the-difference-between-and-in-javascript

 

What is the difference between ' and " in JavaScript?

I saw this question and I am wondering about the same thing in JavaScript. If you use the character ' or the character " when making strings in JavaScript, the application seems to behave the same...

stackoverflow.com

 

- 노드 활용하기 

tcpschool.com/javascript/js_dom_nodeAccess

 

코딩교육 티씨피스쿨

4차산업혁명, 코딩교육, 소프트웨어교육, 코딩기초, SW코딩, 기초코딩부터 자바 파이썬 등

tcpschool.com

 

'JavaScript' 카테고리의 다른 글

JavaScript 참고할만한 책과 개념정리  (0) 2020.09.22
JS for, for in  (0) 2020.09.22
[vanillaJS] var, let, const  (0) 2020.09.21
JavaScript 소소한 개념  (0) 2020.09.14
JavaScript, jQuery, Ajax  (0) 2020.04.07
Comments