[35일차]2015.08.26.수, 이벤트, 내장객체

프로그래밍, 통계학/JavaScript 2015. 8. 26. 21:19

button과 submit 차이


submit은 이벤트가 발생한다.(기본적으로 이벤트가 내장되어 있다.)

submit은 <form></form>태그 안의 것들을 실행시킴



<h1>test1</h1>


<a href="test2.html><input type="button"></a>


<form action="test2.html">

<input type="text">

<input type="submit">

</form>


submit 버튼을 누르면 action 표기된 곳으로 가서 실행


***********************************************************************

이벤트란, 특정한 상황이 발생했을 때 특정한 일을 수행하도록 하는 일종의 트리거(방아쇠)다.

타 언어와 마찬가지로, 자바스크립트에서도 이벤트 관련 기능을 지원한다.

이벤트에 대해 파헤지기 전에 먼저, 이벤트의 작동 방식부터 살펴보자.


이벤트의 작동방식

이벤트의 작동 방식은 크게 bubbling과 capturing 으로 나뉜다.

이것은 DOM계층 구조에 따른 이벤츠 추출 방식으로,

bubbling의 경우 가장 하위 구조의 이벤트부터 처리하고

capturing의 경우 가장 상위 구조의 이벤트부터 처리한다.



***********************************************************************

버튼1을 눌렀을 때 상자가 노랑색으로 변하는 프로그램


<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>Insert title here</title>

<script type="text/javascript">

window.onload = function(){

//이벤트를 달 버튼을 가지고 옴

var b1 = document.getElementById("button1");

//마우스를 클릭 했을 때 해야할 일을 만들어 줌

var f = function(){

var d = document.getElementById("d1");

d.style.backgroundColor="yellow";

}

b1.onclick=f;

}


</script>


<style type="text/css">

#d1{

width: 100px;

height: 100px;

background-color: gray;

margin: 0 auto;

}

</style>


</head>

<body>


<div id="d1">

</div>


<input type="button" id="button1" value="버튼1">

<input type="button" id="button2" value="버튼2">



</body>

</html>


***********************************************************************

http://www.w3schools.com/jsref/dom_obj_event.asp


Mouse Events

EventDescriptionDOM
onclickThe event occurs when the user clicks on an element2
oncontextmenuThe event occurs when the user right-clicks on an element to open a context menu3
ondblclickThe event occurs when the user double-clicks on an element2
onmousedownThe event occurs when the user presses a mouse button over an element2
onmouseenterThe event occurs when the pointer is moved onto an element2
onmouseleaveThe event occurs when the pointer is moved out of an element2
onmousemoveThe event occurs when the pointer is moving while it is over an element2
onmouseoverThe event occurs when the pointer is moved onto an element, or onto one of its children2
onmouseoutThe event occurs when a user moves the mouse pointer out of an element, or out of one of its children2
onmouseupThe event occurs when a user releases a mouse button over an element2


***********************************************************************

글씨입력하면 인풋 텍스트 상자색 바꾸기


<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>Insert title here</title>

<script type="text/javascript">

window.onload=function(){

var i = document.getElementById("in1");

var t = function () {

var i1 = document.getElementById("in1");

i1.style.backgroundColor="orange";

}

i.onkeydown=t;

}

</script>


</head>

<body>

<input type="text" id="in1"> 


</body>

</html>



***********************************************************************

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>Insert title here</title>

<script type="text/javascript">

function info() {

var t = document.getElementById("d1");

alert(t.innerHTML);

}


</script>

</head>

<body>


<div id="d1">suji</div>






</body>

</html>



***********************************************************************

누르는 번호에 따라 이름바꾸기


<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>Insert title here</title>

<script type="text/javascript">

function info(num) {

var t = document.getElementById("d1");

//alert(t.innerHTML);

//1번 t.innerHTML="choa";

//2번,iu

//3번,suji

if(num==1){

t.innerHTML="choa";

}else if(num==2){

t.innerHTML="hwasa";

}else{

t.innerHTML="IU";

}

}


</script>

</head>

<body>


<div id="d1">suji</div>

<input type="button" value="1" onclick="info(1)">

<input type="button" value="2" onclick="info(2)">

<input type="button" value="3" onclick="info(3)">





</body>

</html>




***********************************************************************

위와 같은 결과


<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>Insert title here</title>

<script type="text/javascript">

function info(num,name) {

var t = document.getElementById("d1");

//alert(t.innerHTML);

//1번 t.innerHTML="choa";

//2번,iu

//3번,suji

if(num==1){

t.innerHTML=name;

}else if(num==2){

t.innerHTML=name;

}else{

t.innerHTML=name;

}

}


</script>

</head>

<body>


<div id="d1">suji</div>

<input type="button" value="1" onclick="info(1, 'choa')">

<input type="button" value="2" onclick="info(2, 'hwasa')">

<input type="button" value="3" onclick="info(3, 'IU')">





</body>

</html>


***********************************************************************

같은 결과


<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>Insert title here</title>

<script type="text/javascript">

function info(name) {

var t = document.getElementById("d1");

//alert(t.innerHTML);

//1번 t.innerHTML="choa";

//2번,iu

//3번,suji

t.innerHTML=name;

}


</script>

</head>

<body>


<div id="d1">suji</div>

<input type="button" value="1" onclick="info('choa')">

<input type="button" value="2" onclick="info('hwasa')">

<input type="button" value="3" onclick="info('IU')">





</body>

</html>


***********************************************************************

Date Library 활용해서 현재 시간 . 월 . 년도 보이기



<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>Insert title here</title>

<script type="text/javascript">

function info(num) {

var t = document.getElementById("d1");

var d = new Date(); //자바처럼 객체개념

if(num==1){

t.innerHTML=d.getHours()+'시';

}else if(num==2){

t.innerHTML=d.getMonth()+1+'월'; //0부터니까 1씩 더한다

}else{

t.innerHTML=d.getYear()+1900+'년'; // 1900을 더해야 현재년도

}

}


</script>

</head>

<body>


<div id="d1">현재는?</div>

<input type="button" value="1" onclick="info(1)">

<input type="button" value="2" onclick="info(2)">

<input type="button" value="3" onclick="info(3)">





</body>

</html>


***********************************************************************

현재시간 17:40 부터 19시까지 경과한 시간


<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>Insert title here</title>

<script type="text/javascript">

function info(num) {

var t = document.getElementById("d1");

var d = new Date(); //자바처럼 객체개념

var d2 = new Date(2015,7,26,19);

alert("d:"+d.getTime()+"d2:"+d2.getTime());

alert(d2.getTime()-d.getTime());

var now = d.getTime();

var future = d2.getTime();

var flow = future - now;

alert(flow/(1000*60*60))

}


</script>

</head>

<body>


<div id="d1">경과한시간은?</div>

<input type="button" value="1" onclick="info(1)">

<input type="button" value="2" onclick="info(2)">

<input type="button" value="3" onclick="info(3)">





</body>

</html>



***********************************************************************

내장객체


Date


Math




***********************************************************************

0~9까지 난수추출해서 alert로 보여주기



<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>Insert title here</title>

<script type="text/javascript">

function info(num) {

var nansu = Math.random()*10;

var t = parseInt(10, 2);

alert(t);

}


