JS 관련/JavaScript

[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..

[JavaScript] TransObject(형변환)

1.숫자형 형변환 number() 문자형(정수형, 실수형)을 숫자형으로 반환 클릭! 2.정수형 형변환 parseInt() 문자형을 정수형으로 반환 클릭! 3.실수형 형변환 parseFloat() 문자형을 실수형으로 반환 클릭! 4.검증함수 eval() 문자열로 된 코드를 자바스크립트로 가져와서 실행 계산! = 해당 코드를 실행하면 기본적으로 이와 같은 결과가 나옵니다. 하나하나 천천히 보기 위해 하나의 함수씩 보겠습니다! 해당 코드에서도 JS를 이와 같은 형식으로 쓸수 있다고 보여드리기 위해 HTML 영역중에서 내용의 바로 아래에 Script부분을 넣었습니다! ​ 1.숫자형 형변환 number() 문자형(정수형, 실수형)을 숫자형으로 반환 클릭! 이 코드를 보면 버튼을 클릭하면 input태그 안에 들어간..

[JavaScript] NumberObject

이번에는 Script영역이 body영역 아래쪽에 있어도 작동이 된다는 것을 보여드리기 위해 일부로 body안에 script를 작성하였습니다. 자바스크립트에서 기본적으로 제공하는 객체 중 하나 1. Number 객체 - 정수와 실수를 다루는 객체 클릭! - 속성 : NaN (숫자가 아닌 값), Infinity (범위를 벗어난 숫자) - 그 밖의 속성 undefined(정의되지 않은 값) null(비어있는 값) 클릭! 기본 실행 결과입니다. ​ ​ 위에 버튼을 누르면 해당 텍스트가 나옵니다. 첫번째 버튼은 function numberObj(){ var out = document.getElementById("txt"); // 1. 작성방법 var num01 = new Number(7);// 객체 var num..