목차
키워드
코드 조각 모음
기본세팅하기
HTML를 다음을 붙여 넣는다. jQuery 로드하고 문서로딩후 스크립트 실행을 설정하는 부분이다.
<!-- 제이쿼리 쓰기 전에 제이쿼리 불러오기 -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script>
//<!CDATA[
$(document).ready(function(){
// (여기부터) html body가 로딩 된 후에 실행할 것을 여기에 넣습니다. ----------------
// (여기까지) html body가 로딩 된 후에 실행할 것을 여기에 넣습니다. ----------------
});
//]]>
</script>
head 태그에 직접 제이쿼리 스크립트 넣기
<!-- 제이쿼리를 같은 경로의 하위 폴더에 다운로드 했을 경우 src 경로는 "폴더/파일명" -->
<!-- ↓↓↓ 제이쿼리를 불러오고 자바스크립트 문서를 불러온다. -->
<!-- <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"> -->
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.js">
</script>
<script>
//<!CDATA[
$(document).ready(function(){
// (여기부터) html body가 로딩 된 후에 실행할 것을 여기에 넣습니다. ----------------
$("#red").css("color","red").css("background","yellow");
$("p").eq(1).css("display","none");
setTimeout(function() {
$("<p> 삽입된 내용~ </p>").insertAfter("p:first");
}, 1000);
// (여기까지) html body가 로딩 된 후에 실행할 것을 여기에 넣습니다. ----------------
});
//]]>
</script>
</head>
외부 CSS문서에 연결하기
HTML 문서의 <head> 태그에 다음을 붙여 넣는다.
<link rel="stylesheet" type="text/css" href="_같은경로의CSS파일이름.css_">
특정 태그를 자동으로 태그화 하기
특정 태그를 자동으로 목차화하기
[삽입 코드 1/2]<HTML> 문서 안에서 목차가 위치했으면 하는 곳
<!-- 목차가 들어갈 장소 -->
<ol id="menu"> </ol>
[삽입 장소 2/2] <script></script> 태그 사이에 가둘 넣을 것.
<script>
$('h2').each(function(i,k){
var dddd = "<a href=#" + i + "><li>" + $(k).text() + "</li></a>";
$(dddd).appendTo('#menu');
$(k).attr("id", i) ;
$(k).html("<a href=#menu>" + $(k).html() + "</a>");
});
</script>
웹호스팅 VS 서버호스팅 VS 클라우드 컴퓨팅
웹호스팅은 db+서버+미들웨어가 미리 있는 것이다. 장점으로는 비용이 저렴해서 초심자에게 부담없는 시작이다. 취사실을 공용으로 쓰는 고시원 같은 것이다.
서버호스팅은 그냥 정말 컴퓨터 한대 외부 공간에서 임대해주는 것이다. 그래서 자기가 필요한 것을 직접 설치해서 운영해야한다. 그래서 특이한 언어를 사용한다거나 하면 이걸 선택할 수 밖에 없다. 물리적으로 내 방에 컴퓨터가 없다뿐이지 실질적으로 컴퓨터를 하나 임대받는 것과 같아서 자유도가 높다. 모여 살기는 하기는 공동 취사 구역 같은 것이 없이 개인 부엌이 있는 아파트 같은 것이다.
클라우드 컴퓨팅은 벽을 밀 수 있는 아파트라고 생각하면 된다. 손님이 많이 와서 갑자기 공간이 더 필요해지면 벽을 밀어서 더 큰 평수 아파트로 살 수 있고 대신에 그 사용한 시간만큼 돈을 내야한다. 손님이 떠나고 혼자가 되면 다시 벽을 잡아 당겨 집을 좁게 하고 쓸데 없이 소비되던 돈을 줄일 수 있다.
html 버튼 태그 만들기
input type="button" id="execute" value="execute" /
Ajax(에이젝스)
Ajax를 편하게 사용하려면 우선 해당 문서에서 jQuery 스크립트를 사용 할 수 있게 로그해야함.
Ajax + JQuery + google apps script + get
get방식(주소 전달방식)을 이용하여 구글앱스스크립트에 자료를 전송하는 방법이다.
제이쿼리를 설치후에 제이쿼리.ajax를 이용하여 편리하게 비동기적 자료 교환을 시도 할 수 있다.
function insert_value() {
var id1 = $("#id").val();
var name = $("#name").val();
var url = script_url+"?callback=ctrlq&name="+name+"&id="+id1+"&action=insert";
var request = jQuery.ajax({
crossDomain: true,
url: url ,
method: "GET",
dataType: "jsonp"
});
}
Ajax + JQuery + google apps script + post
json.stringify();를 통해서 객체를 json화 시키는 방법입니다. 이렇게 하여 서버에 자료를 전송합니다.
$('#다음날').click(function(e){
var jObj = new Object();
jObj.id = "없어";
jObj.name = "홍ㄸ오";0
jObj.action = "insert";
var jObjInfo = JSON.stringify(jObj);
var request = jQuery.ajax({
url:"https://script.google.com/macros/s/AKfycbyttpKIFIsEuF5Pffdd_5XBov0MMXzR7WzJekNLCaMFV1t7zHI/exec",
type:'POST',
data:jObjInfo, // 클라이언트에서 서버로 보낼 제이슨화 데이터
dataType: "jsonp", // 서버에서 받을 데이터의 형식 여기서 받은 데이터는 밑의 성공시로 넘어간다 callback : "ctrlq"를 이용하면 별도의 콜백함수 지정도 가능하다.
success:function(data){
$('#저작권').text(data);
}
}); // request 생성완료
});
json에 대하여
자료를 코드, 즉 String 형태로 전송할 때는 JSON.stringify( _제이슨객체변수명_ )를 통해 형변환을 하고
이렇게 만들어진 String을 다시 객체로 만들어 활용 할때 쓰는 것이 바로 JSON.parse(_제이슨객체변수명_) 이다.
(참고 : https://blog.outsider.ne.kr/257?PageSpeed=noscript)
구글 앱스 스크립트에서 쿼리문 사용하기
https://www.benlcollins.com/spreadsheets/google-sheets-query-sql/
자바스크립트 함수 정리
https://developer.mozilla.org/ko/docs/Web/JavaScript/Guide/함수
JS. 인수를 여러개 받는 함수
function 더하기(구분기호, ...theArgs) { document.getElementById("거북이").textContent = 키(구분기호, ...theArgs);}
function 키(구분기호, ...theArgs) { return theArgs.map(key => key + 구분기호);}
사진 기본 정렬하기.
<style>
img {
height : 200px;
padding: 3px;
background: orange;
margin-right: 2px;
}
.imgA{
text-align: center;
}
</style>
JS. 연습페이지
https://jsfiddle.net/sckvupom/22/
-----
-----
반응형