</script>

</head>

<body>


<div id="d1">0~9난수뽑기</div>

<input type="button" value="1" onclick="info(1)">

<input type="button" value="2" onclick="info(2)">

<input type="button" value="3" onclick="info(3)">





</body>

</html>


***********************************************************************

Array 객체


var ar = new Array(5) // 저장 공간이 5칸인 배열 생성

ar[0]=10;

ar[1]="choa"




-저장 공간을 지정하지 않은 배열

var ar = new Array();



Array 객체의 메소드


reverse() : 배열데이터를 역순으로 반환

slice(번호1, 번호2) : 번호1부터 번호2 직전까지 잘라서 저장

sort() : 배열을 오름차순으로 정렬

shift() : 배열에서 인덱스의 0의 데이터를 삭제

pop() : 배열에서 마지막 인덱스의 데이터를 삭제

push(값) : 배열에서 마지막 인덱스에 새데이터를 중첩하여 추가

***********************************************************************

배열원소출력


<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>Insert title here</title>

<script type="text/javascript">

function info(num) {

var ar = [10,20,30];

for(var i=0;i<ar.length;i++){

alert(ar[i]);

}

}


</script>

</head>

<body>


<div id="d1">배열출력</div>

<input type="button" value="1" onclick="info(1)">

<input type="button" value="2" onclick="info(2)">

<input type="button" value="3" onclick="info(3)">





</body>

</html>





***********************************************************************

shift, pop 메소드 사용


<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>Insert title here</title>

<script type="text/javascript">

function info(num) {

var ar = [10,20,30];

ar.shift();

alert(ar.length);

ar.pop();

alert(ar.length);

}


</script>

</head>

<body>


<div id="d1">배열출력</div>

<input type="button" value="1" onclick="info(1)">

<input type="button" value="2" onclick="info(2)">

<input type="button" value="3" onclick="info(3)">





</body>

</html>


***********************************************************************

어레이 객체의 메소드 기능 확인



<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>Insert title here</title>

<script type="text/javascript">

function info(num) {

var ar = [10,20,30];

ar.shift();

alert(ar);

ar.pop();

alert(ar);

ar.push(100);

alert(ar);

ar.unshift("first");

alert(ar);

}


</script>

</head>

<body>


<div id="d1">배열출력</div>

<input type="button" value="1" onclick="info(1)">

<input type="button" value="2" onclick="info(2)">

<input type="button" value="3" onclick="info(3)">





</body>

</html>

***********************************************************************

문자열의 글자수를 보여주는 프로그램

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
function info(num) {
//"suji"의 글자수를 보여줌
var s = "suji";
alert(s.length);
}

</script>
</head>
<body>

<div id="d1">배열출력</div>
<input type="button" value="1" onclick="info(1)">
<input type="button" value="2" onclick="info(2)">
<input type="button" value="3" onclick="info(3)">




</body>
</html>


***********************************************************************

ID는 6자이상, PW는 8자이상 입력받아야 회원가입시키기


<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
function idpwcheck() {
var id = document.getElementById("idcheck");
var pw = document.getElementById("pwcheck");
if((id.value.length<6)||(pw.value.length<8)){
alert("id는 6자 이상, pw는 8자이상 입력하세요.")
return false;
}
}

</script>
</head>
<body>
<form action="#">

id<input type="text" id="idcheck"><br><!-- id는 최소 6글자 이상 -->
pw<input type="password" id="pwcheck"><br><!-- pw는 최소한 8글자 이상 -->
<input type="submit" value="회원가입" onclick="return idpwcheck()">
<input type="reset" value="취소">
</form>

</body>
</html>



여기서 form action의 #은 현재위치를 나타낸다.

***********************************************************************

위에거 온클릭 변경 onclick이 아니라 onsubmit을 form에 걸기
onsubmit


<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
function idpwcheck() {
var id = document.getElementById("idcheck");
var pw = document.getElementById("pwcheck");
if((id.value.length<6)||(pw.value.length<8)){
alert("id는 6자 이상, pw는 8자이상 입력하세요.")
return false;
}
}

</script>
</head>
<body>
<form action="test1.html" onsubmit="return idpwcheck()">

id<input type="text" id="idcheck"><br><!-- id는 최소 6글자 이상 -->
pw<input type="password" id="pwcheck"><br><!-- pw는 최소한 8글자 이상 -->
<input type="submit" value="회원가입">
<input type="reset" value="취소">
</form>

</body>
</html>


***********************************************************************

ID와 PW 글자수가 모자르면 텍스트로 보여주고 글자수가 충분하면 다시 바뀌는 프로그램
+ 인풋텍스트박스 색깔 바꾸기


<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
function idpwcheck() {
var id = document.getElementById("idcheck");
var pw = document.getElementById("pwcheck");
if((id.value.length<6)||(pw.value.length<8)){
alert("id는 6자 이상, pw는 8자이상 입력하세요.")
return false;
}
}
//id->글자를 입력할 때마다 확인 : 6자 이상 만족
//pw->글자를 입력할 때마다 확인 : 8자 이상 만족
//팝업창이 아니라 html로 
function id_check() {
var id = document.getElementById("idcheck"); //input
var result = document.getElementById("id_result"); //span
if(id.value.length<6){
result.innerHTML="ID는 최소6자 이상입력하세요."
id.style.backgroundColor="pink";
}else{
result.innerHTML="사용가능한 ID입니다."
id.style.backgroundColor="white";
}
}
function pw_check() {
var pw = document.getElementById("pwcheck"); //input
var result = document.getElementById("pw_result"); //span
if(pw.value.length<6){
result.innerHTML="PW는 최소8자 이상입력하세요."
pw.style.backgroundColor="pink";
}else{
result.innerHTML="사용가능한 PW입니다."
pw.style.backgroundColor="white";
}
}
</script>
</head>
<body>
<form action="test1.html" onsubmit="return idpwcheck()">
id<input type="text" id="idcheck" onkeyup="id_check()"><span id="id_result">id글자수</span><br><!-- id는 최소 6글자 이상 -->
pw<input type="password" id="pwcheck" onkeyup="pw_check()"><span id="pw_result">pw글자수</span><br><!-- pw는 최소한 8글자 이상 -->
<input type="submit" value="회원가입">
<input type="reset" value="취소">
</form>

</body>
</html>

***********************************************************************

글자수가 부족하면 id,pw 옆에 이미지파일 모양바꾸기


