JavaWeb开发学习笔记_JavaScript

最新推荐文章于 2024-06-10 22:52:06 发布
最新推荐文章于 2024-06-10 22:52:06 发布
阅读量101 收藏
点赞数 1
分类专栏： JavaWeb开发 文章标签： javascript 学习 笔记 前端 ui
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Y_cen/article/details/130245624
版权

JavaWeb开发学习笔记_JavaScript

JS的引入方式

内部脚本

将JS代码定义在HTML页面中

  • JavaScript代码必须位于<script></script>标签之间
  • 在HTML文档中，可以在任意地方，放置任意数量的<script>
  • 一般会把脚本置于<body>元素的底部，可改善显示速度
<script>
    alert('Hello JS');
</script>

外部脚本

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

  • 外部JS文件中，只包含JS代码，不包含<script>标签
  • <script>标签不能自闭合
<script src="js/demo.js"></script>

JS文件代码如下:

alert('Hello JS');

JS的基础语法

书写语法

  • 区分大小写
  • 每行结尾的分号可有可无(建议有)
  • 注释:
    1. 单行注释: //
    2. 多行注释: /**/
  • 输出语句, 代码如下:
<script>
    // 输出语句

    // 浏览器弹出警告框
    window.alert("Hello JavaScript");
    // 可以缩写为 alert("Hello JavaScript");

    // 写入HTML, 在浏览器显示
    document.write("Hello JavaScript");

    // 写入浏览器控制台
    console.log("Hello JavaScript");

</script>

变量

  • 用var关键字声明变量.
  • 弱类型语言, 变量可以存放不同类型的值.
  • ES6: let, const.
<script>
    // var定义变量
    // var a = 10;
    // a = "张三";
    // alert(a);

    // 特点1: 变量为全局变量
    // {
    //     var x = 1;
    // }
    // alert(x);

    // 特点2: 可以重复定义
    // var t = 1;
    // var t = "A";
    // alert(t);

    // let关键字: 局部变量, 不能重复定义.
    // const关键字: 常量, 不能改变.
</script>

数据类型和运算符

数据类型

  1. 引用类型
  2. 原始类型
  • number: 数字. 整数, 小数, NaN(Not a Number)
  • string: 字符串. 单双引号皆可
  • boolean: 布尔. true, false
  • null: 对象为空
  • undefined: 当声明的变量未初始化时，该变量的默认值是undefined
<script>
    // 原始数据类型

    // number
    alert(typeof 3);
    alert(typeof 3.14);

    // string
    alert(typeof "A");
    alert(typeof 'Hello');

    // boolean
    alert(typeof true);
    alert(typeof false);

    // object(bug, 解释为空对象)
    alert(typeof null);

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

运算符

==和===

==会类型转换, ===不会类型转换

<script>
    var a=10;
    alert(a == '10'); // true
    alert(a === '10'); // false
    alert(a === 10); // true
</script>
类型转换
字符串转为数字

如果字符串不是数字, 则转为NaN

<script>
    alert(parseInt("12")); // 12
    alert(parseInt("12A45")); // 12
    alert(parseInt("A45")); // NaN (not a number)
</script>
其他类型转为boolean
  • number: 0和NaN为false, 其他为true
  • string: 空字符串为false, 其他为true
  • null和undefined: 转为false
<script>
    if(!0){
        alert("0 转换为 false");
    }
    if(!NaN){
        alert("NaN 转化为 false");
    }
    if(-1){
        alert("除0和NaN, 其他数字都转为true");
    }

    if(!""){
        alert("空字符串为false, 其他都是true");
    }

    if(!null){
        alert("null 转化为 false");
    }
    if(!undefined){
        alert("undefined 转化为 false");
    }
</script>

JS函数

<script>
    // 定义函数-1
    function add(a, b)
    {
        return a+b;
    }

    // 定义函数-2
    var add = function(a, b)
    {
        return a+b;
    }

    // 调用函数
    var res = add(1, 2);
    alert(res);
</script>

JS中, 函数调用可以传递任意个数的参数

JS对象

Array

