js基本语法+实现页面行为（动画效果，页面与用户交互，页面功能）

HTML:页面结构，可以把他看成一个文档，定义展示页面的内容结构。

CSS：页面表现，元素大小，颜色，位置，隐藏或显示，部分动画效果。

JS：页面行为，部分动画效果，页面与用户交互，页面功能。

JS: JavaScript,除了语法有点像Java，其他无任何关系。

一。JS嵌入页面的方式：

html中的脚本必须位于<script> 与 </script>标签之间，脚本可以放置在html页面的<body> </body>以及<head> </head>部分中。

1.行间事件（主要用于事件）

点击某个按钮就会触发onclick事件。

2.页面<script> </script>标签引入

alert("ok!");

</script>

3.外部引入

4. 页面弹出: alert(content)

5. 输出到控制台：console.log(content)

6. 同时给多个变量赋值,用逗号隔开：var a = 10, b = 20, c = 30;

二。数据类型：

字符串，数字，数组，布尔，null, undefined。

1.string 字符串类型： var st='chuntian';

2.number 数字类型：var num=4；var price=1.33;

3.boolean 布尔类型：true/false;

4.undefined 类型：变量声明但未赋值，变量的值就是undefined

5.数组类型： var arr=Array(1,2,3,4,5)

6.length获取数组长度：arr.length alert(arr.length);

