웹 개발 기본지식 – 자바스크립트

여는 글

자바스크립트와 Jquery는 웹페이지에 생동감을 부여합니다. 웹페이지에서 사용되는 여러가지 기능을 구현하기 위해서는 HTML/CSS만으로는 어렵고, 상당부분 자바스크립트의 도움을 받아야 합니다.

 

특히 파이썬을 운용할 때에도 자바스크립트는 ⓐBeautifulSoup을 통해 웹사이트를 조작할 때, ⓑCSS 선택자 등을 사용하기에 복잡한 경우 자바스크립트의 XPath를 통해 특정 요소를 불러오거나, ⓒ이미 홈페이지에서 구현해 놓은 기능을 실행만 시키면 되는 경우에 [driver.execute_script(스크립트)]의 형태로 사용하기 위하여 이해가 필요합니다.

 

가령, 홈페이지에 있는 특정 단추를 눌러 자바스크립트를 실행해야 하는 상황에서, 단추를 직접 누르는 코드를 작성하는 방법이 까다로운 경우(경로나 ID로 특정하기에는 동일하게 해당되는 개체가 여러개 나온다던지), XPath로 접근하거나 연결된 스크립트를 직접실행해 버리는 방법을 사용할 수 있습니다.

 

하지만 본격적인 프로그래밍 언어인만큼, 마크업언어에 해당하는 HTML과는 달리 자바스크립트는 이해하기엔 다소 복잡한 편입니다. 특히 파이썬, C언어 등과 달리 웹페이지에서의 비동기 처리를 가정하여 만들어진 언어다보니 순차적 수행과는 조금 다른 구조를 띄는 경우도 꽤 있죠.

 

그래도 다행인점은 대부분의 요소들은 CSS나 HTML태그를 통해 처리가 가능하고, 자바스크립트를 사용하는 부분은 BS4 운용에 따라 최소화가 가능하다는 점 아닌가 싶습니다.

 

 

 

 

 

728x90

 

자바스크립트 기본정보

개요

1. C++과 유사한 문법적으로 유사한 구조를 가진 객체지향형 언어이며, 웹 브라우저 개발자 도구에서 인터프리터형 운용이 가능하다.
2. 실행문은 세미콜론으로 구분하고, 대소문자를 구분한다.
3. 동적 타이핑, 다소 느슨한 타이핑을 특징으로 한다. 느슨한 타이핑이란 ‘초기화 값을 통해 변수의 타입을 결정’한다는 의미이다(보통은 변수 선언시 함께 지정하는 편). 만약 엄격하게 문법 작성을 하려면 ‘use strict’ 라는 문구를 함께 사용하면 된다.
4. 함수 호이스팅 기능이 있어서, 어디서 함수를 선언하건 관계없이 선언된 함수는 우선적으로 정의된다.

기초 문법

1. 변수선언 - 동적 타이핑이므로 별도의 데이터 타입 명시 불필요
   • let 변수명 – 지역변수로 변수 선언(권장, 신식)
   • var 변수명 – 전역변수로 변수 선언(비추천, 구식)
   • 타입변환 – number / string / boolean / object / parseint / parsefloat
     • object : 객체로 변환
     • parseint : 정수형 타입으로 변환
     • parsefloat : 부동소수점 타입으로 변환
2. 출력
   • window.alert() - 윈도우 경고 박스로 출력
   • HTML DOM 요소를 이용한 innerHTML 프로퍼티 활용
   • Document.write() - 가장 마지막줄에 새로운 글귀 생성
3. 기타
   • 주석표현 : // 혹은 /* ~ */
   • 연산 : C++처럼 ‘+=’, ‘++’, ‘–’ 등의 연산도 가능함
     
     

jQuery란?

1. 개념
   • 자바스크립트 대표적인 라이브러리 중 1가지로, 과거 브라우저별 코딩이 파편화되어 있었던 시기에 클라이언트 측 코드 구현을 간소화하기 위하여 설계된 라이브러리이다.
   • 메서드 체인 방식 사용 : 여러기능을 한 줄에 나열가능하게 만들어 임시변수의 사용을 최소화
   • 크로스 브라우저 : 브라우저마다 다르게 발생하는 이벤트, 객체 등을 처리하고자 여러개의 메서드를 사용하지 않도록 라이브러리내 미리 코드로 구현해 둠
   • 사장분위기 : 최근 자바스크립트 기능 개선 및 표준화가 활발히 진행되어 브라우저별로 코딩할 필요성이 줄어듦에 따라 jQuery의 사용빈도는 점점 줄어들고 있음. 이는 같은 자바스크립트 라이브러리인 Angular 등도 마찬가지 (단, React는 여전히 사용빈도가 높다고 한다)
2. 기본사항
   • 불러오기
     • js파일을 다운로드받아 서버상 게시 및 로드
     • 특정 페이지에서 다운로드받아 실행시키기(CDN방식 / Content Delivery Network) : jQuery.com / Google CDN / jsDeliver CDN 등 사이트에서 제공한다.
   • 기본적인 코드 구조 : $(선택자).동작함수();
   • 특징
     • $기호는 jQuery를 의미하고, 라이브러리에 접근할 수 있게 하는 식별자임
     • 동작 함수를 정의하여, 선택된 요소에 원하는 동작을 설정
   • 요소 로딩여부에 따라 자바스크립트를 실행하는 방법
     • 자바스크립트의 경우 : window.onload = function() { JS code;}
     • jQuery의 경우 : $(document).ready(function() { jQuery Code; });