본문 바로가기

js

(7)
AJAX 란? 1. AJAX 란? AJAX is a developer's dream, because you can: Read data from a web server - after the page has loaded Update a web page without reloading the page Send data to a web server - in the background AJAX는 개발자의 꿈이다. 왜냐하면 당신은 페이지가 로드된 후에 웹 서버로 부터 데이터를 읽어들일 수있다. 또 페이지를 다시 로딩하지않고도 웹 페이지를 업데이트 할 수 있다. 또 웹 서버로 데이터를 보낼 수 있다. function loadDoc() { var xhttp = new XMLHttpRequest(); xhttp.onreadystate..
localStorage에 data 저장하고 불러오기 1. html DOCTYPE html> This works! 00:00 2. css body { background-color: rgb(129, 156, 86); color: white;} .clicked { color: orange;} .btn { cursor: pointer;} .form,.greetings { display: none;} .showing { display: block;} 3. JavaScript const form = document.querySelector(".js-form"), input = form.querySelector("input"), greeting = document.querySelector(".js-greetings"); const USER_LS = "currentU..
make clock with vanilaJS vanilaJS로 초 단위로 흘러가는 시계 만들기!(setInterval, conditinal Expression) 1. html file DOCTYPE html> This works! 00:00 2. clock.js const clockContainer = document.querySelector(".js-clock"), clockTitle = clockContainer.querySelector("h1"); function getTime() { const date = new Date(); const minutes = date.getMinutes(); const hours = date.getHours(); const seconds = date.getSeconds(); clockTitle.innerText..
간단한 function 만들기, MDN 문서의 중요성 clickTest라는 메소드를 만들고 실행하는 과정이다. 메소드는 title의 색이 흰색이면 파란색으로 파란색이면 빨간색으로 바꿔라 라는 내용이다. 위의 코드는 js파일에 간단하게 online과 offline일때 콘솔에 메세지를 띄워주는 함수를 작성하고 window.addEventListener("동작",메소드)를 실행해서 wifi 접속의 유무에 따라서 콘솔에 메세지를 뿌려주는 것을 해본 것이다. 또 그 밑에는 현재의 색깔과 내가 미리 설정해 놓은 BASE_COLOR가 다를 경우 title id의 글자 색을 바꿔주는 메소드를 만들어서 실행해 본 것이다. 보통 js에서 직접적으로 css를 바꿔주는 일은 잘 하지 않는다고 한다. css, html, js 각각이 수행하는 역할과 그에 따른 영역들이 명확하게 나..
변수의 선언과 JS 자료 저장 구조(배열) 배열을 만들어서 콘솔에 찍어보는 과정이다. nicoInfo라는 배열 안에 여러가지 key와 그에 따른 value들이 들어가있다. favMovies나 favFood 에는 [somthing, something,]로 배열을 또 추가해주었다. 그 배열 안에 또 중괄호로 여러가지 값들을 넣어줄 수 있다. JavaScript에서 자료를 저장하는 방식이 이런건가 보다. 최근에 공부한 Json 의 구조와 똑같다는 걸 기초수업을 들으면서 확인할 수 있었다. 이건 그냥 String, Boolean, Float, Number 의 값을 어떤 형식으로 저장하는지를 기본적으로 알아본 것이다.
Your first JS Function function sayHello(name,age){ console.log("Hello!",name,"you have", age);} sayHello("scw", 20); argument(인자)를 추가해서 외부에서 입력된 값을 콘솔에 출력하는 함수를 처음으로 짜보았다. ----------------------------------------------------------function sayHello(name,age){ console.log("Hello!"+name+"you are"+age);} sayHello("scw", 20); ----------------------------------------------------------function sayHello(name,age){ console.lo..
let, const, variables, array, object JavaScript is only programming language for the web.because there is only option when it comes for frontend there is only language 빠르게 발전하고 있고 점점 강해지고 있다. 이벤트 처리를 위한 언어로 만들어졌다.하지만 엄청나게 강력해졌다. JavaScript is very powerful socket.ioimpact.jsthree.js -> world draw app : 뭘 그리면비슷한게 뭔지 알려주는?3d로 알려줌 전부 JavaScript로 만들어져있다. ES5, ES6 ES5 ECMAScript Specification Versioncentralized 중앙에서 업데이트되면 모든 곳에서 사용된다. ..