Frontend/Jquary
JQ 기본 1
Jenny_yoon
2022. 12. 29. 12:24
728x90
반응형
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-compatible" content="IE=Edge,chrome=1">
<meta name="viewport" content="width=device-width">
<title>Jquery 1일차 - 기본사항</title>
<script src="./jquery.js"></script> <!-- jq엔진 필수! -->
<!-- 엔진이 꼭 위에 있어야 작동함 -->
<script>
//방법1(잘 안씀)
// $(document).ready(function(){
// /* jq문법은 꼭 ready함수 안에 적용 해야함 */
// alert("test");
// });
//방법2(2번째로 많이 씀)
// $().ready(function(){
// alert("test");
// })
//방법3(제일 많이 씀)
$(function(){
alert("test");
});
$(function(){
var $a = 1;
var $b = 1;
var $c = $a+$b;
console.log($c);
var $f;
for($f=1; $f<11; $f++){
console.log($f);
}
});
</script>
</head>
<body>
</body>
</html><script>
$(document).ready(function(){
var $a = 10;
let $b = 20;
const $c = 100; //상수(절대 변하지 않는 값)
var $a =100; //var : 변수값 변경 가능. 동일한 변수명 재사용 가능
//let $b = 200; //(에러!) let : 변수 값만 변경가능. 동일한 변수명 재사용 불가능
//const $c = 1000; //(에러!) const : 한번 선언 후 값 수정 불가능. 변수명 재사용 불가능
if($a> $b){
alert($a+"값이 크다.");
}
else if($a< $b){
alert($b+"값이 크다.");
}
else{
alert("같다.");
}
//반복문
for(var $f=$b; $f>0; $f--){
console.log($f);
}
var $w=1;
while($w<10){
$c--; //(에러!)상수는 값변경 불가능
let $sum = $w + $c;
console.log($sum);
$w++;
//응용문제2~5단 구구단 출력
for(let $i=2; $i<10; $i++){
for(let $j=1; $j<10; $j++){
$sum1 = $i * $j;
// console.log($i + "*" +$j+ "=" + $sum1);
}
}
}
//선택문
var $s = 1;
switch($s){
case 1: alert("1");
break;
case 2: alert("1");
break;
}
//jq 상수 선언
const $data="100";
});
//함수 밖에 나온 순간 jq가 아닌 js로 변함
//js상수 선언
const $data ="200"; //$는 그저 변수이름
console.log($data); //200 (100이 아닌 200을 찍음. 100은 jq상수. 200은 js상수. 따라서 $data두번 선언 가능한 것)
</script><!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-compatible" content="IE=Edge,chrome=1">
<meta name="viewport" content="width=device-width">
<title>jq2일차 - 핸들링</title>
<script src="./jquery.js"></script>
<script>
$(function(){
//click= onclick()과 같은 기능(함수)
//$("#btn").click(function(){
//오브젝트값 가져올때 사용
//var $a = $("#mid").val();
//alert($a);
//오브젝트에 값을 입력시킬때 사용
//$("#mid").val("강감찬");
$("#btn2").click(function(){
const $num = $("#mid2").val();
const $num2 = $("#mid3").val();
var $sum = 1;
$sum = $num * $num2;
console.log($sum);
});
});
</script>
</head>
<body>
<!-- <input type ="text" name="mid" id="mid"> jq는 id로만 핸들링 가능(name으로 불가능) -->
<!-- <input type ="button" value="클릭" id="btn"> -->
<!-- 응용문제.
사용자가 2개 값 입력함. 2개의 값을 곱한후 콘솔출력해라 -->
<input type ="text" name="mid2" id="mid2">
<input type ="text" name="mid3" id="mid3">
<input type ="button" value="클릭" id="btn2">
</body>
</html>728x90
반응형