首页 > 基础资料博客日记

Web前端开发——JavaScript的基础使用

2024-09-07 20:00:06基础资料围观122次

这篇文章介绍了Web前端开发——JavaScript的基础使用，分享给大家做个参考，收藏Java资料网收获更多编程知识

前言：

整理下学习笔记，打好基础，daydyaup!!!

JavaScript

JavaScript在前端开发中负责网页的行为/交互

什么是JavaScript

JavaScript（简称：JS）在1995年由Brendan Eich发明，并于1997年成为ECMA标准，是一门跨平台，面向对象的脚本语言。用来控制网页行为，可以使网页进行交互。JavaScript和java是完全不同的语言，但是基础语法类似。

注：ECMA的前身为欧洲计算机制造商协会，现称"ECMA国际"。制定了标准化的脚本程序设计语言ECMAScript，这种语言得到广泛应用。JavaScript是遵守ECMAScript这一标准而开发的。

JavaScript引入方式

JavaScript引入方式有两种：1，内部脚本引入；2，外部脚本引入

1，内部脚本引入

内部脚本引入是指将JS代码定义在HTML页面中；javascript代码必须位于<script>标签中；在HTML文档中，可以在任意地方，放置任意数量的<script>；一般把脚本代码放置<body>标签的底部，可以改善速度。

格式如下：

<script>
JavaScript代码
</script>

2，外部脚本引入

外部脚本引入指将JS代码定义在外部JS文件中，然后引入到HTML页面中；外部JS文件中，只包含JS代码，不用写<script>标签项

格式如下：

在HTML文件中输入下列代码引入JS文件：
<script src="路径/demo.js"></script>

JavaScript的基础语法

1，输出语句：

输出语句有三种方式：1，使用window.alert()写入警告框；2，使用document.write()写入HTML输出；3，使用console.log()写入浏览器控制台

示例如下：（编写如下代码）

弹窗显示

HTML界面显示和控制台显示

2，变量

JavaScript中使用var关键字（variable的缩写）来声明变量。var可以存放不同类型的值

示例如下：

在新版本中增添了let和const关键字。let用法类似于var,但let关键字只在代码块中有效，且不可以重复声明。const关键字用来声明只读的常量，声明后的常量值不可以更改。

示例如下：

3，数据类型

JavaScript中分为：原始类型和引用类型

原始类型：number（数字），string(字符串)，boolean(布尔)，null(对象为空)，undefined(变量未初始化时，变量默认值为underfined)；使用typeof运算符可以获取数据类型

示例如下：

注：为什么 typeof 运算符对于 null 值会返回 "Object"。这实际上是 JavaScript 最初实现中的一个错误，然后被 ECMAScript 沿用了。现在，null 被认为是对象的占位符，从而解释了这一矛盾，但从技术上来说，它仍然是原始值。

运算符：

JavaScript的运算符和其他语言的运算符基本一致，值得一提的是“==”和“===”。“==”会进行类型转换，而“===”不会进行类型转换

示例如下：

（"=="会解析字符串里的内容，如果一致会返回true，而“===”不会解析字符串里的内容，如果发现数据类型不一致，会直接返回false）

类型转化：

字符串类型转为数字：将字符串字面值转为数字。如果字面值不是数字，则转为NaN.

4，函数

函数：被设计为执行特定任务的代码块，通过function关键字进行定义。

格式：

function 方法名（参数1，参数2，。。）{
//执行的代码
}

示例如下：

JavaScript的对象

JS的常用对象有5种，1，Array；2，String；3，JSON；4，BOM；5，DOM；

1，Array

Array在JS种常用于定义数组（灵活度很高，可以随意地扩展长度，类似与java中的合集）

2，String

用于创建字符串对象

3，JSON

JSON全称（JavaScript Object Notation）是通过javascript对象标记法书写的文本。本质为字符串，比起自定义对象，更利于网络间数据传输。下面进行“自定义对象”和“JSO对象的比较”

自定义对象

使用格式：

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

}；

json对象

使用格式：

var 对象名 ={
    “属性名1”：“属性值1”，
    “属性名2”：“属性值2”，
    函数名称：function(形参列表){
}

}

由于JSON对象本质为字符串，所以为了提取里面的数据，需要把JSON转换为对象，

使用的方法如下：

var 名称 = JSON.parse(JSON对象名称)

4，BOM

BOM:全称为（Browser Object Model），是浏览器对象模型，JavaScript把浏览器分为{window（浏览器窗口对象），Navigator(浏览器对象)，Screen(屏幕对象)，History(历史记录对象)，Location(地址栏对象)}这5个对象。基础需要知道window对象和Location对象。

Window对象（浏览器窗口对象）：

常用方法为：

方法名称	含义
alert()：	显示带有一段消息和一个确认按钮的警告框
confirm():	显示带有一段消息以及确认按钮和取消按钮的对话框
setlnterval():	按照指定的周期（毫秒）来调用函数
setTimeout():	在指定的毫秒数后调用函

Location对象(地址栏对象)：

alert(location.href)//可获取当前地址栏对象

location.href="地址";//可跳转到其他地址

示例如下：

5，DOM

DOM:全称(Document Object Model),为文档对象模型。可以将标记语言的各个组成部分封装为对应的对象。如：Document(整个文档对象)，Element(元素对象)，Attribute(属性对象)，Text(文本对象)，Comment(注释对象)。其中Element对象可以通过Document对象获取，而Document对象可以通过window对象获取。

Document对象中提供了Element元素对象的函数：

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

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

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

var divs = document.getElementsByTagName('div')

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

var hobbys = document.getElementsByName('hobby')

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

var clss = document.getElementsByClassName('cls')

案例：

通过修改元素值达成要求

思路：获取Element元素值，随后进行状态更改即可

实现步骤如下：

基础的大概就是这些，整理结束，撒花！！！

文章来源:https://blog.csdn.net/l822099133/article/details/137508426
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若内容造成侵权/违法违规/事实不符，请联系邮箱：jacktools123@163.com进行投诉反馈，一经查实，立即删除！

标签：

上一篇：Java html 转 word，根据html文件生成word文档
下一篇：Java二十三种设计模式-策略模式（13/23）

首页 > 基础资料博客日记

Web前端开发——JavaScript的基础使用

前言：

JavaScript

什么是JavaScript

JavaScript引入方式

JavaScript的基础语法

1，输出语句：

2，变量

3，数据类型

4，函数

JavaScript的对象

1，Array

2，String

3，JSON

4，BOM

5，DOM

案例：

相关文章

最新发布

点击排行

本站推荐

标签云

首页 > 基础资料 博客日记

Web前端开发——JavaScript的基础使用

前言：

JavaScript

什么是JavaScript

JavaScript引入方式

JavaScript的基础语法

1，输出语句：

2，变量

3，数据类型

4，函数

JavaScript的对象

1，Array

2，String

3，JSON

4，BOM

5，DOM

案例：

相关文章

最新发布

点击排行

本站推荐

标签云

首页 > 基础资料博客日记