JavaScript快速入门案例教程
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_作业/img/food/food1.jpg“,
“desc”:”九毛九”
},
{“picpath”:”http://127.0.0.1:8020/Day03_javascript_作业/img/food/food2.jpg“,
“desc”:”真功夫”
},
{“picpath”:”http://127.0.0.1:8020/Day03_javascript_作业/img/food/food3.jpg“,
“desc”:”哥哥乐”
},
{“picpath”:”http://127.0.0.1:8020/Day03_javascript_作业/img/food/food4.jpg“,
“desc”:”必胜客”
},
{“picpath”:”http://127.0.0.1:8020/Day03_javascript_作业/img/food/food5.jpg“,
“desc”:”肯德基”
},
{“picpath”:”http://127.0.0.1:8020/Day03_javascript_作业/img/food/food6.jpg“,
“desc”:”永和大王”
},
{“picpath”:”http://127.0.0.1:8020/Day03_javascript_作业/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>登录后复制
以上是JavaScript快速入门案例教程的详细内容。更多信息请关注PHP中文网其他相关文章！
热AI工具
Undresser.AI Undress
人工智能驱动的应用程序，用于创建逼真的裸体照片
AI Clothes Remover
用于从照片中去除衣服的在线人工智能工具。
Undress AI Tool
免费脱衣服图片
Clothoff.io
AI脱衣机
Video Face Swap
使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸！
热门文章
热工具
记事本++7.3.1
好用且免费的代码编辑器
SublimeText3汉化版
中文版，非常好用
禅工作室 13.0.1
功能强大的PHP集成开发环境
Dreamweaver CS6
视觉化网页开发工具
SublimeText3 Mac版
神级代码编辑软件(SublimeText3)
得物使用教程
Mar 21, 2024 pm 01:40 PM
得物APP是当前十分火爆品牌购物的软件，但是多数的用户不知道得物APP中功能如何的使用，下方会整理最详细的使用教程攻略，接下来就是小编为用户带来的得物多功能使用教程汇总，感兴趣的用户快来一起看看吧！得物使用教程【2024-03-20】得物分期购怎么使用【2024-03-20】得物优惠券怎么获得【2024-03-20】得物人工客服怎么找【2024-03-20】得物取件码怎么查看【2024-03-20】得物求购在哪里看【2024-03-20】得物vip怎么开【2024-03-20】得物怎么申请退换货
推荐：优秀JS开源人脸检测识别项目
Apr 03, 2024 am 11:55 AM
人脸检测识别技术已经是一个比较成熟且应用广泛的技术。而目前最为广泛的互联网应用语言非JS莫属，在Web前端实现人脸检测识别相比后端的人脸识别有优势也有弱势。优势包括减少网络交互、实时识别，大大缩短了用户等待时间，提高了用户体验；弱势是：受到模型大小限制，其中准确率也有限。如何在web端使用js实现人脸检测呢？为了实现Web端人脸识别，需要熟悉相关的编程语言和技术，如JavaScript、HTML、CSS、WebRTC等。同时还需要掌握相关的计算机视觉和人工智能技术。值得注意的是，由于Web端的计
夏天，一定要试试拍摄彩虹
Jul 21, 2024 pm 05:16 PM
夏天雨后，经常能见到一种美丽且神奇的特殊天气景象——彩虹。这也是摄影中可遇而不可求的难得景象，非常出片。彩虹出现有这样几个条件：一是空气中有充足的水滴，二是太阳以较低的角度进行照射。所以下午雨过天晴后的一段时间内，是最容易看到彩虹的时候。不过彩虹的形成受天气、光线等条件的影响较大，因此一般只会持续一小段时间，而最佳观赏、拍摄时间更为短暂。那么遇到彩虹，怎样才能合理将其记录下来并拍出质感呢？1.寻找彩虹除了上面提到的条件外，彩虹通常出现在阳光照射的方向，即如果太阳由西向东照射，彩虹更有可能出现在东
photoshopcs5是什么软件？-photoshopcs5使用教程
Mar 19, 2024 am 09:04 AM
PhotoshopCS是PhotoshopCreativeSuite的缩写，由Adobe公司出品的软件，被广泛用于平面设计和图像处理，作为新手学习PS，今天就让小编为您解答一下photoshopcs5是什么软件以及photoshopcs5使用教程。一、photoshopcs5是什么软件AdobePhotoshopCS5Extended是电影、视频和多媒体领域的专业人士,使用3D和动画的图形和Web设计人员,以及工程和科学领域的专业人士的理想选择。呈现3D图像并将它合并到2D复合图像中。轻松编辑视
DisplayX（显示器测试软件）使用教程
Mar 04, 2024 pm 04:00 PM
在购买显示器的时候对其进行测试是必不可少的一环，能够避免买到有损坏的，今天小编教大家来使用软件对显示器进行测试。方法步骤1.首先要在本站搜索下载DisplayX这款软件，安装打开，会看到提供给用户很多种检测方法。2.用户点击常规完全测试，首先是测试显示器的亮度，用户调节显示器使得方框都能看得清。3.之后点击鼠标即可进入下一环节，如果显示器能够分清每个黑色白色区域那说明显示器还是不错的。4.再次单击鼠标左键，会看到显示器的灰度测试，颜色过渡越平滑表示显示器越好。5.另外在displayx软件中我们
专家教你！华为手机截长图的正确方法
Mar 22, 2024 pm 12:21 PM
随着智能手机的不断发展，手机的功能也变得越来越强大，其中截长图功能成为了许多用户日常使用的重要功能之一。截长图可以帮助用户将一个较长的网页、对话记录或者图片一次性保存下来，方便查阅和分享。而在众多手机品牌中，华为手机也是备受用户推崇的一款品牌之一，其截长图功能也备受好评。本文将为大家介绍华为手机截长图的正确方法，以及一些专家技巧，帮助大家更好地利用华为手机的
PHP教程：如何将int类型转换为字符串
Mar 27, 2024 pm 06:03 PM
PHP教程：如何将int类型转换为字符串在PHP中，将整型数据转换为字符串是一种常见的操作。本教程将介绍如何使用PHP内置的函数将int类型转换为字符串，同时提供具体的代码示例。使用强制类型转换：在PHP中，可以使用强制类型转换的方式将整型数据转换为字符串。这种方法非常简单，只需要在整型数据前加上(string)即可将其转换为字符串。下面是一个简单的示例代码
