본문 바로가기

JavaScript

 (9)
[에러해결] Uncaught TypeError: $.ajax is not a function jQuery를 이용하여 웹페이지를 만들던 중, 알림창(alert)을 띄우지 못하는 문제가 생겨서 개발자 도구에서 확인해보았다. Uncaught TypeError: $.ajax is not a function 에러가 발생한것을 확인하였다. 에러 발생 원인은, 부트스트랩 cdn을 가져올때 jquery 부분에서 slim 버전으로 가져왔기 때문에 발생한 에러였다. [원인] jQuery 라이브러리 cdn을 선언해주었는데 여기서 .slim이 잘못된 부분이다. jquery slim버전을 사용할 경우 ajax를 지원하지 않기 때문이다. 그래서 .slim을 빼주어야 하고, 또 한가지 제거해야 하는게 바로 integrity속성이다. 여기서 사용한 integrity 속성은 해당 slim버전을 위한 값이기 때문에 slim버전..
[JavaScript] 자바스크립트 객체 (브라우저와 관련된 객체) 브라우저 관련 객체 window : 브라우저 창이 열릴 때마다 하나씩 만들어진다. 브라우저 창 안의 요소 중에서 최상위에 있다. document : 웹 문서마다 하나씩 있으며 태그를 만나면 만들어진다. HTML 문서의 정보가 담겨 있다. navigator : 현재 사용하는 브라우저의 정보가 들어 있다. history : 현재 창에서 사용자의 방문 기록을 저장한다, location : 현재 페이지의 URL 정보가 담겨 있다. screen : 현재 사용하는 화면 정보를 다룬다. 브라우저 관련 객체 - window 객체 window 객체에는 많은 프로퍼티와 메서드가 있다. 이번 포스팅에서는 자주 사용하는 윈도우의 open()메소드와, close()메소드에 대해 살펴보겠다. window객체의 open()메소드는..
[JavaScript] 자바스크립트와 객체 (Date, Math) 객체(object)란? - 프로그램에서 인식할 수 있는 모든 대상 - 데이터를 저장하고 처리하는 기본 단위 자바스크립트 객체 자바스크립트 안에 미리 객체로 정의해 놓은 것 - 문서 객체 모델(DOM) : 문서 뿐만 아니라 웹 문서 안에 포함된 이미지, 링크, 텍스트 필드 등을 모두 별도의 객체로 관리 - 브라우저 관련 객체 : 웹 브라우저 정보를 객체로 관리 - 내장 객체 : 웹 프로그래밍에서 자주 사용하는 요소를 객체로 정의해 놓음. 사용자 정의 객체 필요할 때마다 사용자가 직접 만드는 객체 객체의 인스턴스 만들기 객체를 사용하려면 일단 객체 인스턴스를 만들어야한다. - 객체는 객체 자체가 아니라 인스턴스 형태로 만들어서 사용. - 인스턴스 : 객체를 틀처럼 사용해서 같은 모양으로 찍어낸 것. new ..
[JavaScript] 자바스크립트 이벤트 이벤트란? - 웹 브라우저나 사용자가 행하는 동작 - 웹 문서 영역안에서 이루어지는 동작만 가리킴 - 주로 마우스나 키보드를 사용할 때, 웹 문서를 불러올 때, 폼에 내용을 입력할 때 발생 이벤트의 종류 * 마우스 이벤트 * 키보드 이벤트 * 폼 이벤트 * 문서 로딩 이벤트 마우스 이벤트 이벤트 설명 click 마우스 버튼을 클릭했을 때 dbclick 마우스 버튼을 더블 클릭했을 때 mousedown 마우스 버튼을 누르고 있을 때 mouseup 누르고 있던 마우스 버튼을 뗄 때 mousemove 마우스를 움직일 때 (터치스크린에서 동작하지 않는다) mouseover 마우스를 요소 위로 움직였을 때 (터치스크린에서 동작하지 않는다) mouseout 마우스를 요소 밖으로 움직였을 때 (터치스크린에서 동작하지..
[JavaScript] 함수(일반함수, 익명함수, 즉시실행함수, 화살표함수) 함수란? 자바스크립트에서 프로그램은 여러가지 명령이 연결되어서 원하는 동작을 처리하게 된다. 이렇게 처리해야될 여러 명령을 하나의 그룹으로 묶어놓은것을 함수라고 한다. 이러한 함수는 필요할 때마다 호출하여 해당 작업을 반복해서 수행할 수 있다. 함수 정의하고 실행하기 함수를 선언할 때는 function 예약어를 사용하며 중괄호를 사용하여 함수의 범위를 설정한다. 함수를 사용할 때는 선언한 함수의 이름을 입력하면 사용이 가능하다. 이를 함수를 호출한다라고 표현한다. 함수의 매개변수(parameter)와 인수(argument) 함수 정의 부분에서 괄호안에 지정해 놓은 값을 매개변수라고 한다. 그리고 함수를 호출할 때 괄호안에 입력값을 입력하여 호출하게 되는데, 이때 실제로 입력하는 값을 인수라고 한다. 즉시..
[JavaScript] 자바스크립트 기본 문법 (반복문) 반복문이 필요한 이유 위의 예제를 보면 똑같은 로직의 코드가 여러번 반복되고 있다. 이럴 때 반복문을 이용해서 소스코드를 줄일 수 있다. for문을 이용해서 같은 계산을 여러번 하는 것을 한 번의 코딩으로 해결할 수 있게 했다. 반복문은 for문, while문, do-while문이 있다. for문 for(초기값; 조건; 증감식) { 실행할 명령 } 중첩된 for문 중첩된 for문을 쓰는 예는 구구단이 있다. while문 조건을 체크하고 true라면 { } 안의 명령 실행 -> 조건이 false라면 명령은 한 번도 실행하지 않을 수 있음 while(조건) { 실행할 명령 } do~while문 일단 명령을 한번 실행한 후 조건을 체크한다. 조건이 true라면 { } 안의 명령 실행, false라면 { }을 ..
[JavaScript] 자바스크립트 기본 문법 (조건문) 조건문 if문과 if~else문 - 피연산자 2개의 값을 비교해서 true나 false로 결과값 반환. - 하나의 if~else문 안에 다른 if~else문을 넣을 수 있다. if (조건) { 조건 결과값이 true일 때 실행할 명령 } if (조건) { 조건 결과값이 true일 때 실행할 명령 } else { 조건 결과값이 false일 때 실행할 명령 } if~else문 사용 예 사용자가 입력한 숫자를 3의 배수인지 아닌지를 출력해주는 프로그램이다. prompt로 입력받은 userName을 3으로 나누었을 때 나머지가 0이면 3의 배수이고 나머지가 0이 아니면 3의 배수가 아니라고 알림창을 띄우는 프로그램이다. 여기서 주의할 점은, prompt창으로 입력받은 userName의 값이 null인지 아닌지를..
[JavaScript] 자바스크립트 기본 문법 (변수와 연산자) 변수 알아보기 변수란? - 변수(variable) : 값이 여러 번 달라질 수 있는 데이터 - 상수(constant) : 값을 한번 지정하면 바뀌지 않는 데이터 변수 선언의 규칙 * 변수 이름 - 영어 문자, 언더스코어(_), 숫자를 사용한다. - 첫 글자는 영문자, _기호, $기호를 사용한다. - 띄어쓰기나 기호는 허용하지 않는다. 예) now, _now, now25 (사용할 수 있음) 예) 25now, now 25, *now (사용할 수 없음) - 영어 대소문자를 구별하며 예약어는 변수 이름으로 사용할 수 없다. - 여러 단어를 연결할 때는 하이픈이나 언더스코어를 사용할 수 있고 중간에 대문자를 섞어 쓸 수도 있다. 예) total-area, total_area, totalArea 등 - 변수 이름은..

티스토리툴바