[자바 스크립트] = live script
-인터프리터언어 , 클라이언트 언어, 이벤트 언어 (브라우저에 의해 번역되고 실행된다)
(클라이언트 언어 <> 서버 언어 : 어디에서 번역하고 실행하는지에 대한 차이)
-자바 스크립트는 객체지향을 흉내낼뿐이지 진짜 객체활용이 되지 않는다. (제한성이 따른다)
-서드파티 언어이다. (주언어가 아닌 HTML을 서포트 하기위해 나온 언어)
**코어 : 자바의 기본문법과 기능을 사용할 수 있는 코어.
**DOM : 태그를 객체 관점으로 보는 기술 (html, head,body 등)
**BOM : 브라우저에서 기본적으로 제공해주는 객체들 (window, document)
**최상의 객체 : window 브라우저 그 자체를 가르킴 (자바 - object)
window (브라우저 그 자체를 가르킴) document (객체로 인식) HTML head body
document.bgColor='pink'; //속성처리
document.write('Hello~ JavaScript~'); //기능 호출
/*객체.속성 = 값
객체.메서드()*/이벤트 : 이벤트를 담고 있는 대상
이벤트 소스 : 이벤트가 가해지는 대상( 터치)
이벤트 핸들러 : 이벤트를 구현하는 것
** 자바스크립트 이벤트 핸들러의 이름은 직관적이다. (on + () / ex . onclick)
/* 변수 선언 형식
var 변수명;
or const, let */
변수를 따로 선언 안해도 =대입연산자를 사용하면 자바스크립트가 변수로 인지한다.
.write(); == System.out.println();
컴파일 되는 순서 : 자바 > 자바스크립트 > HTML
(언어의 번역 순서때문에 태그가 적용된다.
c : 함수
java : 메소드
css, javascript :함수, 메소드
ㄴ function
자바스크립트는 오버라이딩은 되지만 오버로딩은 되지 않는다. (함수를 호출할때 이름으로 호출하기때문)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script> function getSumNum(num1,num2){ var sum = num1+num2; return sum; } function show(){ var sum= getSumNum(6,9); window.alert(sum); } </script> </head> <body> <input type ="botton" value="Test" onclick="show()"> </body> </html>
경고창 3가지
1. alert() : 정보에 대한 전달을 목적으로 만들어짐.
2. confirm () : 메소드, 사용자에 대한 선택사항 결과를 받아주는 창, 응답에 대한 결과를 반환해야한다.(true, false)
3. prompt(): 많이쓰는 기능은 아니다. 반환 (값/ null)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script>
function show1(){
window.alert('이것은 브라우저의 기본 경고창');
}
function show2(){
var result = window.confirm('진짜 탈퇴하시겠습니까?');
if(result){
window.alert('탈퇴 완료됨~ ㅂ2ㅂ2');
}else{
window.alert('잘 생각하셨습니다~~');
}
//window.alert(result);
}
function show3(){
var result = window.prompt('아래에 이름을 입력해주세요.','여기에 입력');
window.alert(result);
alert('test');
}
</script>
</head>
<body>
<input type = "button" value="경고창1" onclick ="show1();">
<input type = "button" value="경고창2" onclick = "show2();">
<input type = "button" value="경고창3" onclick = "show3();">
</body>
</html>
'개발자 > 백엔드 웹 개발자 과정(국비)' 카테고리의 다른 글
| 221230_자바스크립트(4) (0) | 2022.12.30 |
|---|---|
| [CSS]2022/12/26~27 (0) | 2022.12.27 |
| HTML(3),css(1)_2022-12-26 (0) | 2022.12.26 |
| HTML<2>_2022-12-23 (0) | 2022.12.23 |
| 221222_HTML(1) (0) | 2022.12.22 |