JavaWeb | JavaScript基础

- 1.JavaScript简介
- 2.JavaScript注释
- [3.JavaScript语法 :](#3.JavaScript语法 :)
- - 变量的定义
  - 函数的定义
- 4.JavaScript内置对象
- - [4.1 window的作用：](#4.1 window的作用：)
  - [4.2 history的作用](#4.2 history的作用)
  - [4.3 document的作用：](#4.3 document的作用：)
  - [4.4 location的作用](#4.4 location的作用)

1.JavaScript简介

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

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

JavaScript 和 Java 一样是 对大小敏感 的。
html 复制代码
<html >
<body>
<script>
    
    window.alert("第一个JavaScript");
</script>
</body>
</html>
code.js
js 复制代码
window.alert("第一个JavaScript文件。")
在另外的HTML页面 插入以来代码 来导入该文件。
html 复制代码
<script src="code.js" type="text/javascript"></script>
html 复制代码
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>导入JS文件</title>
</head>
<body>

<script src="code.js" type="text/javascript"></script>
</body>
</html>

2.JavaScript注释

在JavaScript 中注释有3种写法 ：
HTML注释：
html 复制代码

Java单行注释、Java多行注释：
js 复制代码
<script>
//Java的单行注释方式

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

3.JavaScript语法 :

变量的定义

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

函数 Number(字符串) 可以将字符串 转为数值；函数String(数值) 可以将数值转换为字符串。

函数的定义

JavaScript 中函数的基本格式为 :

js 复制代码

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

定义匿名函数 ：

js 复制代码

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

js 复制代码

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

js 复制代码

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

js 复制代码

<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文件 )，从属于Window。

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

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

4.1 window的作用：

出现提示框

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

window . alert ("内容"): 出现消息框。

window . confirm ("内容"): 出现确认框。

window . prompt ("内容"): 出现输入框。
js 复制代码

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

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

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

打开关闭窗口

window 对象还用于控制窗口的状态和开/闭，打开窗口用window对象的open( )函数。
window.open ( )方法参数有3 个,第1个参数 是 新窗口的地址 ； 第2个参数 是 新窗口的名称，第3个参数 是 新窗口的状态。
js 复制代码
<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 。
location : 是否有地址栏 ，可选值为1和0。
status : 是否有状态栏 ，可选值为1和0。
menubar : 是否有菜单栏 ，可选值为1和0。
scrollbars : 是否有滚动条 ，可选值为1和0。
resizable : 是否能改变大小 ，可选值为1和0 。
width 和 height : 窗口的宽度和高度 ，用像素表示。
left 和 top : 窗口左上角相对于桌面左上角 的x 和y坐标 。
ps : 各属性间用逗号隔开。
js 复制代码
 newWindow = window.open("window.html", "new1", "toolbar=0,width=300,height=300,top=500,left=500");
js 复制代码
<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>
js 复制代码
<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对象负责管理和控制页面的"定时器"，控制和操作页面的"定时器"。
定时器的作用: 让某个函数隔一段时间运行一次。

定时器格式:

js 复制代码

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

清除定时器：
js 复制代码
```
clearTimeout(timer)
```

js 复制代码

<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格页面。
js 复制代码
<html>
<body>
<a onclick="history.forward()">前进</a>
<a onclick="history.back()">后退</a>
</body>
</html>

4.3 document的作用：

在网页上输出

在网页上输出 ： document.writeln( )

js 复制代码

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

js 复制代码

<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.location来获取当前网页的地址等
js 复制代码
<script type="text/javascript">
    //设置网页的属性 和 标题
    function fun() {
        document.title = "新的标题1";
        //获得当前网页的网址
        window.alert("该网页的网址是:" + document.location);
    }
</script>
<input type="button" onclick="fun()" value="按钮"/>

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

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

js 复制代码

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

js 复制代码

<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 location的作用

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

其常见的功能 :

1.跳转到下一个网页，跳转方法 是修改 location对象 中的href属性。

定时跳转（该功能要结合window定时器使用）。

js 复制代码

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

js 复制代码

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

JavaWeb | JavaScript基础

目录:

1.JavaScript简介

2.JavaScript注释

3.JavaScript语法 :

变量的定义

函数的定义

4.JavaScript内置对象

4.1 window的作用 ：

出现提示框

打开关闭窗口

定时器

4.2 history的作用

4.3 document的作用 ：

在网页上输出

设置网页属性

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

4.4 location的作用

4.1 window的作用：

4.3 document的作用：