오늘도 삽질

JavaScript

Ajax 와 JSON 서버와 통신하기

Ajax 자바스크립트를 사용해 비동기적으로 서버로부터 데이터를 받을 수 있는 기술.서버로부터 웹페이지가 반환되면 화면 전체를 갱신해야 하는데 페이지 일부만을 갱신하고도 동일한 효과를 볼 수 있도록 하는 것.페이지 전체를 로드하여 렌더링할 필요가 없고 갱신이 필요한 일부만 로드하여 갱신하면 되므로 빠른 퍼포먼스와 부드러운 화면 효과를 기대할 수 있다. 개발자들이 사용할 수 있도록 각 브라우저들에서 제공하는 XMLHttpRequest 라는 함수가 있다. 이 함수를 사용해 아래와 같은코드를 작성해 서버로부터 데이터를 받아 올 수 있다. 아래 주소를 GET으로 요청하여 결과를 콘솔에 찍어 준다. 123456789 var xhr = new XMLHttpRequest(); xhr.onreadystatechande ..

Web

크로스 브라우징 [Cross Browsing]

크로스 브라우징 "크롬에서 잘 열리던게 익스플로어 에선 왜 안열리지?" 내가 실제로 처음에 웹개발 공부를하면서 이것저것 만들어 볼떄 실제로한말이다. 크롬에서 개발자도구가 편하다고 처음부터 끝까지 크롬으로만 작업하고 크롬으로만 테스트하면서. 마지막에 사파리나익스로 본다면 레이아웃이 틀어져 있고 폰트, 이미지 등.. 익스 구버젼에서는 가관이다. 간단한 사전적 의미로는 크로스 브라우징은 W3C에서 채택된 표준 웹 기술을 적용해 모든 브라우저에 다른 기종의 운용체계나 HTML 렌더링 기술로 웹페이지를 제작하는 방법론 모든 브라우저에서 동일한 결과가 나타나야 한다. 크로스 브라우징에 도움울 주는 몇가지 방법들을 알아보자. Can I USE https://caniuse.com/내가 작성한 javascript, cs..

JavaScript

[javaScript] 승부차기 게임 만들기 - 3

전에 스크립트 에서 jQuery 이용해서 코드를 조금 더 간결하게 만들수 있을 것 같아 jQuery 이용하고 새로운 기능을 추가했다.아무래도 기본 자바스크립트에서 문법인 documet.getElementById() , innerHtml 같이 길어질수 밖에 없다.jQuery의 '$' 의 핵심 기능은 원하는 DOM 엘리먼트를 셀렉트 하는 기능 이다. 아이디 같은 경우에도$('#kkr') 이렇게 짧게 표현 할 수 있는데 사용하지 않을 이유가 없다. 1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787..

JavaScript

[JavaScript] 승부차기 게임 만들기 - 2

저번에 레이아웃 구성에 이어서 스크립트를 보자. 구현은 JavaScript 기본적인 문법을 익히기 위해서 사용했다.. 중간중간 코드가너무길어지는 경우에는 jQuery를 이용하기도 했다. 우선 사용된 오브젝트와 배열을 보자. JavaScript 1234567891011121314var korea = { score : 0, percent : 0.75};var japen = { score : 0, percent : 0.7};var soccerGame = { jpScoreNumber: 5, krScoreNumber: 5} var krTeam = ["손흥민","조현우","황희찬","이승우","박지성"];cs korea 오브젝트에 스코어에 초기 값인 0 을 줬다. 슛을 눌렀을 때 한국의 슛 성공 확률은 0.75% ..