<script>
    // 定义数组
    var arr = new Array(1, 2, 3, 4)
    var arr = [1, 2, 3, 4]

    // 特点: 长度可变, 类型可变
    arr[10] = "A"

    console.log(arr[9]); // undefined
    console.log(arr);

    for (let i = 0; i < arr.length; i++) {
        console.log(arr[i]);
    }

    // 遍历有值的元素
    arr.forEach(function(e){
        console.log(e);
    });
    // ES6: 箭头函数
    arr.forEach(e => {
        console.log(e);
    });

    // push: 添加元素到数组末尾
    arr.push(7);

    // splice: 删除元素
    arr.splice(2, 2); // 从下标2开始删2个
</script>

String

<script>
    // 创建字符串
    var s1 = new String("Hello");
    var s2 = " Hello World ";

    // 长度
    console.log(s1.length); // 5

    // 指定下标上的字符
    console.log(s1.charAt(0)); // 'H'

    // 字符串的位置
    console.log(s1.indexOf("lo")); // 3

    // 去除字符串两侧的空格
    var s3 = s2.trim();
    console.log(s3); // "Hello World"

    // 截取字符串, substring(开始索引, 结束索引), 左闭右开
    console.log(s3.substring(0, 5)); // "Hello"
</script>

JSON

  • 概念: JavaScript Object Notation, JavaScript对象标记法
  • JSON是通过JavaScript对象标记法书写的文本
  • 由于其语法简单, 层次结构鲜明, 现多用于作为数据载体, 在网络中进行数据传输
  • value的数据类型:
    1. 数字(整数或浮点数)
    2. 字符串(在双引号中)
    3. 逻辑值(true 或 false)
    4. 数组(在方括号中)
    5. 对象(在花括号中)
    6. null

var 变量名 = '{"key1":value1, "key2":value2}', key外必须是双引号

<script>
    // 自定义对象
    var user = {
        name: "Tom",
        age: 10,
        gender: "male",
        // eat: function(){
        //     console.log("吃饭");
        // }
        eat(){
            console.log("吃饭");
        }
    };
    console.log(user.name);
    user.eat();

    // 定义JSON
    var JsonStr = '{"name":"Tom", "age":10, "addr":["北京", "上海", "深圳"]}';
    console.log(JsonStr.name); // undefined

    // JSON字符串 -> JSON对象
    var JsonObj = JSON.parse(JsonStr);
    console.log(JsonObj.addr); // ['北京', '上海', '深圳']
    // JSON对象 -> JSON字符串
    var JsonStr2 = JSON.stringify(JsonObj);
    console.log(JsonStr2); // {"name":"Tom","age":10,"addr":["北京","上海","深圳"]}
</script>

BOM

概念: Browser Object Model 浏览器对象模型, 运行JavaScript与浏览器对话, JavaScript将浏览器的各个组成部分封装为对象.
组成:

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

Window对象

  • 获取: 直接使用window, 可以省略window.
  • 属性:
    1. history: 对History对象的只读引用
    2. location: Location对象
    3. 对Navigator对象的只读引用
  • 方法:
    1. alert(): 显示带有一段消息和一个确认按钮的警告框
    2. confirm(): 显示带有一段消息以及确认按钮和取消按钮的对话框
    3. setInterval(): 周期调用函数或表达式
    4. setTimeout(): 延迟调用函数或表达式
<script>
    // 获取window对象, window可以省略
    window.alert("Hello BOM");

    // 方法
    // confirm: 对话框, 确认:true, 取消:false.
    var flag = confirm("BOM测试");
    alert(flag);

    // 定时器
    setInterval: 周期执行
    var cnt=0;
    setInterval(function(){
        console.log("定时器执行了"+(++cnt)+"次");
    }, 2000);
    // setTimeout: 延迟执行
    setTimeout(function(){
        alert("延迟执行Test");
    }, 3000);
</script>

Location对象

地址栏对象, 通过href属性设置或返回URL.

<script>
    // Location
    alert(location.href);
    location.href = "https://www.itcast.cn";
</script>

DOM

  • 概念: Document object Model, 文档对象模型.
  • 将标记语言的各个组成部分封装为对应的对象:
    1. Document: 整个文档对象
    2. Element:元素对象
    3. Attribute: 届性对象
    4. Text:文本对象
    5. Comment:注释对象
  • DOM是W3C(万维网联盟)的标准, 定义了访问HTML和XML文档的标准，分为3个不同的部分:
    1. Core Dom: 所有文档类型的标准模型
    2. XML DOM: XML文档的标准模型
    3. HTML DOM: HTML文档的标准模型
