JavaScript_Basic

성보경·2022년 10월 4일

JavaScript basic web

JavaScript

목록 보기

1/2

JavaScript란?

1995년 Brendan Elch에 의해서 만들어진 가벼운 프로그래밍 언어이다.
자바스크립트는 웹페이지들이 상호작용도록 하는 데 사용된다.
1. html에 유동적인 텍스트를 입력한다.(ex. username)
2. 이벤트에 반응한다.(ex. 페이지 로드, 사용자의 마우스 클릭)
3. 사용자의 컴퓨터에 대한 정보를 가져온다.(ex. 무슨 브라우저를 사용하는 중인지)
4. 사용자의 컴퓨터에서 계산을 수행한다.
모든 브라우저에서 지원되는 것은 아니지만 웹 표준이다.
Java와 아무 관련없는 언어다.
browser, Adobe, Acrobat, Adobe Photoshop, Unix terminal 등에서 사용할 수 있다.

Client-Side Script

클라이언트(사용자) 특에서 처리하는 것.

클라이언트가 입력한 것을 수신해서 HTML로 만들어서 크롬과 같은 어플리케이션에 해석해서 표시한다.서버가 작업해야 할 부분 중 클라이언트가 할 수 있는 작업을 스스로 처리해서 서버의 작업량을 줄인다.

자바스크립트가 client-side script를 대표하는 언어다.

JavaScript vs Java

해석적이고 컴파일하지 않는다.
더 편한 문법과 규칙을 가진다.
- 변수를 선언할 필요없다.
- 에러가 보통 티나지 않는다.
- 더 적고 느슨한 데이터 타입
object/class보다 funtion이 주구조이다.
웹 페이지에 포함되고, HTML/CSS와 통합된다.

JavaScript 파일 연결하기

<!--<script src="filename" tupe="text/javascript"></script>-->
<script src="example.js" tupe="text/javascript"></script>

script 태그는 html 페이지의 head태그 안에 들어가야 한다.
코드는 별개의 .js파일에 저장된다. css처럼 html 파일의 body나 head에 직접 입렵해도 되지만, 좋은 방법이 아니므로 HTML, CSS, JS 파일을 따로 만드는 것을 추천한다.

Systax

alert

입력한 메세지와 함께 대화창을 띄우는 명령어다.

//systex
alert('message');   
//example
alert('Networking Lab - JS');

variables and types

변수는 let 명령어로 선언한다 (대/소문자 유의). let 대신 var이 사용할 수 있는데, 이것은 예전 규칙이니 되도록 let을 사용하도록 한다.

//systex
let name = expression

//example
let level = 23;         
let accuracyRate = 0.99;
let name = "Pikachu";

데이터 타입이 지정되지는 않지만, 자바스크립트는 type을 가진다. (=> 'loosely typed')

Number, Boolean, String, Array, Object, Function, Null, Undefined
typeof를 호출하여 변수 유형을 알 수 있다.
유형변환이 항상 가능하진(예상되지는) 않다.

number type

자바스크립트에서는 정수와 실수의 구분이 없다.
다른 프로그래밍 언어와 같은 연산자를 사용하며, 자바와 유사한 우선순위를 가진다.
많은 연산자들이 자동으로 타입을 전환한다.
"2" * 3 is 6

//example
let enrollment = 99;         
let mediangrade = 2.8;
let credits = 5 + 4 + (2 * 3);

String type

String 관련 method는 다음과 같다.
charAt , charCodeAt , fromCharCode , indexOf ,lastIndexOf , replace, split, substring, toLowerCase , toUpperCase
charAt은 한 글자의 문자열을 반환한다. (char type이 없다)
length는 특성(property)이다. (자바에서처럼, method가 아니다)
+를 이용한 연결
1 + 1 = 2이지만 "1" + 1 = "11"이다.

숫자와 문자열 간의 전환

let count = 10; // 10
let stringedCount = "" + count; // "10"
let helloCount = count + " hello!"; // "10 hello!"
let magicNum = parseInt("42 is the answer"); // 42
let mystery = parseFloat("Am I a number?"); // NaN

Escape sequences는 자바와 같이 작동한다. \' \" \& \n \t \\

Escape sequences?
키보드로 표현할 수 없는 제어문자들과 출력되지 않는 문자들을 가리킨다. 보통 역슬래시()와 문자와 결합하여 사용한다.

String s의 문자에 접근하려면, s[index] 또는 s.charAt(index)를 사용한다.

let firstLetter = helloCount [0]; // "1"
let fourthLetter = helloCount.charAt (3); // “h"
let lastLetter = helloCount.charAt helloCount.length 1); // "!"

logical operators

관계 연산자: > < >= <=
논리 연산자: && || !
등호: == != === !==
- 대부분의 logical operator는 자동으로 type을 변환한다.
  다음은 모두 true이다.
```
5 < "7"
42 == 42.0
"5.0" == 5
```
- === !==는 엄격한 등호로, 양쪽의 type과 값 모두를 확인한다.
  "5.0" === 5는 false

boolean type

어떤 값도 불리안으로써 사용될 수 있다.
- false : 0, 0.0, NaN, "", null, and undefined
- true : 다른 거 다.
```
let iLikeJs = true;
let ieIsGood = "IE6" >0; //false
if ("web dev is great") // true
if (0) // false
```
value를 불리안으로 변환하기 Boolean
```
let boolValue = Boolean(otherValue);
```

null and undefined

undefined는 선언되지 않아서 존재하지 않는다.

null은 존재는 하지만 특별하게 빈 공간이나 null value가 할당되어 있다.

