javascript 入门第一天

今日内容

JavaScript介绍

JavaScript的基本语法

JavaScript的属性和文本操作

JavaScript的Dom操作

一.JavaScript介绍

JavaScript概述

JavaScript是一门客户端脚本语言，基于对象和事件驱动的一门客户端脚本语言，可以直接在浏览器端运行。

客户端： 浏览器

脚本语言：无需编译，可以直接运行（只要电脑上安装了浏览器，可以运行javascript语言）

基于对象：javascript已经提供好了大部分对象，前端开发者，可以直接使用这些对象（对象无需创建，直接使用）

事件驱动：通过触发事件，驱动事件绑定的javascript代码，实现网页的动态效果。

核心功能就是增强用户和 HTML 页面的交互过程，让页面有一些动态效果。以此来增强用户的体验！

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ttNeMDuw-1641790802304)(.\img\javaScript表格介绍.png)]

2.JavaScript发展历程

1995 年，NetScape (网景)公司，开发的一门客户端脚本语言：LiveScript。

后来，请来 SUN 公司的专家来 进行修改，后命名为：JavaScript。

1996 年，微软抄袭 JavaScript 开发出 JScript 脚本语言。

1997 年，ECMA (欧洲计算机制造商协会)，制定出客户端脚本语言的标准：ECMAScript，统一了所有客户 端脚本语言的编码方式。

总结

在这里插入图片描述

3.JavaScript和Java的关系

==JavaScript和java的不同之处

JavaScript是一门脚本语言：无需编译，可以直接运行（在浏览器运行）

Java是一门编程语言：先编译，后运行（编译的过程依赖与jvm）

JavaScript是基于对象的脚本语言：对象可以直接使用，无需创建

Java是面向对象的编程语言：对象必须先创建，然后再使用

JavaScript是一门弱类型的脚本语言，指的在JavaScript所有类型都可以使用var来表示

比如：var num=10; var str=“hello”, var flag = true;

Java是一门强类型的编程语言，指的在定义变量时，必须先确定类型，然后在定义变量。

比如：int num=10; String str=“hello”; boolean flag = true;

==JavaScript和java的相同之处

JavaScript 和 java的定义基本语法很相似
javaScript书写方式和 java的书写的代码方式很相似

4.JavaScript组成

ECMAScript

规范了javascript的基本语法

DOM

document object model : 文档对象模型（由一系列文档对象构成的模型）

作用：操作标记性的文档(指的xml或者html文档)

BOM

browser object model: 浏览器对象模型（由一系列浏览器对象构成的模型）

作用：操作浏览器的。

5.JavaScript小结

javascript是一门客户端脚本语言

javascript是一门弱类型语言(即使有时语法写的很不规范，也不报错)

javascript的三个组成部分= 基本语法+DOM+BOM

常见的前端开发工具

前端开发工具:开发前端代码,比如 html,css, javascript
    HBuilder (国产的开发工具)： 强大很好用，收费的
    Vscode (非国产的开发工具)：强大很好用，收费的
    WebStom (非国产的开发工具)：强大很不好用，收费的
    DreamWeaver(非国产的开发工具): 不强大，很好用

后端开发工具: 开发后端的代码,当然也可以开发前端代码(缺点:补全功能不是很好)
    Idea（集成开发工具）： 开发所有语言，开发前端语言，不方便
    Eclipse（集成开发工具）： 开发java语言，开发前端语言，不方便
    MyEclipse（集成开发工具）： 开发java语言，开发前端语言，不方便
    STS（spring tools suitable 集成开发工具）： 开发java语言，开发前端语言，不方便

二.JavaScript的基本语法
1.语法规范

区分大小写的
每行代码结束，建议使用分号表示。
代码书写格式（建议与java的代码书写格式保持一致）

2.javascript入门程序

入门程序

3.javascript与html结合的两种方式

方式一： 直接在html里面，嵌入js代码

优点：可以直接看到书写的js代码

缺点：js代码和html标签在一起，不便于后期的维护

方式二：引入外部的js文件

步骤一：先定义好一个js文件，步骤二：通过script标签的src属性引入外部定义好的js文件

优点：便于后期js的代码维护

outer.js:

在html网页里面引入：外部的js文件

细节

4.javascript的注释

和java的注释基本一样
单行注释： // 注释内容
多行注释：/* 注释内容 */

5.五种原始类型

java的类型和javascript的类型基本一样

