【JAVA】JavaScript上（基础语法与对象）

已于 2022-07-23 16:12:19 修改
阅读量367 收藏 2
点赞数 1
分类专栏： JavaWeb 文章标签： javascript java
于 2022-07-23 16:08:04 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/huihu__/article/details/125643505
版权

目录

【JavaScript基础】

【JavaScript引入方式】

1、内部脚本

2、外部脚本

【JavaScript语法】

1、输出语句

2、变量

3、数据类型

4、运算符

5、函数

【JavaScript对象】

【Array对象】

【Array属性和方法】

【String对象】

【String属性和方法】

【自定义对象】

【BOM】——Browser Object Model

【Window】——浏览器窗口对象

【window的属性及方法】

【项目示例】——定时切换照片

【DOM】——Document Object Model

【Element】——元素对象

【Element对象的使用】

【JavaScript基础】

【概述】：

JavaScript 是一门跨平台、面向对象的脚本语言，来控制网页行为的，它能使网页可交互

官网：w3school 在线教程

【JavaScript引入方式】

1、内部脚本

将JS代码定义在HTML页面中

在HTML中，JavaScript代码必须位于<script>与</script>标签之间

<script>
    alert("hello JS ~");
</script>

例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<script>
    alert("hello js");
</script>
</body>
</html>

【注意】： 

  • 在 HTML 文档中可以在任意地方，放置任意数量的<script>
  • 一般把脚本置于 <body> 元素的底部，可改善显示速度，因为脚本执行会拖慢显示

2、外部脚本

将JS代码定义在外部JS文件中，然后引入到HTML页面中

外部文件：demo.js   alert("hello JS ~");

引入外部 js文件  <script src=“../js/demo.js"></script>

例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script src="../js/demo.js"></script>
</body>
</html>
alert("hello js");

【注意】：

  • 外部脚本不能包含 <script> 标签
  • <script> 标签不能自闭合

【JavaScript语法】

1、输出语句

  1. 使用 window.alert() 写入警告框

  2. 使用 document.write() 写入 HTML 输出

  3. 使用 console.log() 写入浏览器控制台

window.alert("hello JS ~");//弹出警告框
document.write("hello JS ~");//写入HTML
console.log("hello JS ~");//写入控制台

例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script>
  window.alert("hello js");
  document.write("hello js2");
  console.log("hello js3");
</script>
</body>
</html>

2、变量

JavaScript 中用 var 关键字（variable 的缩写）来声明变量

var test = 20;
test = "张三";

JavaScript 是一门弱类型语言，变量可以存放不同类型的值

var：

  1. 作用域：全局变量
  2. 变量可以重复定义

let：

  1. 作用域：代码块内有效

const：

  1. 用来声明一个只读变量，一旦声明，常量的值就不能改变

【遵守规则】

  1. 组成字符可以是任何字母、数字、下划线（_）或美元符号（$）
  2. 数字不能开头
  3. 建议使用驼峰命名

例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script>
    {
        var age=30;
    }
    let a=20;
    const b=10;
    alert(age);
    alert(a);
    alert(b);
</script>
</body>
</html>

3、数据类型

JavaScript中分为原始类型和引用类型

【分类】：

  1. number：数字(整数、小数、Not a Number)
  2. string：字符、字符串，单双引号皆可
  3. boolean：布尔
  4. null：对象为空
  5. undefined：当声明的变量未初始化时，该变量的默认值是undefined

使用typeof运算符可以获取数据类型

alert(typeof age);

例： 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script>
    //number
    var age=20;
    var price=30;
    alert(typeof age);
    alert(typeof price);

    //string
    var ch ='a';
    var name ='张三';
    var addr ="北京";
    alert(typeof ch);
    alert(typeof name);
    alert(typeof addr);

    //boolean
    var flag = true;
    var flag2 = false;
    alert(typeof flag);
    alert(typeof flag2);

    //null
    var obj=null;
    alert(typeof obj);

    //undefined
    var a;
    alert(typeof a);
</script>
</body>
</html>

4、运算符

【分类】：

  • 一元运算符：++，--
  • 算术运算符：+，-，*，/，%
  • 赋值运算符：=，+=，-=…
  • 关系运算符：>，<，>=，<=，!=，==，===
  • 逻辑运算符：&&，||，!
  • 三元运算符：条件表达式 ?  true_value : false_value

【注意】：

== 和 === ：== 会进行类型转换，=== 不会进行类型转换

类型转换：

1、其他类型转为数字：

        （1）string:将字符串字面值转为数字。如果字面值不是数字，则转为NaN。一般使用parseInt

方法进行转换

        （2）boolean:true 转为1，false 转为0

2、其他类型转为 boolean

        （1）number：0和NaN转为false，其他的数字转为true

        （2）string：空字符串转为false，其他字符串转为true

        （3）null：转为false

        （4）undefined：转为false

