javascript 入门第一天_caozhisanguo的专栏

网络 02-07 7515

typora-copy-images-to: img

今日内容

JavaScript介绍

JavaScript的基本语法

JavaScript的属性和文本操作

JavaScript的Dom操作

一.JavaScript介绍 1. JavaScript概述

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

客户端：浏览器

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

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

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

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

2.JavaScript发展历程

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

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

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

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

总结

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入门程序

入门程序

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <script type="text/javascript"> //1.定义变量 num=10; var num = 10; //2.弹出的警告框 alert(num); </script> </body> </html> 注意：书写js代码时，一定一定加上<script> js代码 </script> 3.javascript与html结合的两种方式

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

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

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

<body> <script type="text/javascript"> //1.定义变量 num=10; var num = 10; //2.弹出的警告框 alert(num); </script> </body>

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

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

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

outer.js:

//1.定义变量 num=10; var num = 10010; //2.弹出的警告框 alert(num);

在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类型等等

代码演示

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

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

比如：let num=10;

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

//2.定义方法一： function test1(){ //1.定义局部变量 let num =10; alert("test1:"+num); } //2.1 调用 test1();

定义全局变量，

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

建议的书写格式：

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

变量名称A =赋值

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

细节

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

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

算术运算符

细节：

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

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

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

赋值运算符

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

比较运算符

? 细节：

? ? == : 只比较值是否一样

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

逻辑运算符

三元运算符

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

//场景：数据进行分页，100条数据，每页显示10条，求总页数 var totalCount=109; var pageSize=10; var totalPages = (totalCount%pageSize==0)? (totalCount/pageSize): Math.floor(totalCount/pageSize)+1; document.write(totalPages);

8.流程控制语句

if 语句

switch 语句

for 循环

while 循环

小练习: 99乘法表

数组的创建：

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

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

var fun3 = function(a,b,c){ alert(a+b+c); } alert(typeof fun3) //3.1 调用函数 alert("fun3方法的参数个数："+fun3.length); fun3(1,-8,9);

注意：

在获取参数的个数时：函数名称.length调用函数：函数名称（参数）； 11.基本语法小结注释：单行// 多行/**/输入输出语句：prompt()、alert()、console.log()、document.write()变量和常量：let、const数据类型：boolean、null、undefined、number、string、biginttypeof 关键字：用于判断变量的数据类型运算符：算数、赋值、逻辑、比较、三元运算符流程控制和循环语句：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属性获取标签对象：获取的是多个标签对象

代码如下：

密码：<input type="password" name="psw" /><br/> 用户名：<input type="text" name="username" id="uname" class="s" /><br/> 性别：<input type="radio" name="sex" class="s" value="man"/>男 <input type="radio" name="sex" class="s" value="woman"/>女<br/> <script type="text/javascript"> //1.根据id获取标签对象 var username_obj = document.getElementById("uname"); console.log("username的输入框："+username_obj.id); //2.根据name的属性值获取标签对象 var sex_objs = document.getElementsByName("sex"); console.log("sex属性的标签个数："+sex_objs.length) //3.根据class的属性值获取标签对象 var class_objs = document.getElementsByClassName("s"); console.log("class属性的标签个数："+class_objs.length) //4.根据标签名称获取标签对象 var tag_objs = document.getElementsByTagName("input"); console.log("input标签名称的标签个数："+tag_objs.length) </script> 操作标签对象（crud）

