Coding 공부/JavaScript15

• [javaScript_Web] 파일 시스템 경로 접근 불가 해결 방법 파일 시스템 경로 (D:/upload/) 는 브라우저에서 직접 접근 불가! 🙅‍♀️🙅‍♂️ (보안 문제!)혹시 이미지를 불러올 때 처럼 로컬 파일 시스템 경로를 사용했는데 이미지가 안 나온다면? 🤔 당황하지 마세요! 이건 보안상의 이유로 브라우저가 직접 파일 시스템에 접근하는 걸 막기 때문이랍니다. 😅 왜 안될까요? 만약 웹 페이지에서 아무 파일이나 마음대로 읽어올 수 있다면, 개인 정보 유출 등 심각한 보안 문제가 발생할 수 있어요! 😱 그래서 브라우저는 로컬 파일 경로를 통한 접근을 제한하고 있답니다.어떻게 해결하죠? 정답은 웹 서버를 통한 파일 제공! ✨  Flask 웹 서버 예제 코드 (Python): from flask import Flask, send_from_directoryapp .. Coding 공부/JavaScript 2024. 6. 18.

• [JavaScript] 구조 분해 할당 ✨ 자바스크립트 구조 분해 할당으로 함수 매개변수 깔끔하게 받기! 🧙‍♂️혹시 함수에 매개변수 여러 개 넘길 때마다 괄호 안에 쉼표 폭탄💣 투척하고 계신가요? 이젠 그런 걱정은 그만! 자바스크립트 **구조 분해 할당(Destructuring Assignment)**으로 함수 매개변수를 깔끔하게 받아보세요. 😎 구조 분해 할당이란?객체나 배열의 속성을 변수에 바로 할당하는 문법입니다. 마치 선물 상자🎁를 열어 내용물을 각각의 자리에 쏙쏙 넣는 것처럼, 복잡한 데이터 구조에서 필요한 값만 쏙쏙 뽑아낼 수 있어요! // ... (생략)uploadToServer(formObj).then(result => { // ... (생략) for (const uploadResult of result) {.. Coding 공부/JavaScript 2024. 6. 13.

