JavaWeb学习

ʚ 炫酷的腿毛 ɞ

已于 2023-07-09 00:09:37 修改

阅读量271

点赞数 1

文章标签： javascript 学习前端

于 2023-06-14 23:12:20 首次发布

本文链接：https://blog.csdn.net/m0_74091229/article/details/131191981

版权

什么是JavaScript？

JavaScript是一门跨平台，面向对象的脚本语言。是用来控制网页行为的，它能使网页可交互
JavaScript和Java是完全不同的语言，不论是概念还是设计，但是基本语法类似

JavaScript引入方式

内部脚本：将JS代码定义在HTML页面之中

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

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

外部JS文件中，只包含JS代码，不包含<script>标签
<script>标签不能自闭合

JS基础语法

区分大小写
每行结尾的分号可有可无
大括号代表代码块

变量

JavaScript中用var关键字来声明变量。
JavaScript是一门弱类型语言，变量可以存放不同类型的值。

变量的命名需要遵循如下规则：

组成字符可以是任意字母，数字，下划线或者美元符号
数字不能开头
建议使用驼峰命名

var特点

作用域比较大，全局变量
可以重复定义，后定义的将前面的覆盖

注意事项

ECMAScript 6 新增了 let 关键字来声明变量，它的用法类似于var，但是声明的变量，只在let关键字所在的代码块内有效，且不允许重复声明
ECMAScript 6 新增了 const 关键字，用来声明一个只读的变量，一旦声明，常量的值就不能改变。

==与===

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

字符串类型转换为数字：

将字符串字面值转为数字，如果字面值不是数字，则转化为NaN。

其他类型转化为boolean：

Number：0 和 NaN 转化为false，其他均转化为true
String：空字符串为false，其他的均转化为true
Null 和 undefined：均转化为false

JS 函数

JS函数定于是通过 function 关键字进行定义，语法为：

//定义方式一
function functionName(参数1,参数2...){
    //要执行的代码
}

//定义方式二
var functionName(参数1,参数2...){
    //要执行的代码
}

注意：

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

JS 对象

JS 数组

在JavaScript中使用 Array对象定义数组。

定义：

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

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

注意事项：JavaScript中的数组相当于Java中的集合，数组的长度是可变的，而JavaScript是弱类型，所以可以存放任意的类型的数据。

常见属性

length：设置或者返回数组元素中的数量

常见方法

forEach() ：遍历数组中的每个有值的元素，并调用一次传入的函数
push() ：将新元素添加到数组的末尾，并返回新的长度
splice() ：从数组中删除元素

JavaScript自定义对象(和Java比较像)

定义格式：

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


//调用格式
对象名.属性名;
对象名.函数名;

JS JSON

JSON是通过JavaScript对象标记法书写的文本。

由于其语法简单，层次结构鲜明，现多用于作为数据载体，在网络中进行数据传输。

{
    "name"="Tom",
    "age"=20,
    "gender"="male"
}

JSON-基础语法

定义

var 变量名 = '{"key1": value1, "key2": value2}';

//示例
var userStr = '{"name": "Jerry", "age": 18, "addr":["北京","上海","西安"]}';

JSON字符串转换为JS对象

var jsObject = JSON.parse(userStr);

JS对象转换为JSON字符串

var jsonStr = JSON.stringify(jsObject);

JS BOM

BOM：浏览器对象模型，允许JavaScript与浏览器对话，JavaScript将浏览器的各个组成部分封装为对象。

组成：

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

Window对象

获取：直接使用Window，其中Window. 可以省略。

Window.alert("Hello Window");         alert("Hello Window");

属性

history：对History对象的只读引用。请参考History 对象。
location：用于窗口或者框架的Location对象。请参阅Location对象
navigator：对Navigator对象的只读引用。请参阅navigator对象

方法

alert()：显示带有一段消息和一个确认按钮的警告框
confirm()：显示带有一段消息以及确认按钮和取消按钮的对话框。
setlnterval()：按照指定的周期来调用函数或者计算表达式。
setTimeout()：在指定的毫秒数后调用函数或者计算表达式。

JS DOM

DOM是将标记语言的各个组成部分封装为对应的对象：

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

Javascript通过DOM，就能够对HTML进行操作：

改变HTML元素的内容
改变HTMl元素的样式（CSS）
对HTML DOM 事件做出反应
添加和删除HTML标签

DOM操作步骤

获取元素对象；
通过该对象的方法或者属性对HTML进行修改;

获取元素对象的方式：

1.根据id属性值来获取，返回单个Element对象

var h1 = document.getElementById('h1');

2.根据标签名称获取，返回Element对象数组

var divs = document.getElementsByTagName('div');

3.根据name属性值获取，返回Element对象数组

var hobbys = document.getElementsByName('hobby');

4.根据class属性值获取，返回Element对象数组

var clss = document.getElementsByClassName('cls');

事件监听

事件：HTML事件是发生在HTML元素上面的”事情“。比如：

按钮被点击
鼠标移动到元素上
按下键盘按键

事件监听：JavaScript可以在事件被侦测到时执行代码。

事件绑定

方法一：通过HTML标签中的事件属性进行绑定

<input type="button" value="按钮1" onclick="on()">

<script>
        function on(){
            alert("按钮1被点击了");
        }
</script>

方式二：

<input type="button" value="按钮2" id="btn">


<script>
        document.getElementById('btn').onclick=function (){
            alert("按钮2被点击了");
        }
</script>

常见事件：

MyBatis

什么是 MyBatis？

MyBatis 是一款优秀的持久层框架，用于简化 JDBC 开发
MyBatis 本是 Apache 的一个开源项目iBatis，2010年这个项目由apache software foundation 迁移到了Google code，并且改名为MyBatis。2013年11月迁移到Github
官网：MyBatis

持久层