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

前言:

整理下学习笔记,打好基础,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元素值,随后进行状态更改即可

实现步骤如下

基础的大概就是这些,整理结束,撒花!!!

相关推荐
神奇夜光杯1 分钟前
Python酷库之旅-第三方库Pandas(202)
开发语言·人工智能·python·excel·pandas·标准库及第三方库·学习与成长
Themberfue3 分钟前
Java多线程详解⑤(全程干货!!!)线程安全问题 || 锁 || synchronized
java·开发语言·线程·多线程·synchronized·
plmm烟酒僧5 分钟前
Windows下QT调用MinGW编译的OpenCV
开发语言·windows·qt·opencv
EricWang135814 分钟前
[OS] 项目三-2-proc.c: exit(int status)
服务器·c语言·前端
September_ning14 分钟前
React.lazy() 懒加载
前端·react.js·前端框架
测试界的酸菜鱼16 分钟前
Python 大数据展示屏实例
大数据·开发语言·python
web行路人24 分钟前
React中类组件和函数组件的理解和区别
前端·javascript·react.js·前端框架
番茄小酱00126 分钟前
Expo|ReactNative 中实现扫描二维码功能
javascript·react native·react.js
晨曦_子画26 分钟前
编程语言之战:AI 之后的 Kotlin 与 Java
android·java·开发语言·人工智能·kotlin
Black_Friend34 分钟前
关于在VS中使用Qt不同版本报错的问题
开发语言·qt