<script>
    function fun1(){
        // 根据标签名称获取, 返回Element对象数组
        var h1s = document.getElementsByTagName('h1');
        h1s[0].innerHTML="改变内容test";
    }
    function fun2(){
        // 根据id属性值获取, 返回单个Element对象
        var h1 = document.getElementById('h1_center');
        h1.style = "color: red";
    }
    function fun3() {
        // 根据class属性值获取, 返回Element对象数组
        var trs = document.getElementsByClassName('cls');
        trs[trs.length-1].remove();
    }
    
    // 根据name属性值获取, 返回Element对象数组
    var hobbes = document.getElementsByName('hobby');
    hobbes.forEach(e => {
        console.log(e.value);
    });
</script>

DOM案例

<!DOCTYPE html>
<html lang="en">
<head>
    ...
</head>
<body>
    <img src="C:\Users\cen\Desktop\微信图片_20230123145822.jpg" width="50%" onclick="fun1()">

    <div onclick="fun2()">Hello</div>
    <div onclick="fun2()">JavaScript</div>

    <input type="checkbox" name="hobby" onclick="fun3()">c++
    <input type="checkbox" name="hobby">Java
    <input type="checkbox" name="hobby">Python
</body>
<script>
    function fun1() {
        var imgs = document.getElementsByTagName('img');
        imgs[0].src = "C:/Users/cen/Desktop/7c2953849b8b1ebe0009d778f64224444190c289.jpg";   
    }
    function fun2() {
        var divs = document.getElementsByTagName('div');
        for (let i = 0; i < divs.length; i++) {
            const div = divs[i];
            div.innerHTML += "<font color='red'> 泥嚎</font>";
        }
    }
    function fun3() {
        var hobbes = document.getElementsByName('hobby');
        for (let i = 0; i < hobbes.length; i++) {
            const hobby = hobbes[i];
            hobby.checked = true;
        }
    }
</script>
</html>

事件

事件绑定

<body>
    <input type="button" onclick="on()" value="Test1">
    <input type="button" value="Test2" id="Test2">
</body>
<script>
    // 第一种
    function on() {
        console.log("Test1被点击了");
    }
    // 第二种
    document.getElementById("Test2").onclick = function(){
        console.log("Test2被点击了");
    }
</script>

常用事件

<body onload="fun_onload()">
    <form action="" method="get" onsubmit="fun_onsub()">
        <input type="text" onblur="fun_onblur()" onfocus="fun_onfocus()" onkeydown="fun_onKeyD()">
        <input type="submit" value="提交">
        <input type="button" value="单击事件" onclick="fun_onclick()">
    </form>
    <table onmouseover="fun_onMOver()" onmouseout="fun_onMOut()">
        <tr>
            <th>学号</th>
            <th>姓名</th>
            <th>分数</th>
            <th>评语</th>
        </tr>
        <tr>
            <td>001</td>
            <td>张三</td>
            <td>90</td>
            <td>优秀</td>
        </tr>
        <tr>
            <td>002</td>
            <td>李四</td>
            <td>88</td>
            <td>很优秀</td>
        </tr>
    </table>
</body>
<script>
    function fun_onclick() {
        console.log("按钮被单击了");
    }
    function fun_onblur() {
        console.log("输入框失去焦点");
    }
    function fun_onfocus() {
        console.log("输入框获得焦点");
    }
    function fun_onload() {
        console.log("页面完成加载");
    }
    function fun_onsub() {
        alert("表单提交")
    }
    function fun_onKeyD() {
        console.log("按下键盘");
    }
    function fun_onMOver() {
        console.log("鼠标移到表格");
    }
    function fun_onMOut() {
        console.log("鼠标移出表格");
    }
</script>

事件案例

<body>
    <img src="img/off.gif"> <br>
    <input type="button" value="点亮" onclick="on()"> 
    <input type="button" value="熄灭" onclick="off()"> <br>

    <input type="text" onblur="Upper()" onfocus="Lower()"> <br>

    <input type="checkbox" name="hobby">c++
    <input type="checkbox" name="hobby">Java
    <input type="checkbox" name="hobby">Python <br>
    <input type="button" value="全选" onclick="ChkAll()">
    <input type="button" value="全不选" onclick="UnChkAll()">

