본문 바로가기

프로그램/코딩

(34)
[javascript]배열 나누기 배열의 갯수가 너무 많을 경우 원하는 수만큼 쪼개서 보려고 만든 함수이다 배열 나누기 let p_ex = document.getElementById("p_ex"); //출력할 곳 let ex_ex = ['안녕','하세요','한궈','라오꽁','입니다','배열','쪼개기','합니다']; let ex_ex_arr = ''; let input = ''; function chunk(arr, size) { let i, j, temparray = [], chunk = size; for (i = 0, j = arr.length; i < j; i += chunk) { temparray.push(arr.slice(i, i + chunk)); } return temparray } function f_select(){ //..
[javascript]글자 나누기 한글자씩 글자 나누기(쪼개기) let ex_text = '안녕하세요'; let p_ex = document.querySelector(".p_ex");//출력 될 태그 선택 ex_text.split('').forEach(char => { const charSpan = document.createElement('span') charSpan.innerText = char p_ex.appendChild(charSpan) }) split함수는 글자를 나눠준다 ('')을 이용해 한글자씩 나눠준다 나눈 글자는 배열로 저장된다 forEach 함수로 처음부터 끝까지 반복 해준다 inline 태그인 span 태그를 만들어 준다 span 안에 한글자씩 입력해 준다 appendChild 함수로 한글자씩 출력해 준다 밑의 코드..
[javascript]HTML의 체크박스 이용하기 HTML의 input type은 여러가지가 있다 https://korearaogong.tistory.com/17 [HTML]input 속성 종류 input 태그는 일반적인 태그들과는 달리 무언가를 감싸지 않는다 즉 이 없다 input 태그는 무언가를 입력할때 사용된다 input에는 다양한 종류가 있다 글씨를 입력 숫자를 입력 비밀번호를 입력 라 korearaogong.tistory.com 글씨를 클릭해도 체크박스를 움직이는 방법 체크박스는 채크박스 혼자만을 사용하지 않고 "ㅁ동의 합니까" 이런식으로 옆에 글씨를 같이 쓰게 된다 하지만 글씨를 클릭했을 경우에는 체크박스가 작동하지 않는다 이럴때 라벨태그를 사용해주면 된다 동의 합니까 자바스크립트로 체크박스 제어하기 element.checked input에 ..
[javascript]HTML의 select, option 드롭바 이용하기 html 드롭바 만들기 html의 드롭바를 사용할 경우 css를 만져서 드롭바를 만드는 방법과 html의 드롭바 태그인 select 태그를 이용하는 방법이 있다 https://korearaogong.tistory.com/19 [HTML]select, option, optgroup 드롭바 사용법 드롭바를 만드는 방법은 select, option을 이용한 방법과 ol, ul, li를 이용한 방법이 있다 select, option 태그는 기본적으로 드롭바를 만들어 주는 옵션이라 만들기가 비교적 쉽지만 기본 틀이 짜여져 있 korearaogong.tistory.com html에서 아무리 드롭바를 만져도 javascript로 행동을 만들어주지 않으면 무용지물이다 html의 select 이용하는 방법 예를 들어 무..
[javascript]자동으로 커서/화면 이동 가끔 프로그램을 만들다보면 자동으로 커서가 이동해줬으면 좋겠다는 생각을 할 때가 있다 예를 들면 회원가입이나 로그인을 할때 input창을 클릭해서 마우스 커서를 이동 한다든가 enter를 쳤을 경우 다음으로 이동하고 싶은 등등의 경우가 있다 커서이동 element.focus(); //id로 선택 후 포커스 이동 document.getElementById('IdName').focus(); document.querySelector('#IdName').focus(); //class로 선택 후 포커스 이동 document.getElementsByClassName('ClassName');.focus(); document.querySelector('.ClassName').focus(); 이렇게 해도 가끔씩 커서가 ..
[javascript]자바스크립트로 구글 스프레드시트 이용하기(예제 : 랭킹시스템 만들기) 취미로 개발을 하다 보니 서버도 없고 해서 랭킹같은 순위를 어디에 저장해야 될까 고민 하다가 생각해낸것이 구글 스프레드시트에 저장을 한뒤 스프레드시트의 함수로 랭킹을 구현해 보았습니다 자바스크립트로 구글 스프레드 시트에 자료 입력하는 방법 1. 먼저 스프레드 시트를 만들고 제목이나 메뉴등 기본적으로 준비를 한다 2. 메뉴 - 확장 프로그램 - Apps Script //var SHEET_NAME = "시트1"; var SCRIPT_PROP = PropertiesService.getScriptProperties(); function doGet(e){ return handleResponse(e); } function doPost(e){ return handleResponse(e); } function hand..
[CDN]구글 드라이브로 html, js,css등등의 파일 사용하기 구글 드라이브 구글 드라이브는 무료로 나의 자료등을 올리고 사용할 수 있는 클라우드이다 하지만 구글 드라이브 안에 있는 파일을 사용 하려고 url을 접속하게 되면 해당 파일을 단순하게 볼수 있는 뷰어 프로그램이 연결이 되어 html로 사용할 수는 없다 구글드라이브를 html에서 사용할 수 없는 문제 구글드라이브에 js파일이 들어있는 구글드라이브 주소로 접속하면 뷰어가 열리게 된다 js파일 뿐만아니라 다른 파일들도 파일을 그대로 가져오는것이 아니라 뷰어프로그램으로 보여주게 된다 그렇기 때문에 html에서 바로 사용할 수가 없다 구글 드라이브를 뷰어 프로그램이 아닌 파일 자체로 연결 시켜주는 곳 위와 같은 문제점 때문에 html에서 js파일 css파일 등등을 사용할 수 없는 점을 해결 해 주는 사이트가 있다..
[HTML]목록 만들기 ol, ul, li 목록 만들기 글이 길 경우 각 주제에 맞게 목차를 만들면 보는 입장에서 편하다 그리고 어떠한 동일한 주제를 갖고 있는 글 같은 경우에는 목록을 많이 사용한다 목록을 만들어주는 태그는 li태그이다 목록의 성향에 따라서 순서를 나타낼 필요가 있고, 순서가 필요없는 경우가 있다 예를 들면 목차(ol태그) HTML CSS 메뉴(ul태그) 삼각김밥 도시락 li태극의 어미로 ol/ul태그가 오는냐에 따라 숫자/점이 붙게 된다 홈페이지의 메뉴바 역시 목록과 같은 성질이기 때문에 주로 li태그에 CSS를 주어서 메뉴바를 만든다 See the Pen Untitled by korearaogong (@korearaogong) on CodePen.