티스토리 뷰
회원가입유효성.js
0.01MB
부모강점
여기를 눌러 확인해주세요.
zaramstrength.com
1. common.js에서 global로 묽어 주는 이유?
(function(global){
'use strict';
var yamoo9 = 'hi'; // 지역변수
})(this);2. common.js 쓸때 함수 단위로 묶어줘야 하는지?
function today(){
var today = (new Date()).getDay();
switch(today){
case 0:
case 6:
console.log('오예 주말 핵이득');
break;
default:
console.log('하....출근....');
}
}3. html에서 common.js 불러올때 head와 하단 중 어디에 넣으면 좋으가 ?
4. defer의 의미? 꼭 삽이해야 하는가?
<!DOCTYPE html>
<html lang="ko">
<head>
<link rel="stylesheet" href="/css/reset.css">
<link rel="stylesheet" href="/css/common.css">
<link rel="stylesheet" href="/css/test.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper/swiper-bundle.min.css"/>
<script src="https://cdn.jsdelivr.net/npm/swiper/swiper-bundle.min.js"></script>
<script src="/js/chart.js"></script>
<script src="//t1.daumcdn.net/mapjsapi/bundle/postcode/prod/postcode.v2.js" defer></script>
<script src="//code.jquery.com/jquery-latest.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.8.18/jquery-ui.min.js"></script>
<script src="/js/join.js" defer></script>
<script src="/js/main.js" defer></script>
<script src="/js/test.js" defer></script>
<script src="/js/common.js" defer></script>
</head>
<body>
</body>
<script>
</script>
</html>5. html에 common에 funttion을 불러올때 onload나 DOMContentLoaded 무조건 감싸줘야하나?
<script>
window.addEventListener('load', (event) => { //window.onload = function() {}, $(window).load( function(){} 와 동일
alert('페이지 전체가 로드되었습니다.');
// 이번엔 이미지가 제대로 불러와 진 후에 얼럿창이 실행됩니다.
alert(`이미지 사이즈: ${img.offsetWidth}x${img.offsetHeight}`);
};
document.addEventListener("DOMContentLoaded", () => {
today()
});
today()
</script>
<img id="img" src="https://en.js.cx/clipart/train.gif?speed=1&cache=0">6. DOMContentLoaded와 onload 같이 사용 가능?
7. document, window 차이?
<script>
document.getElementById("myFrame").onload = () => {//실행될 코드};
document.addEventListener("DOMContentLoaded", () => {//실행될 코드});
document.addEventListener('load', () => {//실행될 코드});
window.getElementById("myFrame").onload = () => {//실행될 코드};
window.addEventListener("DOMContentLoaded", () => {//실행될 코드});
window.addEventListener('load', () => {//실행될 코드});
</script>
8. onload 할때 body에 삽입?
<body onload="func()"> // onload 할때 body에 삽입?
window.onload = function () {
// ....
}
$(document).ready(function () {
// ....
})9. event.target사용법?
10. e.preventDefault(); 왜 사용하는지?
11. closest음 parentNode 와 같은 의미?
<script defer>
window.onload = function () {
let contNum = 0;
if(contNum <1){
industryBanner()
}
contNum++
$('.mainTapBox span').on('click', function(){
// e.preventDefault();
var a = $(this);
var idx = a.index();
var box = a.closest('.main_area');
box.find('ul.hidden-area').removeClass('on');
box.find('.mainTapBox span').removeClass('on');
box.find('ul.hidden-area:eq('+idx+')').addClass('on');
a.addClass('on');
const targetUl = event.target.closest('.main_area').querySelector('.hidden-area').classList.contains('on')
if(targetUl) {
console.log('con!')
industryBanner()
return false
} else {
console.log('con2')
industryBanner2()
return false
}
return false;
});
function industryBanner() {
console.log('aa')
let bannerLefts = 0;
let firsts = 1;
let lasts;
let imgCnts = 0;
let $imgs = $(".main_area.industry ul.hidden-area.con1 li");
// var $imgs = $('.main_area.industry ul.hidden-area:eq('+idx+') li');
let $firsts;
let $lasts;
$imgs.each(function () {
$(this).css("left", bannerLefts);
bannerLefts += $(this).width() + 20;
$(this).attr("id", "banners" + (++imgCnts));
});
if (imgCnts > 9) {
lasts = imgCnts;
setInterval(function () {
$imgs.each(function () {
$(this).css("left", $(this).position().left - 1);
});
$firsts = $("#banners" + firsts);
$lasts = $("#banners" + lasts);
if ($firsts.position().left < -200) {
$firsts.css("left", $lasts.position().left + $lasts.width() + 20);
firsts++;
lasts++;
if (lasts > imgCnts) {
lasts = 1;
}
if (firsts > imgCnts) {
firsts = 1;
}
}
}, 20);
}
}
industryBanner2()
function industryBanner2() {
let bannerLefts = 0;
let firsts = 1;
let lasts;
let imgCnts = 0;
let $imgs = $(".main_area.industry ul.hidden-area.con2 li");
console.log($imgs)
// var $imgs = $('.main_area.industry ul.hidden-area:eq('+idx+') li');
let $firsts;
let $lasts;
$imgs.each(function () {
$(this).css("left", bannerLefts);
bannerLefts += $(this).width() + 20;
$(this).attr("id", "banners" + (++imgCnts));
});
if (imgCnts > 9) {
lasts = imgCnts;
setInterval(function () {
$imgs.each(function () {
$(this).css("left", $(this).position().left - 1);
});
$firsts = $("#banners" + firsts);
$lasts = $("#banners" + lasts);
if ($firsts.position().left < -200) {
$firsts.css("left", $lasts.position().left + $lasts.width() + 20);
firsts++;
lasts++;
if (lasts > imgCnts) {
lasts = 1;
}
if (firsts > imgCnts) {
firsts = 1;
}
}
}, 20);
}
}
}
</script>11. 360px 모바일 디자인에서 이미지 추출할때 사이즈? 두배 추출?
12. 내 포트폴리오 그래프 스크립트 질문?
13. 퍼블리가 처리해야 할 스크립트?
14. 반응형 할때 한페이지 작업시 pc와 모바일 동시작업?
<개발영역>
1. 회원가입 유효성 검사 (보안영역 때문에)
기획 유효성 검사 요청으로 작업을 했는데 원래는 유효성 검사를 개발쪽 하는걸로 알고 있는데 기획자 요청헤서 하게 되었다. 근데 개발 영역 아니냐?
2. 구매, 회원가입 데이터 영역 개발자 영역( 제가 할 수는 있느데 원래 보통 개발자들이 연동하지 않냐? )
<디자이너 영역>
모바일 : 720px 디자인하고 이미지 사이즈 2배로 추출
<div>
<img src="이미지">
</div>
반응형사이트는 table 쓰지 않는다. 모바일 일때 작업 힘들다.
dl, dt, dd 또는 ul, li로 짠다.
<참고>
https://www.englisheye.co.kr/
'Client > JavaScript' 카테고리의 다른 글
| [error/javascript] Uncaught TypeError: 함수명 is not a function at HTMLSpanElement.onclick (0) | 2022.12.02 |
|---|---|
| ES6 사용 HTML 파일에서 include 하는 방법 (0) | 2022.11.24 |
| Fetch 사용하기 (0) | 2022.11.23 |
| Data Type (자료형) (0) | 2017.03.12 |
| 변수 (0) | 2017.03.12 |
공지사항
최근에 올라온 글