앞으로 한달 Javascript 공부.
아침 : 숙제 검사 + JavaScript 기초 이론 + 어려운 이론..
오후 : 배운거 계속 반복 연습
숙제: 안보고 맨 마지막 꺼 다 칠 수 있도록.
script 보통 head에 많이 들어감. body 에서도 작동은 되기는 함. 하지만head쓰는걸 권장~
JS쓸 때, <script>선언 ㄱ ㄱ ~
. dot -> 쩜 의미는 일단 몰라도 된대 근데 궁금..,.,.,.,.,.,.,...
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>
<script type="text/javascript">
document.write(1+1);
alert('Hello world');
console.log('console hello')
</script>
</head>
<body>
<h2>1+1</h2>
</body>
</html>
Console.log 는 f12 개발자 도구 console section에 있음 ~~~~~
Console -> 디버깅할 때.
=======================================================================
JavaScript 는
() 요 괄호랑 . 쩜이랑 ; 세미콜론앞으로 한달 Javascript 공부.
아침 : 숙제 검사 + JavaScript 기초 이론
script 보통 head에 많이 들어감. body 에서도 작동은 되기는 함. 하지만head쓰는걸 권장~
JS쓸 때, <script>선언 ㄱ ㄱ ~
. dot -> 쩜 의미는 일단 몰라도 된대 근데 궁금..,.,.,.,.,.,.,...
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>
<script type="text/javascript">
document.write(1+1);
alert('Hello world');
console.log('console hello')
</script>
</head>
<body>
<h2>1+1</h2>
</body>
</html>Console.log 는 f12 개발자 도구 console section에 있음 ~~~~~
Console -> 디버깅할 때.
=======================================================================
JavaScript 는
() 요 괄호랑 . 쩜이랑 ; 세미콜론을 씀..
html 은 = <> ( . 쩜은 위치, 파일 넣을 때만 쓰던데)
css 는 {} =
EVENT ex) Onclick
<input type="button" value="눌러라~">input elment 안에 type, value라는 속성을 넣어줌.
속성값이라는 것은 tag안에 작성하는 것 ! 굳굳
<body>
<input type="button" value="눌러라~" onclick="
">
</body><script> 로 시작해서 JS 하는 방법도 있고
위와 같이 onclick 이라는 JS 만 쓸 수 있는 속성을 넣는 방법도 있음.
<body>
<input type="button" value="눌러라~" onclick="alert('굳 !')">
</body>
=====================변 수 =======변하는 값==================================
내가 임의대로 정하고 넣은 값 사용
= 대입연산자 -> 같다라는 뜻이 아닌 이 값을 넣는다. 라는 게 더 정확하다고.
"" 따옴표 안에있는 것은 sting, 문자열이라고 생각한 것.
emily = 40;
console.log(emily);
console.log('emily');
emily = 40;
emily2='40';
console.log(emily);
console.log('emily');
document.write('메롱');
alert('Hey!');
console.log('Calm and relax!')
console.log(emily+emily2);변수끼리 서로 더할 수 있다.
변수 안에는 타입이 존재
1. number
2. string
emily=40; 변수 타입이 int (number)
emily2 ='40; 변수 타입이 txt (string)
console.log(emily+emily2);
4040
C, JAVA 는 변수 이름많아서 변수 int +txt면 오류남.
JS 관대..
+ 연산자
= 대입연산자
조건문
emily = 40;
//조건문 IF
if(emily==40){
console.log('맞슴니당~');
} else{
console.log('땡');
}emily라는 변수값에 있는 수가 40이면 '맞슴니당~ / 아니면 땡.
반복문
//반복문
for(i=0; i<10; i++){
console.log(i);
}++ 의미 - 자기자신 한번 더 더하는 것
emily+emily
0
1
2
3
4
5
6
7
8
9 이렇게 뜸.
비교문 + Boolean
emily4=10;
emily5=10;
console.log(emily4==emily5);True
변수타입
글자형 string
숫자형 int
boolean -> True or False
emily4=10;
emily5=10;
console.log(emily4==emily5);
result=emily4==emily5;
// == 는 두개있는거 먼저 해야함.
//4+(1+2) 와 같이.
console.log(result);
result2 = emily4<emily5;
console.log(result2);True
True
result 값의 변수 타입은 불리안.
result2 출력 : False
위에 전체 정리 ------------------------------------------------------
<!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">
emily = 40;
emily2='40';
console.log(emily);
console.log('emily');
document.write('메롱');
//alert('Hey!');
console.log('Calm and relax!')
console.log(emily+emily2);
//조건문 IF
if(emily==40){
console.log('맞슴니당~');
} else{
console.log('땡');
}
// 반복문
for(i=0; i<10; i++){
console.log(i);
}
//비교문
emily = 0;
emily<10;
emily4=10;
emily5=10;
console.log(emily4==emily5);
result=emily4==emily5;
// == 는 두개있는거 먼저 해야함.
//4+(1+2) 와 같이.
console.log(result);
result2 = emily4<emily5;
console.log(result2);
</script>
</head>
<body>
<input type="button" value="눌러라~" onclick="alert('굳')">
</body>
</html>
반복문 실습
//반복문 실습
for(i=1; i<=9; i++){
console.log('2*'+i+'='+2*i);
}
구구단
2*1=2
2*2=3
2*3=6
.
.
.
이렇게 콘솔에 뜸.
=====================================================================
<!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>실습</title>
</head>
<body>
<div id="root"></div>
<script type="text/javascript">
ele = document.querySelector('#root');
ele.innerHTML = 'Hollo, world';
</script>
</body>
</html>ele 변수
document.querySelector 그냥 외우래~
#root -> id 값
document.write랑 뭐가 다르냐.
->
css 처럼 선택을 해서 그 안에 넣어라
가능.
querySelector 요즘꺼
getElementById 예전에 많이 쓰던거 (여기선 # 안씀 그냥 'root')
<!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>실습</title>
</head>
<body>
<div id="root"></div>
<script type="text/javascript">
ele = document.getElementById('root')
ele.innerHTML='Hello,World!'
</script>
</body>
</html>
객체 Object
:
() -> 함수 (method)
= -> 속성
함수 예시
console.log()
alert()
OBJECT,,,,
. 쩜에 대해 알기
str = 'asdfjklad acvhue rlkasdcik '
console.log(str.length);
<str>
<length>
</length>
</str>html 작동하는건 아니고 구조가 이렇게 생김.
Length is attribute
str = string. 이라는 변수 타입 안에 length라는 속성이 있음
number (int)에는 length라는 속성이 없음.
Google 에 javascript document 하면 속성 쭊 나옴.
<script type="text/javascript">
ele = document.querySelector('#root')
ele.innerHTML='Hello,World!'=
<document>
<querySelector>
<getElementById>
</getElementById>
</querySelector>
</document>
전체로 한달 Javascript 공부.
아침 : 숙제 검사 + JavaScript 기초 이론 (
script 보통 head에 많이 들어감. body 에서도 작동은 되기는 함. 하지만head쓰는걸 권장~
JS쓸 때, <script>선언 ㄱ ㄱ ~
. dot -> 쩜 의미는 일단 몰라도 된대 근데 궁금..,.,.,.,.,.,.,...
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>
<script type="text/javascript">
document.write(1+1);
alert('Hello world');
console.log('console hello')
</script>
</head>
<body>
<h2>1+1</h2>
</body>
</html>


ㅇ
Console.log 는 f12 개발자 도구 console section에 있음 ~~~~~
Console -> 디버깅할 때.
=======================================================================
JavaScript 는
() 요 괄호랑 . 쩜이랑 ; 세미콜론앞으로 한달 Javascript 공부.
아침 : 숙제 검사 + JavaScript 기초 이론
script 보통 head에 많이 들어감. body 에서도 작동은 되기는 함. 하지만head쓰는걸 권장~
JS쓸 때, <script>선언 ㄱ ㄱ ~
. dot -> 쩜 의미는 일단 몰라도 된대 근데 궁금..,.,.,.,.,.,.,...
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>
<script type="text/javascript">
document.write(1+1);
alert('Hello world');
console.log('console hello')
</script>
</head>
<body>
<h2>1+1</h2>
</body>
</html>
Console.log 는 f12 개발자 도구 console section에 있음 ~~~~~
Console -> 디버깅할 때.
=======================================================================
JavaScript 는
() 요 괄호랑 . 쩜이랑 ; 세미콜론을 씀..
html 은 = <> ( . 쩜은 위치, 파일 넣을 때만 쓰던데)
css 는 {} =
EVENT ex) Onclick
<input type="button" value="눌러라~">
input elment 안에 type, value라는 속성을 넣어줌.
속성값이라는 것은 tag안에 작성하는 것 ! 굳굳
<body>
<input type="button" value="눌러라~" onclick="
">
</body>
<script> 로 시작해서 JS 하는 방법도 있고
위와 같이 onclick 이라는 JS 만 쓸 수 있는 속성을 넣는 방법도 있음.
<body>
<input type="button" value="눌러라~" onclick="alert('굳 !')">
</body>
=====================변 수 =======변하는 값==================================
내가 임의대로 정하고 넣은 값 사용
= 대입연산자 -> 같다라는 뜻이 아닌 이 값을 넣는다. 라는 게 더 정확하다고.
"" 따옴표 안에있는 것은 sting, 문자열이라고 생각한 것.
emily = 40;
console.log(emily);
console.log('emily');
emily = 40;
emily2='40';
console.log(emily);
console.log('emily');
document.write('메롱');
alert('Hey!');
console.log('Calm and relax!')
console.log(emily+emily2);
변수끼리 서로 더할 수 있다.
변수 안에는 타입이 존재
1. number
2. string
emily=40; 변수 타입이 int (number)
emily2 ='40; 변수 타입이 txt (string)
console.log(emily+emily2);
4040
C, JAVA 는 변수 이름많아서 변수 int +txt면 오류남.
JS 관대..
+ 연산자
= 대입연산자
조건문
emily = 40;
//조건문 IF
if(emily==40){
console.log('맞슴니당~');
} else{
console.log('땡');
}
emily라는 변수값에 있는 수가 40이면 '맞슴니당~ / 아니면 땡.
반복문
//반복문
for(i=0; i<10; i++){
console.log(i);
}
++ 의미 - 자기자신 한번 더 더하는 것
emily+emily
0
1
2
3
4
5
6
7
8
9 이렇게 뜸.
비교문 + Boolean
emily4=10;
emily5=10;
console.log(emily4==emily5);
True
변수타입
글자형 string
숫자형 int
boolean -> True or False
emily4=10;
emily5=10;
console.log(emily4==emily5);
result=emily4==emily5;
// == 는 두개있는거 먼저 해야함.
//4+(1+2) 와 같이.
console.log(result);
result2 = emily4<emily5;
console.log(result2);
True
True
result 값의 변수 타입은 불리안.
result2 출력 : False
위에 전체 정리 ------------------------------------------------------
<!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">
emily = 40;
emily2='40';
console.log(emily);
console.log('emily');
document.write('메롱');
//alert('Hey!');
console.log('Calm and relax!')
console.log(emily+emily2);
//조건문 IF
if(emily==40){
console.log('맞슴니당~');
} else{
console.log('땡');
}
// 반복문
for(i=0; i<10; i++){
console.log(i);
}
//비교문
emily = 0;
emily<10;
emily4=10;
emily5=10;
console.log(emily4==emily5);
result=emily4==emily5;
// == 는 두개있는거 먼저 해야함.
//4+(1+2) 와 같이.
console.log(result);
result2 = emily4<emily5;
console.log(result2);
</script>
</head>
<body>
<input type="button" value="눌러라~" onclick="alert('굳')">
</body>
</html>
반복문 실습
//반복문 실습
for(i=1; i<=9; i++){
console.log('2*'+i+'='+2*i);
}
구구단
2*1=2
2*2=3
2*3=6
.
.
.
이렇게 콘솔에 뜸.
=====================================================================
<!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>실습</title>
</head>
<body>
<div id="root"></div>
<script type="text/javascript">
ele = document.querySelector('#root');
ele.innerHTML = 'Hollo, world';
</script>
</body>
</html>
ele 변수
document.querySelector 그냥 외우래~
#root -> id 값
document.write랑 뭐가 다르냐.
->

css 처럼 선택을 해서 그 안에 넣어라
가능.
querySelector 요즘꺼
getElementById 예전에 많이 쓰던거 (여기선 # 안씀 그냥 'root')
<!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>실습</title>
</head>
<body>
<div id="root"></div>
<script type="text/javascript">
ele = document.getElementById('root')
ele.innerHTML='Hello,World!'
</script>
</body>
</html>
객체 Object
:
() -> 함수 (method)
= -> 속성
함수 예시
console.log()
alert()
OBJECT,,,,
. 쩜에 대해 알기
str = 'asdfjklad acvhue rlkasdcik '
console.log(str.length);
<str>
<length>
</length>
</str>
html 작동하는건 아니고 구조가 이렇게 생김.
Length is attribute
str = string. 이라는 변수 타입 안에 length라는 속성이 있음
number (int)에는 length라는 속성이 없음.
Google 에 javascript document 하면 속성 쭊 나옴.
<script type="text/javascript">
ele = document.querySelector('#root')
ele.innerHTML='Hello,World!'
=
<document>
<querySelector>
<getElementById>
</getElementById>
</querySelector>
</document>
전체
<!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>실습</title>
</head>
<body>
<div id="root"></div>
<script type="text/javascript">
ele = document.querySelector('#root')
ele.innerHTML='Hello,World!'
str = 'asdfjklad acvhue rlkasdcik '
console.log(str.length);
i=100;
console.log(i.length);
</script>
</body>
</html>
=========================================================================
<body>
<div id="root">Hello, world!</div>
<script type="text/javascript">
ele = document.querySelector('#root')
ele.style.color='red';
ele.style.backgroundColor='blue';
</script>
</body>
<!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>실습</title>
</head>
<body>
<div id="root">Hello, world!</div>
<input type="button" value="Press" onclick="ele = document.querySelector('#root'); ele.style.color='blue';">
<script type="text/javascript">
ele = document.querySelector('#root');
ele.style.color='red';
</script>
</body>
</html>버튼 누르면 빨간 Hello, world 가 파랗게됨.
JS는 CSS 처럼 # 색이 안나오는구나... css에어 있는 색이 js에는 없음.
<!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>실습</title>
</head>
<body>
<div id ="root">Hello, world</div>
<input type = "button" value = "Press"
onclick = "ele=document.querySelector('#root'); ele.style.color='yellow';
ele.style.backgroundColor='black'; ">
<script type="text/javascript">
ele = document.querySelector('#root');
ele.style.color='white';
ele.style.backgroundColor='purple';
</script>
</body>
</html>배경색 / 컬러 바꿔봄
함수 배우쟈
fuction : 사용자 정의 함수
ex)
fuction changeColor(){}
내가 나중에 쓰고싶을 때 쓰려고
<!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>실습</title>
</head>
<body>
<div id ="root">Hello, world</div>
<input type = "button" value = "Press"
onclick = "changeColor();
">
<script type="text/javascript">
/* ele = document.querySelector('#root');
ele.style.color='white';*/
//함수 배우기 //
function changeColor(){
ele=document.querySelector('#root');
ele.style.color='red'
}
</script>
</body>
</html>함수 예시
버튼 누르면 글씨 red
=========================JS EVENT ===========================
<!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>
</style>
</head>
<body>
<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 ="#">메뉴1</a></li>
<li><a href ="#">메뉴2</a></li>
<li><a href ="#">메뉴3</a></li>
</ul>
<p>김상균 경일은 교수님들도 잘 가르쳐주시고 <br>
제가 초조해지거나 믈아러나어라 ㅇㅋㅇㅋㅇ<br>
브랄브랄블라ㅇ 이ㅓ아어아어아어아어아어ㅏ </p>
<script type = "text/javascript">
function changeColor(){
ele=document.querySelector('body');
ele.style.color='red';
ele.style.backgroundColor='blue';
}
</script>
</body>
</html>
=================오후 Class =========================================
<!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>
a{
text-decoration: none;
}
ul,li{
list-style:none;
}
#top{
width:100%;
height:300px;
color:white;
background:olivedrab;
padding:5px;
box-sizing: border-box;
}
#top-b{
text-align: center;
}
#top-a>h1{
font-size:50px;
text-align: center;
padding:30px;
}
#bottom>ul>li{
font-size:20px;
text-align:center;
line-height:65px;
}
input{
border-radius: 10px;
width:300px;
height:30px;
font-size:20px;
border:1px solid olivedrab;
}
#button{
color:black;
width:30px;
height:30px;
padding:7px;
background:orange;
border-radius: 30px;
cursor:pointer;
}
</style>
</head>
<body>
<div id ="top">
<div id ="top-a">
<h1>to do list</h1>
</div>
<div id ="top-b">
<input type="text">
<button id ="button">+</button>
</div>
</div>
<div id="bottom">
<ul>
<li>sample1</li>
<li>sample2</li>
<li>sample3</li>
</ul>
</div>
</body>
</html>
만들기
버튼에 cursor:pointer; css를 넣어주면 버튼 위 마우스 올리면 손가락 모양됨
**쌤이 한건
<body>
<div id ="wrap">
<div id ="header">
<h1>To do list</h1>
<div id ="cardform">
<input type="text" class="cardInput">
<inpput type="button" class="cardbtn">요롷게 썜은
input type="text". "button" 에 class를 넣어서 ...... 아항...
textbox에 글 써어 넣고 + 하면 내용이 저장해서 js 어떠한 공ㅅ간에 저장하는 것까지
<!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>
a{
text-decoration: none;
}
ul,li{
list-style:none;
}
#wrap{
width:100%;
}
#top{
width:100%;
height:300px;
color:white;
background:olivedrab;
padding:5px;
box-sizing: border-box;
}
#top-b{
text-align: center;
}
#top-a>h1{
font-size:50px;
text-align: center;
padding:30px;
}
#bottom>ul>li{
font-size:20px;
text-align:center;
line-height:65px;
}
#card_input{
border-radius: 10px;
width:300px;
height:30px;
font-size:20px;
border:1px solid olivedrab;
}
.cardBtn{
color:black;
width:30px;
height:30px;
padding:7px;
background:orange;
border-radius: 30px;
cursor:pointer;
}
</style>
</head>
<body>
<div id ="wrap">
<div id ="top">
<div id ="top-a">
<h1>to do list</h1>
</div>
<div id ="top-b">
<input type="text" id="card_input" value="글자글자" class="cardInput" >
<input type="button" class="cardBtn" value="+" onclick="btnEvent();">
</div>
</div>
<div id="bottom">
<ul>
<li>sample1</li>
<li>sample2</li>
<li>sample3</li>
</ul>
</div>
</div>
<script type="text/javascript">
function btnEvent(){
card_text=document.querySelector('#card_input');
console.log(card_text.value);
}
</script>
</body>
</html>
끝에 card_text 라는 변수에 document.querySelector('#card_input')'을 모두 포함.
function btnEvent(){
card_text=document.querySelector('#card_input');
console.log(card_text.value);
}여기까지 js로 데이터 가져온 것
이제 아래 글을 넣는 것 하기
dom? 이 뭔데..
아래 블로그 참고
자바스크립트 ( div,ul,li 등 )엘리먼트 추가하기 - createElement , appendChild 예제
자바스크립트 ( div,ul,li 등 )엘리먼트 추가하기 - createElement , appendChild 예제 실행결과 : [ jsf...
blog.naver.com
<!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>
a{
text-decoration: none;
}
ul,li{
list-style:none;
}
#wrap{
width:100%;
}
#top{
width:100%;
height:300px;
color:white;
background:olivedrab;
padding:5px;
box-sizing: border-box;
}
#top-b{
text-align: center;
}
#top-a>h1{
font-size:50px;
text-align: center;
padding:30px;
}
#bottom>ul>li{
font-size:20px;
text-align:center;
line-height:65px;
}
#card_input{
border-radius: 10px;
width:300px;
height:30px;
font-size:20px;
border:1px solid olivedrab;
}
.cardBtn{
color:black;
width:30px;
height:30px;
padding:7px;
background:orange;
border-radius: 30px;
cursor:pointer;
}
</style>
</head>
<body>
<div id ="wrap">
<div id ="top">
<div id ="top-a">
<h1>to do list</h1>
</div>
<div id ="top-b">
<input type="text" id="card_input" value="글자글자" class="cardInput" >
<input type="button" class="cardBtn" value="+" onclick="btnEvent();">
</div>
</div>
<div id="bottom">
<ul class="cardList">
<li>sample1</li>
<li>sample2</li>
<li>sample3</li>
</ul>
</div>
</div>
<script type="text/javascript">
//함수
function btnEvent(){
card_text=document.querySelector('#card_input');
console.log(card_text.value);
cardList=document.querySelector('.cardList');
//글 추가 하기
liElement=document.createElement('li');
liElement.innerHTML='test';
cardList.appendChild(liElement);
}
</script>
</body>
</html>
위처럼 하면 추가됨.
근데 안됐던 이유가 밑에 .cardList 가 지정이 안되어 있었음. ul 에다가 넣고 가능해짐.
appendChild 는 뜻이 젤 뒤로 보내는 거
cardList=document.querySelector('.cardList');
liElement=document.createElement('li');
liElement.innerHTML='test';
cardList.appendChild(liElement);ㅁ ㅐ 우 어렵다.
먼저 추가하기 전 내가 넣을 영역을 선택하쟈~
liElement=document.createElement('li') -> li 만들어 달라.
-> 하나하나 추가해보면서 console 로 확인해봐 버튼 클릭
liElement.innerHTML=
appenChild : 맨 아랫줄에 넣어라.
cardList=document.querySelector('.cardList');
liElement=document.createElement('li');
liElement.innerHTML=card_text.value;
cardList.appendChild(liElement);
}이제 liElement.innerHTML=card_text.value; 를 넣어 주면 입력한대로 됨
<!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>
a{
text-decoration: none;
}
ul,li{
list-style:none;
}
#wrap{
width:100%;
}
#top{
width:100%;
height:300px;
color:white;
background:olivedrab;
padding:5px;
box-sizing: border-box;
}
#top-b{
text-align: center;
}
#top-a>h1{
font-size:50px;
text-align: center;
padding:30px;
}
#bottom>ul>li{
font-size:20px;
text-align:center;
line-height:65px;
}
#card_input{
border-radius: 10px;
width:300px;
height:30px;
font-size:20px;
border:1px solid olivedrab;
}
.cardBtn{
color:black;
width:30px;
height:30px;
padding:7px;
background:orange;
border-radius: 30px;
cursor:pointer;
}
</style>
</head>
<body>
<div id ="wrap">
<div id ="top">
<div id ="top-a">
<h1>to do list</h1>
</div>
<div id ="top-b">
<input type="text" id="card_input" value="" class="cardInput" >
<input type="button" class="cardBtn" value="+" onclick="btnEvent();">
</div>
</div>
<div id="bottom">
<ul class="cardList">
<li>sample1</li>
<li>sample2</li>
<li>sample3</li>
<li>dddd</li>
</ul>
</div>
</div>
<script type="text/javascript">
//함수
function btnEvent(){
card_text=document.querySelector('#card_input');
console.log(card_text.value);
//글 추가 하기
cardList=document.querySelector('.cardList'); //cardList = ul
liElement=document.createElement('li'); // liElement -> li 추가요~
liElement.innerHTML=card_text.value;
cardList.appendChild(liElement);
}
</script>
</body>
</html>Javascript 연습용 HTML 아래 ===========JS 비어있음 ==========================ㅇ
<!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>
a{
text-decoration: none;
}
ul,li{
list-style:none;
}
#header{
width:100%;
height:300px;
color:white;
background:olivedrab;
padding:5px;
box-sizing: border-box;
}
#header_bottom{
text-align: center;
}
#header_top>h1{
font-size:50px;
text-align: center;
padding:30px;
}
#bottom>ul>li{
font-size:20px;
text-align:center;
line-height:65px;
}
#textbox{
border-radius: 10px;
width:300px;
height:30px;
font-size:20px;
border:1px solid olivedrab;
}
#btn{
color:black;
width:30px;
height:30px;
padding:6px;
background:orange;
border-radius: 20px;
cursor:pointer;
}
</style>
</head>
<body>
<div id ="wrap">
<div id ="header">
<div id ="header_top">
<h1>to do list</h1>
</div>
<div id ="header_bottom">
<input type="text" id="textbox" >
<input type="button" id="btn" value="+" >
</div>
</div>
<div id="bottom">
<ul class ="cardList">
<li>sample1</li>
<li>sample2</li>
<li>sample3</li>
</ul>
</div>
</div>
<script type="">
</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>
a{
text-decoration: none;
}
ul,li{
list-style:none;
}
#header{
width:100%;
height:300px;
color:white;
background:olivedrab;
padding:5px;
box-sizing: border-box;
}
#header_bottom{
text-align: center;
}
#header_top>h1{
font-size:50px;
text-align: center;
padding:30px;
}
#bottom>ul>li{
font-size:20px;
text-align:center;
line-height:65px;
}
#textbox{
border-radius: 10px;
width:300px;
height:30px;
font-size:20px;
border:1px solid olivedrab;
}
#btn{
color:black;
width:30px;
height:30px;
padding:6px;
background:orange;
border-radius: 20px;
cursor:pointer;
}
</style>
</head>
<body>
<div id ="wrap">
<div id ="header">
<div id ="header_top">
<h1>to do list</h1>
</div>
<div id ="header_bottom">
<input type="text" id="textbox" value="a">
<input type="button" id="btn" value="+" onclick="btnEvent();">
</div>
</div>
<div id="bottom">
<ul class ="content">
<li>sample1</li>
<li>sample2</li>
<li>sample3</li>
</ul>
</div>
</div>
<script type="text/javascript">
function btnEvent(){
textplace=document.querySelector('#textbox');
list=document.querySelector('.content');
liElement=document.createElement('li');
liElement.innerHTML=textplace.value;
list.appendChild(liElement);
}
</script>
</body>
</html>여기서 매ㅔㄴ 마지막에
list.appendChild(liElement);
를 -> textplace.appendChild(liElement) 라고 씀 ..ㅋ...............................오류
'블록체인 기반 핀테크 및 응용 SW개발자 양성과정 일기' 카테고리의 다른 글
| [7일차]20210323 to do list 삭제 (0) | 2021.03.23 |
|---|---|
| 6일차 공부한 내용 정리 및 복습 -JS 조건문, 반복문, 변수, boolean, 색변경 등등 (0) | 2021.03.22 |
| 20210320 Javascript 기초 예습 (0) | 2021.03.21 |
| [6일차]20210319 프로그래머스 웹사이트 레이아웃 (0) | 2021.03.19 |
| [5일차]20210318 Position:absolute; Postition:relative; Position:fixed (0) | 2021.03.18 |
