_slr2

Checkbox, Radio 체크된 값 Javascript를 통하여 가져오기

하고시푼거다해 — Sun, 21 May 2017 11:42:52 +0900

Checkbox, Radio 체크된 값 Javascript를 통하여 가져오기

1. Checkbox

<Script>
  function Chk_Checked() {
     var setChk = "";

    if(document.myform.a1.checked) {
     setChk += "1번,";
    }
    if(document.myform.a2.checked) {
     setChk += "2번,";
    }
    if(document.myform.a3.checked) {
     setChk += "3번,";
    }

    if (setChk.length == "0") {
     alert ("그림을 선택해주세요");

    }	else {
     setChk = setChk.substr(0, setChk.length-1);
     alert (setChk+"그림을 선택해주셨군요");
    }
  }
</script>

<body>
  <form name="myform">
  <!--Checkbox는 다중선택이므로 이름을 다르게 지정-->
   <input type="checkbox" name="a1" >1번<img src="a1.jpg"><br>
   <input type="checkbox" name="a2">2번<img src="a2.jpg"><br>
   <input type="checkbox" name="a3">3번<img src="a3.jpg"><br>
   <input type="button" value="버튼" onclick="Chk_Checked()">
  </form>
</body>

2. Radio

<script>
  function Radio_Checked() {
    var setChk = "";

    if(document.myform.a[0].checked) {
      setChk = "1번";
    }
    if(document.myform.a[1].checked) {
      setChk = "2번";
    }
    if(document.myform.a[2].checked) {
      setChk = "3번";
    }

    if (setChk.length == "0") {
      alert ("그림을 선택해주세요");
    }	else {
      alert (setChk+"그림을 선택해주셨군요");
    }
  }
</script>

<body>
<form name="myform">
  <!--Radio는 단일선택(배열)이므로 이름을 같게 지정-->
    <input type="radio" name="a" >1번<img src="a1.jpg"><br>
    <input type="radio" name="a">2번<img src="a2.jpg"><br>
    <input type="radio" name="a">3번<img src="a3.jpg"><br>
    <input type="button" value="버튼" onclick="Radio_Checked()">
</form>
</body>

자바스크립트 배열 선언 및 배열 함수 length() 길이, concat() 합치기, sort() 정렬, reverse () 반대로 정렬

하고시푼거다해 — Sun, 21 May 2017 11:28:11 +0900

c자바스크립트 배열

1. 배열이란? (같은 자료형의 변수들의 집합체)

1-1 배열 선언

형식) var 배열명 = new Arrary();

1-2. 배열 값 배정

형식) 배열명[인덱스명] = “배열 값1”;

<script>
    a = new Array();
    a[0] = "A";
    a[1] = "B";
    a[2] = "C";		</script>

1-3. 배열명과 배열 값 동시에 선언

<script>
    a = new Array("A","B","C","D");
</script>

2. 배열 함수(length() 길이, concat() 합치기, sort() 정렬, reverse () 반대로 정렬)

<script>
  a = new Array("A","B","C");
  b = new Array("D","E","F");
  //배열 합치기 concat
  //형식) 배열명1.concat(배열명2);
  document.write(a.concat(b));
	   
  //배열의 길이 length
  //형식)배열명.length
  //배열명.length는 배열안에 들어 갈 수 있는 원소의 갯수를 의미 
  document.write(a.length);// 3출력
		
  //배열의 정렬 함수 sort 
  //형식)배열명.sort() 
		
  var number = new Array("40","10", "20","30");
  document.write(a.sort()+"<br>"); // 10,20,30,40
		
  //배열 원소를 역순으로 정렬하는 함수 reverse()
  //형식)배열명.reverse()
  document.write(a.reverse()+"<br>"); //30, 20, 10, 40
</script>

div 정렬

하고시푼거다해 — Sun, 21 May 2017 11:12:08 +0900

Div 정렬

