【JavaWeb】JS基本知识

最新推荐文章于 2024-09-09 09:35:48 发布

晚安凉薄284

最新推荐文章于 2024-09-09 09:35:48 发布

阅读量176

点赞数

分类专栏： Javaweb 文章标签： javascript 开发语言

本文链接：https://blog.csdn.net/qq_75078220/article/details/131443430

版权

Javaweb 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

JavaScript是一种面向对象的跨平台脚本语言，用于控制网页行为。它包括内部和外部脚本引入方式，基础语法如变量（var,let,const）、数据类型和运算符。函数是执行特定任务的代码块。JS还涉及对象，如Array、String、JSON，以及BOM（浏览器对象模型）和DOM（文档对象模型）。文章还介绍了事件监听，如onclick等，以及常见的DOM操作和事件处理。

摘要由CSDN通过智能技术生成

什么是JavaScript

JS是一门跨平台，面向对象的脚本语言，用来控制网页行为的，他能够使网页进行交互，和Java是完全不同的语言，但是基础语法类似

JavaScript引入方式

内部脚本：将JS代码定义在HTML页面中
1.JS代码必须位于< script>< /script>标签之间
2.在HTML文档中，可以在任意地方，放置任意数量的< script>
3.一般会把脚本置于< body>元素底部，可改善显示速度
外部脚本：将JS代码定义在外部JS文件中，然后引入都HTML文件中
1.外部JS文件中，只包含JS代码，不包含< script>标签
2.< script>标签不能自闭合

JS基础语法

书写语法：
1.区分大小写
2.每行结尾分号可有可无
变量：
1.JS中用var来声明变量。
2.弱类型语言，变量可以存放不同类型的值
3.变量名需要遵循以下规则：
(1)组成字符串可以是任何字母、数字、下划线，或美元符号
(2)数字不能开头
(3)建议使用驼峰命名
注意事项：
用let定义变量，类似于var，但是所声明的变量，只在let关键字所在的代码块内有效，且不允许重复声明
const关键字，用来声明一个只读的常亮，常亮的值不能改变
数据类型：原始类型和引用类型
原始类型：
number：数字（整数，小数、NaN（Not a Number））
string：字符串，单双引都可
boolean：布尔
null：对象为空
undefined：当声明的变量未初始化时，默认值时undefined
typeof运算符可以获取数据类型
运算符：
== 会进行类型转换，===不会进行转换
类型转换：
字符串类型转为数字：
将字符串面值转为数字。如果数字面值不是数字，则转为NaN
其他类型转为boolean
Number：0和NaN 为false，其他转为true
String：空字符串为false，其他均为true
Null和undefined：均转为false

JS函数

函数（方法）是被设计为执行特定任务的代码块
JS函数通过function关键字进行定义，语法为：

function fuctionName（参数1，参数2....）{
   //代码块
}

注意：
形式参数不需要类型，因为JS是弱类型语言
返回值也不需要定义类型，可以直接在函数内部直接使用return返回即可
调用：函数名称（实际参数列表）

JS对象

Array
String
JSON
BOM（浏览器对象模型）
DOM（文档对象模型）
Array：
用于定义数组
var 变量名=new Array（元素列表） var arr=new Array（1，2，3，4）
var 变量名=[元素列表] var arr=[1,2,3,4]
访问数组与Java中一样通过索引
特点：长度可变，类型可变。

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

for循环会把数组中每一个元素都遍历出来，而forEach只会遍历有值的元素
String：
单引双引都可
var 变量名=new String(“…”)
var 变量名=“…”

方法	描述
charAt()	返回指定位置的字符
indexOf()	检索字符串
trim()	去除字符串两边的空格
substring()	读取字符串两个指定的索引号之间的字符（含头不含尾）

JavaScript自定义对象：

//定义格式
var  对象名={
      属性名1：属性值1，
      属性名2：属性值2，
      属性名3：属性值3，
      函数名称：function（形参列表）{
      }
}
//调用格式
对象名.属性名
对象名.函数名();

JSON-介绍：
概念：JavaScript Object Notation，JS对象标记法
JSON是通过JS对象标记法书写的文本，多用于作为数据载体，在网络中进行数据传输
其中，前面的key值必须用双引号

{
"name":"Tom"
"age":"20"
}

基础语法：
定义：

var 变量名='{"key1":value1,"key2":value2 }'
var userStr='{"name":"Jerry","age":18,"addr":["北京","上海","广东"] }'
value的数据类型为
1.数字（整数或浮点数）
2.字符串（在双引号中）
3.逻辑值（true或false）
4.数组（在方括号中）
5.对象（字花括号中）
6.null

JSON字符串转为JS对象

var jsObject=JSON.parse(userStr);

JS对象转为JSON字符串

var  jsonStr = JSON.stringify(jsObject);

BOM对象：
概念：Browser Object Model 浏览器对象模型，允许JavaScript与浏览器对话，JavaScript将浏览器的各个部分封装为对象
组成：
Window：浏览窗口对象
Navigator：浏览器对象
Screen：屏幕对象
History：历史记录对象
Location：地址栏对象
Window对象：
获取：直接使用window，其中window.可以省略
例如window.alert()可以省略为alert()
属性：
history：对History对象的只读引用
location：用于窗口或框架的Location对象
navigator：对Navigator对象的只读引用
方法：
alert(）:显示警告框
confirm():显示带有一段消息以及确认按钮和取消按钮的对话框（返回值为true或false）
setInterval():按照指定的周期（毫秒）来调用函或计算表达式
setTimeout():在指定的毫秒数后调用函数或计算表达式
Location：
地址栏对象。
location.属性
属性：href:设置或返回完整的URL。
DOM对象：
概念：Document Object Model，文档对象模型。
将标记语言的各个组成部分封装为对应的对象：
Document：整个文档对象
Element：元素对象
Attribute：属性对象
Text:文本对象
Comment：注释对象
作用：JS通过DOM，能够对 HTML进行操作，例如：
改变HTML元素内容，
改变HTML元素CSS
对HTMLDOM事件做出反应
添加和删除HTML元素
1.根据id属性值获取，返回单个Element对象

var h`= document.getElementById('h1')

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

var divs=document.getElementByTagName('div')

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

var hobbys=document.getElementsByName('hobby')

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

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

JS事件监听

事件绑定：
方式一：通过HTML标签中的事件属性进行绑定
方式二：通过DOM元素属性绑定

<body>
<input type="button" id="btn1" value="事件绑定1" onclick="on()">
<input type="button" id="btn2" value="事件绑定2" >
</body>
<script>
//方式一
   function on(){
       alert("事件1被点了")
   }
//方式二
   document.getElementById('btn2').onclick=function (){
       alert("事件二被点了")
   }
</script>

常见事件：

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