코린이의 기록

[javascript] Javascript 기초 본문

javascript,HTML,CSS

[javascript] Javascript 기초

코린이예요 2018. 7. 4. 14:13
반응형

환경 구성

1. 에디터 설치 : sublime, bracket, visual studio code 

-> visual studio code 설치


2. 확장 : 마켓 플레이스에서 설치 

- eclipse key map 설치

- open in browser 설치 : browser에서 오픈



※ 단축 키 

ctrl + space : 기본 tag들 생성됨

alt + 위,아래 방향키 : 라인을 이동시킴

ctrl + / : 주석 처리


3. 기본앱 Chrome으로 변경



http://unitel.co.kr/ 에서 개발자 도구를 클릭하면 404 not found가 나옴...




Javascript naming conventions

https://google.github.io/styleguide/jsguide.html




jquery library 추가

https://www.w3schools.com/JQuery/jquery_get_started.asp 를 참조한다.

<head> 사이에 아래 추가해주면 jquery 라이브러리를 사용할 수 있다.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

jquery 사용 전

document.querySelector("#userName").focus();

jquery 사용 후

$('#userName').focus();

jqery 사용전

var list = document.querySelectorAll("tr:nth-child(even)");
for(var element in list){
if(list[element].style){
list[element].style.backgroundColor='violet';
}
}

jquery 사용 후

$('tr:even').css('backgroundColor', 'pink');



jquery 초기화

// jqery 사용 시 초기화
$(document).ready(init);
function init(){
//case 1 : 메소드 호출
$('#myBtn').click(clickBtn);
//case 2 : bind style로 메소드 호출, http://api.jquery.com/bind/ 에서는 bind()에 대해서 권고하지 않음 version deprecated:3.0
$('#myBtn').bind("click", clickBtn);
//cas 3 : on style로 메소드 호출
$('#myBtn').on("click", clickBtn);
}


반응형
저작자표시 비영리 동일조건

'javascript,HTML,CSS' 카테고리의 다른 글

[HTML] <form:select> 과 itemValue & itemLabel  (0) 2018.10.08
[javascript] 모듈화 js 분리  (0) 2018.08.20
[javascript] Tomcat, JBoss 차이  (0) 2018.08.14
[JSP] ' WAS' 와 ' Web Server' 의 차이  (0) 2018.08.14
[JSP] setRequestHeader 에서 csrfHeader is not defined 오류 발생  (0) 2018.07.10
'javascript,HTML,CSS' Related Articles more
Comments