분류 전체보기 (94) 썸네일형 리스트형 javascript 란? 자바스크립트 - 위키백과, 우리 모두의 백과사전 자바스크립트JavaScript패러다임프로그래밍 패러다임: 스크립트 언어, 객체 지향 프로그래밍 (프로토타입 기반 프로그래밍), 명령형 프로그래밍, 함수형 프로그래밍, 사건 기반 프로그래밍설계자 ko.wikipedia.org 자바스크립트의 특징 자바스크립트 언어만의 특징입니다. 기본적으로 자바스크립트는 C언어 기반으로 C언어와 유사한 점이 많습니다. 1. 자바스크립트는 객체 기반의 스크립트 언어입니다. 2. 자바스크립트는 동적이며, 타입을 명시할 필요가 없는 인터프리터 언어입니다. 3. 자바스크립트는 객체 지향형 프로그래밍과 함수형 프로그래밍을 모두 표현할 수 있습니다. 자바스크립트의 장단점 장점 html안에서 바로 script 태그안에서 코드를 작성 할 수.. Typing Game Typing Game javascript를 이용한 타자 게임을 만들어 보았습니다~ https://jiseonpack.github.io/webs_class/javascript/typingGame/index.html Typing Game jiseonpack.github.io music player music player 음악이 나오는 music player 를 만들어보았습니다. https://jiseonpack.github.io/webs_class/javascript/musicPlayer/index.html Music Player expand_more Now Playing more_horiz repeat skip_previous play_arrow pause --> skip_next queue_music repeat_one shuffle --> queue_music Music list close jiseonpack.github.io Mouse Effect08 - 마우스 효과 document.addEventListener("mousemove", function (e) { let body = document.querySelector("#mouseType07"); let circle = document.createElement("span"); let x = e.offsetX; let y = e.offsetY; circle.style.left = x + "px"; circle.style.top = y + "px"; let size = Math.random() * 100; circle.style.width = 20 + size + "px"; circle.style.height = 20 + size + "px"; body.appendChild(circle); setTimeout(fun.. Mouse Effect07 - 이미지 오버 효과 const mouseImg = document.querySelectorAll(".mouse__img"); mouseImg.forEach((item) => { const imageWrap = item.querySelector(".img"); const imageWrapBounds = imageWrap.getBoundingClientRect(); let itemBounds = item.getBoundingClientRect(); const onMouseEnter = () => { gsap.set(imageWrap, {xPercent: -50, yPercent: 50, rotation: -15, scale: 0.3, opacity:0}); gsap.to(imageWrap, {xPercent: -50, yPer.. Mouse Effect06 - 텍스트 효과 function mousemove(e){ let positionSlow = (e.pageX - (window.innerWidth/2)) * 0.1; let positionFast = (e.pageX - (window.innerWidth/2)) * 0.2; gsap.to(".spanSlow", {duration: 0.4, x: positionSlow}); gsap.to(".spanFast", {duration: 0.4, x: -positionSlow}); gsap.to(".cursor", {duration: 0.3, left: e.pageX, top: e.pageY}); } document.addEventListener("mousemove", mousemove) https://jiseonpack.githu.. React.js란? React란? React는 웹 프레임워크로, 자바스크립트 라이브러리의 하나로서 사용자 인터페이스를 만들기 위해 사용된다. React는 facebook에서 제공해주는 프론트엔드 라이브러리라고 볼 수 있습니다. 싱글 페이지 애플리케이션이나 모바일 애플리케이션의 개발 시 토대로 사용될 수 있습니다. 즉, 현재 많이 활용되고 있는, 웹/앱의 View를 개발할 수 있도록 하는 인기있는 라이브러리라고 볼 수 있습니다. React의 필요성? react를 사용하지 않아도, html과 css, javascript를 이용해서 웹 페이지를 만들 수 있지만, react를 이용해 사용자와 상호작용할 수 있는 동적인 UI를 쉽게 만들 수 있기 때문에 많이 이용되는 것 같습니다..! React의 특징 React의 특징은 크게 다음.. SPA(Single Page Application) 이란? SPA(Single Page Application) 이란? 너무 당연하게 사용해 온 SPA. 어떻게 작동하는 것일까요? 일상생활에서 너무 당연하다는 듯이 사용하고 있어 이제는 웹 개발이 그 자체로 SPA 개발이 되어버린 기분이 든다. 하지만 ‘SPA가 대체 뭐니?’ 하고 누군가 묻는다면 선뜻 대답할 수 있을까? 이번 포스팅은 그래서 준비했다. 과거의 웹 사이트 전통적인 웹 사이트는 지금보다 문서 하나에 전달되는 파일의 용량이 적었다. 그래서 어떤 요소를 한번 클릭하면 완전히 새로운 페이지를 서버에서 전송해 주곤 했다. 그래도 상관 없었다. 그러나 현대에 이르러 점차 웹 사이트가 고도화됨에 따라 한 페이지에 해당하는 페이지 용량이 커져갔고, 매번 새로운 페이지를 전달하는 게 점점 버거워지게 되었다. SPA.. 이전 1 2 3 4 5 6 ··· 12 다음
