# 범위
- 자바크립트만의 특성, Html,Css,JavaScript 분류, JavaScipt의 세부적 역할
- JavaScript를 Html문서에 적용하는 방법( 4가지 )
- JavaScript 명령어1 : 다이얼 로그 ( 3가지 )
# 노트 :
● JavaScript의 특성, Html,Css,JavaSript 분류, JavaScript 세부적 역할 :
● JavaScript를 Html문서에 적용하는 방법( 4가지 )
● 무한 반복 애니메이션 구현 :
○ 요약 :
● 자바크립트만의 특성, Html,Css,JavaScript 분류, JavaScipt의 세부적 역할 :
1_JavaScript와 다른언어(C++/C99/Java)의 차이점 :
=> 컴파일 없이 브라우저 자체가 처리를 하여. 실행 , C언어 기반으로 제작됨
● 웹페이지의 부분 역할에 따라 Html, CSS, JavaScript가 나뉨 :
- Html : 웹페이지의 구조 , 내용
- CSS : 웹페이지의 모양(색깔 , 폰트 , 배치)
- JavaScript : 사용자의 입력 처리, 웹에플리케이션 작성, 웹페이지 동적 제어
● Html문서에 JavaScript 적용 방법 (4가지)
방법1_ Html 태그의 이벤트 속성에 직접 대입
방법2_ <script></script> 태그 내 함수 작성 후, 특정태그의 이벤트속성에 그 함수를 속성값에 대입
방법3_ <script>의 src 속성에 외부JS 파일 대입하여, 적용
방법4_ href 속성이 존재하는 태그에 직접 JavaScript 코드를 속성값으로 대입하여 적용
● JavaScript_다이얼로그 관련 함수 (3가지) :
함수1_ Prompt() :
- 매개인자 : "안내 웹폼", "디폴트 입력값"
- 반환값 (3가지) :
반환1_ 취소나 닫았을 시, => null
반환2_ 아무것도 입력 안하고, 확인 누를시 => ""
반응3_ 이외의 값 입력후, 확인 누를시 => 입력한 문자열
함수2_ Confrim() :
- 매개인자 : "안내 웹폼"
- 반환값 (2가지) true / false:
함수1_ alert) :
- 매개인자 : "안내 웹폼"
- 반환값 : X
#코드 와 출력장면 :
[연습1_다이얼로그1_prompt()] :
- 코드 :
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
|
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>prompt()</title>
<script>
let rel = prompt("고향을 적으시오.","서울");
if(rel==null){
document.write("빨갱이?");
}
else if(rel==""){
document.write("고향이 없는 분이군요.");
}
else{
document.write("이분의 고향은 "+rel+"입니다.");
}
</script>
</head>
<body>
</body>
</html>
|
cs |
- 출력장면 :
[연습2_다이얼로그2_contirm() :
- 코드 :
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
|
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>prompt()</title>
<script>
let rel = confirm("졸업 좀 해 X신아");
if (rel == true) {
document.write("말로만?")
}
else {
document.write("ㅉㅉ")
}
</script>
</head>
<body>
</body>
</html>
|
cs |
- 출력장면 :
[연습3_다이얼로그3_alert()] :
- 코드 :
- 출력장면 :
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>prompt()</title>
<script>
alert("아아 공습경보오~~!!");
</script>
</head>
<body>
</body>
</html>
|
cs |
'웹프로그래밍 > 웹프로그래밍수업' 카테고리의 다른 글
| (32)명품 웹프로그래밍_7장_코어객체와 객체 생성_1 (2) | 2024.10.20 |
|---|---|
| (30)명품 웹프로그래밍_6장_자바스크립트언어_2 (0) | 2024.10.13 |
| (29)명품 웹프로그래밍_5장_Open_Challenge (5) | 2024.10.12 |
| (28)명품 웹프로그래밍_5장_실전문제 (2) | 2024.10.12 |
| (27)명품 웹프로그래밍_5장_CSS3고급활용_3(출력장면은 없음 직접 코드 넣어서 해봐야 됨) (0) | 2024.10.08 |