<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
function idpwcheck() {
var id = document.getElementById("idcheck");
var pw = document.getElementById("pwcheck");
if((id.value.length<6)||(pw.value.length<8)){
alert("id는 6자 이상, pw는 8자이상 입력하세요.")
return false;
}
}
//id->글자를 입력할 때마다 확인 : 6자 이상 만족
//pw->글자를 입력할 때마다 확인 : 8자 이상 만족
//팝업창이 아니라 html로 
function id_check() {
var id = document.getElementById("idcheck"); //input
var result = document.getElementById("id_result"); //span
var checkimg1 = document.getElementById("idcheck_img");
if(id.value.length<6){
result.innerHTML="ID는 최소6자 이상입력하세요."
id.style.backgroundColor="pink";
checkimg1.src="./png/pyre.png";
}else{
result.innerHTML="사용가능한 ID입니다."
id.style.backgroundColor="white";
checkimg1.src="./png/checkbox6.png";
}
}
function pw_check() {
var pw = document.getElementById("pwcheck"); //input
var result = document.getElementById("pw_result"); //span
var checkimg2 = document.getElementById("pwcheck_img");
if(pw.value.length<6){
result.innerHTML="PW는 최소8자 이상입력하세요."
pw.style.backgroundColor="pink";
checkimg2.src="./png/pyre.png";
}else{
result.innerHTML="사용가능한 PW입니다."
pw.style.backgroundColor="white";
checkimg2.src="./png/checkbox6.png";
}
}
</script>
</head>
<body>
<form action="test1.html" onsubmit="return idpwcheck()">
id<input type="text" id="idcheck" onkeyup="id_check()"><span id="id_result">id글자수</span><img id="idcheck_img" src="./png/checkbox6.png" width=50px><br><!-- id는 최소 6글자 이상 -->
pw<input type="password" id="pwcheck" onkeyup="pw_check()"><span id="pw_result">pw글자수</span><img id="pwcheck_img" src="./png/checkbox6.png" width=50px><br><!-- pw는 최소한 8글자 이상 -->
<input type="submit" value="회원가입">
<input type="reset" value="취소">
</form>

</body>
</html>


***********************************************************************

window.onload=function(){} 사용 [쌤코드], window.onload=function(){} 용법공부


<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
window.onload=function(){
var f = document.getElementById("f1");
var ch = function () {
var yid = document.getElementById("yid");
var ypw = document.getElementById("ypw");
if(yid.value.length <6 || ypw.value.length<8){
alert("아이디나 비번을 확인 해주세요");
return false;
}
}
f.onsubmit = ch;
//id => 글자를 입력할 때 마다 확인 6자 이상 만족
//pw => 글자를 입력할 때 마다 확인 8자 이상 만족

var yid = document.getElementById("yid");//iput
yid.onkeyup=id_check;
}
var id_check = function () {
var result = document.getElementById("id_result");//span
if(yid.value.length<6){
result.innerHTML ="아이디는 최소 6자 이상 지정";
}else {
result.innerHTML ="사용 가능합니다.";
}
}
</script>
</head>
<body>

<form action="test1.html" id="f1">
id <input type="text" id="yid" ><span id="id_result"></span><br><!-- id는 최소한 6글자이상 -->
pw <input type="password" id="ypw" onkeyup="pw_check()"><br><!-- 비번 최소한 8글자 이상 -->
<input type="submit" value="회원가입">
<input type="reset" value="취소">
</form>


</body>
</html>

***********************************************************************

문자, 숫자 포함해서 입력해야하는 프로그램, 정규표현식용법 공부

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
function check() {
var d = document.getElementById("d1");
var idReg = /[^A-Z]+[^a-z]+[^0-9]/;
if(!idReg.test(d.value)){
alert("영어소문대문자 써야대");
}else {
alert("회원 가입 진행");
}
}

</script>
</head>
<body>
<input type="text" id="d1">
<input type="button" onclick="check()">
</body>
</html>


***********************************************************************




***********************************************************************





***********************************************************************




저작자표시 (새창열림)

'프로그래밍, 통계학 > JavaScript' 카테고리의 다른 글

[34일차]2015.08.25.화, 자바스크립트 연습  (0) 2015.08.25
[33일차]2015.08.24.월,자바 스크립트 document  (0) 2015.08.24
[32일차]2015.08.21.금,자바스크립트  (0) 2015.08.21
블로그 이미지

테시리

,

[34일차]2015.08.25.화, 자바스크립트 연습

프로그래밍, 통계학/JavaScript 2015. 8. 25. 21:18
object 객체

변수(attribute)


메서드(function)



public class Test{

int a;


public void info(){


}



}



*******************************************************************

누르면 색깔 바꾸기 , css에 id를 선언해두고 id를 컨트롤하기


<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>Insert title here</title>

<script type="text/javascript">


function change() {

var a = document.getElementById("d2");

a.id = "d1";

}


</script>


<style type="text/css">

div{

width: 200px;

height: 200px;

background-color: gray;

margin: 0 auto;

}

#d1{

background-color: yellow;

}


</style>


</head>

<body>


<div id="d2"></div>


<button onclick="change()">change</button>


</body>

</html>




*******************************************************************

누르면 노랑파랑 자리바꾸기,  css에 id를 선언해두고 id 컨트롤하기

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">

function change() {
var a = document.getElementById("d2");
var b = document.getElementById("d1");
b.id= "d2";
a.id= "d1";
}
</script>

<style type="text/css">
div{
width: 200px;
height: 200px;
background-color: gray;
margin: 0 auto;
}
#d1{
background-color: yellow;
}
#d2{
background-color: blue;
}

</style>

</head>
<body>

<div id="d1"></div>
<div id="d2"></div>

<!-- d1->d2  d2->d1 -->
<button onclick="change()">change</button>

</body>
</html>

*******************************************************************

노랑파랑 자리바꾸기 위에거 선생님 코드

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">

function change() {
var a = document.getElementById("d2");
var b = document.getElementById("d1");
var temp = b.id; //바뀌는걸 방지하기위해 임시로 변수생성해서 b.id를 담는다.
b.id= a.id;
a.id= temp;
}
</script>

<style type="text/css">
div{
width: 200px;
height: 200px;
background-color: gray;
margin: 0 auto;
}
#d1{
background-color: yellow;
}
#d2{
background-color: blue;
}

</style>

</head>
<body>

<div id="d1"></div>
<div id="d2"></div>

<!-- d1->d2  d2->d1 -->
<button onclick="change()">change</button>

</body>
</html>


*******************************************************************


위에서

a.setAttribute( ); 함수도 사용가능

a.setAttribute("id", b.getAttribute("id") )

*******************************************************************

누른 버튼을 alert로 띄우기


<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
function info() {
var gen = document.getElementsByName("gender");
 
if(gen[0].checked==true){
alert(gen[0].value);
}else if(gen[1].checked==true){
alert(gen[1].value);
}
}
</script>

</head>
<body>

<form>
man<input type="radio" value="man" name="gender">
woman<input type="radio" value="woman" name="gender" checked="checked">
<input type="button" onclick="info()" value="info">
</form>

</body>
</html>

*******************************************************************

위에거 선생님 코드, 반복문 쓰기

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
function info() {
var gen = document.getElementsByName("gender");
//Elements 이니까 gen이라는 배열이 되는 것.
for(var i=0;i<gen.length;i++){
if(gen[i].checked){
alert(gen[i].value);
}
}
}
</script>

</head>
<body>

<form>
man<input type="radio" value="man" name="gender">
woman<input type="radio" value="woman" name="gender" checked="checked">
bi<input type="radio" value="bi" name="gender" >
<input type="button" onclick="info()" value="info">
</form>

</body>
</html>





*******************************************************************

선택한 게임 alert 창에 띄우기
내코드 (태그로 잡음) 실행이 안됨 ㅜㅜ

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
function select() {
var game=document.getElementsByTagName("input");
for(var i=0;i<game.length-1;i++){
if(game[i].checked){
alert(game[i].value);
}
}
}

