点击下载
本文文档

当前位置：首页 - 科技 - 知识百科 - 正文

JavaScript快速入门案例教程

来源：动视网责编：小采时间：2020-11-27 20:14:42

JavaScript快速入门案例教程

JavaScript快速入门案例教程:JavaScript快速入门1. js生成文本 <script> document.write("我是天才。"); document.write("我是废才。"); </script>2. js生成标签<

推荐度：

点击下载本文 文档为doc格式

导读JavaScript快速入门案例教程:JavaScript快速入门1. js生成文本 <script> document.write("我是天才。"); document.write("我是废才。"); </script>2. js生成标签<

JavaScript快速入门

1. js生成文本

<!--
 js一般是写在head标签里面
-->
<script>
 document.write("我是天才！！");
 document.write("我是废才!!");

</script>

2. js生成标签

<script>
 document.write("我是天才<br/>");
 document.write("我是废才<hr/>");
 document.write("我是鬼才     ");
 document.write("我是人才");
</script>

3. js的书写位置和执行顺序

<!--
 1，书写位置：js是一种弱类型的语言，所以语法不是特别的严格，但是一般js代码是写在head标签里面
 2， 执行顺序：js的解释执行是从上往下进行的。
-->
<script>
 alert("哈哈");
 alert("哼哼");
 alert("嘎嘎");
</script>

4. 导入外部的js文件

<!--
 使用src属性导入外部的js文件
 引入js文件需要占用一个script标签，执行代码时需要另取一个script标签
-->
<script src="../js/mylove.js"></script>

<script>
 var sum = getSum(2, 3);
 alert(sum);
 alert("我是来自于内部的js");
</script>

mylove.js:
alert("我是来自于外部的js文件代码");

function getSum(a,b){
 return a + b;
}

5. js中的变量申明

<script>
 // 由于javascript是一种弱类型语言，所以定义变量都是使用一个关键字var
 // 定义一个数字类型
 var number = 10;

 // 定义一个字符串
 var str = "aaabbb";

 // 定义一个数组
 var arr = [1,2,3,"haha","yue"];
</script>

6. js中的判断语句if

<script>
 // 输入1-10之间的数字，如果大了则提示输入过大，如果小了则提示输入小了，在1-10之间则把输入的数字打印出来！

 var number= prompt("输入一个1-10之间的数字");
 if(number > 10){
 alert("你输入的数字大了！");
 }else if(number < 1){
 alert("你输入的数字小了！");
 }else{
 alert("你输入的数字为：" + number);
 }
</script>

7. js中的三种消息框

<script>
 // 1 警告框
 alert("我是天才");

 // 2 确认框,返回值为true则表示确认，false表示取消
 var result = confirm("欲练此功必须自宫，你还练吗？");
 if(result){
 alert("自宫成功！");
 }else{
 alert("怂了吧!~?");
 }

 // 3 提示框输入框
 var name = prompt("请输入名字","王八");
 if(name!=""&& name!=null){
 alert("您输入的名字为：" + name);
 }
</script>

8. js中的函数

<script>

 // 求和函数
 function getSum(a, b) {
 return a + b;
 }
 var sum = getSum(3, 6);
 alert("和为：" + sum);


 // 定义重载函数
 function add(){
 alert("我是无参函数！");
 }

 function add(i,j){
 alert("我是有参函数!");
 var sum = i + j;
 alert("有参函数和为：" + sum);
 }

 add();
 // 调用无参的函数时，结果却是弹出有参的提示
 // 这是因为js中的函数不能重载，只可以有一个同名函数，多了的会被最后的一个覆盖掉

 add(2,4); // 正常

输出 add(2,4,6); // 输出和仍为6，因为函数只有两个参数，多传入的值是无效的 </script>

9. js中的两种for循环

<script>
 // 使用for循环求1-100的和
 var sum = 0;
 for (var i = 1; i <= 100; i++) {
 sum += i;
 }
 alert("1-100的和是：" + sum);



 // 使用for循环打印九九乘法表
 for (var i = 1; i <= 9; i++) {
 for (var j = 1; j <= i; j++) {
 document.write(j + "*" + i + "=" + j * i + "     ");
 }
 document.write("<br/>");
 }

 // for循环打印标题
 for(var i = 1; i <=7;i ++){
 document.write("<h"+i+">" +"我是"+ i + "级标题"+"<h"+i+">");
 }

 // for循环遍历月份

 document.write("<br>"+"<select>");
 for(var i = 1; i <=12;i ++){
 document.write("<option>");
 document.write(i);
 document.write("</option>");
 }
 document.write("</select>"); 


 // 高级for,x是角标
 var str = ["haha","hdhd",99,10,'ooo'];
 for(x in str){
 alert(str[x]);
 }
