JS 관련

[JavaScript] select(리스트 선택)

음식 선택하기 스테이크 물냉면 스시 샌드위치 육회 스테이크 물냉면 스시 샌드위치 육회 ​ ​ ​ function show01(){ var food = document.getElementsByName("food")[0]; // selectedIndex : 선택한 option의 index 반환 var idx = food.selectedIndex; // options : select 태그가 가진 option 태그들 var foodName = food.options[idx].value; alert(foodName + " 먹어야지!"); } 목록에서 선택한 내용이 출력됩니다! ​ ​ ​ function show02(){ var res = ""; // 1. select (name = food) 가져오자. var f..

[JavaScript] checkbox로 개별선택, 전체선택 함수 만들기

red green blue purple 전체선택 빨강 초록 파랑 보라 ​ ​ ​ function sel(){ // 1. chk라는 이름을 가진 모든 checkbox 가져온다. var chks = document.getElementsByName("chk"); for(var i = 0; i < chks.length; i++){ // 2. 만일 chk들 중에 체크되어있는 element가 있다면, if( chks[i].checked ){ // 3. 체크되어있는 chk.value값을 Id로 가지는 요소의 배경색을 chk.value값으로 바꾸자. // document.getElementById(???).stlye.backgroundColor=??? document.getElementById(chks[i].value..

[JavaScript] location(reload / href / assign / replace)

이동0 이동1 이동2 이동3 이동4 HTML에서는 페이지 이동을 위해 태그를 사용하였습니다. 이동0은 태그로 감싸져 있으며 누르게 되면 설정한 경로로 이동합니다. ​ function locationTest01(){ location.reload(); } 이동1 버튼을 클릭하면 해당 함수가 실행됩니다. 해당 함수는 새로고침과 같은 기능을 합니다. 현재 페이지 내에서는 아무런 변화가 없습니다. ​ function locationTest02(){ location.href="http://www.naver.com"; } 이동2 버튼을 클릭하면 location.href 명령이 수행됩니다. 태그와 비슷한 역할이며 해당 경로로 이동합니다. ​ function locationTest03(){ location.assign(..

[JavaScript] Window객체, 간단한 회원가입 페이지 만들기

display : none; visibility : hidden; css의 속성중 display : none; 의속성은 가상으로 구현이 되어있고 실제로는 만들어지지 않은 상태라고 할수 있습니다. 형태도 없고 자리도 차지하지 않는 모습입니다. visibility : hidden;의 경우 모습이 보이지는 않지만 자리는차지하는 만들어져 있는 상태입니다! ​ ​ window객체 프로퍼티 -document -history -location -navigator -screen -frames -parent -top -self 메서드 -alert() -confirm() -prompt() -back() -forward() -setInterval() -clearInterval() -setTimeout() -open() -c..

[JavaScript] 팝업창!(pop up)

팝업창! 강씨네집 씨네! open메소드를 이용하여 팝업창을 띄울수 있습니다!

[JavaScript] 배열(Array)

배열 객체 다중 배열 join 함수 배열 정렬 문자 정렬 숫자 정렬 역순 정렬 배열 저장방식 push() shift() pop() slice() 기본 출력내용입니다! ​ ​ ​ ​ 선언방법 onload=function(){ // 배열 선언방법 var arrObj01 = new Array(); var arrObj02 = ["one", "two", 3, 4]; //alert(typeof(arrObj01) + " : " + arrObj01); //alert(typeof(arrObj02) + " : " + arrObj02); // 길이 정의 선언 var arrObj03 = new Array(5); // 초기값 X (undefined) //alert(arrObj03[2]); // 초기값 정의되먼서 선언 var a..

[JavaScript] String(문자 index찾기, 문자열추출, 분리하기)

문자열 검색하기 클릭 문자열 추출하기 클릭 키워드 나누기 클릭 ​ ​ ​ function strTest04(){ var str = "홍길동 이순신 유재석 강호동 홍길동 김선달"; // indexOf : 왼쪽 -> 오른쪽 검색 // lastIndexOf : 오른쪽 -> 왼쪽 검색 // 만일, 검색하는 단어가 없으면 -1 반환 var prop = prompt("검색할 이름을 작성해 주세요"); alert("indexOf : " + str.indexOf(prop)); alert("lastIndexOf : " + str.lastIndexOf(prop)); } "홍길동 이순신 유재석 강호동 홍길동 김선달"이 저장 되어있는 변수에 indexOf 를 사용했을때는 왼쪽에서부터 문자를 찾습니다. 따라서 0이 출력이 됩니..

[JavaScript] String(문자열 합치기, 동등연산자(==), === 연산자 등)

문자열 합치기 클릭 다른 자료형 합치기 클릭 문자열 비교하기 클릭 기본 실행 결과입니다. 버튼 별로 다른 함수의 이벤트가 실행됩니다. ​ ​ ​ function strTest01(){ var str01 = "강씨네집"; var str02 = "씨네"; // +연산자 var str03 = str01 + str02; alert("str01 + str02 = " + str03); // concat() var newString = str01.concat(str02, "대박", "짱이야"); alert(newString); // join() var joinTest = ["5", "10", "15", "20"].join("+"); alert(joinTest); alert(eval(joinTest)); } 버튼을 누..

[JavaScript] math

랜덤 숫자 생성하기 숫자 : 랜덤으로 배경색 설정하기 원 만들기 원의 넓이, 둘레 구하기 원의 넓이 : 원의 둘레 : ​ ​ ​ function randomNum(){ var rnum = Math.floor(Math.random()*10 + 1); document.getElementById("rnum").value = rnum; } 이 함수는 1부터 10까지 랜덤으로 숫자를 태그이름이 rnum인 곳에 출력해줍니다! ​ ​ ​ function randomBg(){ // style 색상 표현 : rgb(0~255,0~255,0~255) var rnum = function(){ return Math.floor(Math.random()*256); } document.body.style.backgroundColo..

[JavaScript] date(날짜)

오늘 날짜 출력하기 오늘날짜 오늘날짜표현 특정 날짜 출력하기 특정날짜 경과 날짜 출력하기 지정날짜 경과일 경과 후 날짜 경과날짜 D-Day 시작 날짜 종료 날짜 남은 일수 남은 일수 구하기 해당 코드의 기본 실행 결과입니다. ​ ​ function testDate01(){ var date = new Date(); var inputDate = document.getElementById("today"); inputDate.innerHTML = date.toDateString() + " "; inputDate.innerHTML += date.toLocaleDateString() + " "; inputDate.innerHTML += date.toLocaleString() + " "; inputDate.inner..