</script>

</head>
<body>

<form>
ff14<input type="checkbox" value="ff14">
fifa3<input type="checkbox" value="fifa3">
suddenAttack<input type="checkbox" value="suddenAttack">
lol<input type="checkbox" value="LOL">
wow<input type="checkbox" value="WoW">
linage<input type="checkbox" value="linage">
<input type="button" onclick="select()" value="선택">
</form>

</body>
</html>


***
아마 함수명을 select() 로 사용해서 그런 것 같다?

select()가 예약어


*******************************************************************

위에거 선생님 코드

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
function sel() {
var game = document.getElementsByTagName("input");
for(var i=0; i< game.length-1;i++){
if(game[i].checked){
alert(game[i].value);
}
}
}
</script>
</head>
<body>
<form>
ff14 <input type="checkbox" value="ff14">
fifa3 <input type="checkbox" value="fifa3">
SuddenAttack <input type="checkbox" value="Sundden">
LoL <input type="checkbox" value="LOL">
Wow <input type="checkbox" value="WoW">
Lineage <input type="checkbox" value="Lineage">
<input type="button" onclick="sel()" value="선택">
</form>
</body>
</html>

*******************************************************************

ok누르면 페이지 넘어가기 no누르면 그대로 있기


<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
function check() {
var b = document.getElementsByTagName("input");
if(b[0].checked){
return true;
}else if(b[1].checked){
return false;
}
}

</script>
</head>
<body>

OK<input type="radio" name="select">
NO<input type="radio" name="select">
<a href="test1.html"><button onclick="return check()">test</button></a>
</body>
</html>

*******************************************************************

위에것 선생님 코드



<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
function check() {
var ch = document.getElementsByName("select");
if(ch[1].checked){
alert("false");
return false;
}else if(ch[0].checked){
alert("ok");
}else{
alert("ok");
return false;
}
}

</script>
</head>
<body>

OK<input type="radio" name="select">
NO<input type="radio" name="select">
<a href="test1.html"><button onclick="return check()">test</button></a>
</body>
</html>


*******************************************************************

회원가입 창에서 자바스크립트 이용해서 빈칸 입력하도록 창띄우기. 개인프로젝트 회원가입창

*******************************************************************

빈칸을 입력하도록 하는 것  required ,  HTML5 에서 새로 생김
required를 사용하면 편리하다.


<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<form action="test1.html">
id<input type="text" required="required">
pw<input type="password" required="required">
pw확인<input type="password" required="required">
name<input type="text" required="required">
<input type="submit" value="회원가입">
</form>
</body>
</html>


*******************************************************************



저작자표시 (새창열림)

'프로그래밍, 통계학 > JavaScript' 카테고리의 다른 글

[35일차]2015.08.26.수, 이벤트, 내장객체  (0) 2015.08.26
[33일차]2015.08.24.월,자바 스크립트 document  (0) 2015.08.24
[32일차]2015.08.21.금,자바스크립트  (0) 2015.08.21
블로그 이미지

테시리

,

[33일차]2015.08.24.월,자바 스크립트 document

프로그래밍, 통계학/JavaScript 2015. 8. 24. 18:47


selector_1.txt



1.HTML은 태그와, 텍스트, 2개로 구성되어있다.



2.CSS는 이것들을 예쁘게 변형시키는 역할. 태그를 변경시켜준다.



*************************************************************************

자바 스크립트에서는 웹브라우저와 HTML 문서를 객체로 처리


웹브라우저를 객체로 표현한 것이 BOM (브라우저 오브젝트 모델)

HTML을 객체로 표현 한 것이 DOM(다큐먼트 오브젝트 모델)


*************************************************************************

연습  버튼눌러서 박스 색 바꾸기, 버튼 누르면 박스 이동

select_1_id


<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">

//<![CDATA[
function changeColor() {
var box = document.getElementById("d1");
box.style.backgroundColor="red";
}
function move() {
var box2 = document.getElementById("d2");
box2.style.left="500px";
}
//]]>

</script>
<style type="text/css">
#d1 {
width: 100px;
height: 100px;
background-color: gray;
color: blue;
}
#d2 {
width: 20px;
height: 20px;
background-color: green;
position: absolute;
top: 300px;
left: 0px;
}
</style>

</head>
<body>
<div id="d1"> suji </div>
<div id="d2"></div>

<input type="button" value="change" onclick="changeColor()">
<button id="b1" onclick="move()">move</button>

</body>
</html>


*************************************************************************

연습 버튼 눌러서 색깔 바꾸기


select_2_tag


<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>Insert title here</title>


<script type="text/javascript">

//<![CDATA[

       function change(){

var f = document.getElementsByTagName("li");

f[0].style.color="orange";

f[1].style.color="green";

}    

//]]>  

</script>


<style type="text/css">

li{

font-size: 20px;

color: fuchsia;

}


</style>


</head>

<body>


<ul>

<li>suji</li>

<li>iu</li>

</ul>


<input type="button" value="c" onclick="change()">



</body>

</html>


*************************************************************************

<script type="text/javascript">

//<![CDATA[


함수선언



//]]>  

</script>




*************************************************************************

리스트에 클래스를 주고 클래스값을 가져와서 색바꾸기


select_3_class


<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>Insert title here</title>


<script type="text/javascript">

//<![CDATA[

       function change(){

var f = document.getElementsByClassName("list");

f[0].style.color="orange";

f[1].style.color="orange";

}    

//]]>  

</script>


<style type="text/css">

li{

font-size: 20px;

color: fuchsia;

}


</style>


</head>

<body>



<ul>

<li class="list">suji</li>

<li class="list">iu</li>

</ul>

<input type="button" value="c" onclick="change()">



</body>

</html>





*************************************************************************

Elements

S가 들어간다 > 복수형이다 > 배열이다 > 인덱스 번호 넣어야함


*************************************************************************

버튼 눌러서 텍스트 바꾸기

select_4_name

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
function change(){
var n = document.getElementsByName("name");
n[0].value="iu";
}
</script>


</head>
<body>

<input type="text" name="name" value="suji">
<input type="button" value="change" onclick="change()">


</body>
</html>










*************************************************************************

연습



<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>

<script type="text/javascript">
function prn(){
var id1 = document.getElementById("d1");
var num1 = document.getElementById("counter").value;
alert(id1.value);
alert(num1);
}
</script>


</head>
<body>

id : <input type="text" id="d1"><br>
num : <input type="number" id="counter">

<input type="button" onclick="prn()" value="confirm">

</body>
</html>


*************************************************************************

견적서 프로그램 만들기

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
//<![CDATA[
function total(){
var p = document.getElementsByClassName("price");
var c = document.getElementsByClassName("counter");
var sum = 0;
sum = sum+ (Number(p[0].value)*Number(c[0].value));
sum = sum+ (Number(p[1].value)*Number(c[1].value));
sum = sum+ (Number(p[2].value)*Number(c[2].value));
sum = sum+ (Number(p[3].value)*Number(c[3].value));
var ta = document.getElementById("totalammount");
ta.value = sum;
}
//]]>  


</script>


