본문 바로가기

JavaScript169

[JavaScript] js 로 html 에 element 생성 https://stickode.com/detail.html?no=2650 스틱코드 stickode.com 해당 HTML 을 보면 parent 라는 div 안 에 아무것도 없다 하지만 위처럼 div 안에 내용이 들어가 있는데 js 를 통해서 element를 넣어주었다. 위 스틱코드 포스트를 참고해 활용해 보시면 좋을것같다. 2021. 12. 16.
[JavaScript] hash 암호화 안녕하세요. 이번시간에는 javascript에서 암호화를 하는 방법에 대해서 설명하겠습니다. 스틱코드에 코드도 올려두었으니 한번 사용해보세요. https://stickode.com/detail.html?no=2667 스틱코드 stickode.com 일단 본격적으로 시작하기 앞서 암호화에 방식에 대해 간단히 알아보겠습니다. 암호화 방식에는 크게 2종류가 있습니다. 1. 양방향 암호화 2. 단방향 암호화 이 두방식의 차이점은 암호문을 복호화하여, 원문을 알아낼 수 있냐 업냐입니다. 양방향 암호화는 암호화된 암호문을 복호화 할 수 있는 알고리즘을 사용하고, 단방향 암호화는 암호화는 수행하지만 절대 복호화가 불가능한 방식의 알고리즘을 사용합니다. 이번예제에서는 단방향 암호화 방식인 hash 암호화를 사용해서 암.. 2021. 12. 10.
[JavaScript] ajax로 get/post 전송하기 jquery의 ajax를 사용해서 오늘의 색을 추천하는 페이지를 만들어보겠습니다. 먼저 html에서 jquery를 사용하기로 선언하고, 닉네임과 확인버튼이 있는 간단한 화면을 만들어줍니다. 오늘의 색 찾기! 확인 그다음, ajax로 get 또는 post 전송을 하는 코드를 작성합니다. 아래에는 get으로 전송하는 방법입니다. post로 하기 원한다면 method를 post로 변경하면 됩니다. 스틱코드를 사용하면 빠르게 하실 수 있습니다. ajax - Stickode 스틱코드 stickode.com 닉네임에 따라 랜덤하게 색을 골라주는 find_color.php를 만듭니다. 2021. 12. 6.
[JavaScript] JavaScript 자식 요소 전부 삭제하기 안녕하세요. 이번에는 JavaScript에서 특정 태그의 하위에 존재하는 자식 Element들을 전부 삭제하는 것을 간단한게 구현해보도록 하겠습니다 스틱코드에 업로드 해놨기 때문에, 즐겨찾기를 하시면 손쉽게 사용이 가능하십니다. https://stickode.com/detail.html?no=2615 스틱코드 stickode.com 1. index.html html 파일입니다. 여기서 CSS파일과 JS파일을 연결하고 임의로 자식요소를 추가하는 버튼 한개와 모든 자식을 삭제하는 버튼을 body에 추가하고 추가한 자식이 들어갈 부모 요소도 선언해줍니다. 추가 모두삭제 2.Page.css 추가된 자식요소를 눈으로 확인하기 위해서 높이와 너비값을 주고 배경을 빨간색으로 선언합니다. html, body { hei.. 2021. 11. 26.
[JavaScript] 탭 메뉴 만들기 https://stickode.com/detail.html?no=2586 스틱코드 stickode.com 이번에는 탭 메뉴 만들기를 해보려 합니다. 탭메뉴는 위와 같습니다. 메뉴 버튼 클릭시에 해당 안에 있는 내용이 표출되게 됩니다. tab_menu 에 관한 스틱코드를 포스트를 즐겨찾기 하시게 되면 tab 만쳤을뿐인데 tab_menu.js 가 나오게되고 tab_menu.js를 선택할경우 아래의 js 코드가 자동완성됩니다. html, css 도 마찬가지 입니다. JavaScript 코드 HTML CSS 주의 : 해당 포스트는 js에 관한코드는 파일의 확장자가 js 일때만 가능 html 은 html 에서, css 는 css 에서만 가능합니다. html 에서는 css, js, jquery 세개다 불러와주시면 .. 2021. 11. 20.
[JavaScript]마우스 오버시 이미지 확대하기 이번 시간에는 마우스 오버시 이미지를 확대를 진행해보겠습니다. https://stickode.com/detail.html?no=2583 스틱코드 stickode.com 스틱코드에서 하단 소스를 즐겨찾기 해주세요. html안에 script를 작성을 해보았습니다. script부분만 떼서 따로 적용을 하셔도 되고, 그대로 사용하셔도 됩니다. 고양이 이미지박스 두개를 만들어 줍니다. header안에 기본적인 html,body style을 만들어줍니다. 이미지1 onmouseenter, onmouseleave 핸들러에 달아줍니다. onmouseenter는 마우스가 올라갔을때 실행되고, onmouseleave는 마우스를 내렸을시 실행 됩니다. 마우스올라가면 확대, 마우스 내려가면 다시 원래 상태로 돌아갑니다. tr.. 2021. 11. 19.
[JavaScript] GET/POST 전송 javscript를 통해 GET 과 POST 전송을 해보겠습니다. https://stickode.com/detail.html?no=2567 스틱코드 stickode.com 위의 스틱코드 게시물을 즐겨찾기하면 굉장히 편하게 진행이됩니다. 자세한 사항은 스틱코트 홈페이지에 사용방법을 보시면 됩니다. sendGET 을 선택하게 될경우에 위와 같이 스틱코드가 해당 코드들을 불러와 작업속도가 향상이됩니다. sendGET 과 sendPOST를 스틱코드로 불러온 후 원하는 부분에서 주석처리한 sendGET("url", "json 형태 파라미터") 부분에 맞게 파라미터를 입력해주시면 완료됩니다. 이렇게 되면 javascript로 GET, POST 보내기 완료!! ※ 주의 확장자 js 파일만 가능한 상태입니다 html .. 2021. 11. 11.
[JAVA][Android] Dagger2 익혀보기 Dagger2 자바와 Android를 위해 완전히 정적으로 컴파일 타임 의존성 주입 프레임 워크입니다. 그렇다면 의존성 주입은 뭘까요? 의존성 주입 (Dependency-injection) 의존성 주입은 프로그래밍에서 구성요소간의 의존 관계가 내부가 아닌 외부를 통해 정의되게 하는 디자인 패턴 중의 하나. 의존성 주입의 목적은 객체를 생성하고 사용하는 관심사를 분리하는 것. A내에서 B를 생성하지만, 두번째 그림은 외부에서 B객체가 생성되어 A로 주입된느 모습입니다. 이때 외부에서 객체를 관리하게 되는데 이를 IOC(inversion of Control, 제어의 역전)라 합니다. 그렇다면 의존성 주입은 왜 필요한 걸까요? 코드가 유연해짐, 클래스간의 결합도를 줄임. 리팩토링이 수월함 유닛테스트를 더 쉽게.. 2021. 10. 25.
[javascript] 그림판 만들기 안녕하세요! 오늘은 스틱코드로 웹에서 사용할 수 있는, 간단한 그림판을 만들어 그림을 그리고, 지우고, 다운받을수 있는 기능을 만들어 보겠습니다. 소스는 하단 포스팅을 참조 해주세요. https://stickode.com/detail.html?no=2467 스틱코드 stickode.com 그림판은 상단에 그림을 그릴수 있는 canvas 영역, 컬러 펜두께를 선택하는 부분 되돌리기, 지우기, 다운로드 하는 버튼으로 구성이 되어 있습니다. 먼저 board.php에 그림을 그릴수 있는 스케치북인 canvas를 구성하고, 도구부분을 만들어 보겠습니다. - 화면 구성하기 상단에 CSS를 연결해주는 코드를 작성하고 그림판영역, 컬러칩, 컬러피커, 펜굵기조절, 버튼(되돌리기, 지우기, 다운로.. 2021. 9. 25.

티스토리툴바