본문 바로가기

전체 글89

JavaScript<마우스 클릭 연습> 마우스 클릭 연습 1.아래와 같이 이미지 객체 배열로 사진 이미지 저장해두고 let img = new Image(); img.src="media/donkey.png" 2.document.images[] 문서에 있는 모든 이미지를 담고 있다고 해서 활용하니 코드가 훨씬 더 짧아졌다. 3.아래 테이블 표 만드는 것은 일일이 하지 않고 element 생성해서 할 수 있다고 하는데 다음에 한 번 시도해볼 생각 2023. 2. 22.
자바스크립트 <겜블링 게임> 갬블링 게임 각 숫자를 클릭하면 0에서 2사이의 난수로 바뀝니다. 모두 같은 수가 나오면 승리합니다. 0 0 0 ​ 직접 실행해보기(한 개만 눌러도 fail이 뜨는 버그 확인) HTML 삽입 미리보기할 수 없는 소스 결과화면 1.초기 2.성공했을 때 2023. 2. 20.
템플릿 리터럴(Template literals) - 백틱(`)활용 템플릿 리터럴은 내장된 표현식을 허용하는 문자열 리터럴이다. 백틱은 우선 맥북에서는 option키과 원화키를 같이 누르면 생긴다. 백틱을 사용하면 줄바꿈과 표현식을 사용할 때 일반 String과 차이점이 생기는데 아래에서 예를 통해 살펴보자면 줄바꿈 기능 우선 일반적으로 할 때 개행문자를 이용해서 이렇게 나타내는 반면에 console.log("첫번째 줄\n" + "두번째 줄"); //첫번째 줄 //두번째 줄 백틱을 사용하면 console.log(`첫번째 줄 + 두번째 줄`); //첫번째 줄 //두번째 줄 위와같이 개행문자 없이 같은 결과를 얻을 수 있다. 표현식 삽입 일반적으로 표현식 삽입할 때 +를 이용해서 아래와 같이 표현하는데 var a = 1; var b = 2; console.log("3" + .. 2023. 1. 28.
CGI(Common Gateway Interface)란 무엇인가? 1.정의 CGI란 'Common Gateway Interface'의 약자로, 웹 서버와 게이트웨이 사이에서 정보를 주고받는 데 사용하는 인터페이스 CGI는 웹 브라우저의 요청에 따라 웹 서버가 프로그램을 호출하는 장치, 프로그램은 입력 내용에 따른 결과를 HTML형식으로 반환 #게이트웨이는 호환성이 없는 여러 통신망의 프로토콜 변환을 수행하는 장치 #인터페이스는 상호 간의 정보 교환을 위해 만들어진 프로토콜 2.설명 위의 정의가 한 번에 와닿지 않을 수 있어서 내가 이해한 대로 풀어쓰자면 정적페이지와 달리 동적페이지를 생성하려면 사용자가 입력한 정보를 처리하기 위해 프로그램이 필요한데 여기서 웹 서버와 그 프로그램 간의 통신을 위해 사용되는 것이 CGI(Common Gateway Interface) #동.. 2022. 12. 27.
[2022]Local Storage 알아보기 Local Storage는 웹브라우저에 있는 작은 DB라고 생각하면 되는데 우선 개발자 도구 들어가서 직접 저장된 데이터를 확인할 수 있다. 왼쪽 보면 Storage 아래에 Local Storage를 확인할 수 있는데 처음에는 저장된 것이 없으니 Key와 Value 값이 모두 비어있는 게 정상이다. 값을 채워넣기 위해서는 텍스트 에디터를 이용해서 Key와 Value값을 넣어줄 수 있는데 localStorage.setItem(key, value); 직접 개발자도구에 있는 Console에서 저장할 수 있는데 값을 입력하면 undefined라고 나오는데 상관없다. 저장된 것을 확인했으면 꺼내는 방법은 아래와 같다. 주의할 점은 ""큰 따옴표 안에 Key의 이름을 그대로 입력해야 Value를 꺼낼 수 있다. l.. 2022. 12. 2.