<style type="text/css">
#box{
width:900px;
height:900px;
border:1px solid black;
}
table{
width: 700px;
height: 700px;
margin : 100px auto;
}
h3{
text-align: center;
}
h2{
text-align: center;
}
.counter{
width: 100px;
}
.price{
width:100px;
}
#ammountbox{
width : 80px;
height: 10px;
margin : 50px auto;
}
#pricebox{
width: 80px;
height: 10px;
margin : 0 auto;
}
#button{
margin : 0 auto;
width: 100px;
height: 30px;
}
</style>


</head>
<body>
<form action="">
<div id="box">
<table border="1">
<tr>
<td colspan="3"><h2>견적서</h2></td>
</tr>
<tr>
<td><h3>품목</h3></td>
<td><h3>수량</h3></td>
<td><h3>단가</h3></td>
</tr>
<tr>
<td><h3>CPU</h3></td>
<td><div id="ammountbox"><input type="number" value="1" step="1" min="0" class="counter"></div></td>
<td><div id="pricebox"><input type="text" class="price"></div></td>
</tr>
<tr>
<td><h3>RAM</h3></td>
<td><div id="ammountbox"><input type="number" value="0" step="2" min="0" class="counter"></div></td>
<td><div id="pricebox"><input type="text" class="price"></div></td>
</tr>
<tr>
<td><h3>VGA</h3></td>
<td><div id="ammountbox"><input type="number" value="1" step="1" min="0" class="counter"></div></td>
<td><div id="pricebox"><input type="text" class="price"></div></td>
</tr>
<tr>
<td><h3>HDD</h3></td>
<td><div id="ammountbox"><input type="number" value="1" step="1" min="0" class="counter"></div></td>
<td><div id="pricebox"><input type="text" class="price"></div></td>
</tr>
<tr>
<td><h3>총합계</h3></td>
<td colspan="2"><input type="text" id="totalammount"></td>
</tr>
</form>
</table>
</div>
<input type="button" onclick="total()" value="견적" id="button">
<input type="reset" value="취소" id="button">
</body>
</html>


*************************************************************************

CSS


태그 선택자  :  태그명{ 속성 : 값; }


아이디 선택자  :  아이디명{ 속성 : 값; }


클래스 선택자  :  클래스명{ 속성 : 값; }


*************************************************************************

JavaScript

태그 선택자 : var t =document.getElementsByTagName("태그명");
단, 가지고 올대는 복수이기 때문에 배열로 저장
복수이므로 배열! , t[인덱스번호].~~


아이디 선택자(1개!!)  :  var t =document.getElementById("아이디명");
단수 이므로, t.~~


클래스 선택자  :  var t =document.getElementsClassName("클래스명);
단, 가지고 올때는 복수이기 때문에 배열로 저장
복수이므로 배열!, t[인덱스번호].~~



+ 네임 선택자는 아직 필요x , 3개로 충분

+
JavaScript 를 이용해서 CSS를 control 할 수 있다.

선택자.style.css속성명="값';


+
input 태그의 value(속성)을 control 할 수 있다.

var t = document.getElementById("아이디명")
t.value = 값; // 해당하는 자리에 값이 프린트된다.

*************************************************************************

태그 선택자, 아이디 선택자 연습, 클래스 선택자 연습


<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
function t1() {
var tagSelector = document.getElementsByTagName("div");
tagSelector[0].style.backgroundColor="black";
tagSelector[1].style.backgroundColor="black";
tagSelector[2].style.backgroundColor="black";
tagSelector[3].style.backgroundColor="black";
tagSelector[4].style.backgroundColor="black";
}
function t2() {
var idSelector = document.getElementById("d1");
idSelector.style.backgroundColor="orange";
}
function t3() {
var classSelector = document.getElementsByClassName("g1");
classSelector[0].style.backgroundColor="navy";
classSelector[1].style.backgroundColor="navy";
}
</script>
<style type="text/css">
div {
width: 100px;
height: 100px;
background-color: gray;
}
.g1 {
background-color: red;
}
#d1 {
background-color: blue
}
#d5 {
background-color: yellow;
}
</style>
</head>
<body>
<div id="d1">d1</div>
<div class="g1">d2</div>
<div>d3</div>
<div class="g1">d4</div>
<div id="d5">d5</div>
<button onclick="t1()">t1호출</button>
<button onclick="t2()">t2호출</button>
<button onclick="t3()">t3호출</button>
</body>
</html>



*************************************************************************

자바스크립트로 CSS 컨트롤 

선택자.style.css속성명="값';



<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
function t1() {
var tagSelector = document.getElementsByTagName("div");
tagSelector[0].style.backgroundColor="black";
tagSelector[1].style.backgroundColor="black";
tagSelector[2].style.backgroundColor="black";
tagSelector[3].style.backgroundColor="black";
tagSelector[4].style.backgroundColor="black";
}
function t2() {
var idSelector = document.getElementById("d1");
idSelector.style.backgroundColor="aqua";
idSelector.style.border="5px solid yellow";
}
function t3() {
var classSelector = document.getElementsByClassName("g1");
classSelector[0].style.backgroundColor="navy";
classSelector[1].style.backgroundColor="navy";
classSelector[0].style.fontSize="30px";
classSelector[1].style.fontSize="30px";
classSelector[0].style.color="white";
classSelector[1].style.color="white";
}
</script>
<style type="text/css">
div {
width: 100px;
height: 100px;
background-color: gray;
}
.g1 {
background-color: red;
}
#d1 {
background-color: blue
}
#d5 {
background-color: yellow;
}
</style>
</head>
<body>
<div id="d1">d1</div>
<div class="g1">d2</div>
<div>d3</div>
<div class="g1">d4</div>
<div id="d5">d5</div>
<button onclick="t1()">t1호출</button>
<button onclick="t2()">t2호출</button>
<button onclick="t3()">t3호출</button>
</body>
</html>




*************************************************************************

input 태그의 value(속성) control  연습

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
function t1() {
var tagSelector = document.getElementsByTagName("div");
tagSelector[0].style.backgroundColor="black";
tagSelector[1].style.backgroundColor="black";
tagSelector[2].style.backgroundColor="black";
tagSelector[3].style.backgroundColor="black";
tagSelector[4].style.backgroundColor="black";
}
function t2() {
var idSelector = document.getElementById("d1");
idSelector.style.backgroundColor="aqua";
idSelector.style.border="5px solid yellow";
}
function t3() {
var classSelector = document.getElementsByClassName("g1");
classSelector[0].style.backgroundColor="navy";
classSelector[1].style.backgroundColor="navy";
classSelector[0].style.fontSize="30px";
classSelector[1].style.fontSize="30px";
classSelector[0].style.color="white";
classSelector[1].style.color="white";
}
function c1() {
var message = document.getElementById("t1");
message.value="suji";
}
</script>
<style type="text/css">
div {
width: 100px;
height: 100px;
background-color: gray;
}
.g1 {
background-color: red;
}
#d1 {
background-color: blue
}
#d5 {
background-color: yellow;
}
</style>
</head>
<body>
<div id="d1">d1</div>
<div class="g1">d2</div>
<div>d3</div>
<div class="g1">d4</div>
<div id="d5" >d5</div>
<input type="text" id ="t1" value="choa">
<button onclick="t1()">t1호출</button>
<button onclick="t2()">t2호출</button>
<button onclick="t3()">t3호출</button>
<button onclick="c1()">c1호출</button>
</body>
</html>