<center> <h1 id="h11">一级标题</h1> <a href="#" id="a11">一个超链接</a> <div style="border: 1px solid blue;width: 200px;height: 100px;margin: auto;"></div> <input type="button" value="添加一个标签到div中" onclick="addH1();" /><br/> <input type="button" value="删除div中的h1标签" onclick="deleteH1();" /><br/> <input type="button" value="把h1替换成a标签" onclick="changeTag();" /><br/> <input type="button" value="创建一个新标签，添加到div中" onclick="createTag();" /><br/> </center> <script type="text/javascript"> //1.添加标签 function addH1(){ //1.获取id=h11的标签对象 var h1_tag = document.getElementById("h11"); //2.获取div标签对象 var div_tag = document.getElementsByTagName("div")[0]; //3.把h1标签给添加到div中 div_tag.appendChild(h1_tag);//父对象.appendChild(子对象) } //2.删除标签 function deleteH1(){ //1.获取id=h11的标签对象 var h1_tag = document.getElementById("h11"); //2.获取div标签对象 var div_tag = document.getElementsByTagName("div")[0]; //3.把h1标签给添加到div中 div_tag.removeChild(h1_tag);//父对象.removeChild(子对象) } //3.替换标签 function changeTag(){ //1.获取h1标签 var h1_tag = document.getElementById("h11"); //2.获取a标签 var a_tag = document.getElementById("a11"); //3.获取div标签 var div_tag = document.getElementsByTagName("div")[0]; //4.替换标签 div_tag.replaceChild(a_tag,h1_tag); } //4.创建一个新标签，添加到div中 function createTag(){ //1.创建一个新的a标签 ,属性，文本 var a_tag = document.createElement("a"); //1.1 设置属性 a_tag.setAttribute("href","demo1_获取标签对象.html"); //1.2设置文本 a_tag.innerText="点我,去跳转"; //2.获取div，添加创建的新标签 document.getElementsByTagName("div")[0].appendChild(a_tag); } </script> 3.2 Dom操作属性（设置属性，获取属性，移除属性）方法：

<a id="a1">点击我，去跳转</a> <a id="a2" href="#">点击我，去跳转</a> <hr /> <br /> <input type="button" value="设置属性" onclick="addAttr()" /> <input type="button" value="移除属性" onclick="removeAttr()" /> <input type="button" value="获取属性" onclick="getAttr()" /> <input type="button" value="设置属性的方式二" onclick="addAttr2()" /> <script type="text/javascript"> //4.给a设置属性 function addAttr2(){ //1.获取a标签对象 var a_tag = document.getElementById("a2"); //2.设置属性 a_tag.style.textDecoration="none";//通常：设置css样式使用 } //1.给a设置 href=index.html function addAttr(){ //1.获取a标签对象 var a_tag = document.getElementById("a1"); //2.设置属性 a_tag.setAttribute("href","index.html"); } //2.移除a标签的href属性 function removeAttr(){ //1.获取a标签对象 var a_tag = document.getElementById("a1"); //2.设置属性 a_tag.removeAttribute("href"); } //3.获取a标签的href属性 function getAttr(){ //1.获取a标签对象 var a_tag = document.getElementById("a1"); //2.设置属性 var str = a_tag.getAttribute("href"); alert(str); } </script> 3.3 Dom操作文本（文本：指的标签体内容）

获取文本内容

var text_content = 标签对象.innerText; //标签对象.innerHTML;

设置文本内容（把原有的文本内容给覆盖）

标签对象.innerText=“新的文本内容”；

标签对象.innerHTML=“新的文本内容”；

注意：

innerText属性：解析纯文本，即使是标签，也看成纯文本innerHTML属性：可以解析纯文本，也可以解析标签

注意：以上操作必须是对围堵标签进行，只有围堵标签才有标签体。

<input type="text" name="username" id="ip" value="jack" /> <div id="d1"> 我是一个小小鸟！！！ </div> <script type="text/javascript"> //1.获取标签对象 var input_tag = document.getElementById("ip"); var input_text = input_tag.innerHTML;//写法错误，input没有标签体 console.log("input: "+ input_tag.value); //2.获取div var div_tag = document.getElementById("d1"); //2.1 获取标签体的内容 //var div_text= div_tag.innerHTML; var div_text = div_tag.innerText; console.log("div的标签体："+div_text); //2.2 设置标签体的内容 //div_tag.innerText="<a href='#'>xxx</a>"; div_tag.innerHTML="<a href='#'>xxx</a>"; </script>