JavaScript
一個完整的網頁,分爲三個部分組成:
HTML:網頁架構和內容
CSS:網頁的樣式
JavaScript:網頁的行爲
Java在網頁中,有三種寫法:
第一種:直接在HTML標籤裏面寫
<a href="javascript:alert(111)">超鏈接點擊</a>
<h4 onclick="javascript:alert(111)">文本點擊</h4>
第二種:<script>標籤可以寫在 head body 裏面 html 外面
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>我的第一個js</title>
<script>
alert("JavaScript第一次被運行");
</script>
</head>
<body>
<a href="javascript:alert(111)">超鏈接點擊</a>
<h4 onclick="javascript:alert(111)">文本點擊</h4>
<script>
alert("JavaScript第二次被運行");
</script>
</body>
</html>
<script>
alert("JavaScript最後一次次被運行");
</script>
第三種:使用外部文件引入的方式:
首先 新建一個js文件 demo.js 記住:所以外部JavaScript文件的後綴 .js
在網頁中引入js代碼
<script src="demo.js"></script>
JavaScript數據類型:Javascript是一個弱語言,在使用的時候確定是什麼類型;
String,number,boolean,Array,Object,null
如何看你的變量是什麼類型,使用 typeof 關鍵字
我們以前沒有見過的類型 undefined 未定義的類型,表明你這個變量沒有被初始化或使用。
數據類型的轉換:
數值類型轉換成字符串
453+””; 453.toString();
字符類型轉換爲數值
parseInt轉換的時候 小數點位置不保留
parseInt(str);
parseFloat轉換的時候 小數點位置是保留的
var num1= parseFloat(str)
JavaScript註釋:
// /* */ <!-- -->
Javascript常用的輸入輸出方式:
Alert() 彈窗輸出。
confirm("你確定你是男的?") 選擇彈窗,返回 boolean值
var flag = confirm("你確定你是男的?");
輸入彈窗 prompt();
var input = prompt("你輸入你的年齡:");
當然,我們在輸入的時候不知道我輸入的是字符還是數字
使用 isNaN(變量) 這個方法是判斷它不是數值的(is not a number) 如果是返回false 不是其他返回 true
運算符
算數運算符
運算符 | 描述 | 例子 | 結果 |
+ | 加 | x=y+2 | x=7 |
- | 減 | x=y-2 | x=3 |
* | 乘 | x=y*2 | x=10 |
/ | 除 | x=y/2 | x=2.5 |
% | 求餘數 (保留整數) | x=y%2 | x=1 |
++ | 累加 | x=++y | x=6 |
-- | 遞減 | x=--y | x=4 |
賦值運算符
運算符 | 例子 | 等價於 | 結果 |
= | x=y | x=5 | |
+= | x+=y | x=x+y | x=15 |
-= | x-=y | x=x-y | x=5 |
*= | x*=y | x=x*y | x=50 |
/= | x/=y | x=x/y | x=2 |
%= | x%=y | x=x%y | x=0 |
邏輯運算符
運算符 | 描述 | 例子 |
&& | and | (x < 10 && y > 1) 爲 true |
|| | or | (x==5 || y==5) 爲 false |
! | not | !(x==y) 爲 true |
比較運算符
運算符 | 描述 | 例子 |
== | 等於 | x==8 爲 false |
=== | 全等(值和類型) | x===5 爲 true;x==="5" 爲 false |
!= | 不等於 | x!=8 爲 true |
> | 大於 | x>8 爲 false |
< | 小於 | x<8 爲 true |
>= | 大於或等於 | x>=8 爲 false |
<= | 小於或等於 | x<=8 爲 true |
控制語句
If()語句
if(input > 18){
alert("恭喜你,成年了");
}else{
alert("小屁孩,一邊玩去");
}
switch
switch(input){
case 1:
break;
default :
}
for
for(var i = 0;i < 5; i++){
}
while 循環語句
while(true){
}
DOM初步接觸
Document Object Model(文檔對象模型)
使用write方法輸出Html標籤+CSS樣式
document.write("<h1>Hello J18</h1>");