반응형
오전 : 어제 moving clock 한거 연습 + 이론 수업
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./index.css">
</head>
<body>
<div id="silder">
<ul id="banner" class="visual">
<li><img src="./images/1.png"></li>
<li><img src="./images/2.png"></li>
<li><img src="./images/3.png"></li>
<li><img src="./images/4.png"></li>
<li><img src="./images/5.png"></li>
</ul>
</div>
<script type="text/javascript">
function banner(){
banner = document.querySelector('#banner'); //ul안에 있는 모든 것을 가져온다.
//ul,li element type을 string이 아니다..data type=element 으로 banner안에 저장한 것.
//Dada type은 글자형, 숫자형 요런거를 말함. number, string...
li = document.querySelectorAll('#banner > li');
//banner안에있는 li전부 를 배열로 반환해서 li라는 변수에 넣는다.
//()괄호가 있으면 데이터를 반환해서 준다는 것
// all 이라는 걸 써서 li 각각 데이터 Element type으로 반환.
// ex. [Element],[Element],[Element],[Element],[Element] li를 호출하면 왼쪽처럼 호출됨.
// 0 1 2 3 4
// 역할 : 이를 각각 주소안에 저장한 것 뿐.... (?)
//li는 #banner id값에있는 li들만 가져와서 배열로 저장, 각각 항목을 element data type으로 저장,
// 그래서 요 안의 내용물들은 숫자가 아닌 element type
banner.appendChild(li[0]);
// 맨 위의 것을 빼서 뒤에 넣은 것
}
setInterval(banner,3000);
//3초마다 바ㄴ꾼것~
//괄호 안에 1,2,3개 등이 들어갈 때 있음. 안의 값이름 =인자값
// 요 인자값 안에 string, number(), function 어떤게 들어갈지 ? 아직 잘 모름.
</script>
</body>
</html>
앞으로 공부할 때 함수 () 요 안에 어떤 데이터 타입이 나올지 겅부 할것.
setInterval(banner,3000);
//3초마다 바ㄴ꾼것~
setInterval([],[]); //괄호 안에 1,2,3개 등이 들어갈 때 있음. 안의 값이름 =인자값
// 요 인자값 안에 string, number(int), function 어떤게 들어갈지 ? 아직 잘 모름.
<script>
emily="1";
emily2=1;
emily3=new Date();
document.write(emily);
document.write(emily2);
document.write(emily3);
console.log(typeof(emily)); // string
console.log(typeof(emily2)); //number
console.log(typeof(emily3)); //object
// 안에 있는 거 인자 값을 알아보기 위함.
</script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script> //함수 ~
// 데이터를 가지고 있다가 내가 사용하고 싶을 때 쓰는거
//console.log(1+2); 를 써도 답이 안나옴.
// 함수란 바로 쓰는게 아니고 ㅣ어딘가에 쓸 필요 있을때,,ㄴ
function sum(){
console.log(1+2);
}
sum()
// 이 때, sum();을 써주면 댐.
</script>
</head>
<body>
</body>
</html>
typeof () 는 타입을 말해주는듯..
console.log(typeof(sum(1,2,3)));-> undefined 함수의 type은 없대
함수 사용시 보통 return 이라는 것과 배움.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
function sum(a,b,c){
return a+b+c;
}
a = sum(3,4,5);
document.write(a);
console.log(typeof(a)); //-> data 값 -> number
console.log(typeof(sum(1,2,3)));
//변수는 항상 데이터 타입이 있어야 저장할 수 있어. 그래서 안됨.
// -> 함수에 데ㅇ이터 타입을 만들어주면 됨 = return
</script>
</head>
<body>
</body>
</html>
<script>
funciton sum(a,b){
a+b;
}
sum(1,2);
//a-1, b-2 대입되고 a+b 됨.
</script>아직 출력하는게 없어서 화면에는 안나옴.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
funciton sum(a,b){
return a+b;
}
sum(1,2);
//a-1, b-2 대입되고 a+b 됨.
// 위를 전체 실행한 내용은 1+2 라 출력/.표출이 안됨
</script>
</head>
<body>
</body>
</html><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
funciton sum(a,b){
return a+b;
}
sum(1,2);
a=1+2;
console.log(a);
</script>
</head>
<body>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
function sum(a,b){
return a+b;
}
a=sum(1,2);
/* a=1+2; */
console.log(a);
//return을 쓰면 어떤 값인것인지 알려줌 사용은 니가 담아서 써라 ~
//return은 반환만해줌. a+b의 값만 뱉는다.
</script>
</head>
<body>
</body>
</html>-> 3 나옴
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script> //목표 : 사각형 넓이를 구하는 함수 만들기
height=10;
width=10;
console.log(height*width);
function cal(width,height){
return width*height; //return 위 함수의 결과값을 가지고만 있음. 출력 전.
}
cal1 = cal(10,10); //결과치 숫자 100을 cal1에 담고있음.
cal2 = cal(9,9);
cal3 = cal(8,8);
cal4 = cal(7,7);
cal5 = cal(6,6);
cal6 = cal(5,5);
cal7 = cal(4,4);
cal8 = cal(3,3);
cal9 = cal(2,2);
cal10 = cal(1,1);
document.write(cal1);
document.write(cal2);
document.write(cal3);
document.write(cal4);
document.write(cal5);
document.write(cal6);
document.write(cal7);
document.write(cal8);
document.write(cal9);
document.write(cal10);
console.log(cal1);
console.log(cal2);
console.log(cal3);
console.log(cal4);
console.log(cal5);
console.log(cal6);
console.log(cal7);
console.log(cal8);
console.log(cal9);
console.log(cal10);
</script>
</head>
<body>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<phone> 핸드폰이라는 객체 안에 5가지 버튼(method)이 있음.
<soundup 현재소리="현재소리+1"></soundup>
<sounddown></sounddown>
<power></power> 0 아니면 1 둘줄 하나.
<진동여부></진동여부>
<홈키 현재상태="0"> <!-- 0:꺼짐 1:켜짐-->
<바탕화면으로가기></바탕화면으로가기>
<화면켜기></화면켜기>
</홈키> (핸드폰이라는 객체 안에 홈키라는 mothod가 있음. )
</phone>
핸드폰. 볼륨크게() (모션이 들어감 = 행동했다 = 보통 method 로 표현)
볼륨크게 버튼을 누르면 -> 소리가 올라감 (속성값이 변함)
홈키의 기능은 너무 많음 모든 경우의 수 설정해야함.
핸드폰.현재상태=0; (1일 때는 바탕화면으로 가기 )
핸드폼.홈키()
액션 2개 있을 경우 홈키 누르면 뭐 할 지 모름 -> 현재값을 알아야함.
<script type="text/javascript">
</script>
</body>
</html>
Object...란무엇익나...
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id ="root"></div>
<script type="text/javascript">
div=document.querySelector("#root"); //div 변수에 return값을 변수div에 넣은 것.
//.dot은 document라는 큰 객체안에서 querySelector라는 움직임을 실행하라는 뜻.
//그리고 인자값은 항상 string
console.log(typeof(div)); //div의 값=object
</script>
</body>
</html>Document란
method 우리가 행동을 취할 때
document.open() pop 창 띄우기
Object 란????
JavaScript object is a standalone entity that holds multiple values in terms of properties and methods. Object property stores a literal value and method represents function. An object can be created using object literal or object constructor syntax.
<script type="text/javascript">
div=document.querySelector("#root"); //div 변수에 return값을 변수div에 넣은 것.
//.dot은 document라는 큰 객체안에서 querySelector라는 움직임을 실행하라는 뜻.
//그리고 인자값은 항상 string
console.log(typeof(div)); //div의 값=object
document.open('http://naver.com', 'id', 'width="400" height="300"');
</script>id가 뭐징??????????????????????????????????
질문하니 지금 알 단계가 아니라고 함.
눙물..
이런저런 이론수업하는데 직접 google찾아서 코드작성할 수 있는 능력이 중요한거같다.
<script type="text/javascript">
document.open('http://naver.com', 'id', 'width="400" height="300"');
//document.open 은 인자가 3개 (()안에 쓰는게 3개) google해바바 나옴.
// window.open도 pop up 여는 거다 ~
//
</script>
직접 document.getElementsByClassName() 으로 써보기
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
ul,li{
list-style: none;
}
</style>
</head>
<body>
<div id ="root">
<ul class="get">
<li>Hello</li>
</ul>
</div>
<button onclick="A()">Here!</button>
<div id ="boo">
<ul class="get">
<li>hoho</li>
</ul>
</div>
<button onclick="B()">Here!</button>
<script type="text/javascript">
function A(){
var x=document.getElementsByClassName("get");
x[0].innerHTML="Good Job";
}
function B(){
var y=document.getElementsByClassName("get");
y[1].innerHTML="Excellant!"
}
</script>
</body>
</html>
getElementsByClassName 은.... 내가 지금 이해한 바로는
ClassName ("__") 으로 elements 을 가져온ㄱ 다..? 근데 배열로 가져오는 듯 ? ?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id ="good">
<div class="hello">?????????</div>
<div class="hello">?????????</div>
<div class="hello">?????????</div>
<div class="hello">?????????</div>
<div class="hello">?????????</div>
<div class="hello">?????????</div>
</div>
<button onclick="a()">Guess first!</button>
<script>
function a(){
var x=document.getElementsByClassName("hello");
x[3].innerHTML="I'm here~";
x[3].style.color="red";
x[5].innerHTML="not me!";
}
</script>
</body>
</html>
배열 안의 값이 element이다...?
궁금한 점 : var, let, const 의 차이
var = function-scoped
let, const = block-scoped
var name = "javascript"
아직 모르겠음.
오후시간 한 거
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class ="good">
<div class="hello">?????????</div>
<div class="hello">?????????</div>
<div class="hello">?????????</div>
<div class="hello">?????????</div>
<div class="hello">?????????</div>
<div class="hello">?????????</div>
<div class="hello">?????????</div>
<div class="hello">?????????</div>
<div class="hello">?????????</div>
<div class="hello">?????????</div>
<div class="hello">?????????</div>
<div class="hello">?????????</div>
<div class="hello">?????????</div>
<div class="hello">?????????</div>
<!-- <a id ="good" href="www.naver.com"></a>
<a id ="well" href="www.naver.com"></a>-->
</div>
<button onclick="btn()">Guess first!</button>
<script>
/* 모르는 함수도 이런것을 통해서 알아내는 방법을 배울려고 */
function btn(){
hi = document.getElementsByClassName('hello');
for(i=0; i<hi.length; i++){
if(i == 3 || i == 6|| i == 9|| i == 12){
hi[i].innerHTML="Great!";
}
}
}
/*
a = [1,2,3,4,5,6,7]
for(i=0;i<a.length;i++){
if(a[i] == 4 || a[i] == 5){
a[i] = 7;
}
}
for(i=0; i<hi.length; i++){
if (i == 3 || i == 5) {
hi[i].innerHTML = '바뀌어라!';
}
}
*/
</script>
</body>
</html>
코드 검색해서 공부하는거 연습함.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
ul,li{
list-style:none;
}
</style>
</head>
<body>
<div id="house">
<ul>
<li class="b">111111</li>
<li class="b">222222</li>
<li class="b">333333</li>
<li class="b">444444</li>
<li class="b">555555</li>
<li class="b">666666</li>
<li class="b">777777</li>
</ul>
</div>
<button onclick="good()">PRESS ME IF YOU WANT</button>
<script>
function good(){
x=document.getElementsByClassName("b");
for(i=0; i<x.length; i++){
if(i==2 || i==4){
x[i].innerHTML="good";
}
}
}
</script>
</body>
</html>=> 위 내용 이해는 갔지만 안보고 치면 틀림 -> 연습 ㄱ ㄱ ㄱ
<script>
/* 모르는 함수도 이런것을 통해서 알아내는 방법을 배울려고 */
function btn(){
hi = document.getElementsByClassName('hello');
for(i=0; i<hi.length; i++){
if(hi[i] == hi[3] || i == 6|| hi[i] == 9|| i == 12){
hi[i].innerHTML="Great!";
}
}
}
</script>여기서 hi[i]==9 만 안됨 왜냐면 hi[i]는 element / 9는 숫자
===================================================================
혼좌 method 3개 찾아서 배우기 연습 !
MAth Object : Math.random();
String Object : string.replace();
Document Object: Element.getattribute();
1. Math Object : Math.random()
0 이상 1 미만의 부동소숫점 의사 난수.
Math.random() always returns a number lower than 1.
Math.random()은 암호학적으로 안전한 난수를 제공하지 않으므로, 보안과 관련된 어떤 것에도 이 함수를 사용해서는 안 된다. 그 대신 Web Crypto API의 window.crypto.getRandomValues() 메소드를 이용하여야 한다.
함께 알게된 함수
Math.floor() -> 주어진 숫자와 같거나 작은 정수 중 가장 큰 수를 반환 .
<script>
console.log(Math.floor(5.63)); //5
console.log(Math.floor(5.02)); //5
console.log(Math.floor(-3.43)); //-4
console.log(Math.floor(-3.989)); //-4
</script>
2. HTML DOM getAttribute() Method
getATtribute()은 해당요소에 지정된 값을 반환. 속성이 없다면 null or "" 빈 문자열을 반환 할 것.
속성값을 가져오는??
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1 class="classAttribute">Hello there</h1>
<p>Click the button to display the value of the class atrribute of the h1 element.</p>
<button onclick="fun()";>PRESS</button>
<p id="demo"></p>
<h1 class="sec_classAtrribute"></h1>
<script>
function fun(){
var x =document.getElementsByTagName("h1")[0].getAttribute("class");
document.querySelector("#demo").innerHTML=x;
}
</script>
</body>
</html>요렇게 따라 만들어봄 .
함수관련 쌤이 구글에 넣어 두심-> :확인 요망 ★
<script>
function rand(a,b){
return Math.floor(Math.random()*(b-a))+a;
}
document.writeln(rand(1,46));
</script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
//변수로 랜덤 번호 1~45 정하기
var a=Math.floor(Math.random()*45)+1;
var b=Math.floor(Math.random()*45)+1;
var c=Math.floor(Math.random()*45)+1;
document.writeln(a);
document.writeln(b);
document.writeln(c);
//함수로 랜덤 번호 1~45까지 정하기
function rand(min,max){
return Math.floor(Math.random()*(max-min))+min;
}
document.writeln(rand(1,46));
</script>
</body>
</html>
이분의 난수 생성을 참고함.
[Javascript] 난수 생성하기 (랜덤 숫자, Random Number)
Javascript로 난수를 생성하는 방법을 소개합니다. Math.random() 범위를 지정한 난수 생성하기 0~9 0~10 0~99 0~100 1~10 2~5 난수 생성 함수 만들기 (범위 지정) min <= number <= max ( max 값 포함) min <= nu..
hianna.tistory.com
document.writeln(a);
document.writeln(b);
document.writeln(c);
//함수로 랜덤 번호 1~45까지 정하기
// min <= number < max
function rand(min,max){
return Math.floor(Math.random()*(max-min))+min;
}
document.writeln(rand(1,46));
document.writeln(rand(1,46));
document.writeln(rand(1,46));
// min <= number <= max
function rand2(min,max){
return Math.floor(Math.random()*(max-min+1))+min;}
document.writeln(rand2(1,45));
문영님이 추천하는 술자리 GAME 만들기
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id ="good">
????
</div>
<button value ="Click!" onclick="c();" ></button>
<script>
//변수로 랜덤 번호 1~45 정하기
function c(){
var a=Math.floor(Math.random()*10)+1;
var b=document.querySelector('#good');
console.log(a);
if(a<3){
b.innerHTML="원샷!";
} else {
b.innerHTML="Good luck";
}
}
</script>
</body>
</html><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id ="top">
<h1 id="bo">벌칙</h1>
</div>
<button id ="btn" value="PRESS!" onclick="get()"></button>
<script>
function get(){
num = Math.floor(Math.random()*10)+1;
text=document.querySelector('#bo');
if(num<3){
text.innerHTML="1,2당첨";
} if else(2<num<6){
text.innerHTML="3,4,5당첨";
} if else(5<num<8){
text.innerHTML="6,7나왔다";
}
}
</script>
</body>
</html>왜 이거는 안되징 ,,,,,,,,,다시해보기 !
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#result{
width: 600px;
height:80px;
text-align: center;
margin: 0 auto;
color: red;
font-size: 30px;
font-weight: bold;
margin-top: 200px;
border: 1px;
}
#bb{
margin-top: 100px;
text-align: center;
}
</style>
</head>
<body>
<div id= "result">
무엇이 나올까용
</div>
<div id= "bb">
<button id="btn" onclick="getRandom();">
랜덤벌칙
</button>
</div>
<script type="text/javascript">
function getRandom(){
num = Math.floor(Math.random()*10);
result = document.querySelector('#result');
if(num<4){
result.innerHTML="꽝";
} else if(3<num<7){
result.innerHTML="4,5,6 나왔다!";
} else if(6<num<=9){
result.innerHTML="굳";
}
console.log(num);
console.log(result.innerHTML);
}
</script>
</body>
</html>
숙제 ->짝꿍이한 로또 만들어보기
내일 -> 배너 완성 할예정...
반응형
'블록체인 기반 핀테크 및 응용 SW개발자 양성과정 일기' 카테고리의 다른 글
| [9일차]20210325 움직이는 배너 함수 적용 (0) | 2021.03.25 |
|---|---|
| [8일차 연습] moving clock, return, document.getElementsByClassName, for, if, getElementsByClassName, Math.floor / Math.random (0) | 2021.03.25 |
| [7일차 연습] to do list & moving clock (0) | 2021.03.24 |
| [7일차]20210323 to do list 삭제 (0) | 2021.03.23 |
| 6일차 공부한 내용 정리 및 복습 -JS 조건문, 반복문, 변수, boolean, 색변경 등등 (0) | 2021.03.22 |