7. push方法，往数组最后插入一个元素：arr.push(元素） arr.push(6); alert(arr.length);

8. 删除最后一个元素：arr.pop() var ele = arr.pop(); alert(ele); alert(arr.length)

alert('hello,world!');
var name;
name = '春田';// 页面弹出: alert(content)
alert(name);// 输出到控制台：console.log(content)
console.log(name);// 同时给多个变量赋值,用逗号隔开
var a = 10, b = 20, c = 30;// 定义数组：Array（）
var arr = Array(1,2,3,4,5);// length获取数组长度：arr.length
alert(arr.length);// push方法，往数组最后插入一个元素：arr.push(元素）
arr.push(6);
alert(arr.length);// 删除最后一个元素：arr.pop()
var ele = arr.pop();
//alert('被删除的元素是：'ele);
alert(arr.length);// null空类型，类似Python中None,有数据，数据是空
var c = null;//  undefined ：变量已声明，未赋值
var d;// boolean: true,false(小写）python：True,False
var t = true;
var f = false;

三。运算符

算数运算符：+，-，*(乘），/（除），%（求余）

赋值运算符：=，+=，-=，*=，/=，%=，++

条件运算符：==（判断内容是否相等），===(判断值和类型是否一样），>,>=,<,<=,!=

逻辑运算符：&&（而且），||（或者），!（否）

四。条件语句

if else语句,if后的条件放在（）里面，要执行的代码放在{}里面

var a =1;
if (a>2){alert('大于2了！');
}else{alert(a);
};
a++    //a++等同与python 中的a+=1

if else if语句

var a =1;
if (a>2){alert('大于2了！');
}else if(a===2){alert('等于2了！');
}else if(a<2){alert('小于2了！')；
}else{alert('输入错误！');
}

五。switch语句

var a =10,b=20;
switch(a-b){// 判断switch语句表达式===下面的哪个caes分支，满足哪个分支就执行哪个分支代码case 5:console.log('等于5');break;case -10:console.log('等于-10');break;case 3:console.log('等于3');break;default:console.log('没有匹配到');
}

1.计算一次switch条件表达式。

2.把表达式的值与每个case进行比对,如果匹配成功，则执行关联代码。

3.遇到break关键字，会跳出switch代码块。

4.所有case都没匹配成功时，执行default代码。

六。函数

用关键字function定义函数，函数内代码块包裹在{}中。

function 函数名(参数1，参数2){

代码块

}

// 定义函数
function add(var1,var2){return var1+var2
}
// 调用函数
var res = add(10,20);
console.log(res)

七。对象

// 创建对象
var obj1={name:'chuntian',        // 对象属性是唯一的age:4,addfunc:function(var1,var2){   // 对象方法return var1+var2}
}
// 对象操作
console.log(obj1.name)      // 调用对象属性
console.log(obj1.addfunc(1,2))      // 调用对象方法

八。循环

while循环

// while 循环
var i = 0;
while(i<5){console.log(i);i++;
}

控制台输出：

for 循环

//for(语句1;语句2;语句3;){循环体;}
//语句1：每一轮循环开始之前的执行；
//语句2：每一轮循环的条件判断；
//语句3：每一轮循环结束后的执行
for(var i=0;i<5;i++){console.log(i);
}

for in 循环：当需要遍历选择集的时候就需要使用for in循环。

for in 遍历数组

var list1 = Array(11,22,33,44,55)
for(i in list1){// i 是下标console.log(i)// 通过 obj[下标] 取元素console.log(list1[i])
}

for in 遍历对象

var obj={name:'chuntian',age:4,gender:'male'
};
for(attr in obj){console.log(attr)// 对象属性通过： 对象名[属性名] 来获取console.log(obj[attr]);
}

js基本语法+实现页面行为（动画效果，页面与用户交互，页面功能）相关推荐

js html页面切换效果,jQuery实现切换页面过渡动画效果
这篇文章主要介绍了关于jQuery实现切换页面过渡动画效果,有着一定的参考价值,现在分享给大家,有需要的朋友可以参考一下这是一款效果非常酷的jQuery和CSS3通过AJAX调用切换页面过渡动画特效 ...
ppt模板页面过渡动画效果怎么制作？
一个好看的ppt模板,动画效果少不了,ppt模板制作软件也带了不少动画效果,ppt家园下面就来介绍一下ppt模板页面过渡动画效果怎么制作? 插入-图片-将两张图片素材导入-一张铺满PPT页面-一张放在 ...
wpsppt页面卷曲在哪里_2013版ppt怎么制作页面卷曲动画效果_博客
2013 版 ppt 怎么制作页面卷曲动画效果 _ 博客 2013 版 ppt 怎么制作页面卷曲动画效果在制作幻灯片的时候会用到不少切换动画效果, 但是怎么才能实现 ? 对于不常用 ppt 的朋友或 ...
wpsppt页面卷曲在哪里_2013版ppt怎么制作页面卷曲动画效果
在制作幻灯片的时候会用到不少切换动画效果,但是怎么才能实现?对于不常用ppt的朋友或许有点难度,学习啦下面就跟小编动手学习啦ppt2013 页面卷曲动画效果制作方法,希望看完本教程的朋友都能学会并运用 ...
开博第一篇作品-C#winform版《仿360杀毒》页面切换动画效果(内含源码)
C#winform版 <仿360杀毒>页面切换动画效果昨天跟一个同事聊天,谈到了360杀毒的页面效果不错,我们所做的winform页面都是拖控件还是拖控件,不能吸引客户的注意力,想改成3 ...
wpsppt页面卷曲在哪里_ppt2013页面卷曲动画效果制作方法.doc
ppt2013 页面卷曲动画效果制作方法 ppt2013 页面卷曲动画效果制作方法 ppt2013 页面卷曲动画效果制作方法一:先建立一个主 PPT 文件, ppt 怎么制作 ? 第一张封面, 第二 ...
wpsppt页面卷曲在哪里_ppt页面之间动画效果 2013版ppt怎么制作页面卷曲动画效果...
在制作幻灯片的时候会用到不少切换动画效果,但是怎么才能实现?对于不常用ppt的朋友或许有点难度,下面就跟小编动手ppt2013 页面卷曲动画效果制作方法,希望看完本教程的朋友都能学会并运用起来. pp ...
html 网页跳转动画效果,jQuery实现切换页面过渡动画效果_jquery
直接为大家介绍制作过程,希望大家可以喜欢. HTML结构该页面切换特效的HTML结构使用一个元素来作为页面的包裹元素,div.cd-cover-layer用于制作页面切换时的遮罩层,div.cd-l ...
使用wow.js和animate.css实现页面滚动动画效果
wow.js是一款结合了Animate.css,可以在页面向下滚动时,为页面中的元素加载动画的js. 项目地址:GitHub - graingert/WOW: Reveal CSS animation ...
HTML中淡入的动画效果,CSS3实现页面淡入动画特效代码
现在的css3有很多效果可以直接替换flash了,下面我来给大家介绍一个利用CSS3实现页面淡入动画特效代码,希望此教程对各位同学会有所帮助. 利用CSS3动画属性"@keyframes ...

js基本语法+实现页面行为（动画效果，页面与用户交互，页面功能）

js基本语法+实现页面行为（动画效果，页面与用户交互，页面功能）相关推荐

最新文章

热门文章