본문 바로가기
Study/JavaScript

[javaScript] 기초 실습

힝쏘 2019. 5. 16. 09:18

함수의 정의 및 호출 - 최대공약수 구하기

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">
<title>Insert title here</title>
 <script type="text/javascript">
  function small(x, y) {
   if (x<y)
    return x;
   else
    return y;
  }
  function common(x, y) {
   var res=1;
   var s = small(x, y);
   for(var i=1; i<=s; i++) {
    if((x%i) == 0 && (y%i) == 0) {
     res = i;
    }
   }
   return res;
  }
 </script>
</head>
<body>
 <script type="text/javascript">
  var x = prompt("양수를 입력하시오", 1); x = parseInt(x);
  var y = prompt("양수를 입력하시오", 1); y = parseInt(y);
  document.write("x=", x, " y=", y, ", 최대공약수는 ",common(x,y))
 </script>
</body>
</html>

배열생성_exam

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">
<title>Insert title here</title>
<script type="text/javascript">
//사용자 정의객체
 function student(name, age, sungJuk) {
  this.name = name;
  this.age = age;
  this.sungJuk = sungJuk;
  this.print = print; //print()메소드는 student것이 되었다.
 }

 function sungJuk(math, english, science) {
  this.math = math;
  this.english = english;
  this.science = science;
 }

 function print() {
  document.write("이름: "+this.name+"//");
  document.write("나이: "+this.age+"//");  
  document.write("수학: "+this.sungJuk.math+"//");  
  document.write("영어: "+this.sungJuk.english+"//");  
  document.write("과학: "+this.sungJuk.science+"<br>");  
 }
</script>
</head>
<body>
<h1>객체 사용</h1>
<script type="text/javascript">
 gJuk1 = new sungJuk(100, 80, 60);
 gJuk2 = new sungJuk(80, 60, 100);
 gJuk3 = new sungJuk(60, 100, 80);

 gang1 = new student("일강이", 20, gJuk1); 
 gang2 = new student("이강이", 25, gJuk2); 
 gang3 = new student("삼강이", 30, gJuk3); 
 
 gang1.print(); 
 gang2.print(); 
 gang3.print(); 
</script>
</body>
</html>

시간

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">
<title>Insert title here</title>
<script type="text/javascript">
 current = new Date();
 //짝수 초 나오게 하기
 if(current.getSeconds()%2 == 0) {
  document.bgColor = "blue";
 } else {
  document.bgColor = "red";
 }
 document.write(current.getHours()+"시간<br>");
 document.write(current.getMinutes()+"분<br>");
 document.write(current.getSeconds()+"초<br>");
</script>
</head>
<body
</body>
</html>

String객체

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">
<title>Insert title here</title>
<script type="text/javascript">
 color = new Array(5);
 color[0] = "yellow";
 color[1] = "blue";
 color[2] = "red";
 color[3] = "black";
 color[4] = "white";

 Array.prototype.comment = null;
 color.comment = "여러 색";
 document.write("comment: "+color.comment+"<br>");

 for(var i=0; i<color.length; i++) {
  document.write("color["+i+"] = "+color[i]+"<br><br>");
 }
 document.write("문자열: "+color.join("*")+"<br>");
 document.write("거꾸로: "+color.reverse().join("@")+"<br>");
 document.write("알파벳순서: "+color.sort().join("$")+"<br>");
 document.write("일부문자 :"+color.slice(0, 2)+"<br>");
 
</script>
</head>
<body>
</body>
</html>

함수 안에서 함수 호출하기 - return값이 있는 함수 

<HTML>
<HEAD>
<TITLE>함수 안에서 함수 호출하기 - return값이 있는 함수 </TITLE>
<script type="text/javascript">
 function cal(num1, num2) {
  var sum = num1 + num2;
  return sum;
 } 
 function run() {
  var n1, n2; 
  
  n1 = eval(document.frm1.input1.value);
  n2 = eval(document.frm1.input2.value);
  result = cal(n1, n2);

  document.frm1.input3.value = result;
 }
</script>
</HEAD>
<BODY>
<table align=center cellpadding=0 cellspacing=0 border=1 bordercolor=white bordercolorlight=cornflowerblue>
<tr>
 <td colspan=2 bgcolor=#33CCFF align=center> 
 <font size="6" color="white" face="comic sans ms">CalCuLaTor</font></td>
</tr>
<tr width="213" height="297">
 <td><img src="cal.jpg"></td>
 <td align=center width="150">
  <form name="frm1">
  <input type="text" size=10 name="input1"><br><br>
  + <br><br>
  <input type="text" size=10 name="input2"><br><br>
  <input type="button" name="btn1" value="=" onclick=run()><br><br>
  <input type="text" size=10 name="input3">
  </form>
 </td>
</tr>
<tr>
 <td colspan=2 bgcolor=#33CCFF height=5>&nbsp;</td>
</tr>
</table>
</BODY>
</HTML>

과제

과제1>오늘 날짜로 표시하기

2001start.htm
0.00MB

과제2>랜덤으로 배너 보여주기

2004start.htm
0.00MB

과제3>해당 사진 마우스 오버하면 크게 보여주기

cat_start.htm
0.00MB
images.zip
0.79MB

 

저작자표시

'Study > JavaScript' 카테고리의 다른 글

[javaScript] Document  (0) 2019.05.16
[javaScript] Form  (0) 2019.05.16
[javaScript] 정규표현식, 이벤트, 이벤트핸들러, 이벤트 버블 실습  (0) 2019.05.16
[javaScript] 정규 표현식, 이벤트, 이벤트 핸들러, 이벤트 버블  (0) 2019.05.16
[javaScript] 기초  (0) 2019.05.16

'Study/JavaScript' Related Articles

티스토리툴바