마카로닉스

518 No

[동영상강좌] 23강, 24강, 25강 ( 13장 ) - 자바스크립트

2017-09-03 18:46:12 By 머나먼나라 0 1064 댓글수 4 포스트 하기

4월 2024
일	월	화	수	목	금	토
	1	2	3	4	5	6
7	8	9	10	11	12	13
14	15	16	17	18	19	20
21	22	23	24	25	26	27
28	29	30

자바스크립트

basic.html

<!DOCTYPE HTML>
<html>
<head>

<meta charset="utf-8">
<title></title>
<script type="text/javascript">

/* 변수연습 */

 var iNum=3;
 iNum =iNum+5;
 document.write("<p>" + iNum+"</p>");
 
 var strColor="파랑색";
 document.write("<p>"+strColor+"</p>");
 
 //배열연습
 
 var strDrink =new Array();
 strDrink[0]="커피";
 strDrink[1]="홍차";
 strDrink[2]="녹차";
 
 //반복문 연습
 var iCount=0;
 for(iCount=0; iCount <strDrink.length; iCount++){
	 
	 document.write("<p>숫자 : " + iCount+",  음료수 : " + strDrink[iCount] +" </p>");
	 
 }

 
 //판단문 연습
 var dtDate=new Date();
 var dtHour=dtDate.getHours();
 
 if(dtHour >= 6 && dtHour <= 10){
	 
	 document.write("<b>Good morning!</b>");
 }else{
	 document.write("<b>How are you?</b>");
 }
 
 
</script>

</head>


<body>
</body>

</html>

=> 출력

파랑색

숫자 : 0, 음료수 : 커피

숫자 : 1, 음료수 : 홍차

숫자 : 2, 음료수 : 녹차

Good morning!

function.html

<!DOCTYPE HTML>
<html>
<head>

<meta charset="utf-8">
<title></title>
<script type="text/javascript">
	function sayHello(){
		document.getElementById('clickme').innerHTML="안녕하세요!";
	}
</script>

</head>


<body>

<a href="#" onclick="sayHello()" id="clickme">눌러 주세요!</a>

</body>

</html>

출력=>

눌려 주세요!

안녕하세요!

jQuery.html

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title></title>
	<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
	<script>
		 $(document).ready(function() {
		   $("#clickme").click(function() {
			 $("#clickme").html("안녕하세요!(JQuery사용)");
		   });
		 });
	</script>
</head>

<body>
   <a href="#" id="clickme">눌러 주세요!(JQuery 사용)</a>
</body>
</html>

자주 사용될 JQuery 명령어

jQuery 메서드	의미	사용법
$(선택자).html(값)	선택된 엘리먼트의 html 내용을 전달된 갓으로 교체 합니다.	$("#clickme").html("안녕하세요");
반환값 =$(선택자).val()	선택된 엘리먼트의 html 내용을 반환합니다.	var strContent =$("#in").val();
$(선택자).data(키, 값)	선택된 엘리먼트에 키와 값을 함께 넘겨주어 저장합니다.	$("#pic_univ").data("flag", "false");
반환값=$(선택자).data(키)	선택된 엘리먼트에 저장된 값중에서 전달된 키값을 찾아 연결된 값을 반환합니다.	var bflag=$("#pic_univ).data("flag");
$(선택자).addClass(이름)	실행 중에 클래스 선택자를 적용하기 위해 전달된 이름의 클래스 선택자를 해당 엘리먼트에 적용합니다.	$("#pic_univ").addClass("small");
$(선택자).removeClass(이름)	반대로 전달된 이름의 클래스 선택자를 해당 엘리먼트에서 제거합니다.	$("#pic_univ").removeClass("large");
$(선택자).attr(이름).replace(값1, 값2)	선택된 엘리먼트에서 사용되고 있는 특성 중에서 전달된 이름의 것을 찾아 값1 부분을 값2로 교체합니다.	$(this).attr("src").replace("small.jpg","large.jpg");

도전 미션

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<link href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" rel="stylesheet" type="text/css"/>
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
	<script src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js" type="text/javascript"></script>
<script>
		 $(document).ready(function() {
		   $("#clickme").click(function() {
			 $("#output").html($("#in").val());
		   });
		 });
	</script>
</head>

<body>
    <div data-role="page" id="page">
      <div data-role="header">
        <h1>머리글</h1>
      </div>
      <div data-role="content">
            <label >글을 입력하세요:</label>
            <input type="text" id="in" value="" />
            <a href="#" id="clickme" data-role="button">확인</a>
            <label >입력결과:</label>
            <textarea  id="output"></textarea>        
      </div>
      <div data-role="footer">
        <h4>바닥글</h4>
      </div>
    </div>


</body>
</html>

http://braverokmc2.dothome.co.kr/junho/ex13/input.html