例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script>
    var age1 = 20;
    var age2 = "20";
    alert(age1 == age2);
    alert(age1 === age2);

    //var str = +"20";
    var str = "20";
    alert(parseInt(str) + 1);

    var flag = +false;
    alert(flag);

    var flag2 = 3;
    var flag3 = "";
    var flag4 = undefined;
    if (flag4) {
        alert("转为true");
    } else {
        alert("转为false");
    }
</script>
</body>
</html>

5、函数

【概述】：函数（方法）是被设计为执行特定任务的代码块

方式一：

1、定义：JavaScript 函数通过 function 关键词进行定义，语法为：

function functionName(参数1,参数2..){
    要执行的代码
}

2、调用：函数名称(实际参数列表);

let result = add(1,2);

例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script>
    function add(a, b) {
        return a + b;
    }

    var result = add(1, 2);
    alert(result);
</script>
</body>
</html>

方式二：

1、定义：

var functionName = function (参数列表){
    要执行的代码
}

2、调用：JS中，函数调用可以传递任意个数参数

let result = add(1,2,3);

例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script>
    var add2=function (a,b){
        return a+b;
    }
    var result2 =add2(1,2);
    alert(result2)
</script>
</body>
</html>

【注意】：

  • 形式参数不需要类型。因为JavaScript是弱类型语言
  • 返回值也不需要定义类型，可以在函数内部直接使用return返回即可

【JavaScript对象】

【Array对象】

【定义】

var 变量名 = new Array(元素列表); //方式一        var arr = new Array(1,2,3);

var 变量名 = [元素列表]; //方式二                        var arr = [1,2,3];

【访问】

arr[索引] = 值;

arr[0] = 1;

【注意】：JS数组类似于Java集合，长度，类型都可变

例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script>
    //定义
    //方式一
    var arr=new Array(1,2,3);
    alert(arr);
    //方式二
    var arr2=[1,2,3];
    alert(arr2);
    //访问
    arr2[0]=10;
    alert(arr2);
    //特点：变长变类型
    var arr3=[1,2,3];
    arr3[10]=10;
    alert(arr3[10]);
    arr3[5]="hello";
    alert(arr3);
</script>
</body>
</html>

【Array属性和方法】

 例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script>
    //属性
    //length：数组中元素的个数
    var arr4=[1,2,3];
    for (let i = 0; i < arr4.length; i++) {
        alert(arr4[i]);
    }
    //方法：
    //push：添加方法
    var arr5=[1,2,3];
    arr5.push(10);
    alert(arr5);
    //splice:删除方法(第一个参数为从哪里开始删，第二个参数为输出多少个)
    arr5.splice(0,1);
    alert(arr5);
</script>
</body>
</html>

【String对象】

【定义】：

var 变量名 = new String(s); //方式一        var str = new String("hello");

var 变量名 = s; //方式二                           var str = "hello" ;或var str = 'hello';

例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script>
    //定义
    //方式一
    var str1=new String("abc");
    //方式二
    var str2="abc";
    var str3='abd';
</script>
</body>
</html>

【String属性和方法】

【属性】

【方法】

例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script>
    var str=' abd ';
    //属性：length
    alert(str.length);
    //方法：
    //trim：去除字符串前后两端的空白字符
    alert(1+str.trim()+1);
</script>
</body>
</html>

【自定义对象】

【格式】

var 对象名称 = {
                           属性名称1:属性值1,
                           属性名称2:属性值2,
                           ...
                           函数名称:function (形参列表){}
                           ...
                         };

例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script>
    var person = {
        name:"zhangsan",
        age:23,
        eat:function (){
            alert("干饭");
        }
    }
    alert(person.name);
    alert(person.age);
    person.eat();
</script>
</body>
</html>

【BOM】——Browser Object Model

【定义】

  • Browser Object Model——浏览器对象模型
  • JavaScript将浏览器的各个组成部分封装成对象

【组成】

  • Window：浏览器窗口对象
  • Navigator：浏览器对象
  • Screen：屏幕对象
  • History：历史记录对象
  • Location：地址栏对象

【Window】——浏览器窗口对象

【获取】：直接使用window，其中window.可以省略

【window的属性及方法】

【属性】：获取其他BOM对象

 【方法】：

【History】——历史记录

【获取】：使用window.history获取，其中window.可以省略

window.history.方法();
history.方法();

【方法】

【Location】——地址栏对象

【获取】：使用window.location获取，其中window.可以省略

window.location.方法();
location.方法();

【属性】

