JavaWeb | JavaScript基础

本文介绍: Ja va sSrip t是种网页脚本语言，虽然名字中含有Jav a，但它与Jav a 语言是两种不同的语言。不过Jav aScri p t的语法和Java语言的语法非常类似。JavasSript 代码可以很容易地嵌入到到HTML页面中。浏览器对JavaScript 脚本程序进行解释执行。JavaScript和Java一样是对大小敏感的…..

1.JavaScript 简介

JavasSript 是种网页脚本语言，虽然名字中含有Java，但它与Java语言是两种不同的语言。不过JavaScript 的语法和Java语言的语法非常类似。

JavasSript代码可以很容易地嵌入到到HTML页面中。浏览器对JavaScript 脚本程序进行解释执行。

JavaScript 和 Java一样是 对大小敏感 的。
<html &gt;
<body&gt;
<script&gt;
    
<script src="code.js" type="text/javascript"></script>
</body>
</html>

2.JavaSc ript注释

在JavaSc ript中注释有3种写法 ：
HTML注释：

Java单行注释、Java多行注释：
<script>
//Java的单行注释方式

/*
 Java的多行注释方式
 */
</script>

3.JavaSc ript语法 :

变量的定义

JavaSc ript中的变量为 弱变量类型，即变量的类型根据它被赋值的类型改变。
var 变量名
<script type="text/javascript">
    var score = 100; //弱类型，赋的值是什么类型该变量就是什么类型
    //100为int类型，则score则为int类型的变量
</script>
JavaSc r ipt中变量未声明就使用是不会报错的，但容易出现不可预计的错误，所以要先声明再使用。

函数 Nu mb er(字符串) 可以将字符串转为数值；函数Str ing(数值) 可以将数值转换为字符串。

函数的定义

JavaSc r ipt中函数的基本格式为 :

<script>
    //定义函数
   function 函数名(参数列表){
     return 值;
   }
</script>

定义匿名函数 ：

<script>
    //定义匿名函数
    var arg1 = function(参数列表) {
        return 值;
    }
</script>

<script type="text/javascript">
    var arg0 = "欢迎使用JavaScript";
    
    showInfo(arg0)
    function showInfo(arg1){
        window.alert(arg1);
    }
</script>

<script type="text/javascript">
    var score = 90;
    if (score >= 60) {
        window.alert("及格");
    } else {
        window.alert("不及格")
    }
</script>

<script type="text/javascript">
    for (var i = 0; i < 10; i++) {
        window.alert(i);
    }
</script>

4.JavaScript内置 对象

JavaScript的 内置对象由浏览器提供，可以直接使用，不用事先定义。

JavaScript的四个内置对象分别是： ①window ②document ③history ④location

window ：负责操作浏览器窗口，负责窗口的状态、开/闭。

document : 负责操作浏览器载入的文档 (HTML文件 )，从属于Win do w。

history ：可以代替后退( 前进 )按钮访问历史记录,从属于 window。

location : 访问地址栏,也从属于 window。

4.1 win do w的作用：

出现 提示框

win do w对象可以 跳出提示框，主要有如下功能。

win do w. alert(“内容”): 出现消息框。
wi n do w. confirm(“内容”): 出现确认框。
wi n do w. prompt(“内容”): 出现输入框。

<!-- 出现提示框 -->
<script type="text/javascript">
 
  window.alert("消息框")    //出现提示框

  result = window.confirm("您确认要提交吗？")  //出现确认框,根据你的选择会有一个返回值

  str = window.prompt("请输入一个字符串","")   //出现输入框,获取输入的值
</script>

打开 关闭 窗口

win dow对象还用于控制窗口的状态和开/闭，打开窗口用wind ow对象的open( )函数。
wind ow.open( )方法参数有3个,第1个参数是 新窗口的地址 ； 第2个参数是 新窗口的名称，第3个参数是 新窗口的状态。
<script>
    //窗口的状态栏，显示的字符串为: "出现新窗口"
    window.status = "出现新窗口";

    /*
      创建/打开一个新窗口window1.html,命名为: new1，并指定其属性
    */
    newWindow = window.open("window.html", "new1", "width=300,height=300,top=500,left=500");
    //关闭窗口
    newWindow.close();
</script>
新窗口状态 (第三个参数) 可设置如下属性。
toolbar: 是否有工具栏，可选值为1和0。
lo cat ion: 是否有地址栏，可选值为1和0。
status: 是否有状态栏，可选值为1和0。
menu bar: 是否有菜单栏，可选值为1和0。
scrollbars: 是否有滚动条，可选值为1和0。
resizable : 是否能改变大小，可选值为1和0。
width 和 height : 窗口的宽度和高度，用像素表示。
left 和 top : 窗口左上角相对于桌面左上角的x和y 坐标。
ps : 各属性间用逗号隔开。
 newWindow = window.open("window.html", "new1", "toolbar=0,width=300,height=300,top=500,left=500");
<script>
    window.status = "出现新窗口";
    /*
      创建/打开一个新窗口window1.html,命名为: new1，并指定其各项属性
    */
    newWindow = window.open("window.html", "new1", "toolbar=0,width=300,height=300,top=500,left=500");
    //关闭窗口
    newWindow.close();
