Java网页搭建--JavaScript入门

最新推荐文章于 2022-04-24 18:43:15 发布
最新推荐文章于 2022-04-24 18:43:15 发布
阅读量268 收藏 1
点赞数
CC 4.0 BY-SA版权
分类专栏： 从网页搭建入门java web
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/qq_38517206/article/details/88584047
这篇博客介绍了JavaScript的基础知识，包括js输出、数据类型、变量、函数、运算符、条件语句、循环、DOM操作等。通过测试代码展示了如何使用JavaScript进行页面交互，如修改HTML内容、控制CSS样式、响应事件以及窗口与位置的控制。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

学习内容：

js基础：

js输出：
 

测试代码：
 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JavaScriptDeomo</title>
</head>
<body>
<p id="one"></p>
    <script type="text/javascript">
        /**
         * window.alert() 警告框
         * document.write() 写到HTML文档中
         * innerHTML 写到HTML元素中
         * console.log() 写到浏览器的控制台
         */

        window.alert('hello world');
        document.write('写入文档之中');

        // 将文字写入指定的元素
        document.getElementById('one').innerHTML = 'sss';

        //将信息输出到控制台
        console.log(123);


    </script>


</body>
</html>

输出结果：

首先会弹窗
 

然后进行输出：

js语句和注释：

测试代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>js语句与注释</title>
</head>
<body>
    <script type="text/javascript">
        //分号
        //JavaScript 代码
        //JavaScript 语句标识符 
        //代码块 function x(){}
        //单行 //注释和多行注释/*  */ 

        var a = 1;
        
        function b() {
            var c=1;
            var d=2;
        }
        
        b();

    </script>

</body>
</html>

js数据类型：
 

测试代码：
 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>js数据类型</title>
</head>
<body>
    <script type="text/javascript">
        //字符串 (String)
        //数字 (Number)
        //布尔 (Boolean)
        //数组 (Array)
        //对象 (Object)
        //空 (Null)
        //未定义 (Undefined)

        //var 可以声明各种类型
        var x;      //x Undefined
        var y = 5; //y Number
        var z = "john"; //z String

        //字符串
        var myName = "lcs";
        var myName = 'lcs';

        //数字
        var x1 = 10.0;
        var x2 = 10;

        //布尔
        var f1 = true;
        var f2 = false;

        //数组
        var cars = new Array();
        cars[0] = "bmw";

        var cars = new Array("bmw","audi","benz");

        var cars = ["bmw","audi","benz"];

        //JavaScript对象 键值对
        var person = {
            theFirstName : "john",
            theLastName : "James",
            id:1
        }

        //alert(person.theFirstName);
        alert(person["theFirstName"]);

        //Undefined 和 null
        //Undefined 表示这个变量不含有值
        //可以通过将变量的值复制为null来清空变量
        var persons;
        var myCar = "bmw";
        myCar = null;
        
    </script>

</body>
</html>

js变量：

测试代码：
 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>js变量</title>
</head>
<body>
    <script type="text/javascript">
        //变量可以以 字母 $ _ 开头，最好以字母开头
        //变量对大小写敏感

        var a = 1;

        var a1 = 2;

        var $a = 3;

        var _a = 4;

        var A =5;

        console.log(A);
        console.log(a);

    </script>

</body>
</html>

js函数：
 

测试代码；
 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>js函数</title>
</head>
<body>
<script type="text/javascript">

    /**
     *  函数是由事件驱动的或者当它被调用时执行的可重复使用的代码块
     function  a( 参数 ){}   声明会前置
     var  a  =  function( 参数 ){}  匿名函数
     函数中的 return
     */

    function a() {
        console.log(1111);
        console.log(2222);
    }

    a();
    a();
    a();
    a();

    function b(cs1, cs2) {
        console.log(cs1, cs2);
    }

    //函数声明会自动前置
    b('hello', 'world');

    //匿名函数
    var c = function(){
        console.log("这是一个匿名函数");
    }
    c();

    var c = function(a,b,c){
        console.log(a,b,c);
    }
    c(1,2,3);
    
    function d() {
        return "this is a return function";
    }

    var d1 = d();
    console.log("this is a d1:",d1);
</script>
</body>
</html>

输出结果：
 

js运算符：

测试代码：
 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>js运算符</title>
