학습내용
script - jquery구문, 선택자, 이벤트 처리, 페이드, 슬라이드, 체이닝, restful service
참고 사이트
카카오 개발자 https://developers.kakao.com/
Kakao Developers
카카오 API를 활용하여 다양한 어플리케이션을 개발해보세요. 카카오 로그인, 메시지 보내기, 친구 API, 인공지능 API 등을 제공합니다.
developers.kakao.com
구글 차트 https://developers.google.com/chart/interactive/docs?hl=ko
Google 차트 사용 | Charts | Google for Developers
이 페이지는 Cloud Translation API를 통해 번역되었습니다. Switch to English 의견 보내기 Google 차트 사용 컬렉션을 사용해 정리하기 내 환경설정을 기준으로 콘텐츠를 저장하고 분류하세요. Google 차트는
developers.google.com
카카오 오븐 https://ovenapp.io/
OvenApp.io
Oven(오븐)은 HTML5 기반의 무료 웹/앱 프로토타이핑 툴입니다. (카카오 제공)
ovenapp.io
코드
(1) function 기능 처리
funktion abcd(){}
button onclick="abcd()"
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
function fight(){ //함수
//어떤 기능을 어떻게 처리할지 써줌.
alert('파이팅!!!')
}
function bye(){ //함수
alert('잘가! 내일 만나')
}
//버튼하나당 함수하나를 연결해라!!!
</script>
</head>
<body>
<button onclick="fight()">파이팅</button>
<button onclick="bye()">잘가</button>
</body>
</html>
(2) function과 for문 응용
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
function go(){
//1부터 100까지 브라우저에 출력!!
for(let i = 1; i < 101; i++){
document.write(i + '<br>')
}
}
//버튼하나당 함수하나를 연결해라!!!
</script>
</head>
<body>
<button style="background: yellow;" onclick="go()"> go 100 </button>
</body>
</html>
(3) 버튼함수 연결
<div id = 'output'></div>
alert('로그인 결과>> ' + result)
output.innerHTML = '로그인 결과>> ' + result
innerHTML은 대소문자를 정확하게 타이핑.
자바스크립트는 대소문자 구분해서 쳐야함.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
function plus(){
//입력 -->처리 -->출력
let n1_value = document.getElementById('n1').value
let n2_value = document.getElementById('n2').value
//모든 입력값의 데이터 타입은 문자 !
let n1_value2 = parseInt(n1_value)
let n2_value2 = parseInt(n2_value)
let result = n1_value2 + n2_value2
//alert(' 두 수의 합은 ' + result)
output.innerHTML = '두 수의 합은 ' + result
}
function minus(){
//입력 -->처리 -->출력
let n1_value = document.getElementById('n1').value
let n2_value = document.getElementById('n2').value
//모든 입력값의 데이터 타입은 문자 !
let n1_value2 = parseInt(n1_value)
let n2_value2 = parseInt(n2_value)
let result = n1_value - n2_value
//alert(' 두 수의 차는 ' + result)
output.innerHTML = ' 두 수의 차는 ' + result
}
function login(){
//입력 --> 처리 --> 출력
let id_value = document.getElementById('user').value //root
let pw_value = document.getElementById('pw').value //1234
let result = '' //변수를 만들면 반드시 초기값을 넣어주세요.
if(id_value == 'root' && pw_value == '1234'){
//if문은 조건이 true일때만 실행!!!!
//조건은 비교하는 것이 들어가야함.!!!
result = '로그인 성공'
}else{
result = '로그인 실패'
}
//alert('로그인 결과>> ' + result)
output.innerHTML = '로그인 결과>> ' + result
}
</script>
</head>
<body>
숫자1 : <input id = "n1" type="text" value="100"> <br>
숫자2 : <input id = "n2" type="text" value="200"> <br>
<button onclick= "plus()">더하기 기능 처리</button>
<button onclick= "minus()">빼기 기능 처리</button>
<hr>
id: <input type="text" id = "user" value="root"> <br>
pw: <input type="text" id = "pw" value="1234"> <br>
<button onclick="login()">로그인 기능 처리</button>
<hr>
<div style="background: yellow;" id = 'output'></div>
</body>
</html>
(4) function 연습
result.innerHTML = "<font color='색깔'>넣고싶은 문구</font>"
result.innerHTML = '<img src="이미지파일" width="x" height="y">'
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
function text(){
result.innerHTML = "<font color='blue'>나도 글자</font>"
}
function text2(){
//id가 word인 곳에 입력한 값을 가지고 와서
//id가 result인 곳에 출력
let word_value = document.getElementById('word').value
result.innerHTML = word_value
}
function text3(){
result.innerHTML = "<font color='red'>나는 글자</font>"
}
function img(){
result.innerHTML = '<img src="image2.png" width="200" height="200">'
}
</script>
</head>
<body>
<!-- 글자추가3을 누르면 "나는 글자", 글자추가를 누르면 "나도 글자"
글자추가2를 누르면 id가 word에 넣은 값을 가져다가 id가 result인 곳에 출력
-->
<button style="background: lime;" onclick="text3()">글자추가3</button>
<button style="background: yellow;" onclick="text()">글자추가</button>
<button style="background: lime;" onclick="img()">이미지추가</button>
<button style="background: yellow;" onclick="text2()">글자추가2</button>
하고 싶은 말: <input type="text" id="word">
<hr>
<div id = 'result'></div>
</body>
</html>
(5) location.href
브라우저가 요청하는 방법 3가지
-a태그
-주소 부분에 주소를 넣고 엔터
-location.href = "주소"
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
function naver(){
let find = document.getElementById('naver').value
location.href = "https://kin.naver.com/search/list.naver?query=" + find
}
function web(){
let find = document.getElementById('web').value
location.href = "https://comic.naver.com/search?keyword=" + find
}
function search(){
let search_value = document.getElementById('search').value
location.href= "https://search.naver.com/search.naver?where=nexearch&sm=top_hty&fbm=0&ie=utf8&query=" + search_value
}
function movie(){
let movie_value = document.getElementById('movie').value
location.href = "https://tv.naver.com/search?query=" + movie_value
}
</script>
</head>
<body>
지식인 검색어 <input type="text" id="naver">
<button style="background: lime;" onclick="naver()">네이버 지식인 검색</button>
<br>
웹툰 검색어 <input type="text" id="web">
<button style="background: yellow;" onclick="web()">네이버 웹툰 검색</button>
<br>
네이버 검색어 <input type="text" id="search">
<button style="background: pink;" onclick="search()">네이버 검색</button>
<br>
영화 검색어 <input type="text" id="movie">
<button style="background: pink;" onclick="movie()">네이버 영화 검색</button>
<br>
<hr>
<div id = 'result'></div>
</body>
</html>
(6) function 연습
.length 글자수
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
function user(){
let user_value = document.getElementById('user').value
let size = user_value.length //글자수
let mid = ''
if(size < 5){
mid = '5글자보다 아이디는 더 커야합니다.'
}else{
mid = '5글자이상이므로 사용 가능합니다.'
}
result.innerHTML = mid
}
function check(){
let pw1_value = document.getElementById('pw1').value
let pw2_value = document.getElementById('pw2').value
let mid = ''
if(pw1_value == pw2_value){
mid = '일치!!' + "<img src='yes.jpg'>"
}else{
mid = '불일치!!' + "<img src='no.png'>"
}
result.innerHTML = mid
}
</script>
</head>
<body>
아이디 <input type="text" id="user">
<button onclick="user()">아이디 글자수 체크</button>
<hr>
패스워드1 <input type="password" id="pw1"> <br>
패스워드2 <input type="password" id="pw2"> <br>
<button onclick="check()">패스워드 일치 체크</button>
<hr>
<div id="result" style="background: yellow; width: 500px; height: 300px;"></div>
</body>
</html>
(7) jquery 맛보기(추후 배울 예정)
$(function(){})
클릭이벤트 적용시 아래에 있는 body부분에 있는 id, 태그등을 먼저 브라우저가 먼저 인식한 후 적용이 되어야 한다.
그래서 브라우저한테 body부분을 먼저 읽고 와서 이벤트를 설정하라는 의미.
document.ready()라는 것과 동일한 의미.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
$(function(){
$('button').click(function(){
let input_value = $('#word').val() //document.getElementById().val()
alert('당신이 입력한 데이터는 ' + input_value)
})
})
</script>
</head>
<body>
<!-- 567 line -->
하고 싶은 말 <input type="text" id="word">
<button>나를 눌러봐.!</button>
</body>
</html>
(8) 자바스크립트 확인문제
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
function pay(){
let price_value = parseInt(document.getElementById('price').value)
let count_value = parseInt(document.getElementById('count').value)
let total = price_value * count_value
let mid = ''
if(total >= 20000){
mid = '소액결제만 가능!!'
}else{
mid = '결제가능!!'
}
alert(mid)
}
</script>
</head>
<body>
하나당 가격 : <input type="text" id="price"> <br>
물건의 개수 : <input type="text" id="count"> <br>
<button onclick="pay()">결제하기</button>
</body>
</html>
(9) 자바스크립트 확인문제
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
function eat(){
let like_value = document.getElementById('like').value
let hate_value = document.getElementById('hate').value
let total = '오늘은 ' + like_value + '을 먹고, 내일은 ' + hate_value + '를 먹자'
result.innerHTML = total
}
function weather(){
let temp_value = parseInt(document.getElementById('temp').value)
let today_value = document.getElementById('today').value
let mid = ''
if(temp_value >= 26){
mid = '여름'
}else{
mid = '가을'
}
let total = '오늘은 ' + today_value + '요일인데, ' + mid + '이군!'
result.innerHTML = total
}
</script>
</head>
<body>
먹고 싶은 음식 : <input type="text" id="like"> <br>
먹기 싫은 음식 : <input type="text" id="hate"> <br>
<button onclick="eat()">뭐 먹지?</button>
<hr>
오늘의 온도는 : <input type="text" id="temp"> <br>
오늘의 요일은 : <input type="text" id="today"> <br>
<button onclick="weather()">날씨는 어떤가요</button>
<hr>
<div id="result" style="background: pink;"></div>
</body>
</html>'백엔드 개발자 취업캠프(Java) > 웹 시각화를 위한 html_CSS_script' 카테고리의 다른 글
| [4/5] script 변수와 자료형, 연산, 조건&반복문, 함수, 내장함수, 이벤트 정의와 종류, 이벤트 연결 방법 (0) | 2023.09.15 |
|---|---|
| [3/5] css 선택기, 색상, 배경, 테두리, 여백, 패딩, 상자모델, 텍스트, 글꼴, 링크, 목록 (0) | 2023.09.15 |
| [2/5] html 양식, 양식 속성, 입력 유형, 입력 속성, 입력 양식 속성 (0) | 2023.09.15 |
| [1/5] html 소개 및 편집기, 기본요소, 속성, 제목, 스타일, 목록 (0) | 2023.09.15 |
