> For the complete documentation index, see [llms.txt](https://easonwang.gitbook.io/web_basic/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://easonwang.gitbook.io/web_basic/javascript_basic.md).

# Javascript basic

## Javascript basic

## **如何使用**

1.直接在HTML內加入

`<script> </script>`

2.外部檔案

`<script src=""> </script>`

## **選取**

1.選取id

```
document.getElementById("")
```

2.選取tag

```
document.getElementsByTagName("")
```

3.選取class

```
document.getElementsByClassName("")
```

## **型別**

```
var length = 16;                               // Number
var lastName = "Johnson";                      // String
var cars = ["Saab", "Volvo", "BMW"];           // Array
var x = {firstName:"John", lastName:"Doe"};    // Object
```

查詢型別

```
typeof "john"
```

<http://www.w3schools.com/js/tryit.asp?filename=tryjs_datatypes_typeof>

## 定義物件後可以使用陣列方式存取

<http://www.w3schools.com/js/tryit.asp?filename=tryjs_objects_properties_2>

## Scope

1.Local

區域變數只存在function內(以var 開頭)

2.Global

在function外宣告均為全域變數，在function內不以var 宣告亦為global

## Array

1.宣告

```
var as=[];

//or

as = new Array()
```

但以下這兩個為不同的意思

```
    e = [3]             // e.length == 1, e[0] == 3
    f = new Array(3),   // f.length == 3, f[0] == undefined
```

2.操作array <http://www.w3schools.com/js/js_array_methods.asp>

## 比較與表達

1.比較 <http://www.w3schools.com/js/js_comparisons.asp>

2.表達

1

```
if () {

}
```

2

```
if(){

}else{

}
```

3

```
if (time < 10) {
    greeting = "Good morning";
} else if (time < 20) {
    greeting = "Good day";
} else {
    greeting = "Good evening";
}
```

4

為什麼不放三個if就好?

```
//因為第一個if跑完他不會停，而會繼續往下跑其他if找是否有其他符合

ex:上例的time等於5
```

5\.

```
switch(expression) {
    case n:
        code block
        break;
    case n:
        code block
        break;
    default: //there is no case match
        default code block
}
```

6\.

```
for (i = 0; i < 5; i++) {
    text += "The number is " + i + "<br>";
}
```

7\.

```
var person = {fname:"John", lname:"Doe", age:25}; 

var text = "";
var x;
for (x in person) {
    text += person[x];
}
```

8\.

```
while (i < 10) {
    text += "The number is " + i;
    i++;
}
```

9\.

```
do {
    code block to be executed
}
while (condition);
```

加上do的差別在於他會先執行一次，再檢查

## Regular Expression

1.用途

When you search for data in a text, you can use this search pattern to describe what you are searching for.

簡言之:搜尋要找的字 RegExp

格式: / /

查找範圍: / /後可加g 或i或m 如/ /g / /gi g為找到一次後會繼續往後找，i為不分大小寫,m為找多行

查找字串 /as/g 每找到as就會印出as

查找字元 /\[as]/g 找到a或s會印出，一次只找一個字，//g 代表查找所有不是a\~z的字

查找特殊的字 /\b/g 查找所有數字，也是以單個字來查找

查找的附帶條件

* * ? 等等，記得是要放在方括號外面，如果有多個附帶條件可用括號刮起來

    ex:/<%(+)?%>/g

RegExp為一個object 其擁有的屬性如下

global RegExp 对象是否具有标志 g。 ignoreCase RegExp 对象是否具有标志 i。\
lastIndex 一个整数，标示开始下一次匹配的字符位置。 multiline RegExp 对象是否具有标志 m。\
source 正则表达式的源文本。

RegExp的 方法

compile 编译正则表达式。\
exec 检索字符串中指定的值。返回找到的值，并确定其位置。 test 检索字符串中指定的值。返回 true 或 false。

較常用的為exec，可用console出其反為物件(在chrome顯示為陣列，但其要使用物件存取)

ex:

```
var tpl = '<p>Hello, my name is <%name%>. I\'m <%age%> years old.</p>'

var re = /<%([^%>]+)?%>/g,

match;

var match = re.exec(tpl);

console.log(match);
結果:
["<%name%>", "name", index: 21, input: "<p>Hello, my name is <%name%>. I'm <%age%> years old.</p>"]
```

<http://www.w3schools.com/js/js_regexp.asp>

## JSON

<http://www.w3schools.com/js/js_json.asp>


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://easonwang.gitbook.io/web_basic/javascript_basic.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.