FRONT-END/JAVASCRIPT7 [JS] SpeechSynthesisUtterance API SpeechSynthesisUtterance - Web APIs | MDN The SpeechSynthesisUtterance interface of the Web Speech API represents a speech request. It contains the content the speech service should read and information about how to read it (e.g. language, pitch and volume.) developer.mozilla.org API에 대한 자세한 설명은 위의 링크에서 확인할 수 있습니다. SpeechSynthesisUtterance API 란? 해당 API는 웹 브라우저가 기본적으로 제공하는 API인데, 이 API를 사용하면 inp.. 2023. 4. 2. [JS] JSON의 정의와 함수 사용 방법 JSON 이란? 웹 브라우저 위에서 동작하고 있는 웹 사이트 또는 웹 애플리케이션(이하 Client)은 서버에 데이터를 요청하고 원하는 데이터를 받을 수 있는데 이 때 데이터의 파일 포맷은 여러가지가 있는데 그 중 하나가 JSON 이라고 할 수 있다. JSON의 장점 ㆍClient와 Server가 데이터를 주고 받을 때 사용할 수 있는 가장 간단한 파일 포맷 ㆍClient와 Server가 데이터를 주고 받을 때 직렬화(serialize) 하기 위해 사용 ㆍ텍스트를 기반으로 하고 가독성이 좋음 ㆍKey와 Value의 쌍으로 이루어져 있음 ㆍ프로그래밍 언어나 플랫폼에 상관없이 사용할 수 있음 직렬화 웹 사이트에 토끼라는 Object가 존재한다고 가정하자. 이 Object를 JSON 문자열로 변환하는 것을 직.. 2023. 2. 2. [JS] XMLHttpRequest 웹사이트(Client)가 데이터를 요청(Request)하면 서버에서는 적절한 데이터를 Client에게 보내줘야한다. 데이터를 보내줄 때는 서버와 통신을 해야 하는데 데이터를 쉽게 다룰 수 있는 방법이 XMLHttpRequst이다. XMLHttpRequst는 웹 어플리케이션을 개발하는 방법 중 하나인 AJAX(Asyncronous Javascript And Xml) 프로그래밍에 많이 사용되기도 하는 통신 객체이다. XMLHttpRequest에 대한 오해와 진실 Q. 객체 이름에 XML이 들어가니까 XML 데이터만 가져올 수 있나? A. 이름에 XML이 들어가지만 XMLHttpRequst는 XML 뿐만 아니라 모든 종류의 데이터를 가져올 수 있다. Q. 그렇다면 왜 XML이라는 이름을 쓰나? A. 생성 당시.. 2023. 2. 1. [JS] 특정 <tr>, <td> 값에 접근하기 위와 같은 테이블이 있고, 계산결과 버튼을 클릭하면 alert 창으로 결과값을 알려주는 프로그램을 작성해보려고 한다. 특정 의 특정 값에 접근하면 간단하게 만들 수 있는 프로그램이다. 1. 간단한 CSS가 포함된 테이블 만들기 첨자 a b a x b 0 5 33 1 12 14 2 18 32 태그의 id 프로퍼티에 id 값을 주고, thead 행을 제외한 각 행에 있는 계산결과 버튼을 누르면 onclick 이벤트 처리기가 발생 하도록 했다. 함수의 파라메터로는 행 번호를 주면 되겠다. 2. JS코드로 특정 의 특정 값 얻어내기 table 변수에 를 담고, table의 rows를 rowList에 담으면 HTMLCollection 타입으로 담기게 된다. 이 중에서 접근하고자 하는 행을 row 변수에 담은 후 .. 2023. 1. 31. [JS] JS를 이용하여 TABLE 만들기 위와 같은 테이블 형식의 데이터를 만들기 위해서는 HTML의 테이블 태그를 이용할 수 있지만 오늘은 JS를 이용하여 위와 같은 테이블을 만들어보려고 한다. 1. Internal 방식으로 테이블에 간단히 CSS 추가 2. JS 코드로 테이블 뼈대 만들기 여기서 createElement()는 말 그대로 HTML 요소를 생성하는 것인데 메소드의 파라메터로 HTML 태그 이름을 문자열 형식으로 넣어주면 된다. 그렇게 생성한 요소들을 변수에 담은 후에 appendChild()를 이용해서 테이블의 자식 요소들로 thead와 tbody를 생성해준다. 관리자 도구에서 element를 확인해보면 table의 뼈대가 잘 만들어진 것을 확인할 수 있다. 3. 테이블에 행과 데이터를 추가하기 // thead에 속하는 부분 l.. 2023. 1. 31. 이전 1 2 다음
