Java Script
: 웹 브라우저에서 많이 사용하는 인터프리트 방식의 객체지향 프로그래밍 언어 (객체화)
Java Script 선언
HTML에서 제공하는 <script></script>태그를 사용하여 자바스크립트 영역 설정
<script type = "text/java script">
자바스크립트 내용
</script>
-<head>나 <body> 안에 작성, html 태그영역 밖에도 작성이 가능하긴 함
Java Script 작성방식
1. inline : 태그내부의 이벤트 속성에 직접 Java Script코드를 작성하는 것, 간단만 구문, 양이한 두 줄 정도로 소양일 때 사용
-> <태그 명 on이벤트 = "함수명();">
<p onclick="alert('js세계에 오신걸 환영합니다.');">inline으로 자바스크립트 적용하기</p>
구문을 한 번 클릭하였을 때 경고 창이 뜨는 것이다.
2. internal 방식
페이지의 script태그안에 javascript코드를 작성하는것
-> <script> 실행할 소스코드 작성 </script>
<script>
alert("internal방식으로 script적용");
</script>
3. external 방식
자바스크립트 양이 많을 경우 외부 파일로 저장하여 작성
ooo.js 파일에 javascript코드를 작성하고 페이지에서 script태그를 이용해서 불러와(script src="주소") 사용 / 서버내부에 저장된 파일이나 외부(https...주소)에서 지원하는 파일 두개다 가능
-><script scr="경로"></script>
4. 스크립트를 지원하지 않는 브라우저 예외처리
-><noscript> 지원하지 않을 경우 출력문구 </noscript>
<noscript>
<p style="color:red;font-size:30px;">이브라우저는 스크립트를 지원하지 않습니다 다른 브라우저를 이용하거나 버전을 업그레이드하세요!</p>
</noscript>
데이터 입출력
-데이터 출력
스크립트에서 데이터를 출력하는 방식은 두개로 나눌 수 있음
1. 페이지에 출력하는 방법
2. 브라우저가 출력하는 방법(알림창, console창에)
1) 페이지 출력
-document.writer("출력구문 || 태그+출력구문")
: 브라우저 화면 상의 페이지에 값 출력
-태그선택.innerHTML="출력구문"
:태그 엘리먼트의 내용을 변경하여 출력
2브라우저 출력
- 알림창 출력 : alert("출력문구")
:내용을 메시지 창에 출력
-console창 출력 : console.log("출력문구")
: 개발자 도구 화면의 콘솔에 출력
-데이터 입력
1. 함수를 이용해서 입력받는 방법
prompt(), confirm()
2. input태그를 이용해서 입력 받는 방법
- confirm함수이용하기
: true/false를 반환해주는 함수
선택 -> 확인(true), 취소(false)
// console.log(confirm("당신은 19세 이상입니까?"));
- prompt() 함수이용하기
: 클라이언트에게 문구를 입력받아 반환하는 함수
//console.log(prompt("당신의 취미를 쓰세요"));
HTML태그 접근
javascript에서 태그는 하나의 객체로 본다.(DOM)
객체에서는 태그를 표현하는 properties(속성)가 있음
1. id값을 기준으로 가져오기
태그의 id속성에 있는 값을 기준으로 태그를 가져옴
document.getElementById("id속성 값");
-> id속성의 값이 일치하는 태그 <mark>한개</mark>를 가져옴.
<div id="test">div2</div>
<script>
var el=document.getElementById("test");
console.log(el);
el.innerHTML="이건 입력한값"
console.dir(el);
el.style.backgroundColor="red";
</script>
2. class값을 기준으로 가져오기
태그의 설정된 class속성 값을 기준으로 태그객체 가져오기
중복값을 허용 -> 다수가 있으면 다수의 태그객체를 불러옴
document.getElementsByClassName("class속성값");
3. tagName값을 기준으로 가져오기
document.getElementsByTagName("li");
4. name값을 기준으로 가져오기
document.getElementsByName("이름");
5. 선택자를 이용해서 태그를 가져오기
css에서 사용한 선택자를 이용해서 태그를 지정하여 가져오는 것
- #test -> id가 test인 태그
- .test -> class가 test인 태그
- [type=test] -> type속성이 test인 태그
- div>p -> div태그에 직접 연결된 p<br>
document.querySelector("선택자"); -> 한개의 태그만 가져오는것 다수가 있으면 첫번째 태그만 가져옴
document.querySelectorAll("선택자"); -> 다수의 태그를 가져오는 것
'Programming | Study > JS | jQuery' 카테고리의 다른 글
| Java Script 공부 5 (객체) (0) | 2021.06.15 |
|---|---|
| Java Script 공부 4 (배열) (0) | 2021.03.30 |
| Java Script 공부 3 (형변환, 연산자, 제어문) (2) | 2021.03.26 |
| java Script 공부 2 (변수) (0) | 2021.03.26 |
댓글