/*자동차 옵션 체크 박스를 클릭할 때 마다 함수
정의문 내에 일련의 실행문을 실행합니다.*/
function car(){
//[1]초기의 차량 기본 가격(id=total)을 알아내 변수에 할당한다.
var basic=document.getElementById('total').defaultValue; // 초기값(13450000)만 가져온다, 변경 안됨
var basicPrice=parseInt(basic);
//[2] opt1 ~ opt3 까지 체크박스에 체크가 되어 있으면
//옵션 가격을 기본 가격에 누적 시킨다.
for(var i=1;i<=3;i++){
//체크박스 참조를 얻어온다.
var obj=document.getElementById('opt'+i);
if(obj.checked){
basicPrice+=parseInt(obj.value);
}
}
//[3] 총 가격(id가 total) 요소에 총누적가를 출력한다.
document.getElementById('total').value=basicPrice;
}
var objAll=document.getElementById('allChk');
var ch1=document.getElementById('opt1');
var ch2=document.getElementById('opt2');
var ch3=document.getElementById('opt3');
objAll.onclick=function(){
//전체 선택에 체크했다면 모든 체크박스를 체크
if(this.checked){ // this란 체크박스(objAll)
ch1.checked=true;
ch2.checked=true;
ch3.checked=true;
}else{
//아니면 모두 해제
ch1.checked=false;
ch2.checked=false;
ch3.checked=false;
}
}
var cars=[
{type:"BMW", year:"2016"},
{type:"Sonata",year:"2013"},
{type:"Volvo",year:"2014"},
{type:"Saab",year:"2011"}];
var str="";
str+="";
str+="";
str+="";
for(var i=0;i<4 i="" str="" tr="">| 유형 | 년도 |
";
str+=""+cars[i].type+""; str+=" | ";
str+=""+cars[i].year+""; str+=" |
| 유형 | 연도 |
|---|---|
| "+cars[i].type+" | "+cars[i].year+" |
var fruits = ["Banana", "Orange", "Apple", "Mango"];
var obj=document.getElementById('demo');
var x=fruits.pop();;
var y=fruits.push("Kiwi"); // 배열 마지막에 추가
fruits.shift(); //배열 맨 앞의 요소를 제거
fruits.unshift("Lemon"); // 배열 맨 앞의 요소를 추가
var z=fruits.slice(0,3);
//splice()이용해서 "Apple"을 삭제해보세요.
fruits.splice(2,1);
var greenLine=["당산","합정","홍대입구","신촌"];
var goldLine=["여의도","노량진","동작","고속터미널"];
var line=greenLine.concat(goldLine);
line.sort();//오름차순으로 정렬
line.reverse(); //내림차순으로 정렬
var kor=[95,20,55,45,88,77,100];
kor.sort(); // sort()는 문자열을 기준으로 정렬함 "95" "20" "100".. 식으로
//오름차순으로 정렬
kor.sort(function(a,b){
return a-b;
});
kor.sort(function(a,b){
return b-a;
});
// 아이디 체크
// RegExp객체를 사용하여 패턴 생성
var isUserid=function(){
var pattern=new RegExp(/^[a-zA-Z0-9!@/]+$);
var bool=pattern.test(obj.value);
//val이 정규식 패턴에 맞으면 true를 반환하고 틀리면 false를 반환한다.
return bool;
}
// 전화번호 체크
var isTel=function(obj){
//0-9 뒤에 있는 -,+는 각각의 기호를 의미
var pattern=new RegExp(/^[0-9-+]+$/);
var val=obj.value;
var bool=pattern.test(val);
return bool;
}
// 이메일 체크
var isEmail=function(obj){
var pattern=new RegExp(/^[\w-]+(\.[\w-]+)*@([\w-]+\.[a-zA-Z]+$/);
/*^[\w-] : 알파벳문자, 숫자, 하이픈(-)이 처음에 올 수 있단 의미
(\.[\w-]+)* : 마침표(.)와 그 다음에 하나 이상의 알파벳 문자,숫자,- 이 0번 이상 나올 수 있단 의미(*)
@ : 해당 위치에 @가 와야한단 의미
([\w-]+\.)+ : 알파벳, 숫자, -이 한번 이상 나오고 그 다음 마침표(.)가 나온다는 의미
그리고 이 조합이 한번 이상 나올 수 있단 의미
[a-zA-Z]+$ : 알파벳 대문자, 소문자 상관없이 문자로 끝나야 함을 의미
*/
var bool=pattern.test(obj.value);
return bool;
}
// 날짜체크
var isDate=function(obj){
/*생년월일 날짜 유형 체크
[2016-02-15] [2016/02/15]
\b : 단어의 경계를 나타내며, 해당 패턴이 정확히 일치해야 함을 의미한다.
\d{4}: 숫자 4개가 와야 한단 의미
\d{1,2}: 숫자가 1개 또는 2개 올 수 있단 의미
[-\/]: -이 오거나 /가 올 수 있단 의미
*/
var pattern=new RegExp(/\b\d{4}[-\/]d{1,2}[-\/]\d{1,2}\b/);
var bool=pattern.test(obj.value);
return bool;
}
var check=function(){
if(!isUserid(frm.uid)){
alert("아이디는 영문자,숫자,!,_,@여야 해요");
frm.uid.select();
return;
}
if(!isTel(frm.tel)){
alert("연락처가 숫자가 아니에요");
frm.tel.focus();
return;
}
if(!isEmail(frm.email)){
alert("이메일 형식이 맞지 않아요");
frm.email.select();
return;
}
if(!isDate(frm.birth)){
alert("날짜형식이 맞지 않아요");
frm.birth.select();
return;
}
frm.submit();
}
function check()
{
if(!frm.uid.value){
alert("아이디를 입력하세요");
frm.uid.focus(); // 입력 포커스 주기
return;
}
if(!frm.upwd.value){
alert("비밀번호를 입력하세요");
frm.upwd.focus();
return;
}
if(!frm.tel.value){
alert("전화번호를 입력하세요");
frm.tel.focus();
return;
}
if(!frm.email.value){
alert("이메일을 입력하세요");
frm.email.focus();
return;
}
// 아이디 4자~8자 길이 체크
var objId=frm.ui.value;
if(objId.length<4 objid.length="">8){
alert("ID 길이는 4자이상 8자이내여야 합니다.");
frm.uid.select(); // 마킹 포커스 주기
return;
}
if(!isUserid(frm.uid)){
alert("아이디는 영문자, 숫자, !, @, _여야 해요");
frm.uid.select();
return;
}
// 아이디가 알파벳, 숫자, !, @, _인지 체크
if(!isUserid(frm.uid)){
alert("아이디는 영문자, 숫자, !, @, _여야 해요");
frm.uid.select();
return;
}
function isUserid(obj){
var str="ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789_!@";
return containChars(obj,str); // obj는 사용자가 입력한 값, str은 id를 체크하는 유효성 값
}
function containChars(obj, chars){
var val=obj.value.toUpperCase(); // 소문자를 대문자로 변환
for(var i=0;i
//1번 방식
var arr1 = [1,2,3,4];
var arr2 = [1,'ABC',true,12.3];
for(var i=0;i<<4;i++){
document.write(arr1[i]+", ");
}
for(var i=0;i<4;i++){
document.write(arr2[i]+", ");
}
//2번 방식
var arr3= new Array(90,80,70);
for(var i=0;i<3;i++){
document.write(arr3[i]+", ");
}
var arr4= new Array(5);
arr4[0]='Hello';
arr4[1]=10;
arr4[2]=[100,200];
for(int i=0;i<3;i++){
document.write(arr4[i]+", ");
}
var arr5=new Array(true, false, ['A', 'b', 1]);
var goBack=function(){
// 하나 이전 페이지로 이동한다/
window.history.back();
}
var goForward=function(){
window.history.forward();
}
var goNaver=function(){
location.href="http://www.naver.com";
}
var btn=document.getElementById('btn1');
btn1.onclick=function(){
var year=2016;
var month=9;
show(year,month);
}
var btn2=document.getElementById('btn2');
btn2.onclick=function(){
var year=2017;
var month=2;
show(year,month);
}
function show(year,month){
var total_days; // 각 달의 총 일수
switch(month)
{
case 1: case 3: case 5: case 7:
case 8: case 10: case 12:
total_days=31; break;
case 4 : case 6: case 9:
case 11:
total_days=30; break;
/*윤년(29일)
1)기원 연수가 4로 나누어 떨어지는 해를 우선 윤년(29일)
2)그 중에서 100으로 나누어 떨어지는 해는 평년(28일)
3)다만 400으로 나누어 떨어지는 윤년(29일)
*/
case 2 :{
if(year%4==0 && year%100!=0 || year%400==0){
total_days=20;
}
else
total_days=28;
}break;
// 작년 날짜를 보여주는 함수
function showLast(lastYear){
var str="";
var lastYear = new Date(2015, (9-1), 20);
var obj=document.getElementById('msg');
show(lastYear);
}
// 오늘 날짜를 보여주는 함수
function show(lastYear){
if(!lastYear){
var today=new Date();
}else{
today=lastYear;
}
//년도 월 일 요일
var str="";
str+=today.getFullYear()+"년 "; // 4자리수 년도 정보
str+=today.getMonth()+1+"월 ";
//Jan:0, Feb:1 ... Dec:11 따라서 +1을 해야함
str+=today.getDate()+"일 ";
str+=myDay(today.getDay())+"요일 "; // 사용자 정의 함수 myDay 만들기
//Sun:0, Mon:1 ...
}
function myDay(day){
var str="";
switch(day){
case 0: str="일"; break;
case 1: str="월"; break;
case 2: str="화"; break;
case 3: str="수"; break;
case 4: str="목"; break;
case 5: str="금"; break;
case 6: str="토"; break;
}
return str;
}
function go(){
//[1]href 속성
window.location.href="이동할 경로.html";
}
function refresh(){
location.reload(); // 새로고침
}
function goUrl(url){
window.setTimeout('location.href="'+url+'"',3000);
}
//doucment 속성:[1]title 속성
window.document.title="현재 문서 제목입니다";
//[2] write()함수:문서영역에 문자열/데이터 출력
document.write(""+document.title+"
");
//[3] lastModified속성 : 현재 html 문서가 마지막에 저장된 시간
document.write(""+document.lastModified+"
");
function change(){
//[4] bgColor속성: 배경색
//[5] fgColor속성: 글자색
document.bgColor="#ff0066";
document.fgColor="#009966";
}
<script type="text/javascript">var go=function(){window.alert("꽝!");}function showTime(){//현재 시간 구하기=>Date 객체 활용var today = new Date();var str="";str+=today.getHours()+"시 ";str+=today.getMinutes()+"분 ";str+=today.getSeconds()+"초 ";//아이디가 msg인 곳에 현재 시간정보를 출력var obj=document.getElementById('msg');obj.innerHTML="<h2 style='color:blue'>"+str+"</h2>";}</script><body><button onclick="obj1=window.setTimeout(go,3000)">3초 뒤(setTimeout)</button><!--변수1=window.setTimeout(함수명,숫자); // 특정 시간 경과 뒤 한번 함수를 호출함window.clearTimeout(변수1)변수2=window.setInterval(함수명,숫자); // 주기적으로 함수를 호출함window.clearInterval(변수2);--><button onclick="obj2=window.setInterval(go,3000)">3초 마다(setInterval)</button><button onclick="window.clearInterval(obj2)">중지(clearInterval)</button><button onclick="showTime()">현재 시간</button><button onclick="timer=setInterval(showTime, 1000)">시계 동작</button><button onclick="clearInterval(timer)">시계 멈춤</button><hr color="red"><p></p><div id="msg"></div>
<script type="text/javascript">var win=null; // 전역변수var openWin=function(){var url="가야할 주소.html";//변수선언=window.open(url, '창이름', '속성들');win=window.open(url, "팝업창", "width=400, height=400, left=100, top=100,resizable=yes, scrollbars=no, menubar=yes, toolbar=yes, location=yes");}var closeWin=function(){//window 객체의 close() 함수if(win!=null){win.close();win=null;}}</script><button onclick="openWin()"> 팝업창 열기 </button><button onclick="openWin()"> 팝업창 열기 </button><button onclick="win.moveTo(300,300)">팝업창 위치 변경</button><button onclick="win.resizeTo(700,700);win.focus()">팝업창 크기 변경 </button>
<script type="text/javascript">var myArea=prompt("지역을 입력하세요", "서울");switch(myArea){case "서울":areaNum="02";break;case "경기":areaNum="031";break;case "부산":areaNum="051";break;default:alert("등록되지 않은 지역입니다.");}document.write(myArea+"지역번호는 "+areaNum);</script>
<body><div id="here"></div><script type="text/javascirpt">var sum=0;for(var i=0;i<11;i++){sum+=i; // sum 변수에 i의 값을 누적}var obj=document.getElementById("here");obj.innerHTML = "<h1>"+sum+"</h1>";// [문제1] 구구단 3단을 출력하되 table 태그를 사용해서 테이블 형태로 출력하세요var str="<table border='1'>";for(var i=1;i<10;i++){str+="<tr>";str+="<td>";str+=("3x"+i+"="+(3*i)+"<br>");str+="</td>":str+="</tr>";}str+="</table>";document.write(str);
<button onclick="show();"> 생성된 객체를 보여주세요 </button> // 버튼을 눌렀을 때 show 함수 실행<div id="msg"></div> // div 태그에 msg 아이디 부여<script type="text/javascript">function show(){var cr=prompt("자동차 색상을 입력하세요", "red");var km=prompt("자동차 시속을 입력하세요", "100");//car 객체 구현var car={type:"스포츠카";color:cr,cc:'3000cc',run:function(){return "시속 "+km+" km로 달립니다~"; // 함수를 실행했을 때 반환되는 문장}}var obj=document.getElementById("msg"); // 아이디가 msg라는 곳에 위치 파악var str=car.type+","+car.color+","+car.cc+" 자동차>>";str+=car.run(); // 시속 문자열을 기존 str 변수에 저장(아직 출력은 안한 상태)// 출력문obj.innerHTML = "<h1 style='color:'+car.color+"'>") + str + "</h1>"; // 아이디가 msg인 곳에 문자 출력// car.color 대신 cr 넣어도 됨(색깔 변환)}</script>