자바스크립트는 ?
웹프로그래밍에서 동적인 역활 움직임 해결하는 언어
alert, prompt, confirm - 자바스크립트의 내장함수 중 가장 많이 사용되는 3가지 함수 알아보기
스트립트에 hey를 function하기...,
<script>
function hey(){
alert('안녕하세요! 방문을 환영합니다');
}
</script>->바디에 movie 버튼에 onclick 에
<div class="mytitle">
<h1>BEST MOVIES OF ALL TIME </h1>
<button onclick="hey()">MOVIES</button>
</div>다음,, 홀짝함수이용 새로고침 안하고.. 클릭시 선택되도록
</style>
<script>
function hey(){
alert('안녕하세요! 방문을 환영합니다');
}
</script>
</head>
<body>
<div class="mytitle">
<h1>BEST MOVIES OF ALL TIME </h1>
<button onclick="hey()">MOVIES</button>
</div>다음,, 홀짝함수이용 새로고침 안하고.. 클릭시 선택되도록
movie버튼 클릭시 아래처럼 나오게
</style>
<script>
let count = 0
function hey(){
count += 1
if (count %2 == 0) {
alert(' 짝수!!')
} else {
alert(' 홀수!')
}
}
</script>count는 0 이고 count 에 1을 더하라 만약 2로 나눠(%) 0 이면 '짝수'라 표시하자..그외엔 홀수... -홀짝 판별함수 만들기
movie button 클릭때마다 홀수짝수로 보이면 새로고침 불필요
jquery -> 이미 작성된 javascriopt 코드
javascriot보다 직관
css에는 bootstrap... javascript 는 jquery!!
1. jquery-> console -> $('url').val( ~~~~ ) : 제막아래 입력창 url 에 ~~~갑 입력하고싶다..
가져오려면 $('#url').val()
박스감추자... hide 보여주자 show
$('#post-box').show() $('#post-box').show()
hide
show
$('#post-box').show()
카드 묶
<div class="wrap">
<div id="cards-box" class="row row-cols-1 row-cols-md-4 g-4">
<div class="col">
<div class="card">
<img src="https://movie-phinf.pstatic.net/20210728_221/1627440327667GyoYj_JPEG/movie_image.jpg..."
class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">여기에 제목이 들어가요e</h5>
<p class="card-text">여기는 내용들어가요..문단 , 단락 paragraph </p>
<P>⭐⭐⭐ </P>
<p class="mycomment">여기는 코멘트가 들어가요</p>
</div>
</div>
</div>
<div class="col">
<div class="card">
<img src="https://movie-phinf.pstatic.net/20210728_221/1627440327667GyoYj_JPEG/movie_image.jpg..."
class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">여기에 제목이 들어가요e</h5>
<p class="card-text">여기는 내용들어가요..문단 , 단락 paragraph </p>
<P>⭐⭐⭐ </P>
<p class="mycomment">여기는 코멘트가 들어가요</p>
</div>
</div>
</div>
<div class="col">
<div class="card">
<img src="https://movie-phinf.pstatic.net/20210728_221/1627440327667GyoYj_JPEG/movie_image.jpg..."
class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">여기에 제목이 들어가요e</h5>
<p class="card-text">여기는 내용들어가요..문단 , 단락 paragraph </p>
<P>⭐⭐⭐ </P>
<p class="mycomment">여기는 코멘트가 들어가요</p>
</div>
</div>
</div>
<div class="col">
<div class="card">
<img src="https://movie-phinf.pstatic.net/20210728_221/1627440327667GyoYj_JPEG/movie_image.jpg..."
class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">여기에 제목이 들어가요e</h5>
<p class="card-text">여기는 내용들어가요..문단 , 단락 paragraph </p>
<P>⭐⭐⭐ </P>
<p class="mycomment">여기는 코멘트가 들어가요</p>
</div>
</div>
</div>
</div>
</div>
`<button>나는 버튼이다</button>` -> 문자열에 jquery하
<div class="card">
<img src="https://movie-phinf.pstatic.net/20210728_221/1627440327667GyoYj_JPEG/movie_image.jpg..."
class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">여기에 제목이 들어가요e</h5>
<p class="card-text">여기는 내용들어가요..문단 , 단락 paragraph </p>
<P>⭐⭐⭐ </P>
<p class="mycomment">여기는 코멘트가 들어가요</p>
</div>
</div>
</div> `
undefined
$('#cards-box').append(temp_html)
S.fn.init [div#cards-box.row.row-cols-1.row-cols-md-4.g-4]
temp_html 에 ` `할 내용 정의하고 이 문자열에 $(''#cards-box').append(temp_html) 하가 그러면 카드가 하나씩 추가
zhsthfckdlet mytitle ='타이타닉'
undefined
let temp_html = `<div class="col">
<div class="card">
<img src="https://movie-phinf.pstatic.net/20210728_221/1627440327667GyoYj_JPEG/movie_image.jpg..."
class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">${mytitle}</h5>
<p class="card-text">여기는 내용들어가요..문단 , 단락 paragraph </p>
<P>⭐⭐⭐ </P>
<p class="mycomment">여기는 코멘트가 들어가요</p>
</div>
</div>
</div>`
undefined
$('#cards-box').append(temp_html)
S.fn.init [div#cards-box.row.row-cols-1.row-cols-md-4.g-4]
let temp_html = ` <div class="col">
<div class="card">
<img src="https://movie-phinf.pstatic.net/20210728_221/1627440327667GyoYj_JPEG/movie_image.jpg..."
class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">$(mytitle)</h5>
<p class="card-text">여기는 내용들어가요..문단 , 단락 paragraph </p>
<P>⭐⭐⭐ </P>
<p class="mycomment">여기는 코멘트가 들어가요</p>
</div>
</div>
</div> `
'Daily Coding from A to Z' 카테고리의 다른 글
| week 3 python , 크롤링, mongoDB 웹스크래핑 (0) | 2023.01.18 |
|---|---|
| week 2 ajax... api (0) | 2023.01.14 |
| 01. prologue : 로그인 page와 post 박스 (0) | 2023.01.02 |
| 웹개발 3주차 #19-#34 (0) | 2022.12.29 |
| 웹개발 5주차 (0) | 2022.12.29 |