</script>

10. js中的异常处理try{}catch(){}

<script>
/**
 * js中处理异常有两种方式，第一种是用try{} catch(){}语句块处理
 * 还有就是你认为代码会出错时用throw关键字把错误跑出去，然后用catch里进行捕获
 */

 var count = 3 * 8;
 haha 让你

输出不了; alert(count); function add(a, b) { try { hahahaha return a + b; } catch (err) { alert("出错了吧"); } } add(1,4); function value(){ var sum = prompt("输入1-100的数字："); if(sum == "" || sum==null){ alert("输入为空啊"); return; } try{ if(sum > 100){ throw "e1"; }else if( sum < 1){ throw "e2"; }else{ alert("你输入的数字是：" + sum); } }catch(e){ if(e == "e1"){ alert("输入过大了"); }else if(e == "e2"){ alert("输入过小了"); } } } value(); </script>

11. js中的window对象

<script>
 /**
 * window对面表示打开的浏览器对象，主要包括了五个子对象
 * 1. Navigator 导航器对象
 * 2. History 浏览器历史纪录
 * 3. Screen 屏幕
 * 4. Document 文档
 * 5. Location 位置
 */
</script>

<script>

 function me_Navigator(){
 document.write(navigator.appCodeName + "<br/>");
 document.write(navigator.appVersion + "<br/>");
 document.write(navigator.appName + "<br/>");
 document.write(navigator.geolocation + "<br/>");
 }

 me_Navigator();

 // 上一步
 function clickme(){
 history.back();
 }

 // 跳转
 function tiancai(){
 var result = confirm("要去百度官网吗？");
 if(result){
 location.href="index.html";
 }
 }
</script>

12. 定时器

<html>
 <head>
 <meta charset="utf-8">
 <title></title>

 <script>

 // 电子显示时钟

 function showTime(){
 var date = new Date();
 var canvas = document.getElementById("showcanvas");

 var hours = date.getHours();
 var min = date.getMinutes();
 var sec = date.getSeconds();

 canvas.innerHTML = "<h3>" + hours + ":" + min + ":" + sec + "</h3>";
 }

 setInterval("showTime()",1000);


 // 倒计时显示器
 var i = 0;
 var t = 0;
 function backTime(){

 var date = new Date();
 var canvas = document.getElementById("showcanvas");

 var hours = date.getHours();
 var min = date.getMinutes();
 var sec = date.getSeconds();

 canvas.innerHTML = "<h3>" + hours + ":" + min + ":" + sec + "</h3>";

 i ++ ;
 if(i == 5){
 clearInterval(t);
 }
 }

 t = setInterval("backTime()",1000);



 </script>

 </head>
 <body onload="backTime()">
 <div id="showcanvas"></div>
 </body>
</html>

13. 画鸭子

图片素材如下

代码如下

 <script>
 var i = 0;
 var t;
 function image(){
 document.getElementById("img").src="../img/"+ i +".png";


 i ++;
 if(i == 7){
 clearInterval(t);
 alert("画完了，好玩吧！");
 }

 }

 t = setInterval("image()",1000);
 </script>

</head>
<body onload="image()">
<img id="img"/>
</body>

14. 字符串对象

<script>
 var str = "我就是天才啊，无人能挡，哈哈哈哈";
 document.write("我的长度是:" + str.length + "<br/>");
 document.write(str + "<br/>");
 document.write(str.big() + "<br/>");
 document.write(str.blink() + "<br/>");
 document.write(str.bold() + "<br/>")


 var str1 = "LSDVASLEOSVN";
 document.write(str1.toLocaleLowerCase() + "<br/>");

 var str2 = "sldvjlwelvdnlsh";
 document.write(str2.toLocaleUpperCase());

</script>

15. 时间和数组

<script>
 // 时间
 var date = new Date();
 document.write(date.getFullYear() + "年");
 document.write(date.getMonth() + 1 + "月");
 document.write(date.getDate() + "日   ");
 document.write(date.getHours() + "时");
 document.write(date.getMinutes() + "分");
 document.write(date.getSeconds() + "秒<br>");
</script>

