JavaWeb | JavaScript基础

目录:

1.JavaScript简介

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

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

  • JavaScriptJava 一样是 对大小敏感 的。

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>
    <!-- 导入code.js文件-->
    <script src="code.js" type="text/javascript"></script>
    </body>
    </html>

2.JavaScript注释

在JavaScript注释有3种写法

  • HTML注释 :

    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四个内置对象 分别是: ①windowdocumenthistorylocation

    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 : 是否有工具栏 ,可选值为10
    location : 是否有地址栏 ,可选值为1和0。
    status : 是否有状态栏 ,可选值为1和0。
    menubar : 是否有菜单栏 ,可选值为1和0。
    scrollbars : 是否有滚动条 ,可选值为1和0。
    resizable : 是否能改变大小 ,可选值为1和0
    widthheight : 窗口的宽度和高度 ,用像素 表示。
    lefttop : 窗口左上角相对于桌面左上角xy坐标
    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属性

    1. 定时跳转(该功能要结合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>
相关推荐
Ysjt | 深6 分钟前
C++多线程编程入门教程(优质版)
java·开发语言·jvm·c++
ephemerals__12 分钟前
【c++丨STL】list模拟实现(附源码)
开发语言·c++·list
码农飞飞16 分钟前
深入理解Rust的模式匹配
开发语言·后端·rust·模式匹配·解构·结构体和枚举
一个小坑货17 分钟前
Rust 的简介
开发语言·后端·rust
湫ccc25 分钟前
《Python基础》之基本数据类型
开发语言·python
Matlab精灵26 分钟前
Matlab函数中的隐马尔可夫模型
开发语言·matlab·统计学习
Microsoft Word27 分钟前
c++基础语法
开发语言·c++·算法
吃杠碰小鸡29 分钟前
commitlint校验git提交信息
前端
数据小爬虫@29 分钟前
如何利用java爬虫获得淘宝商品评论
java·开发语言·爬虫
qq_1728055937 分钟前
RUST学习教程-安装教程
开发语言·学习·rust·安装