</head>
<body>
<script type="text/javascript">
    /**
     *  赋值运算符  =   +=   -= 等
     算术运算符  +  -   *   / 等
     字符串的 + 运算符 拼接运算符
     */

    var a = 1;
    a += 3;   // a = a + 3;
    console.log("a="+a);

    var b = 2;
    b = b * 3;
    console.log("b="+b);


    var c = 'hello';
    var d = ' world';
    var e = c + d;
    console.log(e);
</script>
</body>
</html>

输出结果：
 

 

js比较与逻辑运算符：

测试代码：
 

== 只比较值是否相等

=== 不仅比较值是否相等，还比较数据类型是否相等

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>js比较与逻辑运算符</title>
</head>
<body>
<script type="text/javascript">
    /**
     *
     *    <  小于
     >  大于
     ==  等于 1 == ‘1’
     ===  绝对等于（值和类型均相等）
     !=  不等于
     &&  and   1) true && true 返回 true   2)true  && false 返回false
     ||  or    1) true || false 返回 true  2) false || false 返回false
     */


    //== 不严格等于
    console.log(5 == 5);
    console.log(5 == '5');
    //=== 严格等于
    console.log(5 === 5);
    console.log(5 === '5');


    console.log(5 != 4);

    console.log(5 == 5 && 6 == 6);
    console.log(5 == 4 && 6 == 6);


    console.log(5 == 5 || 6 == 5);  // true
    console.log(4 == 3 || 2 == 1);  // false
</script>
</body>
</html>

输出结果：

js条件语句与switch语句：

测试代码：
 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>js条件语句与switch语句</title>
</head>
<body>
<script type="text/javascript">
    /**
     * if
     * switch
     */

    var a = 13;

    if (a < 4) {
        console.log('条件成功~~');
    }


    if (a < 6) {

    } else if (a > 8) {
        console.log('a > 8执行了~~')
    }

    if (a < 6) {
        console.log('执行了a < 6')
    } else if (a < 8) {
        console.log('执行了a < 8')
    } else {
        console.log('执行了else')
    }


    var a = 1;

    switch (a) {
        case 1:
            console.log('a = 1');
        case 2:
            console.log('a = 2');
            break;
        default:
            console.log('a = default');
    }
</script>
</body>
</html>

输出结果：

js中for循环与while循环：


测试代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>js中for循环与while循环</title>
</head>
<body>
<script type="text/javascript">
    /**
     *
     *  for - 循环代码块一定的次数
     for/in - 循环遍历对象
     while - 当指定的条件为 true 时循环指定的代码块
     */

    for( var i = 0; i < 10 ; i++ ){
        console.log('i:'+ i);
    }

    var person={
        name :'jhon',
        age:25,
        sg : 170
    }

    for( key in person){
        console.log(key);
    }

    var count = 1;
    while( count < 20 ){
        count++ ;
        console.log('执行while循环');
    }
</script>
</body>
</html>

输出结果：
 

 

js中break和continue语句：
 

测试代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>js Break 和 Continue 语句</title>
</head>
<body>
<script type="text/javascript">
    /**
     *  break 语句可用于跳出循环
     continue 语句跳出本次循环，继续执行
     */

    for (var i = 0; i < 10; i++) {
        if (i == 3) {
            break;
        }
        console.log("The number is " + i + "<br>");
    }

    for (var i = 0; i < 10; i++) {
        if (i < 8) {
            continue;
        }
        console.log("The number is " + i + "<br>");
    }
</script>
</body>
</html>

输出结果：
 

DOM简介：
DOM树模型：
 

 

测试代码：
 

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

<div id="intro">helloworld</div>


<div id="main">
    <p>The DOM is very useful.</p>
</div>

<div class="content">1</div>
<div class="content">2</div>
<div class="content">3</div>
<div class="content">4</div>

<script type="text/javascript">
    // 通过js获取html标签
    var intro = document.getElementById("intro");  // 通过id找html，唯一的


    var main = document.getElementById("main");
    var p = main.getElementsByTagName("p")[0];//返回的是一个数组，只找一个p根据下标

    var content1 = document.getElementsByClassName("content")[0];
</script>
</body>
</html>

DOM-HTML:

修改HTML内容：

修改HTML属性：

测试代码：
 

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

<body>
<div id="main" data="nihao">123</div>

