JavaScript

[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] Object(오브젝트 / 객체)

객체의 구성 - 메서드 : 기능 정의 - 속성 : 객체 내부 데이터 - this : 객체 내부의 메서드나 속성을 정의할 때 사용 - 프로토타입 : 객체의 확장 클릭! 가장먼저 실행되면 위의 결과가 웹에 출력됩니다. ​ ​ 클릭버튼을 눌러오면 objectTest()함수를 호출합니다. function objectTest(){ // 객체 생성 var cls = new KCine(); alert(cls.name); alert(cls.name02); alert(cls.getName02); alert(myCine.name); myCine.print(); cls.printName(); } 이 함수에서 KCine()객체를 만들게 되고 cls라는 변수에 담습니다. 처음 alert명령에서 보면 KCine()함수에 있는 n..

[JavaScript] DOM(돔) 구조

DOM 탐색 메소드 1. 엘리먼트의 id로 탐색 : 엘리먼트 하나를 선택 (중복 불가) -> 반환값 : node 하나 2. 엘리먼트의 name으로 탐색 : 엘리먼트 여러개를 선택 -> 반환값 : nodeList 3. 엘리먼트의 태그이름으로 탐색 : 엘리먼트 여러개를 선택 -> 반환값 : nodeList 제일 먼저 실행시 이런 화면이 나옵니다. ​ ​ function searchId(){ var doc = document.getElementById("test"); //test라는 id를 가진 Node = 객체 doc.innerHTML = "id로 탐색합니다."; doc.style.color = "red"; } 1번을 클릭하면 위의 함수로 인해 텍스트가 바뀝니다! ​ ​ ​ function searchNam..