이번 포스팅에서는 자바스크립트를 활용해 접속할때마다 변하는 이미지를 구현해보겠습니다. 작동원리는 자바스크립트 배열에 각각 이미지를 저장해놓고 랜덤함수를 호출해 랜덤으로 배열에 저장되어있는 이미지를 호출하는 방식입니다. 방문할때마다 변하는 이미지 구현하기 예제 이미지 경로에는 자신의 띄워줄 이미지의 경로를 써주시면 됩니다. [JavaScript] 자바스크립트란 무엇인가? [JavaScript] 자바스크립트 배열 선언 및 사용법 총정리 [JavaScript] 라디오버튼 클릭시 원하는 배경색으로 바꾸기 [JavaScript] 회원가입 폼 유효성검사 (정규식)
내가 입력하고싶은 데이터보다도 테이블의 컬럼이 많다면 남는 칼럼들은 그냥 공간만 차지할 뿐입니다. 하지만 데이터만큼 테이블의 Row가 동적으로 생성된다면?? 이 기능은 자바스크립트의 appendChild함수를 이용해 구현할 수 있습니다. 이번 포스팅에서는 자신이 입력하고있는 데이터만큼의 테이블 Row를 자바스크립트를 사용해 동적으로 생성하는 방법에 대해 알아보도록 하겠습니다. 동적으로 테이블 만들기 예제 내 친구 나열하기 자신이 입력한 친구의 숫자에 따라 테이블이 동적으로 생성됩니다. 예제를 다양하게 응용해서 활용해 보세요. [JavaScript] 자바스크립트란 무엇인가? [JavaScript] 자바스크립트 배열 선언 및 사용법 총정리 [JavaScript] 라디오버튼 클릭시 원하는 배경색으로 바꾸기 [..
이번 포스팅에서는 자바스크립트로 HTML Span태그의 글꼴,색상,크기,스타일을 변경시키는 방법에 대해 알아보도록 하겠습니다. 다양한 위젯의 Id를 활용해 활용해 span태그 안에있는 글자를 바꾸는 예제입니다. 다양하게 응용하셔서 활용해보세요. Span태그의 속성 변경 예제 색상: 파랑 노랑 빨강 크기: 1 2 3 4 5 6 취소선 크게 작게 두껍게 기울임 위첨자 아래첨자 소문자로 대문자로 실행방법은 위의 텍스트박스에 문구를 입력하고 바꿀 글자의 색상, 크기, 속성을 설정한 뒤 미리보기를 누르시면 됩니다. [JavaScript] 주민등록번호 유효성 검사 [JavaScript] 회원가입 폼 유효성검사 (정규식) [JavaScript] 배경색 바꾸기 [JavaScript] Alert(경고창), Prompt(..
자바스크립트 유효성검사가 가장 필요한곳은 바로 어디일까요? 아마 회원가입 페이지 일 것 입니다. 웹사이트에서 회원가입을 하려고하면 계속 양식에 어긋난다고 다시 입력해달라는 팝업창들 많이보셨죠? 짜증났던 경험 다들 한번씩 있으실겁니다. 하지만 이 유효성검사를 통해 사용자가 회원가입시 정보를 잘못 입력하는 경우를 막아줄 수 있답니다. 회원가입 폼 유효성검사 예제 SIGN UP 회원기본정보 아이디: ※4-12자의 영문 대소문자와 숫자로만 입력 비번: ※4-12자의 영문 대소문자와 숫자로만 입력 비번확인: 메일주소: ex)wjdxo513@naver.com 이름: 개인정보 주민등록번호: - 예) 123456-1234567 생일: 년 월 일 관심분야: 컴퓨터 인터넷 여행 영화감상 음악감상 자기소개:
주민등록번호에는 유효성 검사 로직이 있습니다. 그 방법은 다음과 같습니다. 맨 마지막 한 자리를 제외하고 각 자릿수의 숫자들에 각각 지정된 숫자들을 곱해서, 그 값을 모두 더합니다. 1 2 3 4 5 6 - 1 2 3 4 5 6 7 X X X X X X X X X X X X X 2 3 4 5 6 7 8 9 2 3 4 5 n1 +n2 +n3 +n4 +n5 +n6 +n7 +n8 +n9 +n10 +n11+n12 =N 각 자릿수에 지정된 수의 곱을 더한 값을 N이라고 하면, N을 11로 나눈 나머지를 11에서 뺀 수가 주민등록번호 마지막 자릿수와 일치하면 정상적인 주민등록번호입니다. 주민등록번호 유효성 검사 예제 주민등록 유효성검사 주민등록번호: - 예) 123456-1234567 [JavaScript] 회원가..
앞서 포스팅한 자바스크립트로 현재시간 불러오기의 응용 버전입니다. 이번에는 회원이 웹사이트에 접속한 후 몇 초가 지났는지 알려주는 예제입니다. [JavaScript] currentDate를 활용한 현재시간 불러오기 홈페이지 접속한시간 알려주기 Insert title here 위와 같이 사이트에 접속한 후 지난 시간이 뜨게 됩니다.
웹사이트를 만들다 보면 현재시간을 간단하게 사용자들에게 보여주고 싶을 경우가 있는데, 그때 유용하게 쓸 수 있는 함수가 currentDate 함수입니다. currentDate를 활용한 현재시간 불러오기 현재시간 불러오기 위와 같은 텍스트형식으로 현재시간을 간단하게 웹사이트에 표시할 수 있습니다.
웹사이트를 만들다 보면 내가 쓴 글을 다른 사람이 스크랩하지 못하게 만들고 싶을 때 유용하게 사용할 수 있는 방법인 마우스 오른쪽 클릭과 내용 선택(드래그)을 막는 방법을 소개합니다. 마우스 우클릭 막기/ 내용 선택 막기 마우스 오른쪽 버튼과 내용 선택 막기 마우스 오른쪽 버튼과 내용 선택 막기 마우스로 오른쪽 버튼을 클릭하거나 드래그 해서 내용을 선택해 보세요 접속자가 스크랩을 시도할 경우 위와같은 경고창을 띄워줍니다.
이번에는 자바스크립트를 활용해서 배열의 Push Pop Sort Reverse까지 구현해보도록 하겠습니다. 자바스크립트로 배열의 Push, Pop, Sort 구현하기 현재 배열의 값: 실행화면 배열에 값을 추가하고 여러 가지 기능을 사용해보시길 바랍니다.
웹사이트를 만들다 보면 웹사이트 사용자를 팝업창 클릭 시 이전 페이지로 보내야 할 때가 종종 있습니다. 이럴 때 유용하게 사용할 수 있는 예제입니다. 예제는 alert창을 클릭할 시 이전 페이지로 돌아가는데, 다르게 사용할 수도 있습니다. 좀 더 응용하여 이전 페이지가 아니라 href.location을 이용하여 자신이 원하는 곳으로도 보내는 것도 가능합니다. alert창을 누르면 이전화면으로 되돌아가기 //body에 onload해준다.