<script>
 // 数组
 var arr = [2,4,78,34,"haha"];
 for(x in arr){
 alert(arr[x]);
 }

 alert("数组最开始的长度：" + arr.length);//5
 // 给第10个值赋值
 arr[10] = 0;
 alert("数组赋值后的长度：" + arr.length);//11


 // 数组排序
 arr1 = [1,7,6,3,9,2,4,8,5];

 // 自定义排序方式
 function byNumber(a,b){
 return a-b;
 }

 document.write(arr1 + "<br>")
 document.write(arr1.sort(byNumber)+ "<br>");

 // 冒泡排序法
 arr3 = [1,7,6,3,9,2,4,8,5];
 for(var i = 0; i < arr3.length-1;i++){
 for(var j = i+1;j < arr3.length;j++){
 if(arr3[i] > arr3[j]){
 var temp = arr3[i];
 arr3[i] = arr3[j];
 arr3[j] = temp;
 }
 }
 }
 document.write("冒泡排序后的结果：" + "<br>")
 document.write(arr1 + "<br>")

</script>

16. dom入门

<html>
 <head>
 <meta charset="utf-8">
 <title></title>
 <script>
 function init(){
 document.getElementById("name").value="请输入你的名字";

 }


 function _focus(){
 document.getElementById("name").value="";
 }

 function _blur(){
 var value = document.getElementById("name").value;
 if(value == "" || value==null){
 document.getElementById("name").value="请输入你的名字";
 }else{
 document.getElementById("name").style.color="aqua";
 }
 }

 </script>

 </head>
 <body onload="init()">

 <!--
 onfocus:聚焦
 onblur:失去焦点
 -->
 <input type="text" id="name" onfocus="_focus()" onblur="_blur()"/>
 </body>
</html>

17. 获取html标签的方式

<html>
 <head>
 <meta charset="utf-8">
 <title></title>

 <script>
 function init(){
 // 获取id
 document.getElementById("text").value="我是天才";

 // 获取name
 document.getElementsByName("name")[1].value = "20岁";

 // 获取标签
 document.getElementsByTagName("input")[2].value="男";

 }

 </script>

 </head>
 <body onload="init()">

 输入姓名：<input type="text" name="name" id="text"/><br>
 输入年龄：<input type="text" name="name" id="text"/><br>
 输入性别：<input type="text" name="name" id="text"/>

 </body>
</html>

18. Jquery之飘逸江湖

效果图如下

数据文件如下

juery类库可以去网上下载，data.txt数据如下：

[
{“picpath”:”http://127.0.0.1:8020/Day03_javascript_%E4%BD%9C%E4%B8%9A/img/food/food1.jpg“,
“desc”:”九毛九”
},
{“picpath”:”http://127.0.0.1:8020/Day03_javascript_%E4%BD%9C%E4%B8%9A/img/food/food2.jpg“,
“desc”:”真功夫”
},
{“picpath”:”http://127.0.0.1:8020/Day03_javascript_%E4%BD%9C%E4%B8%9A/img/food/food3.jpg“,
“desc”:”哥哥乐”
},
{“picpath”:”http://127.0.0.1:8020/Day03_javascript_%E4%BD%9C%E4%B8%9A/img/food/food4.jpg“,
“desc”:”必胜客”
},
{“picpath”:”http://127.0.0.1:8020/Day03_javascript_%E4%BD%9C%E4%B8%9A/img/food/food5.jpg“,
“desc”:”肯德基”
},
{“picpath”:”http://127.0.0.1:8020/Day03_javascript_%E4%BD%9C%E4%B8%9A/img/food/food6.jpg“,
“desc”:”永和大王”
},
{“picpath”:”http://127.0.0.1:8020/Day03_javascript_%E4%BD%9C%E4%B8%9A/img/food/food7.jpg“,
“desc”:”红荔村”
}
]

图片素材如下

代码如下

<head>
 <meta charset="utf-8">
 <title></title>

 <!-- 
 引入jquery类库文件
 -->
 <script type="text/javascript" src="../js/jquery-1.8.3.min.js"></script>
 <script>
 // 发送一个请求给服务器，把服务器上的数据拿到
 $.get(".../data.txt",function(data){
 var jsonArr = eval(data);
 for(x in jsonArr){
 var picpath = jsonArr[x].picpath;
 var desc = jsonArr[x].desc;

 // 创建图片节点
 var imgNode = document.createElement("img");
 imgNode.src = picpath;
 imgNode.setAttribute("class","img_style");
 // 创建p节点
 var pNode = document.createElement("p");
 pNode.innerHTML = desc; 
 pNode.style.color = "red";
 pNode.align = "center";

 // 创建一个div节点
 var divNode = document.createElement("div");


 divNode.setAttribute("class","div_style");

 divNode.appendChild(imgNode);
 divNode.appendChild(pNode);

 document.getElementById("container").appendChild(divNode); 
 }
 });
 </script>
 <style>
 .div_style{
 position: relative;
 float: left;
 margin: 20px;
 }

 .img_style{
 width: 150px;
 height: 150px;
 }
 </style>
</head>

<body>
 <div id="container"></div>
 <p align="center"></p>
</body>