Front

Front/Html Css JS

[JavaScript] function 은 statment 이면서 value 이다.

홀리 쉣이게 된다고?자스 이 미친 언어이렇게 써볼 생각도 못했네익명 함수는 많이 써봤지만 그걸 배열이나 객체에 넣어볼 생각은 정말 해본 적 없는데아 근데 생각해보니까 객체에 함수를 담는건 본 적 있는 듯??그냥 그렇구나 하고 넘겼는데 "자바스크립트에서 함수는 값이다" 라는 개념이 적용된 문법이었구나..  // function 은 statment 이면서 value 이다.var f = function() { console.log(1+1);};// 배열과 객체의 원소로 함수를 넣을 수 있음!!!!!!!!var arr = [f];var obj = { func : f };f();arr[0]();obj.func();  // 객체는 복잡한 코드를 정리정돈해서 복잡성을 낮추는 기본적인 기능에서부터 출발한다.var..

Front/Vue.js

[Vue] axios, vue-router 설치

[맥 m1] VSCode, Node.js 설치 1. VSCode 설치 (1) 링크 타고 파일 다운받아 설치 Visual Studio Code - Code Editing. Redefined Visual Studio Code is a code editor redefined and optimized for building and debugging modern web and cloud applications. Visual Studio Code is free intheham.tistory.com 1. axios 와 vue-router 설치 npm install axios --save Vue 에서 ajax 를 쓰려면 axios 를 설치해야 함. npm install vue-router --save 2. 프로젝트 새..

Front/Vue.js

[Vue] 환경설정

Vue : front 앱의 기본 뼈대와 api를 제공하는 자바스크립트 프레임워크 : 컴포넌트 베이스 개발 - 컴포넌트는 (화면 ui 구성), data, 메서드로 구성됨. - 컴포넌트 안에 컴포넌트를 끼워넣을 수 있음. (부품처럼 끼워서 씀) 사용방법 1. Jquery 처럼 url 추가해서 사용 2. Node.js 설치 -> VSCode 설치 -> Vue 프로젝트 생성 - 이클립스는 vue 태그가 잘 인식이 안됨. VSCode2 설치해서 씀. - Spring_restapi 프로젝트에 Vue 프로젝트를 합체할 수 있음. (각각 다른 서버 씀) -- 프록시 서버를 등록해서 연결하면 자동으로 합체됨. https://intheham.tistory.com/109 [맥 m1] VSCode, Node.js 설치 1. ..

Front/Jquery

[JavaScript] jQuery AJAX -- load(), ajax()

1. load() 함수 간단하게 메시지 보낼 때 쓸 수 있음. (1) URL $(selector).load(URL); $('#b1').click(function(){ $('#d1').load('server1.jsp'); }); (2) URL, function() $(selector).load(URL, function(res, stat, xhr){}); load( 주소, 비동기 요청 응답시 자동 호출될 함수 ) res : 서버로 부터 받은 응답값 stat : 응답상태. 'success', 'error' 로 문자열로 옴. xhr : 지금 사용한 비동기 객체 $('#b2').click(function(){ $('#d2').load('server2.jsp', function(res, stat, xhr){ if(..

Front/Jquery

[JavaScript] jQuery

Fullstack -- back, front 동시에. 회사는 좋지만 개발자는 힘들어~ 2인이서 할 걸 혼자 해야함 JAVA -- pc app, web app back단(비즈니스로직, 요청처리), android app Oracle -- 데이터 영구 보관 JSP/Servlet -- 웹 서버 페이지 개발. jsp(front언어를 서버언어로 변환), servlet(back-요청을 받음) HTML/CSS/JavaScript -- front(사용자에게 화면을 예쁘게 보여줌) JSON -- 데이터 표현 [] {} DOM -- 웹페이지 실시간 변경 ---- document.getElementById() AJAX -- 비동기 요청. 불필요한 페이지 이동을 줄여줌 jQuery - 자바스크립트 라이브러리 (자주 사용하는 기..

Front/Html Css JS

[JavaScript] JSON / AJAX + JSON

▼ 더 많은 정보 더보기 https://www.oracle.com/kr/database/what-is-json/ JSON이란 무엇인가? JSON을 이용하는 프로그래머, 개발자, IT 전문가들은 어떤 언어에서든 데이터 구조와 실제 데이터를 다른 언어 및 플랫폼에서 해석 가능한 형식으로 전송할 수 있습니다. www.oracle.com https://developer-talk.tistory.com/268 [JavaScript]JSON parse 와 JSON stringify 차이 JSON이란? JSON(JavaScript Object Notation)은 데이터를 객체로 표현하는 형식으로 JavaScript의 객체 형식을 모방합니다. 처음에는 JavaScript 전용으로 만들어졌지만, 현재는 Java, Pyth..

Front/Html Css JS

[JavaScript] AJAX

https://intheham.tistory.com/44#%3C%20DOM%20%3E-1 [JavaScript] form, image, DOM ※ 내장 객체 서열 window : 창의 위치, 툴바 구성 등 | document : 윈도우창에 웹 페이지 뿌리기 | form, image | button, text, textarea, radio.... (value 로 접근) - get, post // 이름이 t1인 입력 양식의 값 -- f.t intheham.tistory.com AJAX (Asynchronous JavaScript and XML) : 비동기 자바스크립트와 xml 웹 동기 요청 -- 요청을 보내면 새 페이지로 응답페이지를 받아옴. 전체 페이지 바뀜. 웹 비동기 요청 -- 응답 페..

Front/Html Css JS

JS로 쇼핑몰 구현

홈화면 - 대문 이미지 1초마다 변하게 하기 - 카테고리 이미지 누르면 (onmouseover, onmouseout) 대분류 카테고리 나오기 - 대분류 카테고리에서 항목에 마우스를 올리면 중분류 뜨게 하기 shop 의류 가전 가구 잡화 제품상세화면 - 홈화면에서 하단의 상품 이미지를 누르면 제품상세 html 페이지로 넘어가기 - 이미지에 마우스를 올리면(onmouseover) 이미지 변하게 하기 - 주문 수량에 따라 (주문수량 * 가격) 값을 결제 금액에 띄우기 (onchange) 제품 상세 페이지 제품명파란 하트 가격30000 주문수량 결제금액 결제 상품 상세 설명 봄이 생각나는 하트

함s
'Front' 카테고리의 글 목록