*************************************************************************

JavaScript로 CSS 속성 컨트롤 연습
-버튼 눌러서 잘라진 사진 주변에 테두리, 그리고 잘려진 사진 원본 보기

[ID로 잡음]


<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
function image1() {
var b = document.getElementById("d1");
b.style.border = "3px solid red";
}

function image2() {
var o = document.getElementById("d1");
o.style.overflow = "visible";
}

</script>
<style type="text/css">

div{
width: 600px;
height: 500px;
overflow: hidden;
margin: 0 auto;
}


</style>

</head>
<body>

<div id="d1">
<img src="./aoa.png">
</div>
<div>
<!-- border가 추가 -->
<button onclick="image1()">aoa</button><br>
<!-- overflow가 없어지는것 -->
<button onclick="image2()">test</button>
</div>
</body>
</html>

*************************************************************************

위에거  태그 선택자

[태그로 잡기]


<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
function image1() {
var b = document.getElementsByTagName("div")
b[0].style.border = "3px solid red";
}

function image2() {
var o = document.getElementsByTagName("div");
o[0].style.overflow = "visible";
}

</script>
<style type="text/css">

div{
width: 600px;
height: 500px;
overflow: hidden;
margin: 0 auto;
}


</style>

</head>
<body>

<div id="d1">
<img src="./aoa.png">
</div>
<div>
<!-- border가 추가 -->
<button onclick="image1()">aoa</button><br>
<!-- overflow가 없어지는것 -->
<button onclick="image2()">test</button>
</div>
</body>
</html>


*************************************************************************

연습2

사진 누르면 사진크기 커지고 작아지는 버튼


<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
function image1() {
var b = document.getElementsByTagName("div")
b[0].style.border = "3px solid red";
}

function image2() {
var o = document.getElementsByTagName("div");
o[0].style.overflow = "visible";
}
function image3() {
var l = document.getElementById("d1");
l.style.width = "250%";
}

function image4() {
var s = document.getElementById("d1");
s.style.width = "50%";
}
</script>
<style type="text/css">

div{
width: 600px;
height : 500px;
margin: 0 auto;
}


</style>

</head>
<body>

<div >
<img src="./aoa.png" id="d1">
</div>
<div>
<!-- border가 추가 -->
<button onclick="image1()">aoa</button><br>
<!-- overflow가 없어지는것 -->
<button onclick="image2()">test</button>
<!-- 이미지 사이즈가 커지는 것 -->
<button onclick="image3()">lager</button>
<!-- 이미지 사이즈가 작아지는 것 -->
<button onclick="image4()">smaller</button>
</div>
</body>
</html>

*************************************************************************

버튼 누르는 것에 따라 사진 바뀌기




내가 해본것


<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
function image1() {
var i1 = document.getElementById("test1")
i1.style.width = "0px";
}

function image2() {
var i2 = document.getElementById("test2")
i2.style.width = "0px";
}

</script>
<style type="text/css">

div{
width: 600px;
height : 500px;
margin: 0 auto;
}
#test1{
}
#test2{
}
</style>

</head>
<body>

<div >
<img src="./aoa.png" id="test1">
<img src="./choa.jpg" id="test2">
</div>
<div>
<!--choa.jpg보이고 aoa.png사라지고-->
<button onclick="image1()">초아보기</button><br>
<!-- aoa.png보이고 choa.jpg 사라지고 -->
<button onclick="image2()">aoa단체사진보기</button>

</div>
</body>
</html>


*************************************************************************

사진 바꾸기 선생님 코드



<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
function image1() {
var i = document.getElementsByTagName("img")[0];
i.src="choa.jpg";
}
function image2() {
var i = document.getElementsByTagName("img")[0];
i.src="aoa.png";
}
</script>
</head>
<body>
<div>
<img src="aoa.png">
</div>
<!-- test.jpg 보이고 aoa.png 사라지고 -->
<button onclick="image1()">aoa</button>
<!-- aoa.png가 보이고 test.jpg가 사라짐 -->
<button onclick="image2()">test</button>
</body>
</html>




하나 뿐이더라도 배열로 만들어야함 document.getElementsByTagName("img")[0];


*************************************************************************

입력받은 값을 alert 창으로 띄우기(input 태그의 value(속성) control  연습)




<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>

<script type="text/javascript">

function look() {
var name = document.getElementById("i1");
alert(name.value);
var pw = document.getElementById("i2");
alert(pw.value);
var age = document.getElementById("i3");
alert(age.value);
}

</script>

</head>
<body>

<div>
<table border="1">
<tr>
<td>이름</td>
<td><input type="text" id="i1"></td>
</tr>
<tr>
<td>비번</td>
<td><input type="password" id="i2"></td>
</tr>
<tr>
<td>나이</td>
<td><input type="number" id="i3"></td>
</tr>


</table>

</div>
<!-- alert 창 3번, 이름,패스워드,나이가 차례로 출력 -->
<input type="button" value="확인" onclick="look()">


</body>
</html>


*************************************************************************



*************************************************************************



*************************************************************************



저작자표시 (새창열림)

'프로그래밍, 통계학 > JavaScript' 카테고리의 다른 글

[35일차]2015.08.26.수, 이벤트, 내장객체  (0) 2015.08.26
[34일차]2015.08.25.화, 자바스크립트 연습  (0) 2015.08.25
[32일차]2015.08.21.금,자바스크립트  (0) 2015.08.21
블로그 이미지

테시리

,

[32일차]2015.08.21.금,자바스크립트

프로그래밍, 통계학/JavaScript 2015. 8. 21. 19:27

이번 과정은 : 백엔드 웹개발


*****************************************


자바와 자바스크립트 차이



특징 

자바 

자바스크립트 

언어종류 

소스파일을 컴파일하여 실행하는 컴파일언어 

브라우저가 소스코드를 직접해석하여 실행하는 인터프리터 언어 

실행방식 

자바가상기계JVM 위에서 실행한다 

브라우저 이에서 실행한다 

작성위치  

별도의 소스파일에 작성 

HTML 파일 안에 삽입 가능 

변수선언 

변수의 타입을 반드시 선언ㅂ 

변수의 타입을 선언하지 않아도 됨 


**************************************************


자바스크립트 위치 (상세한건 교안참고)


1. 내부 자바스크립트 : <head> 태그 내에 위치


2. 외부 자바스크립트 : 별도의 파일에 위치


3. 인라인 자바스크립트 : <body>태그 내에 위치



요즘은 1, 2번 방식을 추천한다.



**************************************************


자바스크립트 작동

HTML 페이지의 각 태그는 웹 브라우저에 의해 순차적으로 실행

웹 브라우저는 head 태그를 먼저 읽은 후 body 태그를 읽음

-script 태그를 head 태그에 넣으면 body 태그를 읽기 전 실행

-body 태그에 넣으면 head태그를 실핸한 이후에 실행

script 태그를 head 태그 안에 넣어야 코드를 살펴보기 편리함?



****************************************************

HTML은 전체 구조

CSS는 구조를 꾸며주는것

