- JavaScript 기본 용어
Web (웹) : 인터넷 환경
Front end (프론트엔드) : 처음 직접 업무 처리하게 되는 앞단의 부분
html : 웹사이트 구조
CSS : 디자인
Back end (백앤드) : 후단에서 업무 처리되는 부분
변수 : 변할 수 있는 값
상수 : 변하지 않는 값
- jQuery 사용 방법 (jQuery 코드 선언)
1. 원격 jQuery 코드 직접 작성
<script src="https://code.jquery.com/jquery-3.1.1.min.js"
integrity="sha256-~~~~~~~~~~~~~~~"
crossorigin="anonymous">
</script>
<script> ~</script>
2. jQuery 파일을 직접 소스 프로젝트에 추가하고 해당 js 파일 경로를 호출
-> jquery-3.2.1.min.js 파일을 직접 소스 경로에 추가
<script src="js/jquery-3.1.1.min.js">
</script>
<script>
~
</script>
3. 자바스크립트 코드 선언 (HTML 파일 or js 파일)
- HTML 파일 안에 스크립트 문 작성
* test.html
<head> ~ </head>
<body>
~HTML 관련 소스~
<script>
자바 스크립트
</script>
</body>
- js 파일 만들어서 사용
(소스 프로젝트에 js 폴더 생성하여 별도로 ~.js 파일 생성하여 script 문 여기에 선언)
* test.html
<head> ~ </head>
<body>
~HTML 관련 소스~
<script src = "js/test_script.js"> // js 파일을 만든 경로를 선언
</script>
</body>
* test_script.js (소스 프로젝트 안에 js 폴더를 별도 만들어 js 파일을 별도로 생성)
script 문 선언
- jQuery 관련 문법
1. id 호출 : '$'을 쓰고 ( 열고 '#'을 쓴다음 각 해당 id를 작성한다.
- id 명 : id
// 'id' 요소에 해당
$('#id').css('font','bold');
// 전체에 해당
$(document).css('font','bold');
#id {
CSS 꾸미기 소스
}
2. class 호출 : '.' 을 사용하여 표현
- class 명 : test
$('.test')
.class {
CSS 꾸미기 소스
}
3. jQuery 와 JavaScript 비교
jQeury 작성 방식이 좀 더 간단합니다.
// jQuery 'on' 메소드를 사용하여 클릭 이벤트 처리
$('#test').on('click', clickTest);
// JavaScript 로 동일하게 선언
document.getElementById('test').addEventListener('click', clickTest);
3. 키보드 클릭 이벤트 선언
- 키보드 이벤트 설명
| keydown | 키보드 버튼 내려가는 순간 발생 |
| keypress | '1','KK' 등 출력 가능한 키에서만 동작, Enter, Esc 등의 키에는 반응하지 않음 |
| keyup | 눌린 키보드 버튼이 다시 올라오면서 발생 |
1> 키보드 이벤트 선언
$(document).on('keydown',keyEvent);
2> 키보드 'A' 를 클릭하면 clickA 함수를 호출
function keyEvent(event) {
if(event['key'] === 'A') {
clickA();
}
}
EX> jQuery 기본적인 클릭 처리
// change 라는 id를 클릭하면 popup 메소드를 호출
$('#change').on('click', popup);
// popup 메소드에서는 alert 창을 호출하고, background 색 변경 css 를 정의
function popup(){
alert($('#change').text());
$('#change').css('background','#1234df);
}
- 기본 메소드
1> 최대값 (max) / 최소값 (min)
Math.max(0, 1, 2, 3, 5);
-> 5
Math.min(1,2,3,4,5);
-> 1
2> 반올림 (round)
Math.round(10.3);
-> 10
Math.round(10.5);
-> 11
* 버림 : Math.floor();
* 올림 : Math.ceil();
3> 절대값 (abs)
Math.abs(-100);
-> 100
Math.abs(200);
-> 200
4> 문자열 자르기 (substring , substr 차이)
- substring 은 시작점과 끝점을 선언
- substr 은 시작점부터 길이(length)를 선언
text.substring(1,4);
-> text 문자열의 1번째 index 지점부터 4번째 index 지점까지 return
text.substring(3);
-> 끝점을 지정안하면 3번째 index 부터 문자열 끝까지 return
text.substr(2, 7);
-> substr 은 2번째 index 부터 length 길이가 7만큼 return (9번째 길이까지 출력)
$('test').attr : test 태그에 속성 지정하기
$('test').text : test 태그에 텍스트 받아오기
$('test').text('Hello') : test 태그에 텍스트 'Hello' 쓰기
$('test').html('<a> Hello </a>') : test 태그에 HTML 텍스트 쓰기
$('#test').css: test 에 css 속성 지정하기
'IT ▶ > Java & Web' 카테고리의 다른 글
| 자바 스크립트 함수 function() 종류, 지역변수, 전역변수 차이 (0) | 2020.10.18 |
|---|---|
| [Java Script 개념] 자바 스크립트 if문 '==' , '===' 차이 (0) | 2020.10.11 |
| Java String 문자열 메소드 종류 : charAt(), getBytes(), indexof(), length(), substring() (0) | 2020.08.02 |
| Java API 클래스 종류와 패딩(padding) 개념 (0) | 2020.07.21 |
| Servlet 관련 HTML 입력 태그 (Form, 체크박스, 라디오박스 등) (0) | 2020.07.15 |