반응형
<!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 type="text/javascript">
=========JS 기본 =======Number&String==========================
document.write(1+1);
alert('Hello world');
console.log('console hello'); *; semicolon은 { or and ( opening 앞에 쓰면 에러남
emily=40; number
emily1='40'; string
console.log(emily)
console.log(emily1)
document.write('메롱');
alert('Hey, there!');
console.log('Calm and away');
console.log(emily+emily1);
=======조건문==============================console에 안뜸. ======
emily=40;
if(emily==40){
console.log('Great!');
} else{
console.log('That');
}
=============반복문=====FOR=====================================
for(i=0; i<10; i++){
console.log(i);
}
=============반복문 실습 = 구구단 ==============================
for(i=1; i<=9; i++){
console.log('2*'+i+'='+2*i);
}
for(i=1; i<=9; i++){
console.log('9*'+i+'='+9*i);
}
=============Boolean============================================
emily4=10;
emily5=10;
console.log(emily4==emily5);
result=emily4==emily5;
console.log(result);
result2=emily4>emily5;
console.log(result2);
</script>
</head>
<body>
<input type ="button" value ="Press" onclick="alert('Great!')"> onclick 은 js만 쓸 수 있는 속성
================변수 ============variable=============================
<div id="root"></div>
<script type="text/javascript">
ele=document.querySelector('#root'); 최신 version
ele.innerHTML='Hello,world';
</script>
<div id ="rooot"></div>
<script type="text/javascript">
elee=document.getElementById('rooot'); 옛날 version
elee.innerHTML='Hello, there';
</script>
<div id ="boat"></div>
<script type="text/javascript">
a=document.querySelector('#boat');
a.innerHTML='GOOD GOOODD';
console.log(a.length); $$$$$$$$$$$QUESTION$$$$$$$$$---???????a 변수의 길이는 왜 안나오는지...??
str='d iclskd alidcklj weijv';
console.log(str.length);
i=100;
console.log(i.length);
</script>
================JS 사용하여 버튼 클릭 -> 색상 변경===================
방법 1 . script에서 변수 설정 -> onclick에서도 연결됨
<div id="Happiness">You will be happy!</div>
<input type="button" value="If you press it!"
onclick="b.style.color='purple';">
<script type="text/javascript">
b=document.querySelector('#Happiness');
b.style.color='yellow';
</script>
방법 2. 변수 설정을 onclick에만 하고 script에 연결 안됨.
<div id ="OK">Here!</div>
<input type="button" value="?"
onclick="ok=document.querySelector('#OK'); ok.style.color='orange';">
<script>
ok.style.color='red';
</script>
방법 3. Onclick 에다가 Document.부터 style까지 쭉 지정. 왜 안되지 다시 ㄱㄱ!!! $$$$$$$$$$$$$$$$$$$$ERROR$$$$$$$$$$$$$$$$$$$$$$$$$$
<div id ="OKAY">There!</div>
<input type="button" value="??"
onclick="document.querySelector('#OKAY').sytle.color='red';">
<script>
</script>
============================JS사용 버튼눌러 글자 배경색 바꾸기 ===============================
<div id="rooot">Hi</div>
<input type="button" value="Press it!"
onclick="ele=document.querySelector('#rooot');
ele.style.color='yellow';
ele.style.backgroundColor='black';">
<script type="text/javascript">
ele=document.querySelector('#rooot');
ele.style.color='black';
ele.style.backgroundColor='yellow';
</script>
===========================함수 사용해서 바꾸기 =============================================
<div id ="what">Haha</div>
<input type="button" value="Hoho"
onclick="hereyouare();">
<script>
function hereyouare(){
c=document.querySelector('#what');
c.style.color='red';
c.style.backgroundColor='yellow';
}
c=document.querySelector('#what');
c.style.color='black';
c.style.backgroundColor='purple';
</script>
==========JS Event===하나는 input type에 그대로 적용/ 다른 하나는 함수 사용================
<h1>안녕하세요</h1>
<input type="button" value="night" onclick="
document.querySelector('body').style.backgroundColor='black';
document.querySelector('body').style.color='yellow';">
<input type="button" value="day" onclick="changeColor();">
<ul>
<li><a href="">Menu1</a></li>
<li><a href="">Menu2</a></li>
<li><a href="">Menu3</a></li>
<li><a href="">Menu4</a></li>
</ul>
<p>김상균 경일은 교수님들도 잘 가르쳐 주시고<br>
그리고 제가 초조해지거나 ㅇ커아어아앙으나ㅏ<br>
어머알머ㅣㄴ앎니ㅏㅇ러ㅣㅏㅇㅁ리마얼ㄴ미ㅏㅇ
</p>
<script>
function changeColor(){
ele=document.querySelector('body');
ele.style.color='black';
ele.style.backgroundColor='yellow';
}
</script>
</body>
</html>
분명 똑같이 했는데도 안될 때가 있다 다시 지우고 하면 됨 분명 오타 있는데 못찾는듯......................
To do list
아래 있는 function 5줄 이해하느라 진짜 오래걸림.,,,
<!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>
*{
margin:0;
padding:0;
}
ul,li{
list-style:none;
}
a{
text-decoration: none;
}
#header{
width:100%;
height:200px;
background:rebeccapurple;
padding:30px;
box-sizing: border-boxs;
}
#headertop{
text-align:center;
padding:30px;
}
#headerbottom{
text-align: center;
padding:30px;
}
#textbox{
width:200px;
height:20px;
border:1px solid darkgray;
border-radius: 5px;
text-align: center;
color:grey;
}
#btn{
width:20px;
height:20px;
border-radius: 20px;
border:1px solid darkolivegreen;
text-align: center;
font-size:12px;
cursor:pointer;
}
#bottom{
text-align: center;
line-height:3;
margin-top:30px;
}
</style>
</head>
<body>
<div id ="wrap">
<div id="header">
<div id="headertop">
<h1>to do list</h1>
</div>
<div id="headerbottom">
<input text id="textbox" value="think">
<input button id="btn" value="+" onclick="add();">
</div>
</div>
<div id="bottom">
<ul id="bottom_content">
<li>reading books</li>
<li>working out</li>
<li>being happy</li>
</ul>
</div>
</div>
<script>
function add (){
txbx=document.querySelector('#textbox');
list=document.querySelector('#bottom_content');
ele=document.createElement('li');
ele.innerHTML=txbx.value;
list.appendChild(ele);
}
</script>
</body>
</html>
반응형
'블록체인 기반 핀테크 및 응용 SW개발자 양성과정 일기' 카테고리의 다른 글
| [7일차 연습] to do list & moving clock (0) | 2021.03.24 |
|---|---|
| [7일차]20210323 to do list 삭제 (0) | 2021.03.23 |
| [7일차]20210322 JavaScript 기초 / 조건문/반복문/제어문/등등.. (0) | 2021.03.22 |
| 20210320 Javascript 기초 예습 (0) | 2021.03.21 |
| [6일차]20210319 프로그래머스 웹사이트 레이아웃 (0) | 2021.03.19 |