例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script>
    window.alert("abc");
    alert("bbb");
    //confirm
    var flag = confirm("确认删除？");
    alert(flag);
    if(flag){
        //删除
    }
    //定时器
    //setTimeout(function,毫秒值);在一定的时间间隔后执行一个function，只执行一次
    //setInterval(function,毫秒值);在一定的时间间隔后执行一个function，循环执行
    setTimeout(function(){
        alert("hehe1");
    },3000);
    setInterval(function(){
        alert("hehe2");
    },2000);
    //Location对象
    document.write("3秒跳转到首页。。。");
    setTimeout(function () {
        location.href="https://www.baidu.com"
    },3000);
</script>
</body>
</html>

【项目示例】——定时切换照片

需求：每隔一秒切换一次图片

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<input type="button" onclick="on()" value="开灯">
<img id="myImage" border="0" src="../img/off.gif" style="text-align:center;">
<input type="button" onclick="off()" value="关灯">
<script>
    function on(){
        document.getElementById('myImage').src='../img/on.gif';
    }

    function off(){
        document.getElementById('myImage').src='../img/off.gif';
    }
    var flag=0;
    //定时器
    setInterval(function (){
        if(flag%2===0){
            on();
        }else {
            off();
        }
        flag++;
    },1000);
</script>
</body>
</html>

【DOM】——Document Object Model

【概述】

  • Document Object Model ——文档对象模型
  • JavaScript将标记语言的各个组成部分封装为对象

W3C DOM 标准被分为 3 个不同的部分：

1.核心 DOM：针对任何结构化文档的标准模型

  • Document：整个文档对象
  • Element：元素对象
  • Attribute：属性对象
  • Text：文本对象
  • Comment：注释对象

2.XML DOM：针对 XML 文档的标准模型

3.HTML DOM：针对 HTML 文档的标准模型

  • Image：<img>
  • Button ：<input type=‘button’>

【组成】

  • Document：整个文档对象
  • Element：元素对象
  • Attribute：属性对象
  • Text：文本对象
  • Comment：注释对象

【DOM树】

【Element】——元素对象

【获取】：使用Document对象的方法来获取

  1. getElementById：根据id属性值获取，返回一个Element对象
  2. getElementsByTagName：根据标签名称获取，返回Element对象数组
  3. getElementsByName：根据name属性值获取，返回Element对象数组
  4. getElementsByClassName：根据class属性值获取，返回Element对象数组

例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<img id="light" src="../img/off.gif"><br>
<div class="cls">传智教育</div>
<br>
<div class="cls">黑马程序员</div>
<br>
<input type="checkbox" name="hobby">电影
<input type="checkbox" name="hobby">旅游
<input type="checkbox" name="hobby">游戏
<br>
<script>
    //getElementById:根据id属性值获取，返回一个Element对象
    var img = document.getElementById("light");
    alert(img);
    //getElementsByTagName:根据标签名获取，返回一个Element对象数组
    var divs = document.getElementsByTagName("div");
    for (let i = 0; i < divs.length; i++) {
        alert(divs[i]);
    }
    //getElementsByName:根据name属性值获取，返回Element对象数组
    var hobby = document.getElementsByName("hobby");
    for (let i = 0; i < hobby.length; i++) {
        alert(hobby[i]);
    }
    //getElementsByClassName:根据class属性值获取，返回Element对象数组
    var cls = document.getElementsByClassName("cls");
    for (let i = 0; i < cls.length; i++) {
        alert(cls[i]);
    }
</script>
</body>
</html>

【Element对象的使用】

查阅文档：

JavaScript 和 HTML DOM 参考手册 (w3school.com.cn)

例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<img id="light" src="../img/off.gif"><br>
<div class="cls">传智教育</div>
<br>
<div class="cls">黑马程序员</div>
<br>
<input type="checkbox" name="hobby">电影
<input type="checkbox" name="hobby">旅游
<input type="checkbox" name="hobby">游戏
<br>
<script>
    var img = document.getElementById("light");
    img.src = "../img/on.gif"

    var divs = document.getElementsByTagName("div");
    //style:设置元素css样式
    //innerHTML设置元素内容
    divs[0].style.color = 'red';
    divs[1].innerHTML = '呵呵';

    var hobby = document.getElementsByName("hobby");
    hobby[0].checked=true;
    hobby[1].checked=true;

