java script는 head에 쓰는 걸 권장
html은 정적이고 java script는 동적이다.
똑같이 1+1 썼을 때 html은 그대로 표현 하지만 java script는 계산을 해서 보여준다.
<script type="text/JavaScript">
document.write(1+1);
alert('hellow world');
console.log('hellow world');
</script>
</head>
<body>
<h2>1+1</h2>
</body>*alert 은 경고장
condole.log 는 콘솔 창에 표출로 앞으로 많이 사용할것이다.
이게 가장 기본적인 javascript 이다.
하나 하나 이해 하려고 하기보다 일단 흐름을 먼저 알고 많이 사용하고 나중에 하나씩 파고드는 방식으로 공부하자.
*event
<input type="button" value="버튼아이" onclick="alert('나 경고장 이야')">이런 식으로 input에 속성값으로 onclick으로 주면 클릭했을때 보여주고 싶은 event를 안에 넣어주면 된다.
ingoo = 40;
ingoo2 = '40';
document.write(1+1);
console.log('hellow world');
console.log(ingoo);
console.log('ingoo');
console.log(ingoo+ingoo2)
*조건문
프로그램에서 같다는 수식은 == 으로 표현
for(i=1; i<9; i++){
console.log('2*'+i+' = '+2*i);
}
여기서 2*는 string +i+ 는 변수 =을 string 으로 주어 +2*i 의 result를 보여준다.
++는 1씩 숫자를 더해준다는 뜻
/* () = 함수 or 매서드java script는 head에 쓰는 걸 권장
html은 정적이고 java script는 동적이다.
똑같이 1+1 썼을 때 html은 그대로 표현 하지만 java script는 계산을 해서 보여준다.
<script type="text/JavaScript">
document.write(1+1);
alert('hellow world');
console.log('hellow world');
</script>
</head>
<body>
<h2>1+1</h2>
</body>
*alert 은 경고장
console.log 는 콘솔 창에 표출로 앞으로 많이 사용할것이다.
이게 가장 기본적인 javascript 이다.
하나 하나 이해 하려고 하기보다 일단 흐름을 먼저 알고 많이 사용하고 나중에 하나씩 파고드는 방식으로 공부하자.
*event
<input type="button" value="버튼아이" onclick="alert('나 경고장 이야')">
이런 식으로 input에 속성값으로 onclick으로 주면 클릭했을때 보여주고 싶은 event를 안에 넣어주면 된다.
ingoo = 40;
ingoo2 = '40';
document.write(1+1);
console.log('hellow world');
console.log(ingoo);
console.log('ingoo');
console.log(ingoo+ingoo2)
<div id="root">hellow world</div>
<input type="button" value="ㅁㅁㅁ"
onclick="ele = document.querySelector ('#root');ele.style.color = 'blue';">
<script type="text/javascript">
ele = document.querySelector('#root');
ele.style.color = 'yellow'; <input type="button" value="ㅁㅁㅁ"
onclick="changeColor();">
<script type="text/javascript">
function changeColor(){
ele = document.querySelector('#root');
ele.style.color = 'yellow';
}<input type="button" value="밝게" onclick="elem=document.querySelector('body');
elem.style.background='#fff';
elem.style.color='#000';">
<input type="button" value="어둡게" onclick="elem=document.querySelector('body');
elem.style.background='#000';
elem.style.color='#fff';">
id 는cript는 head에 쓰는 걸 권장
html은 정적이고 java script는 동적이다.
똑같이 1+1 썼을 때 html은 그대로 표현 하지만 java script는 계산을 해서 보여준다.
여기서 2*는 string +i+ 는 변수 =을 string 으로 주어 +2*i 의 result를 보여준다.
++는 1씩 숫자를 더해준다는 뜻
/* () = 함수 or 매서드java script는 head에 쓰는 걸 권장
html은 정적이고 java script는 동적이다.
똑같이 1+1 썼을 때 html은 그대로 표현 하지만 java script는 계산을 해서 보여준다.
/* () = 함수 or 매서드
'=' = 속성*/
document 함수 안에 queryselsctor 라는 속성이 있는것이다.
<div id="root">hellow world</div>
<input type="button" value="ㅁㅁㅁ"
onclick="ele = document.querySelector ('#root');ele.style.color = 'blue';">
<script type="text/javascript">
ele = document.querySelector('#root');
ele.style.color = 'yellow';
<input type="button" value="ㅁㅁㅁ"
onclick="changeColor();">
<script type="text/javascript">
function changeColor(){
ele = docud에 쓰는 걸 권장
html은 정적이고 java script는 동적이다.
똑같이 1+1 썼을 때 html은 그대로 표현 하지만 java script는 계산을 해서 보여준다.
*변수
""or''안에 있으면 변수거 아니다. string
변수와 변수를 더할 수 있다.
변수 타입 inte 숫자 와 ''안에 글자 와 연결이 된다.
+ 를 연산자 라고 한다.
위에 내용을 대입 연산자 라고 한다.
*조건문
프로그램에서 같다는 수식은 == 으로 표현
/* 변수 타입
글자형; string
숫자형; int
true or false : boolean 으로 나온다.*/
ingoo = 40;
ingoo2 = '40';
document.write(1+1);
console.log('hellow world');
console.log(ingoo);
console.log('ingoo');
console.log(ingoo+ingoo2)
/*조건문 if문*/
if(ingoo == 40) {
console.log('맞습니다.');
}else{
console.log('틀립니다.');
}
/*비교문*/
ingoo2 = 10;
ingoo3 = 10;
console.log(ingoo2==ingoo3); /* true*/
result = ingoo2 == ingoo3;
console.log(result);
result2 = ingoo2 < ingoo3;
console.log(result2);
/*반복문
ingoo =0;
ingoo <10;
ingoo + 1;
*/
for(i=0; i<10; i++){
console.log(i);
}
for(i=1; i<9; i++){
console.log('2*'+i+' = '+2*i);
}
여기서 2*는 string +i+ 는 변수 =을 string 으로 주어 +2*i 의 result를 보여준다.
++는 1씩 숫자를 더해준다는 뜻
/* () = 함수 or 매서드java script는 head에 쓰는 걸 권장
html은 정적이고 java script는 동적이다.
똑같이 1+1 썼을 때 html은 그대로 표현 하지만 java script는 계산을 해서 보여준다.
id 는script는 head에 쓰는 걸 권장
html은 정적이고 java script는 동적이다.
똑같이 1+1 썼을 때 html은 그대로 표현 하지만 java script는 계산을 해서 보여준다.
ingoo = 40;
ingoo2 = '40';
document.write(1+1);
console.log('hellow world');
console.log(ingoo);
console.log('ingoo');
console.log(ingoo+ingoo2)
<script type="text/JavaScript">
document.write(1+1);
alert('hellow world');
console.log('hellow world');
</script>
</head>
<body>
<h2>1+1</h2>
</body>
*alert 은 경고장
condole.log 는 콘솔 창에 표출로 앞으로 많이 사용할것이다.
이게 가장 기본적인 javascript 이다.
하나 하나 이해 하려고 하기보다 일단 흐름을 먼저 알고 많이 사용하고 나중에 하나씩 파고드는 방식으로 공부하자.
*event
<input type="button" value="버튼아이" onclick="alert('나 경고장 이야')">
이런 식으로 input에 속성값으로 onclick으로 주면 클릭했을때 보여주고 싶은 event를 안에 넣어주면 된다.
<div id="root">hellow world</div>
<input type="button" value="ㅁㅁㅁ"
onclick="ele = document.querySelector ('#root');ele.style.color = 'blue';">
<script type="text/javascript">
ele = document.querySelector('#root');
ele.style.color = 'yellow';
<input type="button" value="ㅁㅁㅁ"
onclick="changeColor();">
<script type="text/javascript">
function changeColor(){
ele = document.querySelector('#root');
ele.style.color = 'yellow';
}
<input type="button" value="밝게" onclick="elem=document.querySelector('body');
elem.style.background='#fff';
elem.style.color='#000';">
<input type="button" value="어둡게" onclick="elem=document.querySelector('body');
elem.style.background='#000';
elem.style.color='#fff';">
id 는 하나씩만 지정해서 사용하자. 중복할 경우 에러가 난다.
<body>
<div id="wrap">
<div id="line">
<div>
<h2>To do List</h2>
<input id="text" class="card_input" type="text" value="">
<input id="button" type="button" value="◀" onclick="btnEvent();">
</div>
</div>
<ul class="card_list">
<li>span1</li>
<li>span2</li>
<li>span3</li>
</ul>
</div>
<script type="text/javascript">
function btnEvent(){
card_text = document.querySelector('.card_input');
console.log(card_text.value);
card_list = document.querySelector('.card_list');
liElement = document.createElement('li');
liElement.innerHTML = card_text.value;
card_list.appendChild(liElement);
}
</script>
function btnEvent(){ -이벤트 기능을 넣는다.
card_text = document.querySelector('.card_input'); -card_text 는 변수로 .card_input 이다.
console.log(card_text.value); -콘솔에 card_text 에 value 값을 가져와라
card_list = document.querySelector('.card_list'); - card_list 는 변수로 .card_list 이다.
liElement = document.createElement('li'); - li엘리먼트는 li엘이먼트를 새로 만들어라
liElement.innerHTML = card_text.value; -li 엘리먼트에 html로 넣어라 그 값은 card.value 값을 넣어라
card_list.appendChild(liElement); -card_list 에 자식 엘리먼트로 li 를 추가하라.
}