'HTML 5'에 해당되는 글 1건

  1. 2021.03.27 Java Script "Hello World"함수 만들기

먼저 html:5의 기본 스닛펫을 살펴보자

<!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>
</head>
<body>

</body>
</html>

1. doctype 선언

2. html 선언 안에 <head></head> 그리고 <dody></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>
        function fnHelloWorld(){
            alert("안녕하세요");
        }
    </script>
</head>
<body>
    <button onclick="fnHelloWorld()">눌러 주세요.</button>
</body>
</html>

1. <head>태그안에 <script>태그를 넣고 function이라고 적는다. 한칸을 띄우고 자신이 만들 function 의 이름을 적어준다. 보통 단어마다 첫 단어를 대문자로 쓰는데, 꼭 낙다 봉우리 같다해서 카멜케이스라고 부른다. 앞쪽에 접두어 fn을 붙이면 나중에 변수인지 함수인지 구별하기 쉽다.  { } 중괄호 안에 자신의 함수 내용을 적으면 되는데, 지금 코드에서는 alert이라는 함수 자바스크림트에서 alert()을 만나면 작은 새창을 띄워준다. 괄호 안에 쌍 따옴표를 찍고 자신이 띄우고자 하는 무구를 쓰면 되다. 현재 코드는 "안녕하세요"라는 문구가 뜬다. 

2. 이제 <body> 부분에 함수를 호출을 만들어 보자.  버튼을 누르면 "안녕하세요"라는 문구가 뜰 것이므로 <button>태그 안에 onclick= 까지 적은은 쌍 따옴표 안에 함수 이름을 적는다. 여기에 괄호를() 끝에 붙여주면 함수라는 의미가 된다. 

3. 자 이제 저장한후 브라우저에서 이 파일을 열어보면 작은 버튼이 보이고 누르면 바로 작은 창을 띄워준다. 

버튼을 눌렀을 때 화면

 

Posted by 개척군사
,