UI/UX_012

Notice

Recent Posts

Recent Comments

Link

« 2025/10 »
일	월	화	수	목	금	토
			1	2	3	4
5	6	7	8	9	10	11
12	13	14	15	16	17	18
19	20	21	22	23	24	25
26	27	28	29	30	31

Tags more

Archives

Today

Total

관리 메뉴

Be a groovy man by positive thinking

UI/UX_012 본문

IT/_HTML_CSS_JS

UI/UX_012

KhanSelf 2017. 7. 18. 17:01

간단정리

1. 자바스크립트

- 동적 기능 수행

1) 브라우저가 소스코드를 직접 해석하여 실행하는 인터프리트 언어

2) 브라우저 위에서 실행한다
3) HTML파일 안에 삽입 가능

2.자바스크립트 작성

1) 자바 스크립트 코드 위치
- 기본 페이지의 head 태그 사이에 script 태크 삽입
- script 태그 사이에 자바스크립트 코드 입력
- HTML5에서는 script 태그에 type 속성을 적지 않는 게 원칙
- 외부 파일 연결

3. 자바스크립트 기본 문법

1) 자바스크립트 문장은 ;(세미콜론)으로 구분된다. 문장이 끝나는 지점에 세미콜론을 찍어준다.
var test="Good Morning";

2) 문자열(String)은 "(쌍따옴표) 또는 '(단따옴표)를 붙여서 사용한다.
"Hello"

'Hello'

3) 변수는 값(value)를 저장하는데 사용한다.

- 자바스크립트에서 변수는 var 키워드를 사용한다.

- 자바스크립트에서 = 표시는 변수에 값을 할당한다는 뜻이지 같다는 등호표시가 아니다.
var test;

test = 10; [test라는 변수에 10이라는 값을 저장(할당)한다는 뜻이다]

4) 자바스크립트에서 주석은 // 를 사용하며 // 뒤에 있는 모든 것은 실행되지 않는다.

만약 여러 줄을 주석처리 하고 싶으면 /* .... */ 을 사용하면 된다.

var test = 3 + 4; // test 라는 변수에 7을 저장한다.

// var test = 20 이문장은 실행 되지 않는다.

5) 자바스크립트는 대소문자를 구별하는 언어이므로 꼭 대소문자를 구분해서 사용해야 한다.

Test = 10;

teSt = 10; // Test와 teSt는 서로 다른 변수 이다.

4. 변수
- 값을 저장할 때 사용하는 식별자
- 숫자뿐 아니라 모든 자료형 저장 가능

- 변수 선언 : 변수를 만듦
- 변수에 값 할당 : 변수 초기화
- 변수 선언 방법 : Var 식별자 ;

- typeof 연산자 : 자료형을 확인할 때 사용

        // 출력합니다.
        document.write(2 * pi * radius);
    </script>

5. 자바스크립트 기본 문법

1) 키워드
- 자바스크립트가 처음 만들어질 때 정해진 특별한 의미가 있는 단어
- 미래에 사용될 가능성이 있는 자바스크립트 키워드

2) 식별자
- 자바스크립트에서 이름을 붙일 때 사용
- 식별자의 예 : 변수명과 함수명
- 식별자 생성 시 규칙
키워드를 사용 불가
숫자로 시작하면 불가
특수 문자는 _과 $만 허용
공백 문자 포함 불가

3) 자바스크립트 출력
- 기본 출력 방법 :
alert ( ) 함수를 사용할 구성 예제 코드
document.write();

4) 매개 변수
함수의 괄호 안에 들어가는 것

5) 문자열
- 문자를 표현할 때 사용하는 자료의 형태
- alert() 함수의 매개 변수로 쓰인 'Hello JavaScript..!‘ 와 같은 자료
- 문자열을 만드는 방법
큰따옴표의 사용 : “동해물과 백두산이”
작은따옴표의 사용 : ‘동해물과 백두산이’
두 가지 방법 중 어떤 문자열로도 사용 가능하지만 일관되게 사용해야 함

