Front/Java Script (7) 썸네일형 리스트형 Ajax란 무엇일까? Ajax란? Ajax는 JavaScript의 라이브러리중 하나 서버와 데이터를 교환하는 기술의 하나 웹페이지의 일부분만 업데이트 할 수 있게 한다. 비동기식(Asynchronous Javascript And Xml)방식을 이용한다. XMLHttpRequest 객체를 이용한다. 예) 각종 사이트의 지도, 영화 순서, 오늘의 날씨 등 ※ 비동기식 방식은? 홈페이지를 리로드하지 않고 데이터를 불로 오는 방식이다. Ajax를 통해 서버에 요청하고 멈춰있는 것이 아니라 계속돌아가게 된다. 필요한 부분만 불러와서 사용할 수 있는점이 장점이다. Ajax 장단점 1. 장점 웹페이지의 속도 향상 서버의 처리가 완료 될때까지 기다리지 않고 처리가능 서버에서 Data만 전송해오면 되기에 코딩의 양이 전체적으로 줄어든다 기존.. Java Script 정규표현식 정규표현식(Regular Expression)이란? 특정한 규칙을 가진 문자열의 집합을 표현하는데 사용하는 형식 언어다. 주로 문자열의 검색과 치환을 위한 용도로 사용하며 간단하게 보면 웹에서 회원가입을 할때 비밀번호입력시 특수문자가 들어갔는지 각 조합이 맞았는지 등에 있어서 사용한다고 생각하면 된다. 역활 문자검색(search) 문자대체(replace) 문자추출(extract) 생성 방법 1) const regexp = new RegExp("$abc"); 2) const regexp = /abc.+/; 위의 두가지 방식을 이용하며 보통 2번방식을 좀더 선호한다고들 한다. 플래그문자 기호 내용 g 모든 문자와 여러 줄 일치(global) i 영어 대소문자를 가리지 않고 비교(ignore case) m 여.. Java Script 문서 객체 모델(Dom) 문서 객체 모델(DOM)이란? DOM은 Document Object Model의 약자다. 브라우저가 HTML 문서를 내부적으로 표현하는 표준 모델이며, 태그를 자바스크립트에서 이용할 수 있는 객체로 만드는 것이다. 노드란? 태그 및 태그 안의 텍스트나 속성 등 모두 node(노드)라 부른다. 문서객체 가져오기 1) ID로 찾기 html 문서에서 id를 찾기 let test = document.getElementById("test"); 요소가 가지고 있는 값 가져오기 alert(test.value); 2) 태그 이름으로 찾기 let test = document.getElementByTagName("div"); 말그대로 태그 ( div, ul, li, p ....등)를 배열에 넣어 반환을 한다. 3) 선택자.. Java Script 함수 및 객체 생성 함수란? function(함수)란 특별한 목적의 작업을 수행하도록 설계된 독립적인 블록이다 자바에서 메소드 만드는 것과 비슷하다 사용 방법도 메소드와 비슷하다. 다른점이 있다면 매개변수에 대해 따로 타입선언은 안한다. 매개변수에 있어 개수가 틀려도 오류는 나지 않고, 값이 할당되지 않았을 경우 undefined가 출력 된다. 함수 선언하기 기본 function show(){ 내용 }; 익명 함수 이름을 가지고 있는 형태는 해당 함수를 재귀적으로 호출하는데 사용하거나 디버거 등에서 함수를 구분할 때 사용한다. var show = function() { 내용 }; or var showScreen = function show() { 내용 }; 콜백 함수 비동기식으로 수행되는 함수의 수행시기를 맞추기 위해 se.. Java Script 브라우저 객체모델(Bom) 브라우저 객체 모델(BOM)이란? 브라우저의 정보에 접근 및 제어를 할 수 있다. 기능적인 요소들을 직접 제어하고 관리할 방법을 제공해준다. Window 객체 Location 객체 History 객체 1. Window 객체 웹 브라우저 창을 나타내는 객체로, 크기조절 / 새창 열기 / 창 닫기 등을 사용한다. 1) open() window.open( URL, 이름 , 속성 ); 1. URL : 오픈할 페이지의 주소 2. 이름 : 해당 페이지의 이름 3. 속성 : 너비, 높이, 메뉴바, 스크롤바 등 2. Location 객체 브라우저의 HTML 문서의 주소를 얻거나 페이지 이동관련 등에 사용할 수 있다. 1) href 주소를 배치해주지만 이전페이지로 이동이 가능하다. 2)reload() 새로 고침 3)re.. Java Script 내장 객체 내장 객체의 종류 Number Math Date String Array 1. Number 객체 자바스크립트에서 정수와 실수는 따로 구분하지 않는다. 메소드 코드 내용 Number.parseFloat() 문자열에 포함된 숫자부분을 실수로 반환 Number.ParseInt() 숫자부분 정수형태로 반환 Number.isNan() NaN(숫자가 아니다)인지 아닌지 검사 2. Math 객체 수학에서 자주 사용하는 상수 및 함수들을 구현 해 놓은 것 메소드 코드 내용 Math.min() 전달 받은 값중 최소 값을 반환 Math.max() 전달받은 값중 최대 값을 반환 Math.random() 0~1 사이 무작위 숫자를 반환 Math.floor() 전달받은 값과 같거나 작은 수 중 가장 큰 정수를 반환 Math.ce.. Java Script 자바스크립트 기본 Java Script란? 자바스크립트는 html을 프로그램 구현을 통해 동적으로 변경하거나 사용자와 상호작용을 담당 타입을 명시할 필요가 없는 인터프리터 언어다. 위에서 아래로 한줄씩 해석해서 사용하며 문법은 자바와 비슷하다.(대소문자 구별, for,while문 등, 연산자, 조건문 등등) 다만 이상한 개념들이 많다. (ex : 호이스팅등) html문서 내부에 자바스크립트 소스코드를 둘 수 있는데, 방법은 총 4가지 방법이 있다. 인터널(Internal) 방식 1 : 안에 사용 인터널 방식 2 : 안에 사용 익스터널(External) 방식 : 파일을 따로 만들어서 연결 (script src="") 인라인(Inline) 방식 : 각 html코드에서 속성에 onclick에 alert등을 이용해서 사용 다른점.. 이전 1 다음
