목록프론트엔드/JavaScript (14)
끄적끄적 메모장
JavaScript(JS)와 JavaServer Pages(JSP)는 모두 웹 개발에 사용됩니다. 하지만 목적에 따라 몇 가지 중요한 차이가 있습니다. JavaScript(JS) : 클라이언트 측 언어로, 웹 브라우저에서 실행됩니다. 주로 정적인 HTML 문서와 달리 동적인 화면을 웹페이지에 구현하기 위해 사용하는 스크립트 언어이다. JavaServer Pages(JSP) : 서버측 웹 프로그래밍중 하나이다. HTML 코드 내에 직접 자바코드를 삽입하여 웹서버에서 동적으로 웹페이지를 생성해주고 웹 브라우저에게 돌려주는 Server측 언어이다.
함수란 하나의 특별한 목적의 작업을 수행하도록 설계된 독립적인 블록입니다. 이렇게 생성된 함수는 필요할 때마다 호출하여 해당 작업을 반복하여 수행할 수 있습니다. function addNum(x, y) { return x + y; } 또한 함수를 변수에 대입하거나, 함수에 프로퍼티를 지정하는 것도 가능하며, 함수는 다른 함수 내에 중첩되어 정의될 수 있습니다. 위 코드에서 addNum -> 함수이름 : 함수를 구분하는 식별자 x, y -> 매개변수 : 함수를 호출할 때 인수로 전달된 값을 함수 내부에서 사용할 수 있게 해주는 변수 reunrn -> 반환문 : 함수의 실행을 중단하고, 다음에 명시된 표현식의 값을 호출자에게 반환함 함수의 정의를 하였으면, 이제 함수를 사용해야 하니 함수의 호출을 할것입니다..
먼저 일반 함수에 대해서 알아보자면 1. this 동작 일반 함수는 호출되는 방법에 따라 'this' 가 동적으로 바뀔 수 있습니다. 메소드로 호출되면 주로 객체를 가르키고, 단독으로 호출되면 전역 객체를 가리킬 수 있습니다. function example() { console.log(this); } const obj = { method: example, }; obj.method(); // obj를 가리킴 example(); // 전역 객체를 가리킴 (브라우저에서는 window) 2. 생성자 함수 일반 함수는 생성자로 사용될 수 있습니다. 생성자 함수는 'new' 키워드로 객체를 생성할 때 사용됩니다. function Person(name) { this.name = name; } const person ..
프로그래밍 언어에서 데이터를 다루는 데 사용되는 두 가지 주요 유형인 기본타입과 참조타입에 대해서 알아보자. 1. 기본타입 ( Primitive Types) - 기본타입은 간단한 데이터 값을 저장합니다. - 일반적으로 정수, 실수, 문저, 불리언 들이 여기에 속합니다. - 변수에 직접 값이 저장되며, 해당 값은 스택 메모리에 저장됩니다. - 대표적인 예시로는 int, float, char, boolean 등이 있습니다. ex) int x = 5; // 기본타입 변수 int y = x; // 값이 복사됨 x = 10; // x의 값 변경해도 y에 영향 없음 System.out.println(y); // 출력: 5 2. 참조타입 ( Reference Types) - 참조 타입은 객체를 가르키는 주소를 저장합..
JS에는 Scope(스코프) 라는 단어가 있습니다. 이게 무엇인지 알아보도록 하자. Scope란? 변수에 접근할 수 있는 범위 입니다. JS에는 2가지의 스코프 타입이 있습니다. ( 전역 스코프 / 지역(함수) 스코프 ) 지역(함수) 스코프란? 함수가 선언되면 하나의 스코프가 발생하는데 이걸 함수스코프라고 합니다. 함수에서 선언한 변수는 해당 함수 내에서만 접근 가능합니다. function abc() { var aa = '12'; // 함수 내부에서 선언 } console.log(aa); // Uncaught ReferenceError: aa is not defined 위 이미지 처럼 함수 외부에서 aa를 호출하게 되면 변수는 지역 스코프 이므로 함수 내에서만 사용이 가능하여 undefine 이 뜹니다...
JavaScript는 Java에 비해서 객체지향을 지원을 하지 않으며 추상클래스와 추상메소드를 문법적으로 지원하지 않지만, JavaScript의 기본 문법을 활용하여 유사한 추상클래스와 추상메소드 동작을 구현하는 방법을 알아보자. 먼저 개념에 대해서 공부해보자. 추상메소드란? 부모 클래스에서 정의하며, 자식 클래스에서 반드시 오버라이딩해야만 사용할 수 있는 메소드를 말합니다. 그러므로 추상 메소드는 구현부가 없고, 선언부만이 존재합니다. 자바에서 추상 메소드를 추상 클래스란? 추상 메소드를 하나 이상 포함한 클래스이며, 정의되지 않은 추상 메소드를 포함하고 있으므로, 인스턴스를 생성할 수 없습니다. 그러므로 추상 클래스는 상속만 가능합니다. class AbstractClass { abstractMetho..
JavaScript에서는 여러가지 객체가 있습니다. 그중 먼저 window 객체에 대해서 알아보겠습니다. window 객체는 웹 브라우저의 창(window)을 나타내고 수정하는 객체입니다. window.open("star.html", "popup", "width=400,height=500,top=100,left=200"); 위 코드처럼 실행한다면 star.html의 정보가 넓이 400, 높이 500인 팝업창으로 상단에서 100 좌측에서 200 만큼 띄어진 창이 열려집니다. // 경고창 window.alert("설문을 시작합니다"); // 사용자로부터 데이터 입력받기 var userAge = window.prompt("당신의 나이를 입력하세요", ""); // 확인취소 var okCancle = windo..
문자열을 활용하여 여러가지 예제를 풀어보자 아래와 같이 전화번호의 뒷자리 4자리를 *으로 변경할 수도 있습니다. // 이름 입력받기 var userName = prompt("당신의 이름을 영문자로 입력하세요", ""); // Lee 입력 // 전화번호 입력받기 var userTel = prompt("전화번호를 - 없이 입력하세요", ""); // 01012345678 입력 // 이름을 대문자로 출력하기 document.write(userName.toUpperCase() + " "); // LEE 출력 // 전화번호 var result = userTel.substr(0, userTel.length - 4) + "****"; document.write("당신의 전화번호는 :" + result); // 010..