6) 이스케이프 문자
- 특수한 기능을 수행하는 문자

alert('Hello \nWorld..!');

- \t : 탭
- \n : 줄바꿈
- \\ : 역슬래쉬

7) 자바스크립트 자료형
- 문자열 (string) : 작은따옴표, 큰따옴표 안에 들어가는 모든것을 정의
연결 연산자(덧셈 기호: +)로 연결 가능

- 숫자 (number) : 계산식이 가능한 모든 숫자, 정수 실수 모두 포함
- 불리언 (boolean) : 참/거짓 ture false
- 함수 (function) : 특정 기능수행이 가능한 코드의 집합
- 객체 (object)
- Undefined : 정의되지 않은 값 var x; // x 값이 없으므로 자료형은 underfined 입니다.

8) 증감 연산자 : 값을 더하거나 뺌
변수++ : 해당 문장을 실행한 후에 값을 더함
++변수 : 먼저 더하고 그 다음 실행
변수-- :
--변수 :

alert(number++);
===> alert(number); number+=1;

9) 문자열 입력
var in = prompt("메세지","디폴트값:생략가능");
문자열만 입력가능
숫자 입력받을 경우 Number()함수를 이용해 변환
Number()함수를 이용해 숫자로 변환시 숫자 값이 아닌 경우 NaN 반환
숫자이지만 표현 할 수 없는 숫자 값

10) 자료형 변환 - 문자열과 숫자 연산 시 자동으로 형 변환
: 숫자와 문자열을 덧셈 연산하면 문자열 우선
: 그 외 사칙연산은 숫자가 우선

11) 강제 형 변환
- Number()
- String()
- Boolean() : 값이 있으면 true 없거나 0은 false

[출처]

UI/UX엔지니어링과정 2017년 7월 18일 수업내용 (서울IT교육센터직업전문학교) |작성자 송미진

예문

Ex_01 script태그 사이 소스를 각각 실행해보세요(ex. alert(), document.write())

<!DOCTYPE html>

<html>

<head>

<title>Insert title here</title>

<style>

</style>

alert("hello javascript");

//document.write("hello javascript");

</script>

</head>

<body>

</body>

</html>

Ex_02 \n 사용

<!DOCTYPE html>

<html>

<head>

<title>Insert title here</title>

alert("This is \nstring");

</script>

</head>

<body>

</body>

</html>

Ex_03 \\사용

<!DOCTYPE html>

<html>

<head>

<title>Insert title here</title>

alert("This is \\string");

</script>

</head>

<body>

</body>

</html>

Ex_04 + : 연결연산자

<!DOCTYPE html>

<html>

<head>

<title>Insert title here</title>

alert("동해물과" + "백두산이");

</script>

</head>

<body>

</body>

</html>

Ex_05

<!DOCTYPE html>

<html>

<head>

<title>Insert title here</title>

// 변수를 선언 및 초기화합니다.

var radius; ///선언

radius = 10; /// 할당

var pi = 3.14159265;

// 출력합니다.

document.write(2 * pi * radius);

</script>

</head>

<body>

</body>

</html>

Ex_06

<!DOCTYPE html>

<html>

<head>

<title>Insert title here</title>

// 변수를 선언 및 초기화합니다.

var radius = 10, pi = 3.14159265;

// 출력합니다.

alert(2 * pi * radius);

</script>

</head>

<body>

</body>

</html>

Ex_07

<!DOCTYPE html>

<html>

<head>

<title>Insert title here</title>

// 변수를 선언합니다.

var favoriteFood = '김치 찌개';

var favoriteFood = '라면';

var favoriteFood = '냉면';

// 출력합니다.

document.write(favoriteFood);

</script>

</head>

<body>

</body>

</html>

Ex_08 typeof

<!DOCTYPE html>

<html>

<head>

<title>Insert title here</title>

// 문자열

//document.write('String 의 자료형은 : ');

document.write(typeof ('String'));

document.write("<br />");

//document.write('"273" 의 자료형은 : ');

document.write(typeof ('273'));

document.write("<br />");

// 숫자

