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 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>
以上就是javascript快速入门案例教程的详细内容。