<img src="1.jpg" id="image"/>

<a id="goUrl" href="">调到百度</a>
<script type="text/javascript">
/*
element.getAttribute()
element.setAttribute()   // 添加或者修改
element.src
element.href
*/
    var main = document.getElementById("main");
    main.innerHTML = 'helloWorld';


    alert(main.getAttribute("data"));

    main.setAttribute("data", "buhao");
    main.setAttribute("dd", "ddname");

    var image = document.getElementById("image");

    image.src = "2.jpg";//更换图片

    var goUrl = document.getElementById("goUrl");
    goUrl.href = "http://www.baidu.com"
</script>
</body>
</html>

输出结果：

DOM-CSS：

测试代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Dom css</title>
</head>
<body>
<div id="main">helloworld</div>
<script type="text/javascript">
    var main = document.getElementById("main");
    main.style.color = "blue";
    main.style.fontSize = "100px";
</script>
</body>
</html>

输出结果：
 

DOM 事件：

测试代码：
 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Dom 事件</title>
</head>
<body>
<!--
    1、元素
    2、动作
    3、触发的结果


    1）事件内嵌元素中
       <h1 onclick="this.innerHTML='谢谢'">请点击该文本</h1>

    2）Element.onclick=function(){displayDate()};

    3）Element.addEventListener("click", function(){

          });
 -->
<!-- (1) -->
<div onclick="alert('helloworld')">按钮</div>

<div id="main">我是main</div>

<div id="btn">我是btn</div>

<script type="text/javascript">
    var main = document.getElementById("main");
    //(2)
    main.onclick = function(){
        alert("main被触发了");
    }

    //(3)
    var btn = document.getElementById("btn");
    btn.addEventListener("click", function(){
        alert("btn被触发了");
    });
</script>
</body>
</html>

输出结果：
依次点击

DOM 节点：

测试代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Dom 节点</title>
</head>
<body>
<div id="div1">
    <p id="p1">我是第一个p</p>
    <p id="p2">我是第二个p</p>
</div>
<script type="text/javascript">
    /**
     *		document.createElement("p")
     document.createTextNode("新增")
     parent.appendChild(child);
     parent.removeChild(child);
     *
     */

    var p = document.createElement("p"); // <p></p>
    var word = document.createTextNode("我是新增的p标签");  // 我是新增的p标签

    p.appendChild(word);  //<p>我是新增的p标签</p>


    //找到元素位置插进去
    var div1 = document.getElementById("div1");
    div1.appendChild(p);

    //删除p1标签
    var p1 = document.getElementById("p1");
    div1.removeChild(p1);
</script>
</body>
</html>

输出结果：

js window:

测试代码：
 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Js window</title>
</head>
<body>
<button onclick="openwindow()">创建窗口</button>
<button onclick="myFunction()">调整窗口</button>
<button onclick="moveFunction()">移动窗口</button>
<button onclick="closeFunction()">关闭窗口</button>

<script type="text/javascript">
    var w;

    function openwindow(){
        w=window.open('','', 'width=300,height=300');//链接和名字
    }
    
    function myFunction(){
        w.resizeTo(500,500);
        w.focus();
    }

    function moveFunction(){
        w.moveTo(700,500);
        w.focus();
    }
    
    function closeFunction(){
        w.close(700,500);
        w.focus();
    }
</script>
</body>
</html>

输出结果：

依次点击：

window screen:

测试代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>window screen</title>
</head>
<body>
<script type="text/javascript">
    /**
     *	screen.availWidth - 可用的屏幕宽度
     screen.availHeight - 可用的屏幕高度
     1920 * 1080
     *
     */
    console.log(screen.availWidth);

    console.log(screen.availHeight);

</script>
</body>
</html>

输出结果：
 

window Location:

在页面控制台测试：

window history:

在页面控制台输入，进行网页跳转操作

