1 분 소요

이벤트

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        window.onload = function(event){
            alert(event);
        }
    </script>

</head>
<body>
    
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        window.onload = function() {
            const button = document.getElementById('button');
            button.onclick = function(){
                return false;
            }
        }
    </script>
</head>
<body>
    <a id="button" href="http://www.keduit.com">버튼</a>
</body>
</html>

jquery

image

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #box {
            width: 100px; height: 100px;
            background-color: blanchedalmond;
        }
        #box.hover{
            background-color: chartreuse;
            border-radius: 50px;
        }
    </style>
    <script src="https://code.jquery.com/jquery-3.4.1.js"></script>
    <script>
        $(document).ready(function(){
            $('h1').css('color','red');
            $('h1').css('background','black');

            $('img').attr('src','http://placehold.it/100x100');
            $('img').attr('width','100');

            $('#box').hover(function(){
                $('box').addClass('hover');
            }), function(){
                $('#box').removeClass('hover');
            }

        });
    </script>
</head>
<body>
    <h1>Header</h1>
    <h1>Header</h1>
    <h1>Header</h1>
    <h1>Header</h1>
    <h1>Header</h1>
    <img>
    <div id="box"></div>
</body>
</html>

블로그 - javascript & jquery 추가

image

    <script src="https://code.jquery.com/jquery-3.4.1.js"></script>
    <script>
        $(document).ready(function(){
            $('.outer-menu-li').hover(function(){
                $(this).find('.inner-menu').show();
            }, function(){
                $(this).find('.inner-menu').hide();
            })
        })
    </script>

MySQL

테이블 생성 및 간단한 index 실습.

  • 교재 51p 참조.
https://cafe.naver.com/thisisMySQL
카페에서 sample DATABASE 'employees' 다운 후 C: 저장.
window powershell 관리자모드 실행
cmd
/cd \employees
mysql -u root -p
1234 (비밀번호)
source employees.sql;
show database;  => 샘플 데이터베이스 확인.

image

image

SELECT * FROM productTBL ;
SELECT memberName from membertbl;
select * from membertbl where memberName='지운이';
select memberAddress from membertbl where memberName='상길이';
Select memberAddress 주소 from membertbl;

create table `my TestTBL` (id int); 
drop table `my TestTBL`;

-- 인덱스 --
create table indexTBL (first_name varchar(14),
last_name varchar(16), hire_date date);
insert into indexTBL
   select first_name, last_name, hire_date
   from employees.employees
   limit 500;
   select * from indextbl;
   select * from indextbl where first_name = 'Mary';
   create index idx_indexTBL_fn 
   on indextbl(first_name);
   select * from indextbl where first_name = 'Mary'; => full table scan => non-unique key lookup으로 cost가 많이 줄어든 모습.

댓글남기기