<style>
	div {border:1px solid black; width:50px; height:50px}
	.d1 {float:left} /*왼쪽정렬*/
	.d2 {margin:auto;} /*가운데정렬*/
	.d3 {float:right} /*오른쪽 정렬*/
</style>

<body>
	<div id="d1">LEFT</div>
	<div id="d2">CENTER</div>
	<div id="d3">RIGHT</div>
</body>

video, audio 태그 및 속성

하고시푼거다해 — Sat, 20 May 2017 16:08:05 +0900

video, audio 태그 및 속성

1. 예제

<body>
  <!--
    src=>동영상 파일의 경로를 지정
	autoplay=>동영상을 자동으로 재생->모바일에서 잘 적용X
	loop=n =>반복 재생 횟수 지정
	controls=>동영상 화면에 컨트롤 막대를 추가할 수있다.
    width->동영상의 넓이
	height->동영상의 높이 지정
    poster->동영상이 화면에 나오지 않을때 대신 표시할 그림을 지정하고 싶을때
  -->
	<!--비디오파일(video)-->
   <video src="../screen/birthday.mp4" width="480" height="320" 
               autoplay controls loop='10' poster="../images/poster.jpg">
   </video><br>
   
   <!-- 음악파일(audio) -->
   <audio controls autoplay src="../screen/old_melody.mp3">
   </audio>
</body>

div태그와 span태그 차이점

하고시푼거다해 — Sat, 20 May 2017 16:04:24 +0900

div태그와 span태그 차이점

1.div태그

①. 자동으로 줄바꿈이 일어나는 Block요소 태그
②. 레이아웃을 설정->width,height 이용->영역설정가능
③. 하나의 빈행을 만들어주는 태그

2. span태그

①. 자동으로 줄바꿈이 일어나지 않는 inline요소 태그
②. width,height를 설정X
③. 하나의 행의 뒤에 계속해서 추가되는 모습

3. 예제

<style>
  div{
    background:green; /* 배경색 */
    width:200px;
    height:50px;
    }
    
  span{
    background:yellow; /* 배경색 */
    width:200px;
    height:50px;
    display:block; /* inline->block요소형태로 화면 
                      display->화면에 보여주는 특성(block,inline~)*/
    }
</style>

<body>
<!--  
  div태그 ->1.자동으로 줄바꿈이 일어나는 Block요소 태그
    2.레이아웃을 설정->width,height 이용->영역설정가능
    3.하나의 빈행을 만들어주는 태그

  span태그->1.자동으로 줄바꿈이 일어나지 않는 inline요소 태그
    2.width,height를 설정X
    3.하나의 행의 뒤에 계속해서 추가되는 모습
-->
  <h1>Div태그와 SPAN태그의 차이점</h1>
  <div>Div태그 연습입니다.</div>
  <div>Div태그 연습2입니다.</div>
  <div>Div태그 연습3입니다.</div>

  <span>Span태그 연습입니다.</span>
  <span>Span태그 연습2입니다.</span>
  <span>Span태그 연습3입니다.</span>
</body>

id. class style적용방법 형식

하고시푼거다해 — Sat, 20 May 2017 15:59:03 +0900

CSS의 ID,CLASS명 style에 적용방법

1. ID

1-1. 형식

(태그명)#ID명

1-2. 사용 시 주의사항

html문서 내부에서 유일한 값이므로 중복된 이름을 가질 수 없다.

2. CLASS

2-1 형식

(태그명).class명

3. 예시

<style>
   div.a {color:brown;font-family:impact;font-weight:bold}
   div.b {font-style:italic;font-family:돋움체}
   #c {text-align:center;text-decoration:overline}
</style>

자주 사용하는 input type 정리

하고시푼거다해 — Sat, 20 May 2017 15:43:05 +0900

자주 사용하는 input type 정리