</script>
</body>
</html>
Lx_Hy_
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
java调用chrome浏览器内核cef实现，非jxbrowser
10-22
java调用chrome浏览器内核，cef实现，非jxbrowser，非常不错
java 跨浏览器的javascript脚本编写_开发跨浏览器的JavaScript方法说明
weixin_39946500的博客
02-26 69
开发跨浏览器的JavaScript方法说明更新时间：2008年08月14日 08:50:59 作者：IE是当前浏览器的一个异类，不过解决方法倒也相当简单，使用Firefox和Safari 之 类的浏览时，可以使用元素的setArribute方法来设置元素的class属性开发跨浏览器的JavaScript1.childNodes在ff中和ie的区别。ff中的node(nodeType=1)...
java二次开发浏览器内核_常见的五大浏览器的内核
weixin_29034963的博客
02-28 975
首先我们理解一下什么是内核:英文叫做：Rendering Engine，中文翻译很多，排版引擎、解释引擎、渲染引擎，现在流行称为浏览器内核.Rendering Engine，顾名思义，就是用来渲染网页内容的，将开发者写的代码转换为用户可以看见的完美页面。由于牵扯到排版问题，所以肯定会排版错位等问题。为什么会排版错位呢？有的是由于网站本身编写不规范，有的是由于浏览器本身的渲染不标准。现在有几个主流的...
java中获取浏览器信息
热门推荐
zhuchunyan_aijia的博客
05-27 1万+
1. Java获取浏览器版本  String agent=request.getHeader("User-Agent").toLowerCase(); System.out.println("浏览器版本："+getBrowserName(agent)); public String getBrowserName(String agent) {   if(agent.indexO
一句java代码就让你获得游览器内核
知迷鸟的博客
10-20 237
public class request_Header extends HttpServlet { public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { //...
javascript基础语法
05-20
它的基础语法是所有JavaScript程序员必须掌握的核心知识。JavaScript语法与C++和Java有诸多相似之处，但也有其独特之处，使得它在交互性丰富的网页应用中扮演着至关重要的角色。 1. 变量与数据类型： JavaScript ...
JavaScript语法基础
最新发布
06-05
#### 四、JavaScript 基础语法 ##### 1. 输出信息：`document.write()` - **功能**：向浏览器输出消息。 - **语法**：`document.write("要输出的文本内容")` ##### 2. 对话框 - **Alert 对话框**：显示一个带有...
java基础语法测试题.docx
09-30
【Java基础语法知识点详解】 Java是一种广泛使用的面向对象的编程语言，其语法严谨且具有丰富的特性和库。以下是对题目中涉及的一些Java基础语法知识点的详细解析： 1. **接口和类的关系**：接口（Interface）和类...
面向对象的JavaScript基础.pdf
08-04
虽然JavaScript的类本质上是函数的语法糖，但它们提供了创建对象的结构和组织方式。 面向对象编程（OOP）的核心概念包括类、继承和封装。在JavaScript中，类用于定义对象的模板，它描述了一组共享相同属性和方法的...
纯Java 实现的一个脚本语言 语法类似javascript
08-28
描述简短地提到了这是一个基于Java的项目，意味着它利用了Java的面向对象特性和强大的类库来构建一个与JavaScript语法相似的脚本环境。这可能意味着它实现了JavaScript的一些核心概念，如变量、函数、对象、数组、...
Java嵌入谷歌内核简单浏览器
10-19
本来我上传的资源都是0分下载。怎么都最少要2分了？这个最少分要选择2分
Java-Swing嵌入浏览器（本地浏览器和webkit浏览器-火狐内核）
11-21
用DJnative-swt和swt包开发的调用本地浏览器和webkit浏览器的示例
java内嵌浏览器
03-12
本代码J2SE代码，采用swt编程，实现内嵌浏览器，下载后找到项目中的两个类中的main运行即可。由于IE和Chrome内核不一样，所以采用jar包不一样，其中Chrome使用的jxbrowser，该项目中的jxbrowser已破解，放心使用。
java浏览器调用ie内核
06-22
java浏览器调用ie内核,简单调用.也是从网上下的代码,做了部分改良
java基于IE内核网页浏览器
12-25
使用java编写的基于IE内核多标签式的网页浏览器
java调用chrome内核_selenium中如何测试360等基于chrome内核的浏览器
weixin_28839439的博客
02-17 1105
直接上代码，注意是基于chrome内核的浏览器，基于ie的请替换其中的chrome方法为ie，但自己未尝试过，如果有结果可以告知！from selenium.webdriver.chrome.options import Optionsfrom selenium import webdriverfrom selenium.webdriver.common.keys import Keysimpor...
在Java代码中使用JavaScript
qq_53057371的博客
04-25 1920
在Java代码中使用JavaScript
gecko java_[图文]自己动手做J浏览器——基于JAVA和火狐内核(gecko) | 学步园
weixin_39717026的博客
02-13 240
网上有关于JAVA调用火狐内核的资料不多，而且比较杂乱。我在此处整理出JAVA调用火狐内核制作浏览器最简单的方案，以供参考。教程中所涉及到需要下载的资源，都在代码示例中，如果您不想一个一个下载资源，可直接下载“代码示例”：首先纠正一个误区，很多人认为JAVA调用火狐内核只需要导入相关JAR包就行了，这是错误的。火狐内核需要在XUL的基础上运行，所以我们需要安装并配置xulrunner。我会在后面的...
Java之JS基础语法 ①(前端）
哒哒的博客
11-01 896
Java之JS基础语法 ①(前端）
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Lx_Hy_

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值