*style 속성 값으로는 css 가 와야함
onclick 의 값은 자바스크립트 와야함
..
기본적으로 html 위에서 작동하는 언어
웹페이지에서 바로 자바스크립트 실행 가능
-> 콘솔 창에서 하면 댐
데이터타입
number, string, boolean
<body>
<h1>javascript</h1>
<script> /*이제부터 자바스크립트가 옵니다 라는 뜻*/
document.write('hello world', 1+1); -> 2가 출력
</script>
<h1>html</h1>
helloworld
1+1 -> 1+1이 출력 (정적임)
</body>
버튼
<input type="button" value="hi" onclick="alert('hi')">
-onclick = 이벤트. 저 이벤트가 발생하면 저렇게 한다
<input type="text" onchange="alert('changed')">
<input type="text" onkeydown="alert('down')">
on어쩌구 = 이벤트 !! 이걸 이용해서 사용자와 상호작용 하는 것! (이벤트 = 사용자가 한 행동 같은거. 사용자의 행위.)
<input type="button" value="night" onclick="
document.querySelector('body').style.backgroundColor='black';
-> 이파일안에 바디태그안에잇는 스타일의 백그라운드컬러를 이걸로
('body')=> 스타일 변경할 해당 태그 이름. 아이디면('#이름') 이런식으로 하면 됨
document.querySelector('body').style.color='white';
">
<body style="background-color:yellow"> 여기선 이러캐함 ㅋ css는 이럼 ㅋ
조건문
boolean - true, false
=== 이게 같다
조건연산자 < > ===
* 출력할 때는
$lt; = < (less than) (< > 이문자들이 태그할 때 쓰이니깐)
* 조건문 활용한 버튼
<input type="button" value="night" onclick="
document.querySelector('body').style.backgroundColor='black';
document.querySelector('body').style.color='white';
">
<input type="button" value="day" onclick="
document.querySelector('body').style.backgroundColor='white';
document.querySelector('body').style.color='black';
">
이거를 한번에->
<input id="night_day" type="button" value="night" onclick="
if(document.querySelector('#night_day').value==='night'){
document.querySelector('body').style.backgroundColor='black';
document.querySelector('body').style.color='white';
document.querySelector('#night_day').value='day';
} else{
document.querySelector('body').style.backgroundColor='white';
document.querySelector('body').style.color='black';
document.querySelector('#night_day').value='night';
}">
*자바스크립트에서 태그 찾는법
document.querySelector('태그'). . .
리팩토링
= 비효율적인걸 제거하는거. 좀더 효율적으로 만드는거
-> 중복의 제거 !!
<input id="night_day" type="button" value="night" onclick="
var target = document.querySelector('body');
if(this.value==='night'){
target.style.backgroundColor='black';
target.style.color='white';
this.value='day';
} else{
target.style.backgroundColor='white';
target.style.color='black';
this.value='night';
}">
중복제거를 위해 var(변수)를 만들어서 쓴다
this를 쓴다 -> 똑같은 버튼 여러개만들어도 다 제대로 작동하게 된다
배열
<script>
var a = ["egoing", "dfs"];
</script>
<h2>get</h2>
<script>
document.write(a[0]); //파일에 이걸 쓴다~ 넣는다~
document.write(' ');
document.write(a[1]);
document.write(a.length);
a.push('juny');
a.push('san');
document.write(a.length);
</script>
<script>
var a=["a","b","c","D","o"];
var i=0;
while(i<a.length){
document.write('<li>'+a[i]+'</li>');
// html 이 파일에 넣는 문구 그대로니까 +로 이어주는거 !!
i+=1;
}
</script>
document.write('<li><a href="http://a.com/'+coworkers[i]+'">'+coworkers[i]+'</a></li>');
이런식 굳~
* 웹페이지 검사창
- esc누르면 콘솔창뜸
- 쉬프트 엔터누르면 여러줄칠수잇슴
- 콘솔에서 에러볼수잇돠
document.querySelector('a')
-> 이건 a에 해당하는거 하나만 가져옴!
document.querySelectorAll('a')
-> a에 해당하는거 다 포함하는 배열나옴!
함수
선언방법
function 이름(parameter(매개변수){
~실행내용~
}
실제 넣는 거 = arguement
ex
function a (left, right){
~~
return 어쩌구;
}
우왕 parameter 그냥 이름만 쓰면 된다닝
넘신긔하고편리하긔양
리턴값도 타입지정안해도된다닝 신긔하긔야
걍 자바스크립트는 형 명시를안하는거가트다
*함수안에서 this 주려면
함수 안에서는 self로 하고 그걸 파라미터로 하고
아규먼트로 this 주면 됨!
객체
var tea={
"a":"a1",
"b":"b1"
};
-> tea.a 이렇게 애들부름
추가 ; tea.ee="efsef"
만약에 자료 이름에 띄어쓰기 잇다
tea[dsfs sdf] 이렇게 접근!
이렇게 하면 됨
객체에 잇는거 전부 다 가져오기
for(var key in 객체이름){
key -> 키값
객체이름[key] -> 벨류값
}
함수 추가하기
객체이름.함수이름=function(){~}
함수안에서 this 사용 가능 냠냠굿
객체에 소속된 함수 = 메소드
객체에 소속된 변수 = 프로퍼티
객체는 내용물사이에 , 가 꼭 있어야한다 !
객체 선언하기
var Body = {
1="dfsf",
"a"="Dfsfs",
setColor:function(color){
document.querySelector('body').style.color = color;
},
setBackgroundColor:function(color){
document.querySelector('body').style.backgroundColor = color;
}
}
라이브러리와 프레임워크
라이브러리 : 부품
->jQuery(가장유명한거)
-다운로드를 받거나,
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js">일케 한다
var links = document.querySelectorAll('a');
var i=0;
while(i<links.length){
links[i].style.color='powderblue';
i+=1;->$('a').css('color',powderblue);이 한줄이 된다 !!!!!!
프레임워크 : 완제품같은거, 그걸 조금씩 수정해서 쓰는거
UI & API
ui : 화면에 떠있는 버튼같은거 (유저 인터페이스). 사용자가 쓰는 것들
api : 프로그래밍을 할때 사용되는 조작장치 ex "alert" 이런거. 웹에 이걸 띄워라 이런거.
-> 모든 애플리케이션들은 api를 순서대로 실행하는 걸로 만들어진다
검색어
document
dom
window
ajax
cookie
..존나많아
'draft > html, javascript' 카테고리의 다른 글
| object (0) | 2021.06.14 |
|---|---|
| 자바스크립트 데이터 타입 (0) | 2021.06.02 |
| css (0) | 2021.05.18 |
| 서버운영 (0) | 2021.05.18 |
| html (0) | 2021.05.18 |