공학도의 잡다한 시선

[jQuery] 제이쿼리 선택자 사용예시들 #두 번째 오늘은 어제와 이어서 제이쿼리의 선택자들을 사용하는 방법예제들을 살펴봅니다. 그룹선택자를 사용해서 아이디와 태그를 선택한 모습입니다. 즉 위와 같이 여러개의 요소를 선택하는데에는 그룹선택자가 아주 제격입니다. 체이닝 기법은 계속해서 사용하고 있는 모습을 확인하세요. 체이닝 기법이 무엇인지 기억이안나신다고요? 이전 글(선택자)을 꼭 참고하세요! 다음으로는 바로 종속 선택자입니다. 위는 사용예시인데 자세히 보시면 tit 클래스가 2개지만 h1요소 이면서 클래스명이 tit인 녀석만 선택이 된 것을 확인할 수 있습니다. 그리고 중간에 공백이없습니다. 하위 선택자는 공백이 있으니 이를 꼭 명확하게 기억하셔야합니다. 이번에는 인접관계선택자에서 위에보이는 것은 부..

[jQuery] 제이쿼리 선택자 사용예시들 제이쿼리에서 제공하는 아주 멋있는 선택자의 사용예시들을 한 번 살펴보도록 하겠습니다.선택자 제이쿼리에서는 선택자를 사용해서 동적으로 스타일을 변경하여 적용할 수 있습니다. 즉 HTML태그에 있는 문서객체모델(html,body,head) 기능과 속성 등을 활용할 수 있습니다. 문서객체에서 모든 태그는 객체라고 부르게됩니다. 태그(기능,속성) 입니다. 위에서 빨간 네모를 제거하고 사용하게되면 스크립트가 먼저호출 된 뒤에 body가 호출되어 h1생성되기 때문에 제대로된 객체를 선택할 수 없습니다. 그렇기 때문에 $(function(){})으로 감싸서 코드를 작성합니다. 또는 $(document).ready(function(){}); 이런 방식으로 사용을 해주어야합니다..

[jQuery] 제이쿼리 기본개념, 사용환경만들기 jQuery(제이쿼리)는 자바스크립트로 만들어진 라이브러리 언어로 자바스크립트에서 발생하던 호환성문제(크로스 브라우징)를 해결할 수 있으며, 여러가지 불편한 점들을 개선하였기에 사용이 편리하고, 애니메이션 효과 등의 구현이 자바스크립트로는 어려웠지만 쉽게 해주는 아주 편리한 라이브러리입니다. 장점 중에 하나는 CSS의 적용이 가능하고 DOM을 쉽게 할 수 있다는 것 입니다. DOM조작이란 html에서 지정한 ID를 사용해 기능을 추가하는 등의 작업을 가리킵니다. 또한 버그가 별로없으면 여러 사용자를 보유하고 있으므로 커뮤니티에서 활발하게 좋은 개발관련 정보들이 나오고 있습니다. 그리고 제이쿼리에 없는 기능은 플러그인을 추가하여 사용할 수 있습니다. 예로는..

[Javascript] 함수(function), 호이스팅(hoisting) 기술, 생성자 자바스크립트에서의 함수 정의와 사용방법에 대해 글을 써내려가 보겠습니다.function 함수명(){ 코드 정의부 } 위와 같이 function키워드를 사용해서 함수를 정의해 주시면되겠습니다. 또는 변수에 그냥 함수명이 없는 함수를 바로 대입할 수 있습니다. 이 것을 익명함수라고 합니다.호이스팅(hoisting) 기술 호이스팅기술이란 함수의 선언부가 있지만, 정의부는 아래에 있는경우 정의문을 찾아서 함수를 실행해주는 기술입니다. 그러나 익명함수의 경우에는 호이스팅기술이 적용되지 않습니다. hoist 뜻은 밧줄로 들어올리다 라는 의미를 가지고 있습니다. 즉 아래에 있는 정의 부를 찾아와서 끌어와서 실행하는 것이라고 생각..

[Javascript] Screen, location, history, navigator 이번에는 자바스크립트의 객체에 관련된 속성과 매서드들을 학습해보도록하겠습니다.[Screen 객체] 사용자의 화면정보를 제공할 수 있는 객체입니다.screen 객체의 매서드.width 화면의 너비를 반환해준다..height 화면의 높이값을 반환해준다..availWidth 작업표시줄을 뺀 화면의 너비를 반환해준다..colorDepth 해당 모니터가 표현할 수 있는 컬러 bit를 반환해준다.[location 객체] 유저의 브라우저와 관련된 기능을 제공하는 객체입니다.location 객체의 매서드 및 속성.href : URL 주소값을 가져오거나 설정합니다. .hash : URL의 해시값을 받아옵니다..hostname : 호..

[Javascript] 브라우저 객체 모델 (BOM, Browser Object Model) 함수들 이번 글에서는 자바스크립트의 브라우저 객체 모델에 대해서 알아보도록 하겠습니다. 브라우저 객체는 말 그대로 브라우저에 내장되어있는 객체라는 말입니다. 위 그림처럼 계층구조가 나타나게 되어있으며, Window가 최상위 객체로 존재하고 밑에는 여러가지 객체들이 있습니다. 그 중에는 우리가 익숙한 document객체도 존재합니다. 이 코드는 윈도우 객체의 매서드 중에서 open이라는 매서드를 사용하는 코드예시입니다. Window.open매서드는 팝업창을 띄워주는 매서드입니다. 첫 번째 인자로는 html경로, 두 번째는 해당 팝업창의 이름, 그 다음인자들은 크기가 되겠습니다. 요즘에는 팝업창을 기본적으로 차단시키..

[Javascript] prompt, confirm 그리고 객체 기본prompt 프롬프트는 자바스크립트에서 입력창을 띄우게됩니다. 사용예시 var r=prompt("입력","0"); 이때 0은 기본적으로 넣을 값입니다.confirm 컨펌은 확인,취소 버튼이있는 창을 띄우게됩니다. 이때 확인을 누르면 true, 취소를 누르면 false값이 반환되어 저장됩니다. 자바스크립트 객체(Javascript object) 자바스크립트는 객체지향언어입니다. 그렇기 때문에 속성(프로퍼티)와 함수(매서드)로 이루어지는 객체가 존재합니다. 가장 기본적인 객체가 바로 document객체로 우리가 출력시에 document.write()를 사용한 것이 그 예시입니다. 객체의 종류는 크게 3가지로 나눌 수 있습니다. 내장객체, B..

[Javascript] 자바스크립트 변수와 연산자 기본 자바스크립트에서 변수에 대한 내용을 간단하게 정리하고있는 글입니다. 자바스크립트에서의 변수선언은 아래와 같이 합니다. var [변수명]; var [변수명]=[값]; 변수에 저장될 수 있는 값은 문자형, 숫자형, 논리형(Boolean), 빈데이터(undefined)가 존재합니다. 문자형은 큰따옴표나 작은 따옴표로 감싸서 표현, 숫자형은 말그대로 숫자입니다. 그러나 만약 큰따옴표로 감싸져있는 숫자문자열은 Number("123")을 통해서 문자열에서 숫자로 변환해줄 수 있습니다. 논리형(불리안)데이터는 true나 false로 나타내어집니다. Boolean()매서드는 0, null, undefined, " "(빈문자) 를 false로 처리하고 나머지는 모두..