Java环境搭建-基础语法
weixin_47669974的博客
06-12 799
Java环境搭建-基础语法
B站---【狂神说Java】JavaWeb入门到实战---笔记
热门推荐
bell_love的博客
04-23 18万+
JavaWebJava Web 1、基本概念web开发： ·web，网页的意思，www.baidu.com· 静态web 。html,sss 。提供给所有人看的数据始终不会发生变化！ 动态web 。淘宝，几乎是所有的网站； 。提供给所有人看的数据始终会发生变化，每个人在不同的时间，不同的地点看到的信息各不相同！ 。技术栈：Servlet/ISP，ASP，PHP ...
干货：JavaScript页面构建
weixin_33824363的博客
03-09 470
点击关注 异步图书，置顶公众号每天与你分享 IT好书 技术干货 职场知识本文包括以下内容：Web应用的生命周期步骤从HTML代码到Web页面的处理过程JavaScript代码的执行顺序与事件交互事件循环我们对JavaScript的探索从客户端Web应用开始，其代码也在浏览器提供的引擎上执行。为了打好后续对JavaScript语言和浏览器平台的学习基础，首先我们要理解Web应用的生命周期，尤其要理解...
网页搭建入门---javascript入门
joker柒月的博客
04-24 634
JavaScript基础语法 JS输出 window.alert()警告框 document.write()写到HTML文档 innerHTML写到HTML元素 console.log()写到浏览器后台 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> &lt...
JavaScript运行时页面构建过程
蓝散bennkyo的博客
07-03 424
Web应用的生命周期概览 以下是Web应用的生命周期的大致流程： 生命周期开始：用户通过网址打开并访问网页 浏览器（客户端）生成请求并发送至服务器 服务器依据请求获取某些资源并返回响应给客户端 页面构建：浏览器收到服务器发来的资源（html文件、css文件、js文件、图片、数据等…），开始处理并渲染这些资源 事件处理：生成了一个事件队列，一次只处理队列中的一个事件 用户动作：与页面交互（点击、键盘输入等… ），生成的事件进入事件队列等待执行 生命周期结束：用户关闭web页面 在生命周期进行的过程中，除了
Java web开发基础---web简介和构建网站
chuhuangpeng2111的博客
03-05 148
web介绍： 网站中用于承载信息的页面，主要由文字、图像和超链接等元素构成，除了这些元素，网页中还可以包含音频、视频以及flash等。 web标准： web标准不是某一个标准，而是由W3C和其他标准化组织制定的一系列标准的集合。 包含我们所熟悉的HTML、CSS、JavaScript...
Java和JavaScript在网页设计中的区别，了解一下吧
BOM485480的博客
03-04 2463
在各种网页制作技术论坛中，常常有人询问javascript与Java有什么区别，甚至有人误认为javascript就是Java。javascript与Java确实有一定的联系，但它们并不像我们想象的那样联系紧密，甚至可以肯定地说它们有很大的区别。 什么是javascript? javascript是对ECMA262语言规范的一种实现。本教程的目的就是引导您学习使用javascript，所有...
Java网页搭建--HTML入门
Java小白的自学之路
03-25 1609
HTML： 文档结构组成： 测试代码： <!DOCTYPE html> <html> <head> <meta charset = "UTF-8"> <title> html document</title> </head> <body> hello imooc ...
JAVA零基础入门和从网页搭建入门Java Web
04-26
【标题】"JAVA零基础入门和从网页搭建入门Java Web" 涵盖了学习Java编程语言的基础知识以及如何利用Java技术构建Web应用程序的关键概念。这个主题分为两个主要阶段，阶段一是Java基础知识的学习，阶段二是Java Web...
基于Java的HD-1711项目设计源码精华版
最新发布
10-04
在当前的软件开发领域，Java仍然是最为流行和广泛使用的编程语言之一，而基于Java的项目设计源码精华版则是一个开发者渴望得到的宝贵资源。HD-1711项目是一个典型的例子，该项目不仅是为特定业务需求设计，更是为...
java script创建对象_JavaScript七种非常经典的创建对象方式
weixin_35674932的博客
02-24 178
JavaScript创建对象的方式有很多，通过Object构造函数或对象字面量的方式也可以创建单个对象，显然这两种方式会产生大量的重复代码，并不适合量产。接下来介绍七种非常经典的创建对象的方式，他们也各有优缺点。一、工厂模式可以无数次调用这个工厂函数，每次都会返回一个包含两个属性和一个方法的对象。工厂模式虽然解决了创建多个相似对象的问题，但是没有解决对象识别问题，即不能知道一个对象的类型。二、构造...
网站服务器的极简制作与搭建（HTML5+CSS+javascript+NodeJS）
silent56_th的博客
06-21 1万+
本文致力于使得较有经验的程序员能够在一天之内了解网站搭建制作的基本知识，尽快制作出可以展示用的demo。 具体地，笔者为了完成大作业，需要搭建一个搜索引擎的网站，仅仅作为展示的demo，并不对原创性和运行性能有过多要求，所以目标是尽快制作出差不多的网站用于展示。笔者对网站相关知识的学习，也只有不到一周的时间，文中描述如有疏漏，欢迎各路大神指教。 框架概览 网站搭建通常分为两个部分：...
网页搭建入门
Crazyjava_的博客
02-02 2891
搭建一个简单的静态网页 1、 致初学者： 许多人想学习网页搭建，在这里分享一些自己学习过程中的一些经验。首先，学习资源方面建议一整套系统性的来学习，包括HTML、CSS、JS三大块，在这三个学完之后，尝试写一个简单的静态网页，巩固练习，熟悉网页的框架，其余的一些动态效果：如轮播图、导航菜单等可以在日常的学习中积累。三个初步学习完后，作为javaWeb的敲门砖. 2、HTML 用HTML写的是整个网...
搭建一个完整简单的javaweb项目
weixin_44934722的博客
04-25 2039
手把手搭建一个完整的javaweb项目(适合新手) 原创 落尘曦 最后发布于2017-06-23 07:27:04 阅读数 265459 收藏 展开 手把手搭建一个完整的javaweb项目 本案例使用Servlet+jsp制作,用MyEclipse和Mysql数据库进行搭建，详细介绍了搭建过程及知识点。 主要功能有： 1.用户注册 2.用户登录 3.用户列表展示 4.用户信息修改 5.用户信息删除...
Java爬虫学习:使用HtmlUnit获取html页面
johnson_moon的博客
11-06 1万+
通过HtmlUnit库，加载一个完整的Html页面（图片视频除外），然后就可以将其转换成我们常用的字串格式，用其他工具如Jsoup来获取其中的元素了。当然也可以直接在HtmlUnit提供的对象中获取网页元素，甚至是操作如按钮、表单等控件。除了不能像可见浏览器一样用鼠标键盘浏览网页之外，我们可以用HtmlUnit来模拟操作其他的一切操作，像登录网站，撰写博客等等都是可以完成的。
自述：javaWeb刚学时所需要用到的js
末安的博客
10-07 3102
自学者需要用到的js 作为一个刚步入javaWeb的新手，不知道要用到哪些知识点，更不知从何下手，于是就跑去找有关js的资料，把js从头到尾地学，这篇博文就来谈谈第一次做Javaweb项目需要用到哪些js技术。 js内容广泛、太多太杂，你从头到尾都要学完，要猴年马月才能学完呀，项目什么时候才可以动手啊。在js这方面，我是自学过来的，有着这方面的经验。这里我给大家阐述一下： var//定义变量，就靠这一个就可以了（不会吧不会吧，这年头变量还要定义的吗，说的就是java） var a = 1;//数字
JavaScript动态创建网页内容的几种方法
apple_54470279的博客
04-24 3288
document.write()这个方法只适合在页面加载期间向页面写入内容。如果页面加载后使用该方法，会覆盖网页所有内容。Element.innerText()这个方法只适合向页面写入纯文本内容，并且会覆盖该元素节点下的所有内容。Element.innerHTML() 这个方法既可以向页面写入文本内容，也可以写入元素内容，并且会覆盖该元素节点下的所有内容。
创建一个javascript页面
weixin_46191548的博客
01-31 1004
js的外联引入方式： <script src="外联js.js"></script> js的内联样式： <script type="text/javascript"> var a = "王又又"; console.log(a); var a = "1"; console.log(a); alert(a); console.log(typ...
用js创建一个页面的代码
qq_36566924的博客
01-22 3618
js创建页面代码 function CreateHTML(_data) { var inTime=getInTimeDate(gPurchaseTime) var rowdata = _data; var _index = 1; var content = ""; content+="<div class=\"...
JavaScript Web网页制作入门教程
- **JSP的定义**：JSP（JavaServer Pages）是一种基于Java的服务器端脚本技术，用于创建动态网页。它允许开发者将Java代码嵌入到HTML页面中，使得网页的内容能够根据用户的请求进行动态生成。 - **JSP与Servlet的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值