JavaWeb基础知识:JavaScript快速入门

时间:2022-02-24 14:18:56

JavaScript快速入门

1. js生成文本

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

</script>

2. js生成标签

<script>
document.write("我是天才<br/>");
document.write("我是废才<hr/>");
document.write("我是鬼才&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;");
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 + "&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;");
}
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. 画鸭子

  • 图片素材如下

JavaWeb基础知识:JavaScript快速入门
JavaWeb基础知识:JavaScript快速入门
JavaWeb基础知识:JavaScript快速入门
JavaWeb基础知识:JavaScript快速入门
JavaWeb基础知识:JavaScript快速入门
JavaWeb基础知识:JavaScript快速入门

  • 代码如下




        <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() + "日&nbsp&nbsp&nbsp");
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之飘逸江湖

JavaWeb基础知识:JavaScript快速入门
JavaWeb基础知识:JavaScript快速入门
JavaWeb基础知识:JavaScript快速入门
JavaWeb基础知识:JavaScript快速入门
JavaWeb基础知识:JavaScript快速入门
JavaWeb基础知识:JavaScript快速入门
JavaWeb基础知识:JavaScript快速入门

  • 代码如下

    <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>