js调用方式，document 定时器 string对象

知识点1【js的调用方式】（动起来）
1、直接添加脚本

运行结果:

2、使用 script 标记插入脚本

<input type="button" value="戳我呀给你惊喜" onclick='my_button();' >

3、链接脚本文件（推荐） index.html deal.js function my_button() { alert("我是你的小可爱"); }

知识点2【js的函数】

案例：
index.html

deal.js
// 函数的形参 只需要给定变量名
function my_button(arg1,arg2,arg3) {

alert("arg1 = "+arg1);
alert("arg2 = "+arg2);
alert("arg3 = "+arg3);

}
知识点3【js对象】
1、window对象（浏览器对象）

// 函数的形参 只需要给定变量名
function my_button() {

//open在新的窗口中打开
//window.open("http://www.baidu.com");

//读操作  返回的是当前的URL
//alert(window.location.href);

//写操作 在当前的窗口中打开
//window.location.href = "http://www.baidu.com";

//close关闭当前窗口
window.close();

}
知识点4【document对象】（重要）

index.html

用户名:
密 码:

<input type="button" value="取消" onclick='my_button(0);' >

deal.js // 函数的形参 只需要给定变量名 function my_button(arg) {

if(arg == 1)//登陆 admin 123456
{
    //获取 id="usr"的数据
    var usr = document.getElementById("usr").value;
    var pwd = document.getElementById("pwd").value;
    if(usr=="admin" && pwd =="123456")
    {
        window.location.href = "http://www.baidu.com"
    }
    else
    {
        alert("用户名或密码错误请重新输入");
        document.getElementById("usr").value="";
        document.getElementById("pwd").value="";
    }
    
}
else if(arg == 0)//取消
{
    document.getElementById("usr").value="";
    document.getElementById("pwd").value="";
}

}
注意：document.getElementById(“usr”).value value一般用于输入框
2、document获取label的内容
document.getElementById(“addr”).innerHTML 用户label
index.html

img.js function img_fun() { document.getElementById("img").src = "./image/deng.png"; } 4、document获取单选框的状态 index.html 男 女
img.js function sex_fun() { alert("男:"+document.getElementById("nan").checked); alert("女:"+document.getElementById("nv").checked); } 5、document获取下拉列表框的内容 index.html 请选择你的英雄: 德玛西亚 烬 小法 盲僧 小炮 img.js function hero_fun() { //得到选中的序号 var index = document.getElementById("hero").selectedIndex;

alert("你选的英雄为:"+ document.getElementById("hero").options[index].value );
delete hero;

}
知识点5【定时器】（重要）

index.html
当前实时温度:0.0




wendu.js
var my_timer;
function timer_fun(arg) {

if(arg == "1")//开启
{
    my_timer = setInterval("my_fun()",1000);
}
else if(arg == "0")//结束
{
    window.clearInterval(my_timer);
}

}
function my_fun() {
var num = Math.random()*100;
document.getElementById(“wendu”).innerHTML=num;
}
知识点6【Date对象】
index.html

当前时间:

</div>

date.js function get_time() {

var d = new Date();

var text ="<table border='1'>";
text +="<tr><td>年</td> <td>月</td><td>日</td></tr>"
text +="<tr><td>"
text += d.getFullYear();
text +="</td><td>";
text += d.getMonth()+1;
text +="</td><td>";
text += d.getDate();
text += "</td></tr>";
text +="</table>"

document.getElementById("div").innerHTML = text;

}
知识点7【数学Math对象】

知识点8【string对象】提取字符串（重要）
indexof函数：

substring函数：

index.html

string.js function my_string() { var text = "2020:hehe:haha"; //alert("长度为:"+text.length); document.write("长度为:"+text.length+"
"); document.write("第0个字符为:"+text.charAt(0)+"
");

var stop = 0;
var start = 0;
var i=0;
while(1)
{
    //2020:hehe:haha
    stop = text.indexOf(":",start);
    if(stop == -1)
    {
        var tmp = text.substring(start,text.length);
        document.write("提取的内容"+tmp+"<br>");
        break;
    }
        
    var tmp = text.substring(start,stop);
    document.write("提取的内容"+tmp+"<br>");
    start = stop+1;
}

}

知识点9【AJAX】
1、概述
AJAX 是 Asynchronous JavaScript And XML 的缩写
AJAX 最大的优点是在不重新加载整个页面的情况下，可以与服务器交换数据并更新部分网页内容。
传统的网页（不使用 AJAX）如果需要更新内容，必需重载整个网页面。

简易版：

2、AJAX通信
2.1：创建xmlHttpRequest对象
function getXMLHttpRequest()
{
var xmlhttp = null;
if (window.XMLHttpRequest)//自动检测当前浏览器的版本，如果是 IE5.0 以上的高版本的浏览器
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();//创建请求对象
}
else如果浏览器是底版本的
{// code for IE6, IE5
xmlhttp=new ActiveXObject(“Microsoft.XMLHTTP”);//创建请求对象
}
return xmlhttp;//返回请求对象
}

2.2：设置响应服务器的回调函数

//2、设置回调函数
xmlhttp.onreadystatechange = function(){
//判断status 200 readyState4 表示服务器处理完成
if(xmlhttp.status == 200 && xmlhttp.readyState == 4)
{
//xmlhttp.responseText服务器的应答
var ret = xmlhttp.responseText;
alert(ret);//用户实现处？？？？？
}
}
2.3：open的使用
var url =“a.txt”;
xmlhttp.open(“GET”, url, true);//true异步 false同步
2.4：send的使用
//4、send
xmlhttp.send();
综合案例：获取文件数据
index.html

文件的内容:
file.js function getXMLHttpRequest() { var xmlhttp = null; if (window.XMLHttpRequest)//自动检测当前浏览器的版本，如果是 IE5.0 以上的高版本的浏览器 {// code for IE7+, Firefox, Chrome, Opera, Safari xmlhttp=new XMLHttpRequest();//创建请求对象 } else如果浏览器是底版本的 {// code for IE6, IE5 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");//创建请求对象 } return xmlhttp;//返回请求对象 } function get_file_fun() {

//1、创建对象
var xmlhttp = null;
xmlhttp = getXMLHttpRequest();

//2、设置回调函数
xmlhttp.onreadystatechange = function(){
    //判断status ==200 readyState==4 表示服务器处理完成
    if(xmlhttp.status == 200 && xmlhttp.readyState == 4)
    {
        //xmlhttp.responseText服务器的应答
        var ret = xmlhttp.responseText;
        document.getElementById("label").innerHTML = ret;
    }
}

//3、open
var url ="a.txt";
xmlhttp.open("GET", url, true);//true异步  false同步

//4、send
xmlhttp.send();

}
a.txt
ni hao wo shi a.txt