</body>
<script>
    function on() {
        var imgs = document.getElementsByTagName("img");
        var img = imgs[0];
        img.src = "img/on.gif";
    }
    function off() {
        var imgs = document.getElementsByTagName("img");
        var img = imgs[0];
        img.src = "img/off.gif";
    }
    function Lower() {
        var strs = document.getElementsByTagName("input");
        var str = strs[2];
        str.value = str.value.toLowerCase();
    }
    function Upper() {
        var strs = document.getElementsByTagName("input");
        var str = strs[2];
        str.value = str.value.toUpperCase();
    }
    function ChkAll() {
        var hobbes = document.getElementsByName("hobby");
        for (let i = 0; i < hobbes.length; i++) {
            const hobby = hobbes[i];
            hobby.checked = true;
        }
    }
    function UnChkAll() {
        var hobbes = document.getElementsByName("hobby");
        for (let i = 0; i < hobbes.length; i++) {
            const hobby = hobbes[i];
            hobby.checked = false;
        }
    }
</script>

参考

黑马程序员. JavaWeb开发教程

Y_cen
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
JavaWeb全套教程笔记_前端技术
weixin_46040278的博客
05-15 1145
本系列笔记仅作为JavaWeb阶段学习参考,不光记一定要上手实践操作
JavaWeb03-Vue学习笔记
08-22
Vue学习笔记 Vue是一个渐进式的JavaScript框架，用于构建用户界面。Vue的核心思想是将组件化的思想应用于前端开发，通过组件的方式来构建应用程序。 一、Vue简介 Vue是一个基于MVVM（Model-View-ViewModel）模式...
JavaScript学习总结
暮辰的博客
04-20 34
通过代码/js效果演示提供资料进行效果演示。js可以让我们的页面更加的智能，让页面和用户进行交互function 函数名（参数1， 参数2…
JavaWeb学习笔记02_javascript
jstough的博客
11-02 249
1、javascript的简介 * 是基于对象和时间驱动的语言，应用于客户端。 - 基于对象： ** 提供好了很多对象，可以直接拿过来使用 - 事件驱动： ** html做的网站是静态效果，javascript做的网站是动态效果 - 客户端：专门指的是浏览器 * js的特点 （1）交互性 - 信息的动态交互 （2）安全性 - js不能访问本地磁盘的文件 （3）跨平台性
JavaWeb开发学习笔记
m0_61940795的博客
06-13 54
一、Web前端的介绍一、Web前端的介绍HTML、CSS和JavaScript（JS）是中的三个核心标准，它们分别用于定义网页的结构、样式和行为。HTML是一种标记语言用于定义网页的。它使用一系列的标签（例如等）来标记文本、图像、链接等元素，并指定它们的层次关系和布局。HTML提供了一种结构化的方式来组织和呈现网页的内容。CSS是一种样式表语言，用于定义网页的。通过使用CSS，可以为HTML元素应用各种样式，如颜色、字体、背景、边框等。
JavaWeb学习笔记之JavaScript
MOKE_SPACE
11-12 493
3.Javascript的介绍 Javascript：基于对象和事件驱动的语言，应用与客户端（脚本语言） 基于对象-&amp;amp;amp;amp;amp;amp;amp;amp;gt;提供好了很多对象，可以直接拿过来使用 事件驱动-&amp;amp;amp;amp;amp;amp;amp;amp;gt;html做网站静态效果，js动态效果 客户端：专门指的是浏览器 注：浏览器中的控制台可以调试js代码（区分大小写，html不区分） js特点：  交互性-&amp;amp;amp;
【JAVAWEB学习笔记】03_JavaScript
depiaozhanyou66348的博客
04-17 89
javascript简单介绍 ECMAScript 　　1.语法 　　2.变量：只能使用var定义，如果在函数的内容使用var定义，那么它是一个局部变量，如果没有使用var它是一个全局的。弱类型！ 　　3.数据类型：原始数据类型(undefined/null/string/number/boolean) 　　4.语句： 　　5.运算符：==与===的区别 　　6.函数：两种写法(有命名...
JavaWeb学习笔记
yjnlovepy的博客
06-25 946
学习笔记
JAVAweb开发学习笔记
LJJ12138的博客
10-17 285
1.1、基本概念 web开发： 静态web html,css 提供给所有人看的数据始终不会发生变化 动态web 提供给所有人看的数据会发生变化,每个人在不同的时间，不同的地点看到的信息各不相同 技术栈：Serviet/JSP, ASP, PHP 在java中，动态web资源开发的技术统称为javaWeb 1.2 web应用程序 web应用程序，可以提供浏览器访问的程序: a.html 、b.html、多个web资源，这些web资源可以被外界访问 你们能访问到的任何一个页面或者资源，都存在.
JavaWeb——JavaScript学习笔记
liuhao19991213的博客
05-16 351
JavaScript 一、JavaScript快速入门 1.简介 跨平台、面向对象的脚本语言 学习文档：(https://www.w3school.com.cn/js/js_htmldom.asp) 2.引入方式 01.内部脚本 将 JS代码定义在HTML页面中 &lt;script&gt; alert("hello js"); &lt;/script&gt; 在 HTML 文档中可以在任意地方，放置任意数量的02.外部脚本 将 JS代码定义在外部 JS文件中，然后引入到 HTML页面中 ale
JavaWeb02-JavaScript学习笔记
08-22
JavaWeb02-JavaScript学习笔记
JavaWeb入门学习笔记.chm
01-23
此文档为传智播客老师JavaWeb入门视频的笔记，其中包含视频中的讲解过程笔记记录以及课程中的案例源代码实现，笔记已转成CHM文档格式，方便阅读 1.此笔记为JavaWeb非常全面的教程，适合JavaWeb爱好者自学。循序渐进...
JavaWeb阶段学习笔记
12-19
JavaWeb阶段学习笔记,主要记录使用servlet service dao 三层书写简单功能,及过程当中需要的知识点
javaweb笔记.pdf
11-29
* JavaWeb开发的缺点：学习曲线陡峭、资源占用高、性能不高。 二、JavaWeb开发技术 * HTML/CSS：基本的Web页面结构和样式语言。 * JavaScript：一种 Script 语言，用于实现Web页面的交互性。 * Servlet：JavaEE的...
JS中一个dom元素能绑定多少事件
ggq53219的博客
06-10 531
在JavaScript中，一个DOM元素可以绑定的事件数量并没有明确的限制，这主要取决于浏览器的实现和内存限制。然而，在实际应用中，为同一个DOM元素绑定过多的事件监听器可能会导致性能问题，尤其是在事件处理函数执行复杂操作的情况下。总之，虽然JavaScript中DOM元素可以绑定的事件数量没有明确的限制，但在实际应用中应注意避免过度绑定和优化事件处理函数，以确保良好的性能和用户体验。
[Vue-常见错误]浏览器显示Uncaught runtime errors
一个喜欢什么都研究一下的小小后端程序员
06-09 372
在vue.config.js中配置关闭Uncaught runtime errors显示。
基于JavaScript 如何实现爬山算法以及优化方案
乐闻世界
06-10 1341
爬山算法（Hill Climbing Algorithm）是一种常见的启发式搜索算法，常用于解决优化问题。其核心思想是从一个初始状态出发，通过逐步选择使目标函数值增大的邻近状态来寻找最优解。接下来，我们将通过 JavaScript 实现一个简单的爬山算法，帮助大家理解其原理和应用。从一个初始状态开始。评估当前状态的目标函数值。在当前状态的邻居中选择一个目标函数值更大的状态。如果找到了更优的邻居，则移动到该邻居并重复步骤2和步骤3。如果没有更优的邻居，则算法结束，当前状态即为局部最优解。
第二十一节:带你梳理Vue2: 父组件使用子组件时的修饰符和双向数据绑定
最新发布
我们专注于分享最实用的编程技术和干货，帮助你提升编程能力,感谢您的支持和关注！
06-10 1251
原生事件修饰符.native ,关于组件标签上的事件 在组件标签上是没办法触发原生的js事件的,vue会将其作为自定义事件处理
javaweb学习笔记
06-10
好的，我可以和你分享一下关于javaweb学习的笔记。 1. JavaWeb的概念 JavaWeb是指利用Java语言开发Web应用程序的一种技术。它包括了Java Servlet、Java Server Pages（JSP）、JavaBean、Enterprise JavaBeans（EJB...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

Y_cen

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

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

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

打赏作者

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

抵扣说明：

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

余额充值