---
# System prepended metadata

title: Web js by 陳老師

---

# Web js by 陳老師




## Using ID

- onclick -> get ID

```htmlmixed=
<!DOCTYPE html>
<html>

    <head>
    </head>
    <body>
    <p id="demo" ></p>
    <script>
        document.getElementById("demo").innerHTML="meow";
    </script>   
    </body>
</html>
```
getElementById() -> get id 
"string" put in to ID

### CSS+JS Function

```javascript=
<!DOCTYPE html>


<html>

    <head>
        
        
    </head>

    <P id ="StyleChange">JavaScript can change the style of an HTML element</P>
    
    <body  style="background-color: pink;">
        
    <p id="demo" ></p>
    <script>
        document.getElementById("demo").innerHTML="meow";
        function StyleChange(){
            document.getElementById("StyleChange").style.fontSize = "25px";
            document.getElementById("StyleChange").style.color = "white";
            document.getElementById("StyleChange").style.background = "pink";
        }
            
    </script>   
    <button type="button" onclick="StyleChange()">ChagneStyle</button>
    </body>
</html>
```
- Point : ID using way

### to change attributes

```javascript=
ocument.getElementById("image").src = "picture.gif";
```

---

- example 

```htmlmixed=
<!DOCTYPE html>


<html>

    <head>
        <style>
            img{
                width: 200px;
                height: 200px;
            }
        </style>
        
    </head>

    <P id ="StyleChange">Before we lean how to use js to hack, we must to know how to use js to develop. </P>
    
    <body  style="background-color: pink;">
        
    <p id="demo" ></p>
    <script>
        document.getElementById("demo").innerHTML="meow";
        function StyleChange(){
            document.getElementById("StyleChange").style.fontSize = "25px";
            document.getElementById("StyleChange").style.color = "white";
            document.getElementById("StyleChange").style.background = "pink";
        }
        function Picture(img){
            var img;
            if(img == 0){
                ImgSrc="妹子1.jpg";
            }
            else{
                ImgSrc="妹子2.jpg";
                
            }
            document.getElementById("girl").src=ImgSrc;
        }
            
    </script>   

    <button type="button" onclick="StyleChange()">ChagneStyle</button>
    <img id="girl" scr="妹子1.jpg">
    <button type="button" onclick="Picture(0)">small</button>
    <button type="button" onclick="Picture(1)">big</button>
    </body>
</html>

```

## Include js

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


## Objects
```javascript=
    var fruit ={name:"apple", price:"500"}
    
    
    // if u want to call element
    // fruit.name     (print apple)
```

## Template literal

- Using time
    - connect string with variable
    - new lines and want to keep form 

```javascript=
document.getElementById("assessment").innerHTML=`
                    Age: ${girl.age1} </br>
                    HairStyle: ${girl.hairStyle1} </br> 
                    attracive index: ${girl.powerIndex1}`
```
` string `
variable -> ${}


## Array Attrubute


## typeof <variable>

return datatype

```javascript=
array=[]
typeof array
```




### Array.join("<charator>")

```javascript=
const array=[1,2,3]
array[10]=9

array.join(",") // it would connect by charator ,also you could try "+" 
```
