javascript 16

Ajax에 대해

오랜만에 써보는 포스팅,,그리고 뜬금없는 Ajax........ 갑자기 Ajax에 대해 포스팅 하는 이유는 저번주 금요일부터 open api를 써서 api안의 정보를 가져오고 그 정보를 웹에 뿌려서 구현하는 플젝을 하고 있는데 api 자체도 잘 모를뿐더러 정보를 쉽게 가져오려면 Ajax로 하는 것이 편한데 나는 Ajax는 진짜 1도 모르기 때문에 플젝을 하는동안 주임님께 도움을 많이 받았는데 Ajax에 대해 익혀놓으면 좋다고 Ajax 공부를 권유하셨따 그래서 나는 Ajax 공부를 시작한다....! Ajax란 무엇일까? Ajax란 Asynchronous JavaScript and XML의 약자이며 Ajax는 빠르게 동작하는 동적인 웹 페이지를 만들기 위한 개발 기법의 하나이다. (단, Ajax는 프로그래밍..

javascript 2024.01.23

자바스크립트 - 클릭하면 상세 설명 글 나타내기

이전 포스팅에 이어 선택자에 대해 알아보겠다. 결과물은 상세설명보기 버튼을 누르면 설명이 나오고 더보기를 누르면 상세한 설명이 나온 후 상세설명 닫기를 누르면 설명이 닫아진다. 상세설명보기 직장인이 사랑하는 아이스아메리카노 피곤한 직장인들은 아이스아메리카노 수혈을 하죠 저는 일리 원두를 좋아합니다. 상세설명닫기 더보기 구조는 단순하게 짜봤다. 첫번째 상세설명보기 버튼에 클래스와 아이디 값을 각각 넣어주는데 클래스 값은 꼭 안넣어도 된다. 그리고 onClick=showDetail()로 클릭 이벤트를 생성해준다. 그리고 제목과 내용을 적되 더보기를 누르면 나타나는 내용은 클래스 hide를 준 뒤 css로 display: none으로 화면에서 안보이게 처리해준다. 그리고 상세설명보기 버튼이랑 동일하게 상세설명..

javascript 2023.12.12

javascript - DOM과 메소드

DOM요소란? Document Object Model 의 약자로 HTML, XML 문서의 프로그래밍 인터페이스이다. DOM은 문서의 구조화된 표현을 제공하며 프로그래밍 언어가 DOM 구조에 접근할 수 있는 방법을 제공하여 그들의 문서 구조, 스타일, 내용 등을 변경할 수 있게 도와주며, DOM은 HTML을 위한 API이면서 HTML을 탐색할 수 있고 HTML의 구조를 바꿀 수 있다. DOM은 웹 페이지의 객체 지향 표현인데 우리가 Javascript로 구현한 모든 동작들이 대체로 DOM을 수정하기 위한 것이며 Javascript는 브라우저가 읽고 어떠한 작업을 할 수 있는 언어이며 DOM은 바로 이 작업이 이루어지는 장소인 것이다. 쉽게 말하면 DOM은 HTML 요소들의 구조화된 표현인 것이다. DOM에..

javascript 2023.12.07

php기초 - 3 (출력, 문자열)

php 출력함수는 대표적으로 echo와 print 가 있는데 2개는 동일하고 출력을 해보면 아래 사진처럼 일반적인 텍스트 형태로 출력된다. 그리고 php는 html 태그도 함께 사용할 수 있는데 echo "PHP는 재밌다"; echo "Hello World! "; echo "I'm about to learn PHP! "; echo문에 html 태그를 함께 쓰면 위 이미지처럼 h2태그는 h2로 br태그는 br로 그대로 출력된다. 그리고 echo문은 html태그와 변수를 함께 사용할 수 있는데 $txt1 = "Learn PHP"; $x = 5; $y = 5; echo "".$txt1.""; echo $x + $y; echo "".$txt1.""; 를 하면 $txt1 에는 Learn PHP로 선언이 되어있기에..

php 2023.12.06

php기초 - 1

PHP는 웹 프로그래밍 언어이며 스마트폰 앱을 개발하는 앱 프로그래밍 언어, 윈도우 어플리케이션 프로그래밍 언어, 홈페이지를 만들 때는 웹프로그래밍 언어가 있다. html, css, javascript는 웹브라우저에서 동작하는 스크립트 언어이지만, PHP는 웹서버에서 동작하는 언어로 데이터베이스 등과 연동되어 회원관리, 게시판 등의 기능을 만드는데 사용할 수 있다. PHP로 만든 대표적인 프로그램은 Wordpress, 그누보드 등이 있다. PHP를 공부하려면 설치해야할 것들은 PHP가 설치 되어야 하며, 웹 서버 프로그램 설치, Database 프로그램 설치, 편집기 가 있다. php가 기존에 사용하던 것과 다른 가장 큰 이유는 코드를 쓰는 방법(?)이다. css를 쓰려면 아래 style 안에 css를 ..

php 2023.12.05

자바스크립트 switch문

이번에는 switch 문에 대해 공부를 해보겠다. switch문은 특정 조건이 만족 됐을 때 코드가 종료되는데 코드 종료를 자발적으로 할 수 없기에 break를 써서 종료 시켜야 한다. 1. google, naver, daum 중 주로 사용하는 사이트를 입력 받은 후 url 연결하기. let site = prompt('google, naver, daum 중 주로 사용하는 포털 사이트를 입력해주세요.'); 먼저 site 에 값을 입력 받을 수 있게끔 prompt 로 할당 해준 후 switch(site) { case 'google' : url = "http://google.com" break; case 'naver' : url = "http://naver.com" break; case 'daum' : url..

javascript 2023.12.03

자바스크립트 if문(2)

이전 포스팅에 이어서 if문 예제를 풀어보도록 하겠다. 유저가 입력한 숫자가 0인지, 음수인지, 양수인지 판단하고 입력한 숫자는 00입니다 를 출력 시키기 let inputNum = Number(prompt('숫자를 입력해주세요')); 먼저 inputNum 에 prompt로 입력 값을 받는 대신 입력 받은 값은 Number => 숫자로 변환 시켜주도록 변수를 저장했다. if(inputNum == false) { alert(`입력한 숫자는 ${inputNum}입니다.`) } else if(inputNum 0) { alert(`입력한 숫자는 ${inputNum} 양수입니다.`) } 그리고 변수 ..

javascript 2023.12.03

자바스크립트 if문(1)

이전에 javascript if문과 switch문에 대해 포스팅한 적이 있는데, 문법에 대해 하나하나씩 좀 딥하게 연습해 보려고 한다. if문은 조건에 따라 쓰는게 살짝씩 다른데 1. 조건이 하나일 때 if (조건식) { (true) 실행 } 2. true인 조건 / false인 조건 if(조건식) { true-실행문 } else { false - 실행문 } 3. 조건이 두개 이상 if(조건식) { true - 실행 }else if(조건식) { true - 실행 }else if(조건식) { true - 실행 }else { 이 외의 조건에 따른 실행문 } 4. 중첩 if문 if(조건식1) { if(조건식2) { (실행문) } } 로 쓸 수 있는데 본격적으로 예제를 살펴보도록 하겠다. 방문자의 이름을 입력 ..

javascript 2023.12.03

Javascript에 대해 (개념)

웹 퍼블리싱을 할 때 주로 쓰는게 html, css, javascript 인데 HTML = 웹 페이지의 구조를 만들어준다. (마크업 언어) CSS = 웹 페이지에 디자인을 입혀준다. (스타일 규칙 언어) Javascript = 웹 페이지가 동적으로 움직이도록 만들어준다. (스크립트 언어) 로 생각하면 쉽다. 그렇다면 Javascript란 무엇일까? Javascript는 웹을 위한 인터프리터 언어(소스 코드를 한 줄씩 읽어가면서 명령을 바로 처리하는 프로그램 (언어) 번역과 실행이 동시에 이루어짐) 이자 객체 기반의 스크립트 프로그래밍 언어이며 html의 특정 요소 또는 특정 요소들을 선택하여 다양한 이벤트 (마우스 클릭, 키보드 입력 등)에 따라 원하는 동작을 하도록 기능을 넣을 수 있으며 발생하는 이벤..

javascript 2023.12.02