[Jquery] CSS 분리
2022. 2. 17. 22:20
공부/JavaScript
css에서 직접 작업하는게 가장 좋겠지만 jquery를 이용하여 분리하여 사용할 수도 있다. 일단 css 스타일을 담을 변수를 선언하고, 그 변수를 jquery css 선택자에 집어 넣는 것이다. 코드는 아래와 같다. $(document).ready(function(){ var myStyle={"color":"red", "backgroundColor":"blue", "border":"4px solid black"} $("#wrap>section").children().css(myStyle) })
[Jquery] 하위요소 선택, children
2022. 2. 17. 22:14
공부/JavaScript
jquery로 하위 요소를 선택하는 첫 번째 방법은 아래와 같다. $(document).ready(function(){ $("#wrap>h1").css("color","red") }) $(document).ready(function(){ $("#wrap h1").css("color","red") }) 위의 첫번째 코드는 한 칸 아래의 h1을 선택하고, 두 번째 코드는 하위에 있는 모든 h1을 선택한다. 두 번째 방법은 children을 사용하는 것인데 방법은 다음과 같다. $(document).ready(function(){ $("#wrap>section").children().css("color","red") }) 이렇게 하면 section의 모든 자식 요소들의 color를 red로 바꾼다.
[Jquery] ready, parent 메서드
2022. 2. 17. 22:09
공부/JavaScript
ready 메서드는 DOM TREE가 완성되면 콜백 함수가 실행된다. $(document).ready(function(){ document.getElementById("title").style.color="red" }) parent 메서드는 선택한 요소의 부모요소에 접근한다. $(document).ready(function(){ $("#li2").parent().css({ "border":"2px dashed blue" }) }) 위 코드는 li2의 부모요소에 접근하여 경계선을 파란색 점선으로 바꾼다.
[Jquery] css 선택자와 사용 방법
2022. 2. 17. 22:00
공부/JavaScript
Jquery를 사용하여 쉽게 css 속성을 부여하고 변경할 수 있다. function myFunc(){ $("#title").css("color","red") } 위 코드는 document.getElementById("title").style.color="red"와 같다. 즉, ID가 title인 요소를 선택하여 color를 red로 변경한다. function myFunc(){ $("#title").css("backgroundColor","blue") } 그렇다면 위 코드는 document.getElementById("title").style.backgroundColor="blue"와 같다. 또한 이렇게 따로따로 적을 필요 없이 아래처럼 하면 더 쉽게 여러가지 속성을 부여할 수 있다. function m..
[JS] JSON 메서드, JSON 배열
2022. 1. 30. 15:27
공부/JavaScript
JSON JSON은 자바스크립트의 객체 표기법을 제한하여 만든 텍스트 기반의 데이터 교환 표준이다. JSON 메서드 자바스크립트에선 아래와 같은 JSON 데이터 처리를 위한 메서드를 제공하고 있다. JSON.stringify(), JSON.parse(), toJSON() JSON.stringify() : 인수로 전달받은 자바스크립트의 객체를 문자열로 변환 후 반환한다. JSON.parse() : 인수로 전달받은 문자열을 자바스크립트의 객체로 변환 후 반환한다. toJSON() : 자바스크립트 Date 객체의 데이터를 JSON 형식의 문자열로 변환 후 반환한다. 따라서 Date.prototype 객체에서만 사용할 수 있다. JSON 배열 var personList=[ {name:'박덕팔',age:20,he..
[JS] 사용자 정의 객체
2022. 1. 30. 15:13
공부/JavaScript
자바스크립트에서는 내장된 객체를 사용하기도 하지만 사용자가 직접 객체를 정의할 수도 있다. var person={ name:'김철수', age:20, height:170, introduce:function(){ document.write("이름:"+this.name," ") document.write("나이:"+this.age," ") document.write("키:"+this.height," ") } } person.introduce()
[JS] 1차원 동적배열
2022. 1. 30. 15:10
공부/JavaScript
자바스크립트 배열은 단순 배열이 아닌 배열 객체이다. 길이도 자유자재로 변경이 가능하다. var score=new Array(0) var num=prompt("과목 갯수 입력") num = Number(num) var input = 0 var total = 0 for(i=1; i
[JS] openweathermap api 날씨 아이콘 표시
2022. 1. 24. 14:40
공부/JavaScript
https://openweathermap.org/ 의 api를 이용하여 날씨 아이콘을 표시하려고 한다. 일단 기본적인 지역과 날씨 정보는 가져왔는데 아이콘은 어떻게 가져오나 많이 알아봤다. 그래도 내가 원하는 답은 딱히 나오지 않았는데 아마도 너무 당연하고 쉬운 일이라 그렇지 않았나 싶다. 일단 아래처럼 openweather api 안에 있는 data.weather.icon 데이터를 가져와야 했다. const iconData = data.weather[0].icon; 그리고 아래처럼 html에 준비해둔 img 태그에 .src로 url을 지정해주는데, 이때 미리 가져왔던 ${iconData}를 넣어준다. const icon = document.querySelector("#weathericon img").s..
[JS] 중첩 반복문, for문 (while, for)
2022. 1. 19. 20:16
공부/JavaScript
중첩 반복문 중첩 반복문 while을 이용하여 구구단 전체 출력하기 var dan=2 var i=1 while(dan