728x90
1. html 문서에서 값 가져오기 : document
- html 문서에서 값을 가져오기 위해서는 document 객체의 get 함수를 이용한다.
- 대표적으로 아래 함수들을 사용하는데 특히 html 의 id, class, name 등을 이용해서 해당 태그 내 값을 가져온다.
- document.getElementById();
- document.getElementsByClassName()
- document.getElementsByName()
- document.getElementsByTagName()
- document.getElementsByTagName()
- document get 함수를 통해서 가져오는 값들은 모두 ‘객체’ 이다. 이 때문에 객체의 값을 다시 가져오기 위해서는 value 를 사용해야한다.
- console.dir(객체) 를 사용하면 해당 객체에서 사용 할 수 있는 변수들을 확인 할 수 있다.
<html>
<head>
<script>
function printGuGuDan(){
// document.getElementById("dan") dan 이라는 id 가 들어있는 html 태그 객체를 가져옴
console.dir(document.getElementById("dan"));
// 객체 내 namespaceURL 이라는 변수의 값을 가져옴
console.log(document.getElementById("dan").namespaceURI);
// 객체 내 value 변수의 값을 가져옴
var dan = document.getElementById("dan").value;
console.log("dan : "+dan)
// console.log("출력");
for(var i=1; i<10; i++){
console.log(dan+" * "+i+" : "+dan*i);
}
}
</script>
</head>
<body>
<input type="text" name="" id="dan">
<input type="button" value="전송" onclick="printGuGuDan()">
</body>
</html>
1) 사칙연산
<html>
<head>
<script>
function cal(){
// console.log(document.getElementById("cal").value);
if(document.getElementById("cal").value == '+'){
// 두 개의 값 가져오기
var num1 = document.getElementById("txt1").value;
var num2 = document.getElementById("txt2").value;
// 형변환하여 result 에 담기
var result = parseInt(num1)+parseInt(num2);
// id 가 result 인 곳에 값 담기
document.getElementById("result").value = result;
}else if(document.getElementById("cal").value == '-'){
var num1 = document.getElementById("txt1").value;
var num2 = document.getElementById("txt2").value;
// 형변환하여 result 에 담기
var result = parseInt(num1)-parseInt(num2);
// id 가 result 인 곳에 값 담기
document.getElementById("result").value = result;
}else if(document.getElementById("cal").value == '*'){
var num1 = document.getElementById("txt1").value;
var num2 = document.getElementById("txt2").value;
// 형변환하여 result 에 담기
var result = parseInt(num1)*parseInt(num2);
// id 가 result 인 곳에 값 담기
document.getElementById("result").value = result;
}else if(document.getElementById("cal").value == '/'){
var num1 = document.getElementById("txt1").value;
var num2 = document.getElementById("txt2").value;
// 형변환하여 result 에 담기
var result = parseInt(num1)/parseInt(num2);
// id 가 result 인 곳에 값 담기
document.getElementById("result").value = result;
}
}
// eval() 함수 이용하기
function cal2(){
var num1 = document.getElementById("txt1").value;
var num2 = document.getElementById("txt2").value;
var oper = document.getElementById("cal").value;
// var result = document.getElementById("result").value;
// exp 에 들어간 문자열이
var exp = num1+oper+num2;
// eval 을 통해 하나의 식으로 변환 계산되어 data 에 저장됨
var data = eval(exp);
document.getElementById("result").value = data;
}
</script>
</head>
<body>
<input type="text" name="" id="txt1" size="5">
<input type="text" nane="" id="cal" size="5">
<input type="text" name="" id="txt2" size="5">
<input type="button" value="=" onclick="cal()">
<input type="text" name="" id="result">
</body>
</html>
2. href 다루기
- 자바스크립트에서 href 를 다루기 위해서는 location 객체를 사용한다.
- 이때 location.href 는 ‘현재 위치’를 나타낸다고 생각하면 편하다.
- 즉 location.href 를 고치면 해당 스크립트가 실행되었을 때 내가 수정한 위치로 이동하게 된다.
function goGoogle(){
// 버튼 클릭 시 웹페이지 이동
location.href="<<a href=http://www.google.com>http://www.google.com</a>>";
}
function goNaver(){
location.href="<<a href=http://www.naver.com>http://www.naver.com</a>>";
}
3. DIV 다루기
- JS 로 DIV를 다뤄서 DIV 내 글자를 출력하거나 DIV 내 값을 가져오는 등 다양한 기능이 가능하다
<script>
function showDiv(){
// console.log("하하하");
var div = document.getElementById("box");
console.dir(div);
// DIV 태그 내 값 중에서 innerHTML 과 innerText 가 있다.
// innerHTML 은 말 그대로 HTML 로서 들어가며 HTML 태그가 동작
div.innerHTML = "<h1><center>innerHTML<center></h1>";
// TEXT 는 HTML 로서 들어가지 않고 TEXT 자체로만 들어가고, 태그가 동작 X
// div.innerText = "<h1>innerText</h1>";
}
</script>
공부한 것을 활용해서 LOTTE 만들기!!
- js 의 배열+정렬을 사용한다. 그림은 이전에 JAVA 에서 사용하던것 그대로!
<html>
<head>
<style>
img{
margin-top: 100px;
width: 150px;
height: 150px;
}
#roll{
margin-top: 100px;
width: 150px;
height: 100px;
position: relative;
/* right: -350px; */
font-weight: bold;
}
</style>
<script>
function rollLotte(){
var num = []; // 배열 선언
for(var i=0; i<6; i++){
var no = (Math.floor(Math.random()*45)+1);
// 중복검사
// num 안의 요소를 하나씩 꺼내와서
// 내가 새로 생성한 letto 와 비교 후
// 동일하면 새로 lotte 뽑기
for(var j in num){
if(num[j] == no){
no = (Math.floor(Math.random()*45)+1);
}
}
num.push(no);
}
// JS 용 정렬
// 오름차순 정렬
num.sort(function(a,b){
return a-b;
});
// console.log(num[1]);
for(var i=0; i<6; i++){
// console.log(ran);
var photo = document.getElementById("lotte"+(i+1));
photo.src = "../lotte/ball"+num[i]+".png";
}
}
</script>
</head>
<body>
<img src="../lotte/q.jpg" id="lotte1" alt="lotte">
<img src="../lotte/q.jpg" id="lotte2" alt="lotte">
<img src="../lotte/q.jpg" id="lotte3" alt="lotte">
<img src="../lotte/q.jpg" id="lotte4" alt="lotte">
<img src="../lotte/q.jpg" id="lotte5" alt="lotte">
<img src="../lotte/q.jpg" id="lotte6" alt="lotte">
<input type="button" id="roll" value="Big Chance" onclick="rollLotte()">
</body>
</html>
4. Form 다루기
- 자바 스크립트를 사용하여 document 내 값들을 가져올 수 있는데 이러한 방법은 총 2가지
1) 배열을 통해 form 값 가져오기
<html>
<head>
<script>
function checkForm(check){
console.dir(check);
// 자바 스크립트를 이용해서 fomr 안에 있는 내용을 가져 올 수 있다.
// 이렇게 가져오는 것은 배열을 이용해서 가져오는 방식
// 즉 form 안에 있는 내용은 일종의 배열로 취급한다.
// 순서는 당연히 form 의 순서에 따른다
var id = check.form[0];
var pw = check.form[1];
var pwConfirm = check.form[2];
var email = check.form[3];
// 유효성 검사
// return ; 을 사용해야만 유효성 검사 후
// 검사에서 실패(누락 확인)되면 당므으로 넘어가는것이 아니라 중간에서 컷!
if(id.value == ''){
alert("아이디를 입력하세요");
id.focus();
return ;
}else if(pw.value == ''){
alert("패스워드를 입력하세요");
pw.focus();
return ;
}else if(pwConfirm.value == ''){
alert("패스워드 확인을 입력하세요");
pwConfirm.focus();
return ;
}else if(email.value == ''){
alert("이메일을 입력하세요");
email.focus();
return ;
}
// 비밀번호 확인
else if(pw.value != pwConfirm.value){
alert("비밀번호가 동일하지 않습니다");
pw.value = '';
pwConfirm.value = "";
pw.focus();
return ;
}else if(pw.value.length < 6){
alert("패스워드는 최소 6자 이상이여야 합니다");
pw.value = '';
pwConfirm.value = "";
pw.focus();
return ;
}
// 이메일 검사
// indexOf 사용하여 문자 확인 시 잇다면 해당 위치 번호를 return
// 없으면 -1 return
else if(email.value.indexOf('@') == -1){
alert("이메일 주소가 올바르지 않습니다");
email.value = "";
return ;
}
// get_post html 에 전달
check.form.action="get_post.html";
// method
check.form.method="post";
// 제출
check.form.submit();
}
</script>
</head>
<body>
<form action="" method="get">
<table>
<tr>
<td>아이디</td>
<td><input type="text" name="userid"></td>
</tr>
<tr>
<td>비밀번호</td>
<td><input type=text" name="userpw"></td>
</tr>
<tr>
<td>비밀번호 확인</td>
<td><input type="text" name="userpwConfirm"</td>
</tr>
<tr>
<td>이메일</td>
<td><input type="text" name="email"></td>
</tr>
<tr>
<td colspan="2">
<input type="button" value="submit" onclick="checkForm(this)">
<input type="reset" value="reset">
</td>
</tr>
</table>
</form>
</body>
</html>
5. 객체 다루기
1) 객체 선언과 사용
- JS 에서 객체의 선언은 var 변수명 = {} 으로 객체를 선언 할 수 있다.
- 이후 객체변수명.전역변수명 을 사용해서 변수와 값을 초기화 가능하다.
- 혹은 JSON 방식을 사용해서 초기화도 가능하다
- 자기자신을 가르키는 this 를 사용가능하다
// 객체 선언 : var 변수명 = {}
var person = {};
person.name = "홍길동";
person.age = 20;
console.log(person.name);
console.dir(person);
// JSON 방식으로 초기화
var person2 = {
name : "엘사",
age : 15,
gender : "woman",
job : "Queen"
}
2) let 변수명 = new 객체명();
<html>
<head>
<script>
function getTime(){
let time = new Date();
console.log(time);
// 날짜 시간은 date 객체 사용
var year = time.getYear();
console.log(year);
var year2 = time.getFullYear();
console.log(year2);
var month = time.getMonth();
console.log(month);
var now = time.getFullYear()+" 년 "+ (time.getMonth()+1)+" 월 "+ time.getDate()+" 일 "
+ time.getHours()+" : "+ time.getMinutes(0) + " : "+ time.getSeconds();
console.log(now);
document.getElementById("time").value = now;
}
</script>
<style>
input#time{
width: 200px;
}
</style>
</head>
<body>
<input type="text" id="time">
<input type="button" value="현재 시간은??" onclick="getTime()">
</body>
</html>
3) 시간 출력하기 - 특정시간이 지난후
- 시간을 가져오는 Date 클래스를 사용
- window.setTimeout 함수는 특정한 시간(1000ms, 1초) 후에 실행되는 함수로 showNowTime 을 실행했을 때 div 영역에 현재 시간을 찍음
- 이후 windowsetTimeout(showNowTime, 1000) 을 확인하여 showNowTime을 (1000ms)1초 마다 호출함 ⇒ 즉 1초가 지날 때 마다 showNowTime 을 호출하여 출력함
<html>
<head>
<script>
// window.setTimeout 함수는 특정한 시간(1000ms, 1초) 후에 실행되는 함수
// 즉 showNowTime 을 실행했을 때 div 영역에 현재 시간을 찍음
// -> 이후 windowsetTimeout(showNowTime, 1000) 을 확인하여 showNowTime을 (1000ms)1초 마다 호출함
// 즉 1초마다 showNowTime 을 호출하여 출력함
function showNowTime(){
let time = new Date();
var now = time.getFullYear()+" 년 "+ (time.getMonth()+1)+" 월 "+ time.getDate()+" 일 "
+ time.getHours()+" : "+ time.getMinutes(0) + " : "+ time.getSeconds();
// console.log(now);
var div = document.getElementById("box1");
div.innerHTML = "<h1>"+now+"</h1>";
// window 내장객체
// window.setTimeout(함수명, 시간) : 해당 함수를 특정한 시간이 지난 후에 실행됨
window.setTimeout(showNowTime, 1000);
}
</script>
</head>
<!-- onload 는 body 태그가 로딩되면 실행 -->
<body onload="showNowTime()">
<div id="box1"></div>
<input type="button" value="현재 시간">
</body>
</html>
4) 함수를 특정시간마다 반복 실행
- window.setInterval 을 사용하면 특정한 시간마다 반복하여 내가 지정한 함수를 실행함
- setTimeout 과 마찬가지로 매개변수로 함수명, 시간을 받는다.
- clearInterval 을 사용하면 해당 Interval 을 종료시킬 수 있다.
var interval; // 반복실행하는 함수를 특정하기 위한 변수
// 페이지 로딩시 실행
$(function(){
// id = btn1 클릭시 실행
$("#btn1").on("click", function(){
interval = window.setInterval(showPoster, 1000);
})
// id = btn2 클릯 ㅣ실행
$("#btn2").on("click", function(){
clearInterval(interval);
})
});
// 랜덤 값 생성 -> 랜덤값을 이용해서 image 위치 특정 -> attr 사용해서 src 변경
function showPoster(){
var ran = parseInt(Math.random()*8+1);
var src = "../images/movie_image_"+ran+".jpg";
$("img").attr("src", src);
}
6. 함수의 활용
- JS 에서는 함수조차 객체로 사용가능함
- 예를 들어 객체의 값을 정의할 때 value 부분에 익명 함수를 사용해서 값을 넣어줄 수 있음
- 익명함수로 들어간 부분은 해당 속성명을 함수명으로서 기능함
- 즉 결과를 얻기 위해서는 함수명(), 익명함수의 매개변수로서 사용하기 위해서는 함수명 만!!
// 아래 함수는 객체 obj 를 받아서 obj 안에 있는 age 값을 검사 후
// result 값에 따라 출력
function isAdult(obj)
{
var result ="";
if(obj.age > 18)
{
result = "성인";
}else{
result = "미성년";
}
console.log(obj.name+" 은"+"result "+"입니다");
}
// 객체는 속성+함수 모두를 갖을 수 있음
// 따라서 함수를 갖을 수 있음
// 아래처럼 익명 함수 사용 가능
var p2 =
{
name : "둘리",
age : 10,
gender : "남",
// 요소로 함수를 갖을 수 있음
isAdult : function(){
var result = "";
if(this.age > 18){
result = "성인"
}else{
result = "미성년"
}
return result;
}
}
console.log(p2.isAdult());
<script>
// JS 의 생성자는 java와 동일하게 함수의 첫글자가 대문자
function Person(name, age, gender, job)
{
this.name = name;
this.age = age;
this.gender = gender;
this.job = job;
// 익명함수
// isAdult가 하나의 함수명으로서 넣어짐. 따라서 결과를 얻기 위해서는 isAdult() 를 사용함
// 왜냐하면 isAdult 는 함수명이고, isAdult() 를 해서 결과를 reuturn 받기 때문
this.isAdult = function()
{
var result = "";
if(this.age > 18)
{
result = "성인";
}else
{
result = "미성년자";
}
return result;
}
console.log(this.name + "씨는 "+ this.isAdult() + " 입니다");
}
var sin = new Person("신데렐라", 14, "여", "가정부");
</script>
'JavaScript' 카테고리의 다른 글
| 데이터 전달의 꽃 AJAX 다루기 - JS, JQuery, jsp(feat. 실시간 아이디 중복검사) (1) | 2022.05.12 |
|---|---|
| JavaScript 기본기 익히기 (2) : 변수 입력과 출력, eval(), 사용자 정의 함수 (0) | 2022.04.28 |
| JavaScript 기본기 익히기 (1) : 변수 선언, 배열, 제어문, 문자열 (0) | 2022.04.23 |
댓글