본문 바로가기
반응형

JavaScript36

jQuery의 사용(연결방법 포함) 해당 포스팅의 목차는 다음과 같다. 1. jQuery란? 2. jQuery라이브러리 연결 1) 파일 다운하여 연결하는 방법 2) CND활용 연결 방법 3. 문법과 선택자 1) 문법 2) 선택자 4. jQuery를 활용한 기능 구현 1) 무한 스크롤 2) 풀다운 3) 갤러리(배너) 5. 플러그인 1. jQuery란? 제이쿼리(jQuery)는 오픈 소스 기반의 자바스크립트 라이브러리입니다. 제이쿼리는 여러분의 웹 사이트에 자바스크립트를 더욱 손쉽게 활용할 수 있게 해줍니다. 또한, 제이쿼리를 사용하면 짧고 단순한 코드로도 웹 페이지에 다양한 효과나 연출을 적용할 수 있습니다. 이러한 제이쿼리는 오늘날 가장 인기 있는 자바스크립트 라이브러리 중 하나입니다. 이런 제이쿼리의 장점은 다음과 같다. 제이쿼리는 주요.. 2022. 2. 22.
타이밍 이벤트 & 단원 총정리 JS에서 애니메이션을 구현할 수 있는 타이밍 이벤트에 대해 학습하였고, JS파트의 총 내용을 활용한 예제 풀이를 통해 단원 복습을 진행하였다. 1. 타이밍 이벤트 1) 타이밍 이벤트란? js에서 애니메이션은 구조가 일반적으로 어렵다고 판단되어 단독으로 사용되기 보다, 추후에 라이브러리, 플러그인과함께 사용한다. 하지만 기본적인 구조 자체를 미리 파악해두면 나중에 라이브러리, 플러그인 등을 사용할때 내용을 파악하기가 수월하기에 이를 목적으로 학습한다. 타이밍 이벤트 함수에는 아래와 같이 두가지가 있다. 메서드명 설명 setTimeout() 부여한 시간이 흐르면 딱 한 번 실행 setInterval() 부여한 시간마다 반복적으로 실행 앞에 set이 붙어있음으로 setter같은 역할임을 짐작할 수 있고, 이를.. 2022. 2. 18.
BOM & Form BOM과 from을 통해 전달되는 value를 관리하는 방법에 대해 강의를 듣고, value를 이리 저리 옮기며 활용하는 여러 실습 예제를 통해 이해를 키웠다. 실무에 자주 사용되는 내용에 대해서만 간략하게 정리했기에, 아래 정리된 내용이 해당 단원의 전부가 아님을 알아야 한다. 1. BOM : 브라우저 객체 모델 1) BOM이란? 브라우저를 잘 사용하거나, 브라우저부터 어떠한 정보를 받아오기 위해 사용되는 것들로 객체 모델들이 이루어져 있으며, 브라우저마다 미세하게 다르기에 크롬 기준에 맞추어 작업을 하도록 한다. 브라우저창을 window라고 부르며 window는 계층 구조 중 가장 상위 개념이다. window의 하위에 document가 속해있다. 즉, 브라우저 객체모델 중 하나가 document이라고.. 2022. 2. 17.
이벤트 & DOM 이벤트의 개념, 이벤트 트리거의 종류, 이벤트 핸들러의 설정, DOM api활용, 콜백함수 등등 이벤트 전반에 관련된 내용들과 그에 대한 실습, 예제를 정리해보았다. 1. 이벤트 1) 이벤트란? 등록해둔 신호가 발생했을때 수행되는 일련의 과정을 이벤트라고 한다. 이때 신호(자극)의 개념은 트리거라고 하며, 키보드, 마우스, HTML DOM, Window 객체 등 다양한 타입이 존재한다. 일련의 과정은 핸들러라고 정리할 수 있으며, 실제 이벤트가 일어나는 내용. 즉, 반응이라고 할 수 있다. 이때, 트리거에서 언급했던 다양한 이벤트 타입 중, 가장 많이 사용되는 마우스와 키보드에 초점을 맞추어 예제를 풀며 실습해보았다. 2) 마우스 이벤트 마우스 이벤트의 종류는 다음과 같다. 0. 마우스 이벤트의 종류 1.. 2022. 2. 16.
객체(전역,Date,Math,Array) 객체에 대한 내용과 표준 객체 중에 자주 쓰이는 객체들에 대해 실습과 예제 위주로 내용을 포스팅 해보았다. 1. 객체(Object) 모든 객체들은 property(속성/멤버변수)와 method(기능)으로 이루어져있다. 예시를 들어 정리하자면 아래와 같다. //객체의 생김새 var person={//괄호 내부가 객체의 필드 name:'홍길동', age:'20', hello:function(){console.log('저는 '+this.name+'입니다');} } //속성접근 연산자(.)를 통해 속성(멤버)로 접근이 가능하다. person.hello(); //저는 홍길동입니다 console.log(person.name); //홍길동 아래와 같이 생성자를 만들어 객체를 생성하는 방법도 있다. //생성자의 매개변.. 2022. 2. 15.
개요부터 기본 작동까지 자바스크립트라는 언어 자체는 java와 굉장히 유사하여, 다른 부분만 짚어나가는 형식으로 수업이 진행되었고, 그 수업을 들은 내용을 정리한 포스팅이다. 때문에 자바스크립트를 구체적으로 설명하지는 않았다. 1. 개요 동적인 화면 구성에 도움을 주는 언어이며, 웹의 동작을 구현할 수 있다. 프로그램 언어 해석기(interpreter)가 코드를 직접 해석하여 바로 수행하는 형태로 진행된다. 컴파일 언어와 유사한 구조이다. 언어 해석기는 브라우저에 포함되어있으므로, 다양한 브라우저에서 실행해보는것도 중요한 포인트이다. 자바스크립트는 HTML의 내용, 속성, 스타일을 변경할수 있게 해준다. 실행 방식은 CSS처럼 내부 vs 외부가 있다. 2. 변수와 출력 1) 변수의 구분 자바스크립트에서 변수는 데이터타입(자료형.. 2022. 2. 14.
반응형

티스토리툴바