let foo = null;  // foo is null
let bar = 9; // bar is 9
let baz; //baz is undefined

array

배열을 초기화하는 방법은 2가지이다.

length속성은 요소가 추가될 때, 필요에 따라 변경된다.
배열은 다양한 데이터구조를 제공한다. list queue stack
method: concat , join, pop, push, reverse, shift, slice, sort, splice, toString , unshift
- push와 pop은 뒤부터 추가/제거한다.
- shift와 unshift는 앞에서부터 추가/제거한다.
- shift는 제거된 요소를 반환한다.
- pop은 (제거되지 않은) 첫 요소를 반환한다.

split and join

split은 구획문자(delimiter)를 사용해서 문자열을 배열로 분해?한다.
- /로 둘러싸인 정규식과 함께 사용할 수도 있다.
- let a = s.split (/[\t]+/);
join은 배열을 단일 문자열로 합쳐준다. 구획문자를 사이에 둔다.

if/else statements

자바와 동일한 문법이다.
자바스크립트에서는 거의 모든 값을 조건에 넣을 수 있다.

if (condition){
 statements;
}else if (condition) {
 statements;
}else {
 statements;
}

`for` loop

자바와 동일한 문법이다.

//systex
for (initialization; condition; update){
	statements;
}

//example1
let sum =0;
for (let i = 0; i < 100; i++) {
sum = sum + i;
}

//example2
let s1 = "It's a-me, Mario!";
let s2 = "";
for (let i=0; i<s.length; i++){
s2 =+ s1[i] + s1[i];
} 
//s2 stores "IItt''ss aa--mmee,, MMaarriioo!!"

while loop

자바와 동일한 문법이다.
break와 continue도 동일하게 작동한다.

while (condition) {
  statements;
}
do {
  statements;
} while (condition);

Math object

method는 abs, ceil, cos, floor, log, max, min, pow, random, round, sin, sqrt, tan 이 있다.
property는 E, PI가 있다.

comments(주석)

자바와 동일한 문법이다.

// single-line comment
/* multi-line
conmment */

function

함수 내에 있는 statements는 사용자 이벤트에 대응하여 실행될 수 있다.

//systax
function name() {
  statement;
  statement;
  ...
}
//example
function myFunction(){
  alert("Hello!");
  alert("Your browser says hi!");
}

Event-Driven Programming

자바와 다르게 자바스크립트는 메인기능을 가지지 않고, 이벤트라고 불리는 사용자의 액션에 반응한다.

event handler

JavaScript 함수를 이벤트 핸들러로 설정할 수 있다.
사용자가 요소와 상호 작용하면, 함수가 실행됩니다.
온클릭은 사용할 수 있는 많은 이벤트 HTML 속성 중 하나일 뿐이다.

<element attribute onclick="function();">...

<div onclick="myFunction();">Click me!</div>

button

button의 텍스트는 태그 사이에 있고, 텍스트가 아닌 이미지를 포함할 수도 있다.

반응하는 버튼 또는 다른 UI control을 만들기 위해서는
1. control(ex. button)과 event(ex. 마우스 클릭)을 고른다.
2. 이벤트가 발생했을 때 실행할 자바스크립트 함수를 작성한다.
3. 작성한 함수를 control에 대한 이벤트에 연결한다.

Accessing an element

document.getElementById는 지정된 ID를 가진 요소에 대한 DOM 개체를 반환합니다(ID를 제공할 때 #을 생략한다).

//systax
let name = document.getElementById("id");

//example
function changeimage() {
  let pokeballImg = document.getElementById("pokeball");
  pokeballImg.src = "images/mystery.gif";

<img id="pokeball" src="images/mystery.gif" alt="a pokeball" />
<button onclick="changeImage();">Click me!</button>

문서 객체 모델 (DOM, Document Object Model)

XML이나 HTML 문서에 접근하기 위한 일종의 인터페이스입니다.

이 객체 모델은 문서 내의 모든 요소를 정의하고, 각각의 요소에 접근하는 방법을 제공합니다.

form validation

form validation을 사용하려면 HTML 태그에 대해 몇 가지 알아야 한다.

input tag

textarea

초기 텍스트는 textarea 태그 안에 배치한다. (선택 사항)
필수 rows 및 cols 속성은 문자 단위로 높이/너비를 지정한다.
선택인 readonly속성은 텍스트를 수정할 수 없음을 의미한다.

공부 사이트

https://developer.mozilla.org/enUS/docs/Learn/Getting_started_with_the_web/JavaScript_basics
<https://www.codecademy.com/learn/introduction to javascript>

실습

https://practiceit.cs.washington.edu/
https://codestepbystep.com/

성보경

다음 포스트

JavaScript_Basic

JavaScript

JavaScript란?

Client-Side Script

JavaScript vs Java

JavaScript 파일 연결하기

Systax

alert

variables and types

number type

String type

logical operators

boolean type

null and undefined

array

split and join

if/else statements

`for` loop

while loop

Math object

comments(주석)

function

Event-Driven Programming

event handler

button

Accessing an element

form validation

input tag

textarea

공부 사이트

실습

웹사이트 추천

JavaScript DOM

0개의 댓글

JavaScript_Basic

JavaScript

JavaScript란?

Client-Side Script

JavaScript vs Java

JavaScript 파일 연결하기

Systax

alert

variables and types

number type

String type

logical operators

boolean type

null and undefined

array

split and join

if/else statements

for loop

while loop

Math object

comments(주석)

function

Event-Driven Programming

event handler

button

Accessing an element

form validation

input tag

textarea

공부 사이트

실습

웹사이트 추천

JavaScript DOM

0개의 댓글

`for` loop