HB의 개발 블로그

[Web] 07. Javascript (Introduction~ Data Types) 본문

Web

[Web] 07. Javascript (Introduction~ Data Types)

빈형임 2020. 7. 28. 18:54

JavaScript 는 HTML과 Web 의 프로그래밍 언어이다.

간단한 예제들을 통해서 배우면 생각보다 배우기 쉽다.

 

HTML 은 웹 페이지의 contents 를 담당한다.

CSS 는 웹 페이지의 Layout을 구체화한다.

JavaScript는 웹 페이지의 동작을 프로그래밍 한다.

JavaScript Can Change HTML Content!!

getElementById().

getElementById() 메소드를 활용해서 HTML의 컨텐츠를 변경할 수 있다. 

 

<p id="ex">JavaScript can change HTML contents!!</p>

<button type="button" 
    onclick='document.getElementById("ex").innerHTML="Hello JavaScript!"'>Click Me!!</button>

id 를 통해서 element를 찾아서 그 컨텐츠를 innerHTML을 통해서 변경해준다.

 

 

JavaScript Can Change HTML Attribute Values!!

다음 예시에서는 src(source)의 value를 변경한다.

 

<button onclick="document.getElementById('myImage').src='pic_bulbon.gif'">Turn on the light</button>

<img id="myImage" src="pic_bulboff.gif" style="width:100px">
    
<button onclick="document.getElementById('myImage').src='pic_bulboff.gif'">Turn off the light</button>

 

JavaScript Can Change HTML Styles (CSS) !!

<p id="demo">JavaScript can change the style of an HTML element.</p>

<button type="button" onclick="document.getElementById('demo').style.fontSize='35px'">Click Me!</button>

 

JavaScript Can Hide HTML Elements !!

<p id="demo5">JavaScript can hide HTML elements.</p>

<button type="button"
    onclick="document.getElementById('demo5').style.display='none'">Click Me!</button>

 

JavaScript Can Show HTML Elements !!

 

<p id="demo6" style="display:none">Hello JavaScript!</p>
<button type="button" 
	onclick="document.getElementById('demo6').style.display='block'">Click Me!</button>

 

JavaScript Display

HTML에서는 JavaScript 코드를 <script> </script> 태그를 통하여 저장할 수 있다.

<body> 나 <head> 어디에나 넣을 수 있다.

 

JavaScript는 데이터를 보여주는데 여러가지 방법이 존재한다.

  • innerHTML.
  • document.write().
  • window.alert().
  • console.log().
    <p = id="innerHTMLex"></p>
    <script>
        document.getElementById("innerHTMLex").innerHTML = "innerHTML";
        document.write("document.write()");
        window.alert("window.alert()");
        console.log("console.log()");
    </script>

 

JavaScript Statements

A computer program is a list of "instructions" to be "executed" by a computer.

In a programming language, these programming instructions are called statements.

A JavaScript program is a list of programming statements.

 

In HTML, JavaScript programs are executed by the web browser.

 

JavaScript statements 는 Values, Operators, Expressions, Keywords, 그리고 Comments 로 구성되어 있다.

 

Semicolons ; 은 각각의 JavaScript의 statements들을 구분하는 역할을 한다.

 

 

 

 

JavaScript Keywords

KeyWord Description
break Terminates a switch or a loop
continue Jumps out of a loop and starts at the top
debugger Stops the execution of JavaScript, and calls (if available) the debugging function
do ... while Executes a block of statements, and repeats the block, while a condition is true
for Marks a block of statements to be executed, as long as a condition is true
function Declares a function
if ... else Marks a block of statements to be executed, depending on a condition
return Exits a function
switch Marks a block of statements to be executed, depending on different cases
try ... catch Implements error handling to a block of statements
   
var Declares a variable

 

 

JavaScript Syntax,  Comments

var x,y,z;			// How to declare variables
x = 5; y = 6;			// How to assign values
z = x + y;			// How to compute values

/*
Multi-line
Comments
*/

Literals: Fixed values

Variables: variable values

Comments: //

Multi-line Comments: /*  */

 

JavaScript 의 variables는 데이터 값을 저장하는 용기(container)와 같은 역할을 한다.

 

Arithmetic Operators

Operator Description
+ Addition
- Subtraction
* Multiplication
** Exponentiation (ES2016)
/ Division
% Modulus (Division Remainder)
++ Increment
-- Decrement

 

Assignment Operators

Operator Example Same As
= x = y x = y
+= x += y x = x + y
-= x -= y x = x - y
*= x *= y x = x * y
/= x /= y x = x / y
%= x %= y x = x % y
**= x **= y x = x ** y

 

Comparison Operators

Operator Description
== equal to
=== equal value and equal type
!= not equal
!== not equal value or not equal type
> greater than
< less than
>= greater than or equal to
<= less than or equal to
? ternary operator

 

Logical Operators

Operator Description
&& logical and
|| logical or
   
! logical not

 

Type Operators

Operator Description
typeof Returns the type of a variable
instanceof Returns true if an object is an instance of an object type

 

Bitwise Operators

Operator Description Example Same as Result Decimal
& AND 5 & 1 0101 & 0001 0001  1
| OR 5 | 1 0101 | 0001 0101  5
~ NOT ~ 5  ~0101 1010  10
^ XOR 5 ^ 1 0101 ^ 0001 0100  4
<< Zero fill left shift 5 << 1 0101 << 1 1010  10
>> Signed right shift 5 >> 1 0101 >> 1 0010   2
>>> Zero fill right shift 5 >>> 1 0101 >>> 1 0010   2

 

JavaScript Data Types

 

JavaScript variables can hold many data types: numbers, strings, objects, and more:

 

example:

var length = 16;                               // Number
var lastName = "Johnson";                      // String
var x = {firstName:"John", lastName:"Doe"};    // Object

 

 

When adding a string and a number, JavaScript will treat the number as a string.

 

var x = 16 + 4 + "Example";

//Result = 20Example

 

 

Arrays

var cars = ["Exam", "ple"];

Objects

var example = {firstname:"John", lastname:"Doe", age:50,eyeColor:"blue"};

'Web' 카테고리의 다른 글

[Web] 09.JavaScript (Forms~Nodes)  (0) 2020.07.29
[Web] 08.JavaScript (Functions~JSON)  (0) 2020.07.28
[Web] 06. HTML CSS  (0) 2020.07.26
[Web] 05. HTML Graphics  (0) 2020.07.26
[WEB] 04. HTML Forms  (0) 2020.07.21
'Web' Related Articles more