30分鐘帶你過一遍js基本語法。前端學習必不可少的腳本語言javascript，js的基礎語法，原生js是之後學習的基礎。
後期會繼續修改
js簡單語法實例
基本輸入輸出
<script type="text/javascript">
var a = prompt("輸入name:");
alert("你好"+a);
// 使用 window.alert() 彈出警告框。
window.alert(3+8);
// 使用 document.write() 方法將內容寫到 HTML 文檔中。
document.write("<h3 id='a1'>張忠浩</h3>");
// 使用 innerHTML 寫入到 HTML 元素。
document.getElementById('a1').innerHTML = 'zzh';
// 使用 console.log() 寫入到瀏覽器的控制檯。
a = 1
b = 2
console.log(a+b,16+'dd')
</script>
註釋–和c一樣，//單行註釋。/ 多行註釋 /
js變量
//1，變量必須字母開頭
//2，也可以使用$和_開頭，不過不推薦
//3，大小寫敏感
//變量聲明使用var，沒有賦值的變量默認是undefined，
var name；
//也可以直接賦值
var name = 'zzh'；
//也可以一條語句多個變量
var a,b,c=1;
//它不必像c一樣聲明變量類型，它會根據負值自行判斷
//全局變量--函數外聲明的變量
//局部變量--函數內使用var聲明的變量
基本數據類型，你可以使用var 變量名 = new+數據類型的形式進行變量聲明
<!-- 基本數據類型
數字 number
字符串 string
布爾值 boolean
特殊：null ， undefined
複合數據類型 object
數組 array 本質就是對象-->
字符串
/*
字符串
var str = new String('123');
new 可以省略
var str = '123'; 常用
length屬性，返回字符個數
charAt(索引值)方法，索引字符 == str[索引值]
注：字符串一旦被創建就無法改變,如需修改，就重新創建
字符串拼接 '字符串1'+'字符串2'
charCodeAt(下標)方法 返回指定位置的字符的 ascall碼值
fromCharCode(數字)方法 返回ascall碼對應字符
str1.concat(str2) 字符串拼接
字符串查找
indexOf(子串，開始查找位置) 返回第一次位置 or 0
lastindexOf() 返回最後一次位置 or 0
search(子串/正則)
replace(子串/正則,替換值)
subString(start,end)字符串提取
split(分隔符，新數組長度)
toLowerCase()
toUpperCase()
*/
簡單條件語句和簡單函數，判斷閏年，和大多數語言一樣return返回值並退出函數
它有和c一樣的switch語句
<script type="text/javascript">
var a = Number(prompt("輸入年份："));
function leapyear(year) {
if(year % 400 == 0 || year % 100 != 0 && year %4 == 0){
return true;
}
return false;
}
window.alert(leapyear(a));
</script>
數組和簡單for循環
他有和c一樣的do while語句
<script type="text/javascript">
//用 new 運算符創時數組
var arr = new Array(1,2,3,4,5);
//數組長度爲10的數組
var arr1 = new Array(10);
//省略new運算符創建數組
var arr2 = Array(1,2,3,4,5,6);
//常量創建數組
var arr3 = [1,2,3];
// <!-- //數組可以索引 -->
document.write('索引：'+arr[4]+'<br/>');
// <!-- //數組的屬性 -->
console.log('數組長度：'+arr.length);
//數組的遍歷
var arr4 = [];
for(var i = 0;i<=10;i++){
arr4[i] = i*i;
}
console.log(arr4);
for(var i in arr4){
document.write(arr4[i]+',');
}
//隨機數 Math.random(),隨機0~1的任意數
</script>
二維數組及其遍歷
<script type="text/javascript">
// 5*5的二維數組,輸出左下角
/*
1 ,2 ,3 ,4 ,5
6 ,7 ,8 ,9 ,10
11,12,13,14,15
16,17,18,19,20
21,22,23,24,25
*/
var arr = [[],[],[],[],[]];
for(var i = 0;i<5;i++){
for(var j = 1; j<6;j++){
arr[i].push(j+i*5);
}
}
var k = 0;
for(var i = 0;i<5;i++){
for(var j in arr[i]){
if(k++>i){
break;
}
document.write(arr[i][j]+',');
}
k = 0;
document.write('<br />');
}
</script>
break退出上層循環，continue直接進行下一次循環
數組排序和循環嵌套
<script type="text/javascript">
/*
系統排序
reverse()方法 逆向排序
sort()方法 升序排序 默認是字符串比較而非數字大小比較
冒泡排序
選擇排序
*/
//冒泡
//升序冒泡
var arr = [12,4,77,90,56,43,19,8];
var c = 0;
function mp(arr){
for(var i = 0;i<arr.length-1;i++){
for(var j = 0;j<arr.length-i-1;j++){
if(arr[j]>arr[j+1]){
c = arr[j];
arr[j] = arr[j+1];
arr[j+1] = c;
}
}
}
return arr;
}
console.log(mp(arr));
//選擇排序
function choice(arr){
for(var i = 0;i<arr.length-1;i++){
for(var j = i+1;j<=arr.length-1;j++){
if(arr[i]>arr[j]){
c = arr[i];
arr[i] = arr[j];
arr[j] = c;
}
}
}
return arr;
}
console.log(choice([23,44,65,4,70,9,17,39]))
document.write(arr)
</script>
數組操作和基本數據結構實現–棧和隊列
<script type="text/javascript">
/*棧:同一個口進,同一個口出.
先進後出
push方法，參數爲在數組末尾添加的元素，元素個數任意
該方法的返回值是，添加完元素後數組的長度
pop方法移除數組末尾的最後一個元素
該方法的返回值是，取出的元素
*/
/*
隊列
從一頭進另一頭出，先進先出。
進：push
出：shift方法
無參數
從數組頭部取下一個元素，
該方法的返回值是，取出的元素。
unshift方法
參數任意
從數組頭部插入元素
該方法的返回值是，插入元素後數組的長度
*/
/*
數組的其他方法
數組1.concat(數組2)方法，
將兩個數組合併爲新數組，原數組不會改變
返回新數組
slice(start,end)方法
左閉右開
數組的切片，獲得數組指定區域的內容，
原數組不改變，並且返回新數組
splice
改變原數組
刪除，插入，替換
參數1：開始下標
參數2：截取的長度
參數3：在開始位置插入的元素，個數任意
join('拼接符')方法
使用拼接符號將數組的元素拼接爲字符串
*/
</script>
構造函數
<script type="text/javascript">
//構造函數,函數名首字母最好大寫,區別於普通函數
//不就是類嘛
function Star(name,age){
this.name = name;
this.age = age;
this.go = function(){
return "let us go!!";
};
};
//new一個對象
var a = new Star("zzh",20);
console.log(typeof a);
console.log(typeof Star);
console.log("name:"+a.name+"\nage:"+a.age+"\n"+a.go());
//對象遍歷
//只獲得鍵
for(var i in a){
console.log(i);
}
//獲得值
for(var i in a){
console.log(a[i]);
}
</script>
事件驅動函數
常見事件列表
| 事件 | 描述 |
|---|---|
| onchange | htnl元素改變 |
| onclick | 用戶點擊事件 |
| onmouseover | 移動鼠標 |
| onmouseout | 移開鼠標 |
| onkeydown | 按下鍵盤 |
| onload | 頁面加載完成 |
<script type="text/javascript">
window.onload = function(){
var obtn = document.getElementById('btn');
var otxt = document.getElementById('txt');
obtn.onclick = function(){
otxt.value = '';
}
}
</script>
簡單遞歸調用
<script type="text/javascript">
function digui(n){
if(n == 1){
return 1;
}
return digui(n-1) + n;
}
alert(digui(100));
</script>
錯誤和拋出
<script type="text/javascript">
try{
var a = prompt("輸入:");
if(a=="zzh"){
throw "輸出錯誤！"
}
if(a=="123"){
throw "未知錯誤！！"
}
}
catch{
console.log("hello");
throw "hahaha!"
}
</script>
嚴格模式
<script type="text/javascript">
/*
ECMA 標準 ECMAjavascript
ECMA5
ECMA6
聲明:'use strict'
在嚴格模式下，數組可以使用indexOf()方法
forEach(function(item,index,array){
})方法 遍歷數組
arr.forEach(alert)
map(function(item,index,array){
return item+2;
})映射方法
reduce(function(pre,next,index,array){
})歸併方法
filter(function(item,index,array){
return item>92;
})過濾方法
*/
</script>
js運算
關係運算符-- !,!, >,<,>=,<=,,=.主要區別和===
<script type="text/javascript">
var x = 3;
//==相當於隱式轉換兩者類型並判斷,只有值判斷相等
console.log(x=='3');
//===精準判斷,值和類型都相同
console.log(x==='3',x===3);
console.log(null == undefined);
console.log("" == 0);
//null == undefined
//NaN與任何內容不相同,NaN != NaN
//"" == 0 == false
console.log(isNaN(Number("10a")));//判斷是否爲非數字
</script>
算數運算符
| 運算符 | 描述 |
|---|---|
| + | 加 |
| - | 減 |
| * | 乘 |
| / | 除 |
| % | 取模 |
| ++ | 自增 |
| – | 自減 |
賦值運算符
| 運算符 | 例子 |
|---|---|
| = | x=y |
| += | x+=y |
| -= | x-=y |
| /= | x/=y |
| %= | x%=y |
無論整形或者浮點都是Number類型，數字+字符串=字符串
強制類型轉換
<script type="text/javascript">
//該方法不會影響到原來的變量，它會將轉換的結果返回
//注意：null和undefined兩個值沒有toString()方法
var a=123;
console.log(a.toString());
//調用String()函數，並將轉換的數據作爲參數傳給函數
//使用String()函數做強制類型轉換時，對於Number和Boolean實際上就是調用的toString()方法，但是對於null和undefined就不調用toString()，
//它會將null直接轉換爲“null”
var a=123;
console.log(a=String(a));
//使用Number()函數
//如果是純數字的字符串，則直接轉換爲數字，如果字符串中有非數字的內容，則轉換爲NaN,
//如果字符串是一個空串或者是一個全是空格的字符串，則轉換爲0
var a="123";
a=Number(a);
console.log(typeof(a));
//parseInt() parseFloat() 專門用來對付字符串
//如果對非string使用parseInt()或parseFloat()它會先將其轉換爲string，然後再操作
var a = "123px";
a=parseInt(a);
console.log(typeof(a));
console.log(a);
var b=true;
b=parseInt(b);
console.log(typeof(b));
console.log(b);
//除了0、NaN、空串、null、undefined其餘都是true。對象也會轉換爲true
var a= 123;
a=Boolean(a);
console.log(typeof a);
console.log(a);
</script>
位運算
<script type="text/javascript">
// 位非運算,加一取反
var a = 11;
console.log(~a);
//位與運算,一與一爲一,其他爲0
var a = 5;
var b = 6;
console.log(a&b);
//位或運算,有一爲一
var a = 7;
var b = 22;
console.log(a|b);
//異或運算,相同爲0,不同爲1
//可以用作密碼加密
a = 87655653;
b = 212312334;
var c = a^b;
console.log(c,c^b);
//左右移位,最小右移爲0
var n = 10;
console.log(8<<2);
console.log(8>>2);
console.log(1<<n);//計算2的n次冪,快速
</script>
js動畫基礎
小方塊移動，點擊它就暫停。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
*{
margin:0;
padding:0;
}
#div0{
position: absolute;
left: 0;
width:100px;
height:100px;
background:red;
}
</style>
<script type="text/javascript">
window.onload = function(){
var div0 = document.getElementById("div0");
div0.addEventListener("click",click)
setInterval(hello,10);
var left = 0;
var bool = true;
var add = 2;
function click(e){
bool=!bool;
}
function hello(){
if (!bool){
return 1;
}
left+=add;
div0.style.left = left+"px";
console.log(parseInt(div0.style.left),typeof parseInt(div0.style.left));
if(parseInt(div0.style.left) >=600 || parseInt(div0.style.left) <=0){
add=-add;
}
}
};
</script>
</head>
<body>
<div id="div0"></div>
</body>
</html>
js貪喫蛇小遊戲,wsad–上下左右
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>snake</title>
</head>
<body style="text-align: center;margin: 200px;background-color: aliceblue;">
<canvas id="cnv" width="400px" height="400px" style="background-color: antiquewhite;"></canvas>
<script type="text/javascript">
//變量聲明
var box = document.getElementById("cnv").getContext("2d");
var snake;
var direction;
var n;
var food;
//繪製地圖
function draw(point,color){
box.fillStyle = color;
box.fillRect(point%20*20+1,~~(point/20)*20+1,18,18);
}
(function(){ready();}());
function ready(){
for(var i=0;i<400;i++){
draw(i,"#313131");
}
snake=[66,65,64];
direction=1;
food=344;
draw(food,"yellow");
draw(66,"#00b7ee");
draw(65,"#00b7ee");
draw(64,"#00b7ee");
}
//核心算法
function run(){
document.getElementById("butn").setAttribute("disabled",true);
snake.unshift(n=snake[0]+direction);
if(snake.indexOf(n,1)>0||n<0||n>399||(direction==-1&&n%20==19)||(direction==1&&n%20==0)){
ready();
document.getElementById("butn").removeAttribute("disabled");
return alert("game over");
}
draw(n,"#00b7ee");
if(n==food){
while(snake.indexOf(food=~~(Math.random()*400))>0);
draw(food,"yellow");
}
else{
draw(snake.pop(),"#313131");
}
setTimeout(arguments.callee,200);
}
//鍵盤事件
document.onkeydown=function(e){
if (direction==1||direction==-1){
if(e.keyCode==38||e.keyCode==87){
direction=-20;
}
if(e.keyCode==40||e.keyCode==83){
direction=20;
}
}
if(direction==20||direction==-20){
if(e.keyCode==39||e.keyCode==68){
direction=1;
}
if(e.keyCode==37||e.keyCode==65){
direction=-1;
}
}
}
</script>
<div>
<button id="butn" type="button" onclick="run()">開始遊戲</button>
</div>
</body>
</html>