javascript는 움직임?등 효과


**************************************************

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>Insert title here</title>


<script>

alert("Hello, JavaScript");

//한줄 주석 : java 주석과 동일

/* 

여러줄 주석 : java와 동일하다. 

단, JS의 주석은 소스보기로 보여진다.

그래서, 개발에 관련된 중요한 주석은 주의해야 한다.

(외부에 노출되므로 중요한 주석은 주의!)

java의 System.out.println("Hello,JavaScript")와 비슷한 역할

*/ 

</script>


<style type="text/css">

h1{

color:red;

}


</style>


</head>

<body>

<h1>JavaScript</h1>

</body>

</html>

**************************************************


Java 변수 데이터타입(자료형)


문자    chart


숫자    정수 : int, long, short, byte

    실수 : double, float

논리    boolean





JavaScript의 자료형 (Data Type)


기본 자료형

문자열(String) : 문자의 모임, 텍스트

수치형(number) : 정수나 실수

부울형(boolean) : 논리값, true, false


그외 자료형

객체형(object) : 객체를 나타내는 타입

undefined : 값이 정해지지 않은 상태



****************************************************

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>Insert title here</title>


<script type="text/javascript">


//JS 변수

//문자열, 숫자형, 논리형


//자바의 문자열 -> String name = "suji" ;

//자바스크립트의 문자열

var name = "suji";

alert(name);


//자바의 정수형 -> int a = 10;

//자바스크립트의 정수형

var num = 10; //자바스크립트는 정수나, 실수가 구분이 없다...

alert(num);


//자바의 논리형 -> boolean check = true;

//자바스크립트의 논리형

var check = true;

alert(check);


//자바스크립트의 변수형은 전부 var로 통일



</script>


</head>

<body>


</body>

</html>




****************************************************


식별자

자바스크립트에서 이름을 붙일 때 사용

식별자의 예

변수명과 함수명


..........


교안참고


.........


식별자 생성 규칙

모든 언어가 사용 가능하나 알파벳 사용이 개발자들 사이에서 


****************************************************

\n : 줄바꿈 (엔터키)
\t : 수평탭 들여쓰기

****************************************************
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>

<script type="text/javascript">

//JS 변수
//문자열, 숫자형, 논리형
//자바에서 문자 -> char ch = 'a';
//자바의 문자열 -> String name = "suji" ;
//자바스크립트의 문자열
var name = '"suji"';
alert(name);
var name2 = 'iu';
alert(name+name2);
//쌍따옴표 코따옴표 어떤 것을 써도 상관없다. 섞어 쓰지만 않으면 된다.

//자바의 정수형 -> int a = 10;
//자바스크립트의 정수형
var num = 10; //자바스크립트는 정수나, 실수가 구분이 없다...
alert(num);
alert(name+num);
alert(num+10);

//자바의 논리형 -> boolean check = true;
//자바스크립트의 논리형
var check = true;
alert(check);

name="choa";
alert(name);
//var name 선언하고 밑에서 다시 같은 변수명으로 name 선언 가능

name=num;
alert(name);
//name에 다시 num 을 넣어도 출력된다. 자바스크립트 변수의 데이터 타입이 전부 var이다.
//JS의 변수는 (var)은 모든 형태를 담을 수 있습니다.. 데이터, 객체, 메소드(함수)

//자바스크립트의 변수형은 전부 var로 통일

alert(10>20);
//결과로 false 출력하게됨

</script>

</head>
<body>

</body>
</html>


**********************************************************

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>Insert title here</title>

<script type="text/javascript">

var n1 = "10";

alert(n1+10); //결과 1010

alert(n1==10); //결과 true

// == : 값만 같으면 true

alert(n1===10); //결과 false

// === : 값도 같아야하고, datatype도 같아야 true

// != 같이 같지 않을때 true

// !== 값도 다르고 데이터 타입도 다를때 true

alert("a">"b"); // false 출력됨

alert("a"<"b"); // true 출력됨, 알파벳 순서가 늦을수록 크다...

// !  : ture를 false로, false를 true로

// && : and 연산, 그리고

// || : or 연산, 또는

</script>


</head>

<body>


</body>

</html>



**********************************************************


변수++(후위)

나머지를 먼저 계산하고 ++을 나중에


++변수 (전위)

++을 먼저하고 나머지는 나중에



************************************************************

typeof : 변수의 데이터타입을 알려줌


<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>Insert title here</title>

<script type="text/javascript">

var n1 = "10";

alert(typeof n1);  // string 출력

var n2 = false;

alert(typeof n2); // boolean 출력

//typeof 는 변수의 데이터 타입을 알려준다.

</script>


</head>

<body>


</body>

</html>



***********************************************************

입력받기


prompt() 사용




<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>Insert title here</title>


<script type="text/javascript">


//입력받기

//Java : Scanner sc = new Scanner(System.in);


//JS의 입력

prompt("아무거나 입력하세요.");

//입력받은 숫자에 *2한 값을 alert 출력

var num = prompt("숫자를 입력하세요.");

alert(num*2);


</script>


</head>

<body>


</body>

</html>


***********************************************************

confirm



<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>Insert title here</title>


<script type="text/javascript">


var result = confirm("확인해주세요.");

alert(result);

//확인 누르면 : true , 취소 누르면 : false 출력



</script>


</head>

<body>


</body>

</html>

***********************************************************


Java Resources 우클릭 >뉴> 클래스 > 메인 클래스 만들기



package js_0821;


public class Test {


public static void main(String[] args) {

// TODO Auto-generated method stub

System.out.println("2"*3);

}


}



자바에선 문자열 곱하기 숫자 연산이 불가능 하다.


자바스크립트는?



<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>Insert title here</title>

<script type="text/javascript">


alert("2"*3); // 2*3=6 연산이 된다.

alert('2'*"4"); // 2*4=8 연산이 된다.


</script>


</head>

<body>


</body>

</html>





alert("2"*3); // 2*3연산이 된다.

alert('2'*"4"); // 2*4=8 연산이 된다.


문자형을 숫자로 바꿔서 연산해준다.


***********************************************************

데이터 타입 바꾸기

Number() 함수 : 문자열을 숫자로 바꿔준다.
(자바의 Integer.parseint() 와 유사)



<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">

var n1 = prompt("숫자1");
var n2 = prompt("숫자2");
n1=Number(n1);
n2=Number(n2);
alert(n1+n2);


</script>

</head>
<body>

</body>
</html>




***********************************************************


조건문


IF문


if(조건식){


}else if{


}else{


}


자바와 동일



***********************************************************

국영수 입력 받고

평균 90이상 수, 80이상 우, 나머지 미



<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">

var kor = prompt("국어입력");
var eng = prompt("영어입력");
var math = prompt("수학입력");

kor=Number(kor);
eng=Number(eng);
math=Number(math);

var sum = kor+eng+math ;
var mean = sum/3 ;

if(mean>=90){
alert("수");
}else if(mean>=80){
alert("우");
}else{
alert("미");
}

</script>

</head>
<body>

</body>
</html>



***********************************************************
조건문


변수선언

switch (true){
case1 조건1(예시:변수<숫자..)
연산
break;

case2 조건2
연산
break;

case3 조건3
연산
break;

default :
연산
break;
}

