JavaScript的基础（第一章）

最新推荐文章于 2024-04-01 13:59:12 发布

『下一秒、等待』

最新推荐文章于 2024-04-01 13:59:12 发布

阅读量337

点赞数

分类专栏： JavaScript 文章标签： Js学习

本文链接：https://blog.csdn.net/indigoPlant/article/details/89976347

版权

JavaScript 专栏收录该内容

1 篇文章 1 订阅

订阅专栏

JavaScript

概念

JavaScript（以下简称JS）是一种描述性语言，也是一种基于对象（Object）和事件驱动（EventDriven）具有安全性能的脚本语言。

作用

在网页上添加交互效果，一般用于编写客户端脚本无论在服务端还是客户端，JS都要下载到浏览器的客户端执行，减轻了服务器的负担

特点

简单性：JS是一种基于Java基本语句和控制流之上的简单而紧凑的设计变量类型是弱类型，没有使用严格的数据类型
动态性：JS是动态的，它可以直接对用户或客户输入做出响应，无须经过 Web服务程序。以事件驱动的方式响应用户。（所谓事件驱动，就是指在主页（Home Page）中执行了某种操作所产生的动作，就称为“事件”（Event）。比如按下鼠标、移动窗口、选择菜单等都可以视为事件。当事件发生后，可能会引起相应的事件响应。）
跨平台性：JS是依赖于浏览器本身，与操作环境无关，只要能运行浏览器的计算机，并支持JS的浏览器就可正确执行。从而实现了“编写一次,走遍天下”的梦想。
安全性：是一种安全性语言，它不允许访问本地的硬盘，并不能将数据存入到服务器上，不允许对网络文档进行修改和删除，只能通过浏览器实现信息浏览或动态交互，从而有效地防止数据的丢失。

组成

ECMAScript：国际标准的脚本语言规范
BOM：（Browser Object Model）浏览器对象模型提供独立于内容和浏览器交互的对象，利用BOM可以实现与HTML的交互功能弹出新的浏览器窗口移动、关闭浏览器窗口以及调整窗口大小浏览器窗口实现页面的前进和后退功能
DOM：（Document Object Model）文档对象模型 DOM是html文档对象模型（DOM）定义出来的一套标准方法，用来访问和操作html文档 DOM提供了一组按树状结构组织的Html文档，树状结构每一个对象称为一个节点，每个对象都有多个属性和方法 Html文档中每个节点都是对象，每个对象都由属性、方法和事件组成

语法

<script type="text/Javascript">
JS语句
</script>

案例：

 <script type="text/Javascript">
 	document.write("初识JavaScript");
 	document.write("<h1>Hello JavaScript</h1>");
 </script>

注：<script></script>位置并不是固定的，可以包含在文档中的任何地方，只要能保证这些代码被使用前已经读取到内存中即可(推荐写在<\body>下面)
案例：
在这里插入图片描述
doucument.write()方法可以用来向页面输出包含html标签的内容如果不使用标签包起来，会将内容当作纯文本来处理
上面的代码运行为：

如果不使用<script></script>标签包起来：
在这里插入图片描述

使用JS的三种方式

内部js文件 :
直接使用<script>标签添加到html文档中适用于js代码少，并且每个页面js代码均不同
外部js文件
避免内部文件代码冗余，以*.js作为后缀名保存使用<script type=“text/javascript” src=“js/export.js”>,src属性链接到js文件，类似之前的css链接式
直接html标签
简短的js代码实现一个简单的页面效果时，可以直接写在里面
```
<input name="btn" type="button" value="弹出消息框"  onclick="javascript:alert('欢迎你！')"> 

```
注意：
无论使用<script>标签还是直接引用.js文件，浏览器都会按照<script>标签出现的先后顺序依次解析，如第二个js必须在第一个js解析之后才有效；如果 <script>标签放在标签中，那么意味必须等到全部js代码下载、解析、执行后才呈现网页内容。对于包含JS的页面而言，浏览器会出现延迟进而导致页面空白，因而一般将<script>标签放在中，并且放在页面内容的后面。

应用

变量的声明和赋值
语法：var 合法变量名 = 值;
var 是声明变量的关键字，在JS声明变量时，不需要指定变量的类型，变量的类型由变量的值决定。
案例：

var width = 20;
var right = true;

语法规则：

首字母小写
驼峰命名
开头必须为字母或者 $或者_，内容组成为字母或者$ 或者_或者数字
关键字和保留字不能用做变量名命名时，要做到见名知意
注意：JS区分大小写：如Count count COUNT是三个不同的变量
数据类型
虽然声明变量时不需要声命类型，但是JS提供了6种常用的基本类型
undefined（未定义类型）
当声明的变量未初始化是，该变量的默认值是undefined
null（空类型）
number （数值类型）
该类型既可以表示32位的整数，又可以表示64位的浮点数
String（字符串类型）
字符串是一组被引号（单引或双引）括起来的文本
boolean （布尔类型）
只有两个值true和false（真和假）
object（null和数组也列入object类型) 对象类型
ECMAScript提供了typeof运算符类判断一个变量或者值是什么类型
语法：
typeof(变量或值)
其返回结果有以下几种：
undefined
number
String
boolean
object
案例：