예제

  <form name="frm">
     사용자 id:<input type="text" name="id" size="10"><br>
	 비밀 번호:<input type="password" name="pw" size="10"><br>
	 이메일:<input type="email" placeholder="123@abc.com" required><br>
	 웹주소:<input type="url" placeholder="http://www.abc.com" required><br>

	 원하는 날짜와 시간을 설정해 주세요<br>
	 <input type="date"><br><!-- FireX -->
	 <input type="time"><br><!-- FireX -->
	 <input type="datetime"><br><!-- FireX ,Chrome X-->
	 <br>
	<input type="checkbox" name="chk_box" value="c1">c_one  <!--Checkbox는 다중선택이므로 이름 다르게 정의-->
	<input type="checkbox" name="chk_box" value="c2">c_two
	<br>
	<input type="radio" name="rd" value="r1">r_one<!--radio는 단일선택이므로 이름 같게 정의-->
	<input type="radio" name="rd" value="r2">r_two
	<input type="hidden" name="h1"><br>
	<input type="submit" onclick="submit_function();">
  </form>

글자(letter-spacing), 단어(word-spacing), 라인(line-height) 간격 조정

하고시푼거다해 — Sat, 20 May 2017 15:34:48 +0900

글자(letter-spacing), 단어(word-spacing), 라인(line-height)간격조정

예제

<style>
    .t1{letter-spacing:30px} /* 글자간격*/
    .t2{word-spacing:50px} /*단어간격*/
    .t3{line-height:50px} /* 라인간격*/
 </style>
<body>
   <h3 class="t1">글자와 글자 사이 간격 조정</h3>
   <h3 class="t2">단어와 단어 사이 간격 조정</h3>
   <h3 class="t3">라인 간격 조정<br>라인간격조정<br>라인간격조정</h3>
</body>

이벤트 핸들러 정리

하고시푼거다해 — Sat, 20 May 2017 15:24:39 +0900

이벤트 핸들러 정리

이벤트핸들러란?
웹사이트를 방문한 사용자가에게 특정 동작을 했을 경우 처리할 실제 처리되는 객체
형식
on+이벤트 종류명
이벤트종류
- click(버튼 클릭 시 발생)
- load 제일 먼저 문서 읽어들일 때 발생
- unload 현재 사이트에서 다른사이트 이동시 발생
- mouseover 마우스 커서를 올렸을 때 발생
- mouseout 마우스 커서를 특정위치에 놓을 때 발생
- blur 입력시 커서가 이동시킬 때 발생

4. 예제

<script>
	function onMouserover_event() {
		alert ("마우스를 올리셨군요?");
	}
</script>

<body onload="alert('환영합니다')">
<a href="http:www.daum.net" onmouseover="onMouserover_event();">마우스를 올려보세요</a>
</body>

웹 사이트 접속 시 onloade 이벤트 핸들러로 인하여 “환영합니다”라는 경고창이 나온다
‘마우스를 올려보세요’라는 문자열에 마우스를 올릴 경우 “마우스를 올리셨군요?” 라는 경고창이 나온다.

switch case 문, 버튼 클릭 시 배경색상 변경

하고시푼거다해 — Sat, 20 May 2017 15:16:09 +0900

switch case 문, 배경색상 변경

형식
switch(문자열 또는 숫자){
case 값(1):처리할 구문
break; //원하는 구문 실행하고 종료할 수 있도록
case 값(2):처리할 구문
break;
case 값(3):처리할 구문
break;
}
예제

  <style>
	div#box{
		width:200px;
		height:200px;
		background:#ffffff;
		border:2px solid black
	}
  </style>

	<script>

	  function setColor(n) {

		//n=1 red, n=2 green, n=3 blue
		var box = document.getElementById('box');

		switch(n){
			case 1: 
			box.style.background= "red";
			break;

			case 2:
			box.style.background = "green";
			break;

			case 3:
			box.style.background = "blue";
			break;
		}

	  }
	</script>

<body>
	<input type="button" value="Red" onclick="setColor(1);">
	<input type="button" value="Green" onclick="setColor(2);">
	<input type="button" value="Blue" onclick="setColor(3);">
  <p>
</body>