Tue/Feb/24 [JavaScript/jQuery]
Day39. JavaScript, jQuery 기초
Notion Page : https://www.notion.so/Tue-Feb-24-JavaScript-jQuery-Day39-JavaScript-jQuery-e5d9c851df7645d7b0fe1a8ba4b2bd34
JavaScript에서 선언
변수는 데이터 타입이 없고 var로 선언
함수는 function 함수명(매개변수) {} 로 선언
HTML 내에서 <script type="text/javascript"></script> 안에 선언
예)
// alert에서 숫자 입력은 불가, 문자열만 가능
function fnc1() { alert("경고창", "경고메시지") }
<input type = "button" onclick="fnc1()">
jQuery
JS를 보다 쉽게 쓸 수 있도록 만든 것, jQuery.js 파일 하나 짜리, 모바일용은 jQuery-min.js
동시대에 발생한 Sencha Touch 는 기능이 많아서 많이 썼으나, 너무 무거워서 잘 안쓰게 됨
jQuery를 기능별로 특화시킨 것 (나왔다가 금방 사라지는 것도 많아서 새로운 것 공부는 좋지만 너무 깊게는 굳이 필요 없다)
- DB 전문 : Node.js (원래 MySQL 까지만 사용하나, 오픈소스를 수정하여 Oracle도 접속가능하게 만든 소스도 일부 있으나 불안정)
- Web화면 전문 : React.js, Vue.js, Angular.js(잘 안씀)
※ 빅데이터 분야를 원한다면 Linux ; Ubuntu, RedHat(실무에서 사용) - CentOS(RedHat의 오픈소스 버전), Python / R 필수, 행렬 연산/벡터 공부(머신러닝에 필수)
※ 응용프로그래머를 원한다면 Spring은 무조건 해야 + AWS(자격증) + React.js + Node.js, 응용프로그래머로서 빅데이터 시스템 개발 위해서는 Linux, Hadoop 공부
당장 머신러닝/딥러닝 직접 다루는 직무 취업은 어렵다. 대신 데이터 전처리 직무 (Python)는 당장 수요가 꽤 있음!
서울에만 약 1천여개 IT학원, 응용프로그래머 분야만으로는 앞으로 경쟁 더더욱 치열해짐, 그나마 머신러닝/딥러닝 분야는 상대적으로 널럴하므로 강사님 개인적으로 추천
기능
DOM 구조
<html> <body> <div id='you'> </div> <div id='my'> </div> </body> </html>
속성 / 꾸미기 / 특수효과 애니메이션 기능 등
이벤트
Ajax 지원 - 이종간 언어 데이터 교환 지원, 주로 json 방식 이용
Json 구조 ; CSS의 <style> 방식과 유사
{변수 : 값, 변수 : 값}NoSQL / MariaDB도 유사한 구조
빅데이터에서는 방계형(table style) 방식이 아닌 NoSQL-MongoDB 사용, Oracle의 MariaDB(MongoDB+MySQL)
함수 활용 가능 - 확장성, 브라우저 버전에 따른 유틸리티 제공
JavaScript Plugin
사용방법
하나의 JavaScript 파일로 존재
두 가지 스타일
- $ 함수 이용
$("div.test").add("p.quote").addClass("blue").slideDown("slow")- $. 붙은 함수
$.each([1,2,3], function() {
document.write(this+1);
});
jQuery의 사용
<script src="">를 통해 컴퓨터 내의 파일 또는 온라인의 js를 import
<script src="jquery-1.6.2.js" type="text/javascript"></script>
// 또는
<script src="http://code.jquery.com/jquery-latest.js" type="text/javascript"></script>위에서 js 파일 import 한 후 아래 <script></script> 내에 작성
<script type="text/javascript">
$(document).ready(
function() {
}
);
</script>
SYNTAX
- $( expression, context )
- $( HTML_languages )
- $( elements )
장점
- 가볍고 편리
- for / if 를 단 몇 줄로 줄일 수 있음
- JavaScript에 비해 훨씬 짧고 간단한 코드
- 불필요한 소스를 줄일 수 있음
- 최근 대다수 웹페이지들이 jQuery로 이루어지기 때문에 front-end 직무에서 반드시 잘 써야함
- 호환성 : 모든 browser에서 동일하게 적용됨, PC-모바일 모두, 웹표준
선택기
- 태그 : 특정 태그 모두 선택
- 태그.class : 특정 태그 내 특정 class
- 태그#id : 특정 태그 내 특정 id 선택
- 요소1 요소2 : 모든 자식 요소~손자 요소까지 선택
- 요소1 > 요소2 : 바로 아래 나오는 자식 요소 선택
- 요소[특성] : attribute 가 있는 요소 선택
- $(input[type]) : input 중 type 이 있는 요소만 선택
- 요소[특성=값] : 속성과 값이 일치하는 요소 선택
- $(input[type="text"]) : input type이 text 인 요소만 선택
- 요소[특성*=값] : 값이 포함되는 요소 선택
- 요소[특성$=값] : 값으로 끝나는 요소 선택
- $(a[href$=jsp]) : <a> 중 href 값이 jsp로 끝나는 요소 선택
- 요소[특성^=값] : 값으로 시작하는 요소 선택
- $(a[href^=list]) : <a> 중 href 값이 list로 시작하는 요소 선택
필터링 표현식
- first / last
- not('')
- even / odd : 짝수 / 홀수 요소
- eq(index) / gt(index) / lt(index) ; 주어진 index에 해당하는 / 큰 / 작은 요소
even/odd example)
<head>
<title>TEST4</title>
<style type="text/css">
.redColor {background-color: red; }
.cyanColor {background-color: cyan; }
</style>
<script src="jquery-1.6.2.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$('tr:odd').addClass("redColor");
$('tr:even').addClass("cyanColor");
});
</script>
</head>
<body>
<table width="100%" border="1">
<tr><td>0</td></tr>
<tr><td>1</td></tr>
<tr><td>2</td></tr>
<tr><td>3</td></tr>
</table>
</body>
* 미디어 쿼리 : 실행된 미디어의 디바이스 종류를 알아내는 쿼리
Contains (특정 선택기 필터 적용)
contains(text) : 지정한 텍스트 포함하는 요소들과 일치 여부
Chain : method chain
- nth-child(index/even/odd) : 자식 중 index 로 지정된
- first-child
- last-child
- only-child
<script type="text/javascript">
$(document).ready(function() {
$("td:contains('RedPlus')").siblings().addClass('redColor').parent().find('td:eq(0)').addClass("blueColor");
});
</script>
DOM 접근방법
Bind : method로 동적 이벤트 부여
<script type="text/javascript">
<!--
$(function() {
$('#btnClick').bind("click", function() {
alert('클릭됨');
});
$('#btnClick').bind("mouseover", function() {
document.getElementById('btnClick').style.backgroundColor = 'red';
});
$('#btnClick').bind("mouseout", function() {
$('#btnClick').get(0).style.backgroundColor = 'blue';
});
});
-->
function fn1() {alert('클릭됨');}
function fn2() {document.getElementById('btnClick').style.backgroundColor = 'red';}
function fn3() {$('#btnClick').get(0).style.backgroundColor = 'blue';}
$(document).ready(
function() {
$('#btnClick').bind("click", fnc1);
$('#btnClick').bind("mouseover", fnc2);
$('#btnClick').bind("mouseout", fnc3);
}
)
</script>위의 코드와 아래 코드와 동일한 내용이지만, 가독성은 아래 코드가 훨씬 좋다
bind 함수 없이 변수명에 바로 event를 걸어도 가능하지만, 추후에 이벤트 해제를 위한 unbind 코드를 설정하기 위해 사용함
Style 관련 함수
- css() : 일치된 요소의 스타일 속성 반환
- css(properties) : 일치된 요소의 스타일 속성을 키/값 개체로 반환
- css(name, value) : 일치된 요소의 스타일을 키/값으로 설정
- addClass(class) : style 명이 미리 있을 것을 전제로, 일치된 요소에 지정한 클래스 추가
- hasClass(class) : 스타일 있는지 확인
- removeClass(class) : 스타일 제거
- toggleClass(class) : 지정 클래스 토글(있으면 제거, 없으면 살림)
This
this = DOM 객체, 이벤트가 발생한 객체
$(this) = 현재 이벤트가 적용된 객체 DOM을 jQuery 객체로 반환
this.id = DOM 개체 중 클릭된 요소를 알고자할 때
Toggle
$(document).ready(function() {
$('#btn').toggle(
function() {
$('#myLayer').addClass("hidden");
},
function () {
$('#myLayer').removeClass("hidden");
}
);
}); function f1() { $('#myLayer').addClass("hidden"); }
function f2() { $('#myLayer').removeClass("hidden"); }
$(document).ready(function() {
$("#btn").toggle(f1, f2);
});Toggle은 웹 개발에서 매우 자주 쓰이는 코드, 잘 알아두자
위 코드와 아래 코드 결과는 동일
ToggleClass
$(document).ready(function() {
$('#btn').click(function() {
$('#myLayer').toggleClass('hidden');
})
});add/remove 에 한해 한번에 해결 가능
One
bind / click 과 달리 단 한번만 실행 후 이벤트 해제
CSS functions
<script type="text/javascript">
$(document).ready(function() {
$('div.button').click(function (){
var $region = $('div.region');
var currentSize = $region.css('fontSize');
var num = parseFloat(currentSize, 10);
var unit = currentSize.slice(-2);
if(this.id == 'goBig') {
num *= 1.5;
} else if (this.id == 'goSmall') {
num /= 1.5;
}
$region.css('fontSize', num+unit);
});
});
</script>$region : 다른 변수와는 달리 CSS 함수 연산을 할 수 있는 jQuery 객체
parseFloat : fontSize는 기본적으로 ~px 형태로 되어있기 때문에 뒤에 px를 버리기 위해
unit / slice : 확인용 코드, fontsize에서 px만 출력
브라우저 버전 확인
<script type="text/javascript">
$(document).ready(function() {
alert('현재 웹 브라우저 버전은 : ' + jQuery.browser.version + '입니다');
});
</script>일반 사용자용 버전이 아닌 개발용 버전