javascript里面的类型分为两大类型

    判断变量属于什么类型的，可以使用关键词：typeof

    原始类型
        number类型： 数字类型
        string类型： 字符串或者字符
        null类型：比如： 定义一个变量，赋值为null , var a =null;
        undefined类型：未定义类型，比如： 定义一个变量，没有赋值 ，var a;
        boolean类型：表示true或者false…

    引用类型
        Boolean类型
        Number类型
        String类型
        等等

    代码演示

6.常量和变量

javascript是一门弱类型的脚本语言，在定义变量或者常量时，不用指定类型，或者可以使用var, let, const

定义局部变量，使用关键词： let

比如：let num=10;

建议 把let放在方法内部（放在方法方法外部也可以，不建议）

定义全局变量，

基本语法：变量名称= 值 //变量名称就是全局变量 ,不建议这样书写.

建议的书写格式：

var 变量名称A；//变量名称A就是全局变量

变量名称A =赋值

常量值（不能改变的值），关键词：const

细节

如果定义变量时，使用var关键词： 存在类型变量的提升（直接来说： 先使用，后定义）

如果定义变量或者常量时，使用let或者const关键词：不存在类型变量的提升

7.运算符

算术运算符

在这里插入图片描述

细节：

如果数字与字符串类型的数字进行运算时：

    如果是 + 号， 进行的是字符串拼接

    如果不是 + 号，进行的是算术运算

赋值运算符

在这里插入图片描述

细节： 同算术运算符的道理一样。

比较运算符

在这里插入图片描述

细节：

== : 只比较值是否一样

=== :即比较值,又比较数据类型

逻辑运算符

在这里插入图片描述

三元运算符

    场景： 数据进行分页，100条数据，每页显示10条，求总页数

8.流程控制语句

if 语句

switch 语句

for 循环

while 循环

小练习: 99乘法表

9.数组

数组的创建：

    方式一：直接创建一个指定元素的数组

    var arr1 = [1,“a”,“b”,true];

    var arr2= new Array(1,“a”,“b”,true);

    方式二： 创建一个空的数组

    var arr1=[ ]; 或者 var arr2= new Array();

    方式三：创建一个指定长度的数组

    var arr= new Array( size 数字)

数组的特点：

    数组的元素类型： 可以是任意类型

    数组的长度可以变化的

    数组的长度 = 数组的最大索引值+1

数组的属性：
    length属性： 获取数组的长度

数组的方法：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-x5cCoWyY-1641790802309)(img/image-20200707152734084.png)]在这里插入图片描述

1.var str = 数组对象.join(连接符号);//字符串

2.var endEle = 数组对象.pop();// 删除最后一个元素并返回

3.var lenght = 数组对象.push(ele);//向数组末尾添加一个元素ele,返回新的 长度
    var arrNew = 数组对象.reverse();//颠倒数组元素的顺序，返回一个新的数组

10.函数

函数的创建

    方式一： 动态函数

    var fun1 = new Function(参数，方法体);

    方式二：普通函数

    function 方法名称（方法的参数）{

    方法体内容

    }

    方式三：匿名函数

    var 方法名称 = function (方法的参数）{

     方法体内容

    }

函数的调用

遵循原则：

先创建函数
再调用函数
注意细节： 在定义参数时，参数前面不加var ,let

函数的属性

获取参数的个数： length

注意：
    在获取参数的个数时： 函数名称.length
    调用函数：函数名称（参数）；

11.基本语法小结

注释：单行// 多行/**/
输入输出语句：prompt()、alert()、console.log()、document.write()
变量和常量：let、const
数据类型：boolean、null、undefined、number、string、bigint
typeof 关键字：用于判断变量的数据类型
运算符：算数、赋值、逻辑、比较、三元运算符
流程控制和循环语句：if、switch、for、while
数组：数据类型和长度没有限制，let 数组名 = [长度/元素]
函数：类似方法，抽取代码，提高复用性

三.JavaScript的Dom操作
1.Dom概述

DOM： Document Object Model 文档对象模型，作用：操作标记性文档（目前学过的xml，html文档）

演示DOM操作过程：
在这里插入图片描述
2.Dom分类

核心Dom(ECMA规范的基本语法)

核心Dom的api操作xml,html

xml的Dom

作用：操作xml文档的

html的Dom

作用：操作html文档的

总结：

核心Dom, xml的Dom, html的Dom 大部分api都是通用的。

3.Dom的api
3.1 Dom操作标签（crud标签）

获取标签对象：

在这里插入图片描述

根据id获取标签对象： 获取的是一个标签对象

根据标签名称获取标签对象： 获取的是多个标签对象

根据name属性获取标签对象：获取的是多个标签对象

根据class属性获取标签对象： 获取的是多个标签对象

代码如下：

操作标签对象（crud）

javascript 入门第一天

你可能感兴趣的:(javascript)