자바에서는 true 부분에 숫자가 온다.
JS에서는 


***********************************************************
for문


<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
for(var i =0 ; i<10 ; i++){
alert(i);
}

</script>
</head>
<body>

</body>
</html>

**************************************************
document.write()



<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
alert("입력");
document.write("<h1>test</h1>");
</script>
</head>
<body>

</body>
</html>


*******************************************
행과 열을 입력받아서 테이블 만들기

직접 짜본 코드

for문을 활용하면 된다.


<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
alert("입력");
document.write("<h1>test</h1>");
//숫자 2개를 입력받아서..
//1번은 2
//2번은 3
//본문에 2행 3열의 표를 만들어 줌...
//for문속 for문 활용
var row = prompt("행을 입력하세요.");
row = Number(row);
var col = prompt("열을 입력하세요.");
col = Number(col);
document.write("<table border=1>");
for(var i=0 ; i<row ; i++){
//행만들기
document.write("<tr>");
for(var j=0 ; j<col ; j++){
//열만들기
document.write("<td>");
document.write((i+1)+'행'+(j+1)+'열');
document.write("</td>");
}
document.write("</tr>");
}
document.write("</table>");
</script>
<style type="text/css">
table{
border-collapse:collapse;
border-spacing : 0px;
color : orange;
width: 100px;
height: 100px;
border: 1px solid black;
text-align: center;
}
</style>
</head>
<body>

</body>
</html>

****************
border-collapse : collapse ;
border-spacing
공부하기

*********************************************************

break 과 continue 

교안참고

*********************************************************

함수

익명함수

교안참고

*********************************************************

함수와 호출

함수를 변수에 넣는 것도 가능


<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>

<script type="text/javascript">

function test(){
alert('test');
}

test();

var f = function test2(){
alert('test2');
}

f();
</script>

</head>
<body>

</body>
</html>


*********************************************************
위에서 만든 테이블 만들기를 함수에 담고

만들지 말지 확인, 취소 구현해서 확인누르면 테이블 만들고 취소 누르면 만들지 않는 프로그램

*********내코드***************


<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
//숫자 2개를 입력받아서..
//1번은 2
//2번은 3
//본문에 2행 3열의 표를 만들어 줌...
//for문속 for문 활용
function makeTable(){
var row = prompt("행을 입력하세요.");
row = Number(row);
var col = prompt("열을 입력하세요.");
col = Number(col);
document.write("<table border=1>");
for(var i=0 ; i<row ; i++){
//행만들기
document.write("<tr>");
for(var j=0 ; j<col ; j++){
//열만들기
document.write("<td>");
document.write((i+1)+'행'+(j+1)+'열');
document.write("</td>");
}
document.write("</tr>");
}
document.write("</table>");
}
var result = confirm("테이블을 만드시겠습니까?");
alert(result);
while(true){
if(result==true){
makeTable();
break;
}else{
break;
}
}
</script>
<style type="text/css">
table{
border-collapse:collapse;
border-spacing : 0px;
color : orange;
width: 100px;
height: 100px;
border: 1px solid black;
text-align: center;
}
</style>
</head>
<body>

</body>
</html>


***********************샘코드 보고 수정****************************

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
//숫자 2개를 입력받아서..
//1번은 2
//2번은 3
//본문에 2행 3열의 표를 만들어 줌...
//for문속 for문 활용
function makeTable(){
var row = prompt("행을 입력하세요.");
row = Number(row);
var col = prompt("열을 입력하세요.");
col = Number(col);
document.write("<table border=1>");
for(var i=0 ; i<row ; i++){
//행만들기
document.write("<tr>");
for(var j=0 ; j<col ; j++){
//열만들기
document.write("<td>");
document.write((i+1)+'행'+(j+1)+'열');
document.write("</td>");
}
document.write("</tr>");
}
document.write("</table>");
}
var check = confirm("테이블을 만드시겠습니까?");
alert(check);
if(check){
makeTable();
}
</script>
<style type="text/css">
table{
border-collapse:collapse;
border-spacing : 0px;
color : orange;
width: 100px;
height: 100px;
border: 1px solid black;
text-align: center;
}
</style>
</head>
<body>

</body>
</html>

**************

조건문 부분이 간결해졌다.



*********************************************************

함수하나 더 만들어서 바꾸기 (매개변수 사용)




<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
//숫자 2개를 입력받아서..
//1번은 2
//2번은 3
//본문에 2행 3열의 표를 만들어 줌...
//for문속 for문 활용
function start(){
var check = confirm("테이블을 만드시겠습니까?");
if(check){
var row = prompt("행을 입력하세요.");
row = Number(row);
var col = prompt("열을 입력하세요.");
col = Number(col);
makeTable(row,col);
}
}
start();
function makeTable(row,col){
document.write("<table border=1>");
for(var i=0 ; i<row ; i++){
//행만들기
document.write("<tr>");
for(var j=0 ; j<col ; j++){
//열만들기
document.write("<td>");
document.write((i+1)+'행'+(j+1)+'열');
document.write("</td>");
}
document.write("</tr>");
}
document.write("</table>");
}
</script>
<style type="text/css">
table{
border-collapse:collapse;
border-spacing : 0px;
color : orange;
width: 100px;
height: 100px;
border: 1px solid black;
text-align: center;
}
</style>
</head>
<body>

</body>
</html>


*********************************************************

메뉴를 몇개 만들겠습니까?

입력

메뉴명을 입력하세요. (입력한 숫자만큼)

HTML메뉴 입력받은 개수만큼 만들기





*********************************************************
반복문으로 메뉴 만들기
<ul>
<li></li>
<li></li>
</ul>


이용


<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>Insert title here</title>


<script type="text/javascript">


var menu = prompt("메뉴의 수를 입력하세요.");

  document.write('<ul>[메뉴목록]');

  for(var i=0 ; i<menu ; i++){

 

  document.write('<li>');

  var a=prompt('메뉴명을 입력하세요.');

 

  if(a=='빨'){

  document.write('<h3 id="m1">'+a+'</h3>');

  }else if(a=='주'){

  document.write('<h3 id="m2">'+a+'</h3>');

  }else if(a=='노'){

  document.write('<h3 id="m3">'+a+'</h3>');

  }

 

  document.write('</li>');

 

 

 

  }

  document.write('</ul>');




</script>

<style type="text/css">

li{

list-style: none;

}

#m1{

color:red;

}

#m2{

color:orange;

}

#m3{

color:yellow;

}

</style>

</head>

<body>


</body>

</html>



*********************************************************


구글에 


css menu 등 검색해보면 menu 소스 공개파일 조회가능

































저작자표시 (새창열림)

'프로그래밍, 통계학 > JavaScript' 카테고리의 다른 글

[35일차]2015.08.26.수, 이벤트, 내장객체  (0) 2015.08.26
[34일차]2015.08.25.화, 자바스크립트 연습  (0) 2015.08.25
[33일차]2015.08.24.월,자바 스크립트 document  (0) 2015.08.24
블로그 이미지

테시리

,

공지사항

태그목록

최근에 받은 트랙백

글 보관함

달력

«   2025/07   »
일 월 화 수 목 금 토
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 31

티스토리툴바