<script type="text/javascript">
    document.write("<h2>JS变量练习</h2>");
    var a,b = 1,name = "素";
    var date = new Date();
    var arr = new Array();
    document.write("a：" + typeof(a)+ "<br/>");
    document.write("b：" + typeof(b)+ "<br/>");
    document.write("name：" + typeof(name)+ "<br/>");
    document.write("date：" + typeof(date)+ "<br/>");
    document.write("arr：" + typeof(arr)+ "<br/>");
    document.write(date);
</script>

注意：
区分undefined、null、Object 用户自定义的初始值，如var dog = null;此时是将dog当做Object 处理的若用户没有为变量赋值，如var dog,此时默认为null值，但类型未定义，typeOf函数返回类型为undefined

文档写入
document.write(""); 在括号内放置的为字符串类型时，要加上双引号
警告
alert(“警告信息”); 会有对应的黄色提示图标
提示
prompt(“提示信息”,“输入框中的默认值”) 可以用变量来接收 prompt方法传递过来的值

数组

创建数组
语法：
var 数组名称 new Array(size) ps:size为整数;
为数组元素赋值
语法：
var fruit = new Array(“apple”,“orange”,“peach”,“banana”);
也可以直接为数组赋值
var fruit = new Array(4);
fruit[0] = “apple”;
fruit[1] = “orange”,;
fruit[2] = “peach”;
fruit[3] = “banana”;
数组还可以方括号"[""]"来定义
var fruit =[“apple”,“orange”,“peach”,“banana”];
数组的常用属性和方法
属性：数组名.length(设置或者返回数组的长度)
方法：
数组名.join() （把数组的所有元素放入一个字符串，通过一个分隔符进行分割）
数组名.sort() （对数组进行排序）
数组名.push()（向数组末尾添加一个或多个元素，并返回新的数组长度，注：该方法不受数组长度限制）

运算符

算术运算符

+ 加
- 减
* 乘
/ 除
% 取余（相除后的余数）

赋值运算符 =
比较运算符

>=
<=
>
<
!=
==
===恒等于
!== 恒不等
注意
双等号== :比较过程如果两个值类型相同，再进行三个等号(===)的比较如果两个值类型不同，也有可能相等，需根据以下规则进行类型转换在比较
场景
(1).如果一个是null，一个是undefined，那么相等
(2).如果一个是字符串，一个是数值，把字符串转换成数值之后再进行比较
(3).如果一个是“1”,一个是true，则返回true
三等号===
(1).如果类型不同，就一定不相等
(2).如果两个都是数值，并且是同一个值，那么相等；如果其中至少一个是NaN，那么不相等。（判断一个值是否是NaN，只能使用 isNaN( ) 来判断）
(3).如果两个都是字符串，每个位置的字符都一样，那么相等，否则不相等。
(4). 如果两个值都是true，或是false，那么相等
(5).如果两个值都引用同一个对象或是函数，那么相等，否则不相等
(6).如果两个值都是null，或是undefined，那么相等

逻辑运算符（均是基于布尔类型进行运算的）

&& 与一个为真，一个为假，结果为假
|| 或一个为真，一个为假，结果为真
!非 (将布尔类型的值颠倒，如true变false)

逻辑控制语句

选择结构

if
if-else
if-else if-else
switch
注意：均与Java相同，switch结构一样,分支不写break会穿透

循环结构

for循环
while循环
do-while循环
for-in循环
语法:for(变量 in 对象){}
案例

for(index in fruit4){ 
document.write(fruit4[index] + "<br/>"); 
}

注：其中的index表示的为数组的下标，从0开始
3. 跳转语句

break
continue

调试

F10单步跳过
F11单步跳入
shift+F11单步跳出

函数（类似java中的方法）

概念：程序的基本单元，是完成特定任务的代码语句块
特征：命名的代码块（有方法名）实现一定的功能可以有返回值可以有参数

系统函数

parseInt()
解析一个字符串，并返回一个整数
语法：parseInt(“字符串”);
案例:

var num1 = parseInt("78.89");//返回78
var num2 = parseInt("4567N");//返回4567
var num3 = parseInt("N4567");//返回NaN

注：如果转换失败，值为NaN

parseFloat()
将字符串类型转换为浮点类型（带小数点）

var num1 = parseFloat("78.89");//返回78.89
var num2 = parseFloat("4567.56N");//返回4567.56
var num2 = parseFloat("45.67.56N");//返回45.67
var num3 = parseFloat("N4567");//返回NaN

isNaN()
用于检查其参数是否为非数字（不是数字返回true，返回false）
案例

isNaN("12.5");//返回false
isNaN("12.5s");//返回true

自定义函数
语法：
function 函数名(参数1，参数2，… ，参数N){}
function是定义函数的关键字，必须有。
参数1，参数2等是函数的参数。因为JS本身是弱类型，所以它的参数也没有类型检查和类型限定。函数中的参数是可选的，
可以不带参数
案例：

function 函数名(){
	//JS语句;
}

注意
函数名命名要规范，和变量命名规范相同首字母小写驼峰命名开头必须为字母或者 $或者_，内容组成为字母或者$ 或者_ 或者数字关键字和保留字不能用做方法名命名时，要做到见名知意无参方法中，小括号内没有任何参数
调用函数事件名 = “方法名（）”;
3. 事件
概念
相关事情发生的消息事件发生时，预先绑定在这个事件上的命令会被执行
常用事件