티스토리

heeyoung0
검색하기

블로그 홈

heeyoung0

heeyoung0.tistory.com/m

삥삥0 님의 블로그입니다.

구독자
1
방명록 방문하기

주요 글 목록

  • Ajax에 대해 오랜만에 써보는 포스팅,,그리고 뜬금없는 Ajax........ 갑자기 Ajax에 대해 포스팅 하는 이유는 저번주 금요일부터 open api를 써서 api안의 정보를 가져오고 그 정보를 웹에 뿌려서 구현하는 플젝을 하고 있는데 api 자체도 잘 모를뿐더러 정보를 쉽게 가져오려면 Ajax로 하는 것이 편한데 나는 Ajax는 진짜 1도 모르기 때문에 플젝을 하는동안 주임님께 도움을 많이 받았는데 Ajax에 대해 익혀놓으면 좋다고 Ajax 공부를 권유하셨따 그래서 나는 Ajax 공부를 시작한다....! Ajax란 무엇일까? Ajax란 Asynchronous JavaScript and XML의 약자이며 Ajax는 빠르게 동작하는 동적인 웹 페이지를 만들기 위한 개발 기법의 하나이다. (단, Ajax는 프로그래밍.. 공감수 0 댓글수 0 2024. 1. 23.
  • 자바스크립트 - 클릭하면 상세 설명 글 나타내기 이전 포스팅에 이어 선택자에 대해 알아보겠다. 결과물은 상세설명보기 버튼을 누르면 설명이 나오고 더보기를 누르면 상세한 설명이 나온 후 상세설명 닫기를 누르면 설명이 닫아진다. 상세설명보기 직장인이 사랑하는 아이스아메리카노 피곤한 직장인들은 아이스아메리카노 수혈을 하죠 저는 일리 원두를 좋아합니다. 상세설명닫기 더보기 구조는 단순하게 짜봤다. 첫번째 상세설명보기 버튼에 클래스와 아이디 값을 각각 넣어주는데 클래스 값은 꼭 안넣어도 된다. 그리고 onClick=showDetail()로 클릭 이벤트를 생성해준다. 그리고 제목과 내용을 적되 더보기를 누르면 나타나는 내용은 클래스 hide를 준 뒤 css로 display: none으로 화면에서 안보이게 처리해준다. 그리고 상세설명보기 버튼이랑 동일하게 상세설명.. 공감수 0 댓글수 1 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에.. 공감수 0 댓글수 2 2023. 12. 7.
  • 자바스크립트 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.. 공감수 1 댓글수 1 2023. 12. 3.
  • 자바스크립트 if문(2) 이전 포스팅에 이어서 if문 예제를 풀어보도록 하겠다. 유저가 입력한 숫자가 0인지, 음수인지, 양수인지 판단하고 입력한 숫자는 00입니다 를 출력 시키기 let inputNum = Number(prompt('숫자를 입력해주세요')); 먼저 inputNum 에 prompt로 입력 값을 받는 대신 입력 받은 값은 Number => 숫자로 변환 시켜주도록 변수를 저장했다. if(inputNum == false) { alert(`입력한 숫자는 ${inputNum}입니다.`) } else if(inputNum 0) { alert(`입력한 숫자는 ${inputNum} 양수입니다.`) } 그리고 변수 .. 공감수 1 댓글수 1 2023. 12. 3.
  • 자바스크립트 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) { (실행문) } } 로 쓸 수 있는데 본격적으로 예제를 살펴보도록 하겠다. 방문자의 이름을 입력 .. 공감수 1 댓글수 2 2023. 12. 3.
  • Javascript에 대해 (개념) 웹 퍼블리싱을 할 때 주로 쓰는게 html, css, javascript 인데 HTML = 웹 페이지의 구조를 만들어준다. (마크업 언어) CSS = 웹 페이지에 디자인을 입혀준다. (스타일 규칙 언어) Javascript = 웹 페이지가 동적으로 움직이도록 만들어준다. (스크립트 언어) 로 생각하면 쉽다. 그렇다면 Javascript란 무엇일까? Javascript는 웹을 위한 인터프리터 언어(소스 코드를 한 줄씩 읽어가면서 명령을 바로 처리하는 프로그램 (언어) 번역과 실행이 동시에 이루어짐) 이자 객체 기반의 스크립트 프로그래밍 언어이며 html의 특정 요소 또는 특정 요소들을 선택하여 다양한 이벤트 (마우스 클릭, 키보드 입력 등)에 따라 원하는 동작을 하도록 기능을 넣을 수 있으며 발생하는 이벤.. 공감수 0 댓글수 0 2023. 12. 2.
  • Javascript - for문과 for...in for문을 먼저 봐보겠다. 반복문 중에서 for문을 배웠는데 예시를 먼저 봐보자면 for(let i = 0; i 0; i--) { console.log(i); } for(let i=0; i 0; j--) { console.log(i,j) } } 로 작성할 수 있는데 for문의 작동방식은 for(초기화식; 조건식; 증감식;) { } 으로 작성해서 사용할 수 있다. for(let i = 0; i < 10; i++) { console.log(i); } 조건을 살펴보자면, let i = 0 으로 초기화식을 만들어주고 1가 10보다 작다라는 조건을 만든 후 초기화식으로 인.. 공감수 0 댓글수 1 2023. 11. 9.
  • Javascript - if문과 switch문 먼저 if문부터 살펴보겠다. let number = 5; if (number & 2 === 0) { console.log('number 변수는 짝수입니다.'); }else { console.log('number 변수는 홀수입니다.'); } 로 조건을 세웠을 때, 먼저 number 변수에 5를 선언해주고 number를 2로 나누었을때 나머지가 0이면 number 변수는 짝수입니다. 를 반환해주고 나머지가 0이 아니라면 number 변수는 홀수입니다. 를 반환해줘라 라는 내용으로 작성 되는 것이 if문이다. 하지만 if문은 단순하게 if 와 else로만 쓸 수 있는 것은 아니고 중간에 else if 를 넣어서 여러개의 조건을 동시에 작성할 수 있다. 예시로 보자면 if (number % 2 === 0) { .. 공감수 0 댓글수 0 2023. 11. 7.
  • Javascript - Operators 학원에서 자바스크립트를 배울 때 여기서부터 막혔는데 차근차근 공부를 하니 그래도 조금이나마 이해가 되기 시작했다. 산술 연산자에는 [1.덧셈 2.뺄셈 3.곱셈 4.나눗셈 5.나머지] 이렇게 있다. console.log(10 + 10); (덧셈) console.log(10 - 10); (뺄셈) console.log(10 * 10); (곱셈) console.log(10 / 10); (나눗셈) console.log(10 % 10); (나머지) console.log(10 % 3); 으로 실행해보면 console.log(10*(10+10)); 차례대로 20, 0, 100, 1, 0, 1, 200으로 나온다. 그리고 증가와 감소에 대해 배워보자면 let number = 1; number ++; console.log.. 공감수 0 댓글수 3 2023. 11. 6.
  • Javascript - Hoisting 이번에는 Hoisting이다..! Hoisting이란? 모든 변수 선언문이 코드의 최상단으로 이동되는 것처럼 느껴지는 현상을 이야기한다. 위 이미지처럼 var name='코드팩토리'로 선언 하기 전에 console.log(name);을 보면 console.log가 변수보다 위에 있는데도 불구하고 undefined로 출력이 된다. 이렇게 처음에 var name;으로 할당 값을 주지 않은 상태에서 끝나면 undefined로 출력이 되는 것이 맞다. 하지만 다음에 name = '코드팩토리'로 할당 값을 변경하고 콘솔에 찍어보면? 코드팩토리로 값이 나와버린다;; 하지만 var 와는 반대로 let을 써서 동일한 방법으로 시도를 해보면 변수가 초기화 되기 전에 액세스가 되었다는 오류가 발생 되면서 실행 되지 않는다.. 공감수 0 댓글수 0 2023. 11. 6.
  • Javascript - data_types 변수 이름을 지을 때 영어 문자 숫자를 모두 사용할 수 있지만 숫자로는 시작할 수 없고 변수명으로 사용할 수도 없습니다. 예를 들어 let heeyoung = '박희영' 은 되지만 let 1Name = '박희영' 이나 let const = '박희영' 은 ❌ 위 사진처럼 영어, $(기호), _ 는 변수명에 쓰일 수 있지만 변수명을 숫자나 변수명으로 넣는 순간 빨간색 줄이 찍 그어지며 오류를 나타내준다. 다음은 변수명을 짓는 방법인데 이렇게 하지 않는다고 해서 오류가 발생 되는 것은 아니지만, 개발자들 사이에서 일종의 '국룰' 이기 때문에 맞춰서 쓰는 것이 좋다. data types에는 여섯개의 Primitive Type과 한 개의 오브젝트 타입이 있는데, Primitive Type은 1) Number(숫자.. 공감수 0 댓글수 0 2023. 11. 5.
  • javascript - 변수 선언 콘솔 창에 출력 하려면 console.log를 사용 하면 되고 Hello World를 'Hello', 'World'로 나눠서 쓰면 각각 출력이 된다. // 를 사용해서 주석을 쓴다는 것은 알고 있었지만 /**를 쓰고 엔터를 누르면 주석이 이어진다는 것은 이제서야 알았다.. 변수는 var, let, const가 있는데 var는 더이상 쓰지 않는 변수고 let, const를 쓴다. 하지만 자바스크립트는 역사가 오래 되었기에 var로 작성 되어 있는 코드들이 많기에 var도 배워서 알아놔야한다.😂 var, let으로 변수를 선언하면서 할당 하고 console.log를 통해 보면 할당 값이 콘솔에 출력이 된다. 그리고 let과 var로 변수를 선언하면 할당 값을 변경 할 수 있는데 변경 방법은 변수 이름 = 할.. 공감수 0 댓글수 0 2023. 11. 5.
    문의안내
    • 티스토리
    • 로그인
    • 고객센터

    티스토리는 카카오에서 사랑을 담아 만듭니다.

    © Kakao Corp.