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>
