JavaWeb——JavaScript-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_55890817/article/details/145962484

一、什么是JavaScript

JavaScript是一门跨平台的、面向对象的脚本语言，用来控制网页的行为，它能使网页可交互。并且作为脚本语言，不需要编译直接解释运行即可。

JavaScript的引入方式：

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

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

 <script>
        /*弹出警告框*/
        alert("hello js");
</script>

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

外部标签：将JSd代码定义在外部JS文件中，然后引入HTML页面中。

<script src="../js/demo.js"></script>

外部文件不能包含<script>标签。<script>标签不能自闭合，必须写成<script></script>

二、JavaScript基础语法

3.1书写语法

区分大小写：与Java一样，变量名、函数名以及其他一切东西都是区分大小写的。
每行结尾的分号可有可无，为了规范最好写上。
注释：单行注释：//注释内容多行注释：/*注释内容*/
大括号代表代码块
```
if(count == 3){
    alter(count);
} 
```

3.2输出语句

使用window.alert()写入警告框
使用document.write()写入HTML输出

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

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

3.3变量

JS中使用var关键字来声明变量

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

JS是一门弱类型的语言，变量可以存放不同类型的值。var声明的变量全局有效，而let关键字生命的变量只在let关键字所在的代码块内部有效，且不允许重复声明。

3.4数据类型

JS中的五种原始类型：

number：数字(整数、小数、NaN)
string：字符、字符串、单双引皆可。
boolean：布尔类型，true，false。
null：对象为空
undefined：当声明的变量未初始化时，该变量的默认值是undefined。

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

alert(typedef age);

3.5类型转换

JS的运算符中，在比较的时候==会进行类型转换，===不会进行类型转换。

其他类型转换为数字：

string：将字符串字面值转为数字，如果字面值不是数字，则转为NaN。一般使用parseInt进行转换。
booleam：true转为1，false转为0。

其他类型转换为boolean

number：0和NaN转为false，其他的数字转换为true。
string：空字符串转换为false，其它字符串转换为true。
null：转为false。
undefined：转为false。

3.6函数

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

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

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

四、JavaScript对象

4.1Array对象

JS中，Array对象用于定义数组

var 变量名 = new Array(元素列表);//方式一
var 变量名 = [元素列表];//方式二

常用属性和方法：

length：设置或返回数组中元素的数目。

push()：向数组的末尾添加一个或多个元素，并返回新的长度。

splice()：删除元素，并向数组添加新的元素。

4.2String对象

var 变量名 = new String(s);
var 变量名 = s;

常用属性和方法：

length：返回字符串的长度。

charAt()：返回在指定位置的字符。

IndexOf()：检索字符串。

trim()：去除字符串前后两端的空白字符。

4.3自定义对象

格式：

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

五、BOM对象

Browser Object Model 浏览器模型对象，将浏览器的各个组成部分封装为对象。大致分为：

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

5.1Window对象

Window对象是浏览器中的顶层对象，代表当前浏览器窗口或标签页。它充当全局对象，所有全局变量和函数均为其属性，他可以获取其他的BOM对象的只读引用。

常用方法：

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

5.2history对象

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

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

常用方法：

back()//加载history列表中的前一个URL
forward()//加载history列表中的下一个URL

5.3location对象

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

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

常用属性：

href//设置或返回完整的URL

六、DOM对象

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

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

JS通过DOM就可以对HTML进行操作：

改变HTML元素的内容
改变HTML元素的样式
对HTML DOM事件作出反应
添加和删除HTML元素

除了上面的五个核心对象之外，针对HTML文档的标准模型还有：

Image：<img>
Button:<input type='button'>

HTML中的Element对象可以通过Document对象获取，而Document对象是通过window对象获取的。Document对象中提供了以下获取Element元素对象的函数：

var h1 = document.getElementById('h1');//根据id属性值获取，返回单个Element对象
var divs = document.getElementsByTagName('div');//根据标签名称获取，返回Element对象数组
var hobbys = document.getElementsByName('hobby');//根据name属性值获取，返回Element对象数组
var clss = document.getElementsByClassName('cls');//根据class属性值获取，返回Element对象数组

七、事件监听

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

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

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

事件绑定：

通过 HTML标签中的事件属性进行绑定

<input type="button" onclick="on()" value="按钮1">
<script>
    function on(){
        alert('我被点击了!');
    }
</script>

通过 DOM 元素属性绑定

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

<script>
    document.getElementById('btn').onclick=function(){
        alert('我被点击了!');
    }
</script>

常见事件：

事件名	说明
onclick	鼠标单击事件
onblur	元素失去焦点
onfocus	元素获得焦点
onload	某个页面或图像被完成加载
onsubmit	当表单提交时触发该事件
onkeydown	某个键盘的键被按下
onmouseover	鼠标被移到某元素之上
onmouseout	鼠标从某元素移开