자바스크립트 비동기 AJAX
2022. 3. 10. 17:45
Language/JavaScript
JS 비동기 통신 - (Asynchronous Javascript and XML)은 웹 페이지의 이동없이 필요한 데이터만 전송하는 기술입니다. 일반적인 경우 데어터 처리는 요청 순서대로 진행하지만 AJAX 는 순차적으로 진행하지 않습니다. 이런 방식을 비동기 방식이라고 합니다. 자바스크립트의 비동기 방식은 상당히 까다로운데, 이를 간단하게 사용할수 있게 해주는 최신 자바스크립트 API인 fetch API를 이용하도록 하겠습니다. API는 중간에서 작동하는 특정기능이라고 할수있습니다. 동기적이라는거는 한가지 작업을 순서대로 진행합니다. 원리를 보면 어디인가에 파일을 가져옵니다(지구반대편이라고도 할수있습니다.) 아무리 빨라도 1초이상은 걸립니다. 동기적으로 실행시키면 1다음에 2번에서 펜딩으로 3초 혹은 한..
DOM and BOM
2022. 3. 2. 15:51
Language/JavaScript
자바스크립트의 두번째 강력한 기능 Browser Object Model VS Document Object Model BOM 은 브라우저 객체 모델이라 하며, 내장객체들을 의미합니다. window, location, history,document 등이 포함되어있습니다. DOM은 문서 객체 모델이라 하며, document객체를 의미합니다. DOM은 요소(element)의 선택, 삭제 생성 등을 위해 사용합니다. DOM객체를 이용한 요소의 접근은 자바스크립트의 강력한 기능이며 반드시 외워야 하는 기능입니다. DOM
JS - 간단한 요소 선택
2022. 2. 24. 17:55
Language/JavaScript
예약 버튼을 클릭시 좌석이 최소 한개 이상 체크 되게 만들고 갯수가 없다면 경고창 을 띄우고 체크되어 있다면 배열에 체크된 좌석을 추가합니다. 마지막으로 JSON 형태의 문자열로 변환 시켜줍니다. 좌석: 1 2 3 4 5 6 7 8 9 예약하기 좌석과 버튼을 만들었습니다. var btn=document.getElementById("btn") //document.getElementBtId 를 //통해 아이디값을 가져옵니다. btn.onclick=function(){ //아이디값을 대입한 변수에 onclick 을 만들고? 함수를 대입합니다. var name=document.getElementsByName("seat"); //폼 안에 input태그에서 getelementsbyName 을 //통해 name에 저..
JS -이벤트 핸들러
2022. 2. 23. 21:55
Language/JavaScript
이벤트란? 화면에서 클릭이나, 동작시 발생하는 동적인 기능입니다. 자바스크립트의 첫번째 강력한 기능 이며 사용방법만 암기하면 충분합니다. 태그와 스크립트의 이벤트를 연결하는 방식에는 인라인 이벤트모델, 기본 이벤트 모델, 표준 이벤트 모델 이 있으며 이벤트 앞에 on을 붙입니다. 인라인 이벤트 모델 - 인라인 이벤트 모델은 html 요소에 직접 이벤트를 연결하는 방식입니다. 태그 안에 이벤트 종류가 들어가며 on 이 붙습니다. onclick 같은 이벤트 안에는 모든 스크립트 코드가 들어갈 수 있습니다. 예시 예시2 인라인이벤트 1. onclick 은 일반적으로 가장 많이 사용되는 이벤트 입니다. 2. 동일한 함수에 여러 이벤트를 걸어줄 수 있습니다. 3.이때 어떤 이벤트에 대한 동작인지 확인하는 키워드는..
JavaScript 기본 함수 2-1
2022. 2. 23. 21:44
Language/JavaScript
함수(화살표 함수) 화살표 함수 -ES6에 추가된 함수 내용으로 => 를 이용하는 함수 입니다. var compute = function(a,b){ return a+b; } 이게 이런식으로 바뀜니다. var compute=(a,b)=>a+b; var comput= fucntion(a,b){ var avg=(a+b)/2; return avg; } 이렇게 바뀜니다. var compute(a,b)=>{ var avg(a+b)/2; return avg; } 단일 명령문일 경우{} 를 생략할 수 있습니다. 스크립트 사용에 많은 변화를 줄 함수입니다. 즉시실행 함수 (function(){ }) 즉시 실행 함수- 함수 표현(function expression)은 함수를 정의하고 ,Or 변수에 함수를 저장하고 실행하는..
JavaScript-기본 2(함수)
2022. 2. 23. 20:56
Language/JavaScript
함수 (선언적 함수) 자바스크립트에서 함수는 1급 최상위 함수입니다 객체지향 프로그래밍 언어에서 메서드의 기능보다 훨씬 더 많은 기능을 한다. 자바스크립트 사용자 정의 함수 분류 종류 의미 사용자 정의 함수 선언적 함수 익명함수 사용자가 정의하는 함수 function name(매개변수) { //return true; } 선언적 함수 -반환 유형은 적지 않으며 매개변수도 적지 않을 수 있습니다. -매개변수는 데이터 타입을 적지 않습니다. -리턴은 적어도 되며 적지 않아도 상관없습니다. compute(); function compute(){ var x = 100; var y = 10; var result =x/y; console.log(result); } //compute(); compute(100,10);..
JavaScript 기초 1장
2022. 2. 21. 16:09
Language/JavaScript
오랜만에 글을 적습니다. 요즘에 깃을 많이 쓰려고 노력하다 보니 블로그에 소홀해졌네요 ~~ !! 다시 한번 제대로 적어보겠습니다. 자바 스크립트란? 프로토타입 기반 객체지향 언어 입니다. 스크립트 언어의 특성 상 플랫폼에 독립적이며 모든 웹 브라우저에서 동일한 실행 결과를 얻을수 있다. 무료이고 쉽고 자유롭게 사용할수 있습니다. 클라이언트에서만 실행되기에 정보를 서버에 보낼 필요 없이 처리할수 있다. 타입 체크가 철저하지 않습니다. 그런즉 변수들의 타입에 있어서 차이를 두지 않습니다. 자바스크립트 기반 프론트엔드 기술의 발전으로 근래, 순수 스크립트의 사용을 선호하게 되며 JAVA 보다 확장성이 뛰어난 언어입니다. 자바스크립트 개발자가 있을 만큼 사용방법이 다양하며, 반드시 익혀두어야합니다. JAVA 를..