• [JavaScript] DOM 객체 처리하는 방법 5단계 자바스크립트에서 DOM(Document Object Model) 객체를 처리하는 방법에 대해 5단계로 나누어 설명해드릴게요. 각각의 단계에서 자주 사용되는 메서드와 속성을 예시와 함께 설명하겠습니다.1단계: DOM 요소 선택하기DOM 요소를 선택하는 것은 첫 번째 단계입니다. 이를 통해 HTML 요소에 접근할 수 있습니다.document.getElementById(id): 특정 id를 가진 요소를 선택합니다.const element = document.getElementById('myElement'); document.querySelector(selector): CSS 선택자를 사용하여 첫 번째 일치하는 요소를 선택합니다.const element = document.querySelector('.myCla.. Coding 공부/JavaScript 2024. 5. 29.

• 

  [JavaScript_project] ToDoList (미니 프로젝트) 1. 기능 설명 할 일을 inputbox에 입력하고 엔터를 누르면 ToDoList에 추가된다. 체크 박스를 선택 후 '선택 삭제'를 누르면 선택한 리스트만 삭제된다. '제일 마지막 행 지우기'를 누르면 최근에 작성한 리스트가 삭제된다. '모두 지우기'를 누르면 작성한 모든 리스트가 삭제된다. 2. 깃허브 주소 https://github.com/cbjh-4/ToDoList 3. 웹 호스팅 주소 http://jinhyo44.dothome.co.kr/ 4. 주절주절... 아직 HTML + CSS + JavaScript 모두를 사용해 기능을 구현하는 것이 어려워 작은 프로젝트를 진행했다. JavaScript를 배우거나 웹 프론트엔드 공부를 하는 사람에겐 초급정도의 난이도로 도전해 볼만한 미니 프로젝트이다. 웹 .. Coding 공부/JavaScript 2024. 4. 2.

• [JavaScript] DOM 선택 메소드, Input type('text', 'checkbox', 'radio'), select, setAtrribute, Audio 예제 1. DOM(Document Object Model) 선택 메소드 1. getElementById 사용 목적: ID 속성을 사용하여 단일 요소를 선택합니다. 반환 값: 해당 ID를 가진 첫 번째 요소를 반환합니다. 만약 해당 ID를 가진 요소가 없다면 null을 반환합니다. 특징: ID는 페이지 내에서 유일해야 하므로, 이 메소드는 항상 단 하나의 요소만을 반환합니다. 2. getElementsByClassName 사용 목적: 클래스 이름을 사용하여 요소들을 선택합니다. 반환 값: 해당 클래스 이름을 가진 모든 요소를 담은 HTMLCollection을 반환합니다. 특징: 반환되는 HTMLCollection은 실시간으로 업데이트되는 살아있는(collection). 즉, DOM 구조가 변경되면 컬렉션 내용도.. Coding 공부/JavaScript 2024. 4. 1.

• 

  [JavaScript_Example] TrafficLight(HTML+CSS+JavaScript)#2 1. 코드의 목적 HTML 코드 안에 자바 스크립트를 넣어 보행자 신호등을 만들기 초록불 4초 >> 빨간불 3초 보행자 신호가 변경되도록 만들기. 초록불 일때 카운트를 보여주기 버튼을 누르면 시작 2. HTML+CSS+JavaScript 코드 타이머 Run! HTML 요소에 접근하여 이미지의 src를 변경하는 방법 document.getElementById("해당ID").src = "새로운 이미지 경로"; children[0] : Body영역에 div나 img에 id를 만들지 않을 경우 첫번째 자식 요소를 지칭한다. (두번째는 children[1]) 3. Advanced 빨간불도 타이머를 빨간색으로 만들기 시간초 설정을 YAML로 만들어 외부에서 수정가능 하도록 만들기 초록불이 몇 초간은 초록불이 들어오.. Coding 공부/JavaScript 2024. 3. 27.

• [JavaScript_Example] TrafficLight(HTML+CSS+JavaScript) 1. 코드 설명 신호등을 HTML+CSS로 만든다. div를 사용해서 사각형 디비전, 원(border-radius:50%) 디비전을 만든다. 버튼을 만든다. 버튼을 클릭하면(.button:active{}) 색상이 바뀌어 사용자가 클릭했는지 알 수 있게 만든다. 처음 신호등 원의 색상은 회색으로 시작한다. 클릭하면 3초간 초록불 점등 >> 2초간 노란불 점등 >> 3초간 빨간불 점등>> 3초간 초록불 점등... 계속 반복하도록 만든다. 2. 코드 초록색 노란색 빨간색 Run! window.onload 웹 페이지가 완전히 로드되고 초기화된 후에 실행되는 이벤트 핸들러 DOM 요소에 접근하거나 조작해야 하는 스크립트에서 중요한 역할 DivGreen, DivYellow, DivRed가 전역 변수로 쓰였기 때문에.. Coding 공부/JavaScript 2024. 3. 25.

• 

  [JavaScript] Jason, 영화 API 사이트에서 JASON 받아오기, html + css + javaScript 예제 1. Jason(JavaSvcript Object Notaion) 자바 스크립트 객체 문법으로 구조화된 데이터를 표현하는 언어이다. key : value 쌍으로 값을 가진다. 클래스의 멤버를 직렬화해서 저장한다. 파이썬의 dictionary와 유사하다. 1.1 예제 중괄호 안에 콜론(:)으로 키, 밸류값을 구분하고 콤마(,)로 요소를 구분한다. JASON 형식으로 클래스의 멤버값을 생성하며 초기화할 수 있다. JASON 타입을 리스트 안에 넣어 클래스 배열로 만들 수 있다. 객체 3개를 JASON 타입으로 생성하여 배열의 요소로 저장한 예제이다. push해서 JASON 타입 요소를 추가할 수 있다. movieList.push({title:title, director:director,running:runn.. Coding 공부/JavaScript 2024. 3. 25.

• 

  [JavaScript] 배열의 자료구조, 객체, 내장 객체(Math, Array, String, Date), 사용자 정의 객체 d0322 자바스크립트 수업내용 요약 1. 잡담 자바스크립트는 자료구조가 조금 달라 배열을 사용할 때 크기(인덱스)가 동적이고, 요소의 타입(데이터 유형)이 자유롭다. 자바스크립트의 배열은 해시맵으로 구현되어있어 인덱스를 자유롭게 추가하거나 제거할 수 있다. 1.1 자료구조란? C언어와 같은 저수준 언어에서는 기본적인 자료구조를 직접 구현하여 사용하는 경우가 많습니다. C언어는 표준 라이브 러리에서 몇몇 기본적인 자료 처리 기능을 제공하지만, 고수준의 자료구조(예: 리스트, 큐, 스택, 맵 등)는 직접 구현해야 합니다. 이는 C언어가 시스템 프로그래밍과 밀접하게 연관되어 있기 때문에, 메모리 관리와 성능 최적화에 더 많은 통제력을 필요로 하는 경우가 많기 때문입니다. 반면, 자바, 자바스크립트, 파이썬과.. Coding 공부/JavaScript 2024. 3. 22.

• 

  [JavaSrcript_Exam] (동적, 정적, 1차원, 2차원) 배열 연습 문제 1. 정적 1차원 배열 문제 저장된 학생 성적 총점, 평균 구하기. (학생 성적을 3개만 입력 받아 배열에 저장하기) 2. 동적 1차원 배열 문제 입력받은 학생 N개의 성적 총점, 평균 구하기 (배열 선언할 때, 배열 크기 정하지 않고 3개만 입력 받기) 3. 로또 복권 문제 1~47까지 랜덤 값을 받아 배열 6칸에 저장하기. 중복은 받지 않고 값을 추가하기 배열을 정렬해서 화면에 출력하기 4. 정적 2차원 배열 문제 4.1 - 학생 3명 각각의 성적 3개씩 배열에 저장하기 - 각 학생의 총점과 평균 출력하기 4.2 - 학생 3명 각각의 성적 3개씩 입력받아 배열에 저장하기 - 각학생의 총점과 평균 출력하기 4.1 이차원 정적 배열 예제 4.1 이차원 동적 배열 예제 Coding 공부/JavaScript 2024. 3. 18.

• 

  [JavaScript] 배열(개요, 출력, 내장 메서드, 동적 성질, 주요 메서드 예제), 이중 반복문 루프 종료 방법 1. 배열 자바의 ArrayList, 파이썬의 list와 유사하다. 여러 자료형을 저장할 수 있다. 인덱스와 요소를 정보를 가진다. 동적 성질을 가진다. 여러 내장 메서드가 있다. 1.1 배열의 출력 콘솔 창을 보면 정보가 다 나온다. document.write로 웹상에 출력하는 arr는 요소들만 나온다. 1.2 배열의 출력2 요소값 출력은 java, python과 비슷한 결과가 나온다. 자바 스크립트 배열은 객체가. 값도 있고 내장 메서드도 있다. 1.3 내장 메서드 배열 주요 내장 메서드 설명하는 글 링크 https://diary-developer.tistory.com/25 1.4 배열의 동적 성질 자바 스크립트의 배열은 자바와 다르게 동적 성질을 가진다. 객체로 취급되어 new 키워드로 생성자 호출.. Coding 공부/JavaScript 2024. 3. 18.

• 

  [JavaScript_Example] 템플릿 리터럴, 재귀함수, 콜백함수, 버튼 1. 템플릿 리터럴(Template literals) https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Template_literals Description 템플릿 리터럴은 이중 따옴표 나 작은 따옴표 대신 백틱(` `) (grave accent) 을 이용합니다. 템플릿 리터럴은 또한 플레이스 홀더를 이용하여 표현식을 넣을 수 있는데, 이는 $와 중괄호( $ {expression} ) 로 표기할 수 있습니다. 플레이스 홀더 안에서의 표현식과 그 사이의 텍스트는 함께 함수로 전달됩니다. 기본 함수는 단순히 해당 부분을 단일 문자열로 연결시켜 줍니다. 템플릿 리터럴 앞에 어떠한 표현식이 있다면(여기에서는 태그), 템플릿 리터럴은 "태그가 지정된 .. Coding 공부/JavaScript 2024. 3. 8.