· FRONT-END/└ JS(47)
-
[ JavaScript ] 태그 제어
환경 : Visual Studio Code [ 태그 제어 ]자바스크립트에서 태그를 "선택"해야 제어가 가능하다선택의 개념은 CSS와 동일하다 └ 단, 자바스크립트에서는 `document.querySelector("선택자")`로 선택해야 한다. [ 주요 코드 ] 안녕하세요! (+) 클래스 명을 활용하여 변화를 줄 타겟을 지정해준다. (q1) (+) onclick() 속성을 활용하여 클릭시 hello() 함수가 출력되도록 해준다. └ 호출된 hello() 함수의 결과가 q1 클래스가 있는 곳에서 출력된다. [ 전체 코드 ] 자바스크립트..
2024.04.29 -
[JavaScript] 함수 호출 기능
환경 : Visual Studio Code [ 함수(Function) ]혼자서 특정 기능을 처리하도록 구성된 코드 덩어리로, 원할 때 실행 가능화면에서 어떤 변화가 발생하면 함수가 실행되도록 구성하는 것이 중요 [ Event Binding/Handling ]미리 작성해둔 JavaScript 함수를 태그의 특정 상황에 연결 지음예) onclick : 클릭했을 때, oninput : 입력했을 때 (+) 콘솔 내에서도 hello(); 함수를 호출할 수 있다! [ 주요 코드 ] 자바스크립트 함수 안녕 안녕 ..
2024.04.27 -
[ JavaScript ] 조건문과 반복문
환경 : Visual Studio Code [ 스크립트에서 조건문, 반복문 써보기 ][ 집중적으로 볼 코드 ] (+) 자료형을 선언하는 것이 아닌 var를 사용한다. (+) 전부 자바 코드와 동일! (+) 콘솔로 출력[ 전체 코드 ] 자바스크립트 조건과 반복 개인 공부 기록용입니다:)
2024.04.26 -
[ JavaScript ] 변수 생성 및 데이터 정리
환경 : Visual Studio Code [ JavaScript ]javascript를 의도적으로 head 자리에 배치해서 가장 먼저 실행되도록 구현하는 것이 일반적이다.console.log("Hello Javascript!"); └ 자바의 System.out.println()같은 출력 명령으로 콘솔창에서 확인 가능하다.변수를 만들 때 자료형을 고려하지 않는다 (자료형 개념은 있지만, 구분하지 않음)코드를 실시간 번역하는 형태(스크립트 방식) [ 집중적으로 볼 코드 ] undefined변수에 값이 들어간적이 없음null참조 대상이 없음(-)Infinity무한대 [ 전체 코드 ] 자바스크립트의 데이터 ..
2024.04.25 -
[ JS / ajax ] 첨부파일 이미지에 대한 정보를 통해 이미지를 불러오기
환경 : Visual Studio Code / Spring Tools Suite4 첨부파일은 정보만 디비 실물은 하드디스크 회원가입 시 프로필 등록은 (1) 가입할 때 파일 고르고 (2) 마이페이지에서 파일 보여주고. (서버에서 가져 옴) => 이렇게 나눠서 진행되었던 것을 게시판에선 한 페이지 모든 동작이 이루어지게 한다. 게시판에서 사용자가 글을 작성할 때 이미지를 띄우려면, (1) 이미지의 주소를 알거나 (2) 이미지를 알거나 (2)번 방법처럼 이미지를 알게되면 이미지를 저장할 용량이 너무 커져서 디비에 들어가기에 무리가 있다. 따라서 이미지의 정보(주소, 크기 등)를 아는 것이 좋다. 이를 데이터베이스에 보관하는 것은 당연한거고.. 첨부한 이미지가 게시판의 글내용칸에 보여져야 함. => 이 효과를..
2024.03.07