//document.write('273 의 자료형은 : '));

document.write(typeof (273));

document.write("<br />");

// 불

//document.write('true 의 자료형은 : ');

document.write(typeof (true));

document.write("<br />");

// 함수

//document.write('function () { } 의 자료형은 : ');

document.write(typeof (function() {

}));

document.write("<br />");

// 객체

//document.write(' {}의 자료형은 : ');

document.write(typeof ({}));

document.write("<br />");

// undefined

//document.write(' alpha의 자료형은 : ');

document.write(typeof (alpha));

</script>

</head>

<body>

</body>

</html>

Ex_09

<!DOCTYPE html>

<html>

<head>

<title>Insert title here</title>

var a1, a2, a3;

a1 = 1;

a2 = 2.3;

a3 = a1 + a2;

alert(a3);

</script>

</head>

<body>

</body>

</html>

Ex_10

<!DOCTYPE html>

<html>

<head>

<title>Insert title here</title>

document.write(5 + 3 * 2 + "<br />");

document.write((5 + 3) * 2);

</script>

</head>

<body>

</body>

</html>

Ex_11

<!DOCTYPE html>

<html>

<head>

<title>Insert title here</title>

document.write("52 < 273 의 결과값은 ");

document.write(52 < 273);

document.write("<br />");

document.write("52 > 273 의 결과값은 ");

document.write(52 > 273);

</script>

</head>

<body>

</body>

</html>

Ex_12

<!DOCTYPE html>

<html>

<head>

<title>Insert title here</title>

// 변수를 선언합니다.

var number = 10;

// 출력합니다.

document.write(number++); // 10을출력한 다음 연산 된 결과 11

document.write("<br />");

document.write(number++); //11을 출력한 다음 연산 결과 12

document.write("<br />");

document.write(number++); // 12 출력한 다음 연산 결과 13

</script>

</head>

<body>

</body>

</html>

Ex_13

<!DOCTYPE html>

<html>

<head>

<title>Insert title here</title>

// 변수를 선언합니다.

var number = 10;

// 출력합니다.

document.write(++number); // 10에 먼저 더하고 출력된 결과 11

document.write("<br />");

document.write(++number); // 11에 먼저 더하고 출력된 결과 12

document.write("<br />");

document.write(++number); // 12에 먼저 더하고 출력된 결과 13

</script>

</head>

<body>

</body>

</html>

Ex_14

<!DOCTYPE html>

<html>

<head>

<title>Insert title here</title>

// 변수를 선언합니다.

var number = 10;

// 출력합니다.

document.write(number++); // 10을 출력하고 연산함 ==> 11

document.write("<br />");

document.write(++number); // 연산하고 출력 12

document.write("<br />");

document.write(number--); // 12 출력하고 연산 11

document.write("<br />");

document.write(--number); // 연산하고 10출력

</script>

</head>

<body>

</body>

</html>

Ex_15 복합연산자

<!DOCTYPE html>

<html>

<head>

<title>Insert title here</title>

// 변수를 선언합니다.

var value = 10;

// 연산자를 사용합니다.

value += 10;

//value = value + 10;

// 출력합니다.

alert(value);

</script>

</head>

<body>

</body>

</html>

Ex_16

<!DOCTYPE html>

<html>

<head>

<title>Insert title here</title>

// 문자열 연산

document.write("'52 + 273' 의 값은 ");

document.write('52 + 273');

document.write("<br />");

// 숫자 연산

document.write("52 + 273 의 값은 ");

document.write(52 + 273);

document.write("<br />");

// 문자열로 연산

document.write("'52' + 273 의 값은 ");

document.write('52' + 273);

document.write("<br />");

// 문자열로 연산

document.write("52 + '273' 의 값은 ");

document.write(52 + '273');

document.write("<br />");

// 문자열로 연산

document.write("'52' + '273' 의 값은 ");

document.write('52' + '273');

document.write("<br />");

</script>

</head>

<body>

</body>

</html>

Ex_17

<!DOCTYPE html>

<html>

<head>

<title>Insert title here</title>

