javaEE-11.javaScript入门

目录

一.什么是javaScript

二.快速实现

三.JS引入方式

1.行内引入:

2.内部引入:

3.外部引入:

四.基础语法

1.变量

变量命名规则:

2.数据类型

3.运算符

五.JS对象

1.数组

创建数组:

2.操作数组

3.函数

函数注意事项:

函数参数:

4.对象

[1.使用字面量 创建对象:](#1.使用字面量 创建对象:)

[2.使用new Object()创建对象](#2.使用new Object()创建对象)

[3.使用 构造函数 创建对象](#3.使用 构造函数 创建对象)


一.什么是javaScript

JavaScript(简称JS),是⼀个脚本语⾔,解释型或即时编译型的编程语⾔.

javaScript和java是不存在任何关系的.

有关javaScript的发展史:

Javascript诞生记 - 阮一峰的网络日志

JS和CSS和html的关系:

html相当于网页的骨架;

CSS相当于对网页进行填充,修饰

JS是赋予网页特有的功能,行为

二.快速实现

html 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        alert("hello");
    </script>
</body>
</html>

运行浏览器:

alert:在弹窗中显示.

三.JS引入方式

1.行内引入:

直接在html标签内使用.

点击按钮时,弹窗显示注册成功.

这种方式容易产生大量的冗余代码,不⽅便后期的维护,所以不常⽤.

2.内部引入:

定义script标签,代码写在<script></script>标签中.

<script></script>标签可以放在代码任意位置,一般放在body中.

⾏内样式,只适合于写简单样式.只针对某个标签⽣效.缺点是不能写太复杂的jS.

3.外部引入:

定义script标签,通过src属性,引入外部 .js文件.

外部样式,html和js实现了完全的分离,企业开发常⽤⽅式

四.基础语法

1.变量

创建变量/声明变量/变量初始化:

**var 变量名=内容;**或 len 变量名=内容;

这两个用法差不多相同,具体区别暂不讨论.

const 变量名=内容;

通过const创建的变量,初始化后,内容不能修改.

JS是一门动态若类型的语言:

动态:变量可以存放不同类型的值:

弱类型:随着程序的执行,变量中值的类型可以变化:

变量命名规则:

1.变量名的组成字符可以是数字,字母,下划线_,美元符$

2.数字不能开头.

3.建议使用驼峰命名法.

2.数据类型

虽然js是弱数据类型的语⾔,但是js中也存在数据类型,js中的数据类型分为:原始类型 和 引⽤类 型,具体有如下类型

|-----------|------------------------------|
| 数据类型 | 描述 |
| number | 数字,不区分整数和小数 |
| string | 字符串 字符串字⾯值需要使⽤引号引起来,单引号双引号均可 |
| boolean | 布尔类型,true为真,false为假 |
| undefined | 表示变量未初始化,只有唯⼀的值 undefined |

使⽤typeof函数可以返回变量的数据类型,通过浏览器的控制台查看.

3.运算符

JS中的运算符和java中的用法基本相同

==和===的区别:

==仅用于判断内容是否相等;

===判断时 包含类型的判断.

五.JS对象

1.数组

创建数组:

1.使用new关键字创建数组:

var a = new Array();

2.使用字面常量创建数组:

数组中的内容称为元素.

JS中的数组元素不要求类型相同.

2.操作数组

1>.读:

通过数组下标的方式访问数组元素.

2>.增

通过数组下标新增元素,或者通过push追加元素.

可以进行隔空追加,对指定1数组下标追加.

3>.改

通过数组下标修改数组元素,

控制台输出结果:

注意

  1. 如果下标超出范围读取元素,则结果为undefined

  2. 不要给数组名直接赋值,此时数组中的所有元素都没了.

3.函数

语法格式:

function 函数名(形参列表){

函数体;

return 返回值;

}

函数调用:

函数名(实参列表);//无返回值

var 返回值 = 函数名(实参列表);//有返回值

函数注意事项:

函数定义并不会执⾏函数体内容,必须要调⽤才会执⾏.调⽤⼏次就会执⾏⼏次.

调⽤函数的时候进⼊函数内部执⾏,函数结束时回到调⽤位置继续执⾏.

函数的定义和调⽤的先后顺序没有要求.(这⼀点和变量不同,变量必须先定义再使⽤)

函数参数:

形参个数和实参个数可以不匹配,但是实际开发⼀般要求形参和实参个数要匹配.

  1. 如果实参个数⽐形参个数多,则多出的参数不参与函数运算

  2. 如果实参个数⽐形参个数少,则此时多出来的形参值为 undefined

函数表达式:

var 变量名 = function(){

函数体;

return 返回值;

}

此时形如 function() { } 这样的写法定义了⼀个匿名函数, 然后将这个匿名函数⽤⼀个变量来表 ⽰. 后⾯就可以通过这个 add 变量来调⽤函数了.

4.对象

js中的 数值,字符串,布尔值,数组,函数都是对象,每个对象中包含若干个属性和方法.

属性:对象的特征,

方法:对象的行为.

1.使用字面量 创建对象:

使⽤ { }创建对象

• 属性和⽅法使⽤键值对的形式来组织.

• 键值对之间使⽤ , 分割.最后⼀个属性后⾯的,可有可⽆

• 键和值之间使⽤ : 分割.

• ⽅法的值是⼀个匿名函数.

使用对象的属性和方法:

2.使用new Object()创建对象

这种创建对象方法和创建数组方法类似.

3.使用 构造函数 创建对象

语法:

function 构造函数名(参数列表){

this.属性名=值;

this.方法名=function(){}

.....

}

调用:

var 变量名= new 构造函数名(实参列表);

注意:

• 在构造函数内部使⽤this关键字来表⽰当前正在构建的对象.

• 构造函数的函数名⾸字⺟⼀般是⼤写的.

• 构造函数的函数名可以是名词.

• 构造函数不需要 return

• 创建对象的时候必须使⽤ new 关键字.

相关推荐
noravinsc21 分钟前
vue2 definecomponent is not defined
前端·javascript·vue.js
录大大i35 分钟前
HTML之JavaScript使用JSON
javascript·html·json
2013crazy1 小时前
Python 基于 OpenCV 的人脸识别上课考勤系统(附源码,部署教程)
开发语言·python·opencv·python 人脸识别·python 人脸识别考勤
姚永强1 小时前
web前端第三次作业
前端·javascript·css
编程星空1 小时前
diff算法简析
前端·javascript·html
优雅永不过时·2 小时前
原生Three.js 和 Cesium.js 案例 。 智慧城市 数字孪生常用功能列表
前端·javascript·低代码·编辑器·智慧城市·webgl·three.js
c-c-developer2 小时前
C++ Primer 迭代语句
开发语言·c++
Aishenyanying332 小时前
从零开始设计一个完整的网站:HTML、CSS、PHP、MySQL 和 JavaScript 实战教程
javascript·css·网络·mysql·html·php
Gazer_S2 小时前
【CodePen实战:撤销重做功能全记录】
前端·javascript·vue.js
yuanpan2 小时前
同.NET 8一起发布的C#12语法中新特性及用法演示
开发语言·c#·.net