入门学习"/>
JavaScript入门学习
学完CSS后,继续来学习最后一个前端技术JavaScript的简单入门
如果说CSS就是化妆或者美颜后的漂亮小姐姐,那么JavaScript就能够让这个小姐姐优雅地动起来,并且你可以与其进行互动。
学习JavaScript的配套视频,还是推荐星月教你做网站:
/?p=22
配套代码和资料请访问下方链接到我的github,免费下载,喜欢或者有帮助请点个star或者fork支持一下,感谢!
下面是学习的内容,进行一个总结:
================================================================
1.第一个JavaScript程序
复制以下代码,存为以.html为后缀的文件,双击运行即可
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script>alert("Hello World!")</script>
</head>
<body></body>
</html>
运行后效果展示:
`
================================================================
2.创建变量
用关键字var,示例:
<script>var four="你是人间的四月天";alert(four);</script>
运行后效果展示:
================================================================
3.变量使用方法1
<script>var number=100;number=number+200;document.write("<h1>"+number+"<h1>");</script>
运行后效果展示:
================================================================
4.变量使用方法2
<script>var name=prompt("你学习的语言是:","");document.write("<h1>"+name+"<h1>");</script>
运行后效果展示:
随后浏览器会显示以下字样:
================================================================
5.条件语句
<script>var pwd=prompt("请输入您的密码:","");if(pwd=="123"){document.write("登录成功");}else{document.write("登录失败");}</script>
运行后效果展示:
随后浏览器会显示以下字样:
================================================================
6.条件语句2
<script>var number=prompt("请输入一个数字(1-100):","");if(number==50){document.write("恭喜您,答对了!");}else if(number<50){document.write("您猜的数字小了点,换个大的试试吧");}else{document.write("您猜的数字大了点,换个小的试试吧");}</script>
运行后效果展示:
随后浏览器会显示以下字样:
================================================================
7.while循环语句1
情景:前面输入密码错误时,再重新显示文本框进行输入,成功则直接显示成功
<script>var pwd=prompt("请输入您的密码:","");while(pwd!=="123"){pwd=prompt("登录失败");}if(pwd=="123"){document.write("登录成功");}</script>
运行后效果展示:
================================================================
8.while循环语句2
循环输出打印1到10
<script>var num=1;while(num<=10){document.write(num+"<br>");num=num+1;}</script>
运行后效果展示:
================================================================
9.for循环语句
循环输出打印1到5
<script>for(var num=1;num<=5;num++){document.write(num+"<br>");}</script>
运行后效果展示:
================================================================
10.一维数组
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Array</title><script>var num=new Array();num[0]=100;num[1]=80;document.write(num);</script>
</head>
<body></body>
</html>
运行后效果展示:
<script>var num=new Array(100,200,300,500,600,"HelloWorld");document.write(num);</script>
运行后效果展示:
================================================================
11.二维数组
<script>var person;person=new Array();person[0]=new Array();person[0][0]="violet";person[0][1]=18;person[0][2]="girl";document.write("name:"+person[0][0]+"<br>");document.write("age:"+person[0][1]+"<br>");document.write("sex:"+person[0][2]+"<br>");</script>
运行后效果展示:
================================================================
进阶教程待学习中…
喜欢或者有收获的小伙伴可以右上角点个赞,欢迎评论!
点赞投币收藏一键三连加关注哈哈,稳定周更
更多推荐
JavaScript入门学习
发布评论