document.write("'52 * 273' 의 값은 ");

document.write('52 * 273');

document.write("<br />");

document.write("52 * 273 의 값은 ");

document.write(52 * 273);

document.write("<br />");

document.write("'52' * 273 의 값은 ");

document.write('52' * 273);

document.write("<br />");

document.write("52 * '273' 의 값은 ");

document.write(52 * '273');

document.write("<br />");

document.write("'52' * '273' 의 값은 ");

document.write('52' * '273');

</script>

</head>

<body>

</body>

</html>

Ex_18

<!DOCTYPE html>

<html>

<head>

<title>Insert title here</title>

// 변수를 선언합니다.

var abc;

abc = prompt('값을 입력하세요.', '');

// 출력합니다.

document.write(abc);

</script>

</head>

<body>

</body>

</html>

Ex_19

<!DOCTYPE html>

<html>

<head>

<title>Insert title here</title>

// 변수를 선언합니다.

var abc = prompt('값을 입력하세요.', '');

// 출력합니다.

document.write(typeof (abc));

</script>

</head>

<body>

</body>

</html>

Ex_20

<!DOCTYPE html>

<html>

<head>

<title>Insert title here</title>

// 변수를 선언합니다.

var abc1 = prompt('숫자를 입력해주세요.', '');

var abc2 = prompt('숫자를 입력해주세요.', '');

// 2개의 숫자를 사용자로 부터 입력 받아 덧셈 계산 한 뒤에 결과 값을 출력

var abc3 = Number(abc1);

var abc4 = Number(abc2);

var sum = abc3 + abc4;

alert(sum);

</script>

</head>

<body>

</body>

</html>

Ex_21

<!DOCTYPE html>

<html>

<head>

<title>Insert title here</title>

// 변수를 선언합니다.

var abc1 = prompt('숫자를 입력해주세요.', '');

var abc2 = prompt('숫자를 입력해주세요.', '');

// 2개의 숫자를 사용자로 부터 입력 받아 덧셈 계산 한 뒤에 결과 값을 출력

var sum = Number(abc1) + Number(abc2);

alert(sum);

</script>

</head>

<body>

</body>

</html>

Ex_22

<!DOCTYPE html>

<html>

<head>

<title>Insert title here</title>

document.write("1의 문자 변환값은 ");

document.write(String(1));

document.write("<br />");

document.write("0의 문자 변환값은 ");

document.write(String(0));

document.write("<br />");

document.write("100+23의 문자 변환값은 ");

document.write(String(100 + 23));

document.write("<br />");

document.write("' '의 문자 변환값은 ");

document.write(String(''));

</script>

</head>

<body>

</body>

</html>

Ex_23

<!DOCTYPE html>

<html>

<head>

<title>Insert title here</title>

document.write("숫자 0의 불린 변환값은 ");

document.write(Boolean(0));

document.write("<br />");

document.write("숫자 1의 불린 변환값은 ");

document.write(Boolean(1));

document.write("<br />");

document.write("NaN 의 불린 변환값은 ");

document.write(Boolean(NaN));

document.write("<br />");

document.write("공백의 불린 변환값은 ");

document.write(Boolean(''));

document.write("<br />");

document.write("문자 0의 불린 변환값은 ");

document.write(Boolean('0'));

document.write("<br />");

document.write("undefined의 불린 변환값은 ");

document.write(Boolean(undefined));

</script>

</head>

<body>

</body>

</html>정리

저작자표시 (새창열림)

'IT > _HTML_CSS_JS' 카테고리의 다른 글

UI/UX_014 (0)	2017.07.20
UI/UX_013 (0)	2017.07.19
UI/UX_HTML,CSS 깜짝퀴즈 (0)	2017.07.17
UI/UX_011 (0)	2017.07.14
UI/UX_010 (0)	2017.07.13

'IT/_HTML_CSS_JS' Related Articles

Be a groovy man by positive thinking

UI/UX_012 본문

UI/UX_012

'IT > _HTML_CSS_JS' 카테고리의 다른 글

티스토리툴바