</script>
<script>
    //窗口的状态栏，显示的字符串为: "出现新窗口"
    window.status = "出现新窗口";

    /*
      创建/打开一个新窗口window1.html,命名为: new1，并指定宽度、高度和 "其的位置"
    */
    //打开新窗口 (html名,窗口名,设置该窗口的宽高位置)
    newWindow = window.open("window.html", "new1", "width=300,height=300,top=500,left=500");
    //通过返回值来控制窗口
    //关闭窗口
    newWindow.close();
</script>
</body>
</html>

定时器

定时器 : window对象负责管理和控制页面的“定时器”，控制和操作页面的“定时器”。
定时器的作用: 让某个函数隔一段时间运行一次。

定时器格式:

timer = window.setTimeout("需要运行的函数","时间(用毫秒计)")

清除定时器：
```
clearTimeout(timer)
```

<script type="text/javascript">
  //setTimeout 让函数在某段时间之后运行一次，参数是2毫秒
  timer = window.setTimeout("fun1()", 1000); //1秒后执行该函数

  var i = 0; //弱类型变量

  function fun1() {
      i++;
      window.status = i; 
      if (i == 100) {  //i到达100就清除该定时器
          window.clearTimeout(timer); 
          return;
      }
      timer = window.setTimeout("fun1()", "1000"); //继续调会fun1()函数
  }
</script>

4.2 history的作用

history包含用户浏览等历史信息，使用这个对象可以替代后退/前进按钮访问历史记录。该对象
从属于window。

history对象常用的函数:

history.back() : 返回上一页，相等于点击浏览器上的后退按钮。
history.forward() : 返回下一页，相当于点击浏览器上的前进按钮。
window.history.go(on) : n为整数，整数表示向前进n格页面,负数表示向后退n格页面。
<html>
<body>
<a onclick="history.forward()">前进</a>
<a onclick="history.back()">后退</a>
</body>
</html>

4.3 doc ument的作用：

在网页上输出

在网页上输出 ： doc ument.write ln( )

<script>
    //在网页上输出内容: 用document的.writenlen()方法
    document.writeln(“你好！”);
</script>

<script type="text/javascript">
// 展示  8X8的国际象棋
// table标签
document.writeln("<table width=400 height=400 border=1>")
for (i = 1; i <= 8; i++) {
    //tr开始标签
    document.writeln("<tr>");
    for (j = 1; j <= 8; j++) {
        color = "black"; //黑色
        if ((i + j) % 2 == 0) {
            color = "white"; //白色
        }
        //td标签
        document.writeln("<td bgcolor=" + color + "></td>");
    }
    document.writeln("</tr>");
}
document.writeln("</table>")
</script>

设置网页 属性

使用document对象可以进行一简单网页属性的设置，例如网页的标题、颜色等,并且可以得到网页的某些属性,例如当前地址。
其比较常用的设置包括 document.title来访问标题、document.lo cat ion来获取当前网页的地址等
<script type="text/javascript">
    //设置网页的属性 和 标题
    function fun() {
        document.title = "新的标题1";
        //获得当前网页的网址
        window.alert("该网页的网址是:" + document.location);
    }
</script>
<input type="button" onclick="fun()" value="按钮"/>

访问 文档 元素，特别是表单 元素

使用document对象可以访问文档中的元素（例如图片、表单、表单中的控件等)
访问语法: document.元素名.子元素名

<script type="text/javascript">
    function add() {
        //得到这两个文本框的内容(且都转换为数字类型)
        n1 = Number(document.form1.txt1.value)
        n2 = Number(document.form1.txt2.value)
        
        //给表单中的txt3赋值
        document.form1.txt3.value = n1 + n2;
    }
</script>
<form name="form1">
    <input name="txt1" type="text"><br>
    <input name="txt2" type="text"><br>
    <input type="button" onclick="add()" value="求和"><br>
    <input name="txt3" type="text"><br>
</form>

<script type="text/javascript">
    function validate() {
        //得到这两个文本的内容
        account = document.loginForm.account.value;
        password = document.loginForm.password.value;
        //验证这两个的内容
        if (account == "") {
            window.alert("账号不能为空！");
            //将鼠标光标聚焦在账号栏上
            document.loginForm.account.focus();
            return;
        }else if (password == "") {
            window.alert("密码不能为空！");
            document.loginForm.password.focus();
            return;
        }
        //密码和账号都不为空，才提交该表单
        document.loginForm.submit();
    }
</script>
欢迎您登录:
<form name="loginForm">
    输入账号: <input name="account" type="text"><br>
    输入密码: <input name="password" type="password"><br>
    <input type="button" onclick="validate()" value="登录">
</form>

4.4 lo cat ion的作用

lo cat ion对象可以访问浏览器的地址栏，从属于window对象。

其常见的功能:
1.跳转到下一个网页，跳转方法是修改 location对象中的href 属性。
2. 定时跳转（该功能要结合window定时器使用）。

<!-- 1.用location内置对象进行网页跳转-->
<script type="text/javascript">
    function locationTest() {
        //location为内置对象，直接.href,修改属性的值，即可实现跳转到下一个网页
        location.href = "./img/2.png";
    }
</script>
<input type="button" onclick="locationTest()" value="按钮">
<a href="img/2.png">到图片</a>

<!--2.定时跳转（该功能要结合window定时器使用）-->
欢迎你登陆，3秒后跳转到首页.....
<script type="text/javascript">
    window.setTimeout("toIndex()", 3000); //3秒后执行toIndex()方法
    function toIndex() {
        //进行网页跳转
        window.location.href = "img/2.png";
    }
</script>