javascript 入门第一天

黑夜隐士 · 发表于 2023-6-2 00:37:55

typora-copy-images-to: img

今日内容

JavaScript介绍
JavaScript的基本语法
JavaScript的属性和文本操作
JavaScript的Dom操作

一.JavaScript介绍

1. 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，统一了所有客户端脚本语言的编码方式。
总结
1. 1995 年，NetScape (网景)公司，开发的一门客户端脚本语言：LiveScript。后来，请来 SUN 公司的专家来进行修改，后命名为：JavaScript。
2. 1996 年，微软抄袭 JavaScript 开发出 JScript 脚本语言。
3. 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入门程序

入门程序
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <meta charset="UTF-8">
5. <title></title>
6. </head>
7. <body>
8. <script>
9. //1.定义变量 num=10;
10. var num = 10;
11. //2.弹出的警告框
12. alert(num);
14. </script>
15. </body>
16. </html>
17. 注意：书写js代码时，一定一定加上<script> js代码 </script>
复制代码

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

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

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

缺点：js代码和html标签在一起，不便于后期的维护
1. <body>
2. <script>
3. //1.定义变量 num=10;
4. var num = 10;
5. //2.弹出的警告框
6. alert(num);
8. </script>
9. </body>
复制代码
方式二：引入外部的js文件

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

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

outer.js:
1. //1.定义变量 num=10;
2. var num = 10010;
3. //2.弹出的警告框
4. alert(num);
复制代码
在html网页里面引入：外部的js文件
1. <script></script>
复制代码
细节

4.javascript的注释

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

5.五种原始类型

java的类型和javascript的类型基本一样
javascript里面的类型分为两大类型
- 判断变量属于什么类型的，可以使用关键词：typeof
- 原始类型
  1. number类型：数字类型
  2. string类型：字符串或者字符
  3. null类型：比如：定义一个变量，赋值为null , var a =null;
  4. undefined类型：未定义类型，比如：定义一个变量，没有赋值，var a;
  5. boolean类型：表示true或者false…
- 引用类型
  1. Boolean类型
  2. Number类型
  3. String类型
  4. 等等
- 代码演示
  1. <script>
  2. //1.定义number类型
  3. var num=10;
  4. //1.1.判断num的类型
  5. document.write(num+" : "+(typeof num)+"<hr/>")
  7. //2.定义string类型
  8. var str="hello world";
  9. //2.1 输出到浏览器
  10. document.write(str+" : "+(typeof str)+"<hr/>");
  12. //3.定义boolean类型
  13. var flag =true;
  14. //3.1 输出到浏览器
  15. document.write(flag+" : "+(typeof flag)+"<hr/>");
  17. //4.定义null类型
  18. var obj =null;
  19. //4.1 输出到浏览器
  20. document.write(obj +" : "+(typeof obj )+"<hr/>");
  22. //5.定义undefined类型
  23. var und;
  24. //5.1 输出到浏览器
  25. document.write(und+" : "+(typeof und)+"<hr/>");
  26. </script>
  复制代码

6.常量和变量

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

比如：let num=10;

建议把let放在方法内部（放在方法方法外部也可以，不建议）
1. //2.定义方法一：
2. function test1(){
3. //1.定义局部变量
4. let num =10;
5. alert("test1:"+num);
6. }
7. //2.1 调用
8. test1();
复制代码
定义全局变量，

基本语法：变量名称= 值 //变量名称就是全局变量 ,不建议这样书写.
1. <script>
2. //1.定义方法一：
3. function test1(){
4. //1.定义全局变量
5. num =10;
6. alert("test1:"+num);
7. }
8. //1.1 调用
9. test1();
10. //1.定义方法一：
11. function test2(){
13. alert("test2:"+num);
14. }
15. //1.1 调用
16. test2();
18. </script>
复制代码
建议的书写格式：

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

变量名称A =赋值
1. <script>
2. //0.使用 var 定义全局变量
3. var num=null;
4. //1.定义方法一：
5. function test1(){
6. //1.定义全局变量
7. num =10;
8. alert("test1:"+num);
9. }
10. //1.1 调用
11. test1();
12. //1.定义方法一：
13. function test2(){
15. alert("test2:"+num);
16. }
17. //1.1 调用
18. test2();
20. </script>
复制代码
常量值（不能改变的值），关键词：const
1. <script>
2. //1.定义一个常量值
3. const num =10;
4. //2.测试
5. console.log("打印常量值："+num);//正确的写法
6. console.log("改变常量的值："+(num++));//错误的写法：不能改变常量的值
8. </script>
9. 注意：常量值定义在方法内部或者方法外部都可以。
复制代码
细节
1. 如果定义变量时，使用var关键词：存在类型变量的提升（直接来说：先使用，后定义）
2. 如果定义变量或者常量时，使用let或者const关键词：不存在类型变量的提升
3. 1. <script>
  2. //1.var 定义变量，存在类型提升这种情况
  3. // alert("未定义，先使用"+a);
  4. // var a=10;
  5. // alert("定义后，再使用"+a);
  7. //2. let 定义变量，不存在类型提升这种情况
  8. alert("未定义，不能先使用"+b);
  9. let b=66;
  11. </script>
  复制代码

7.运算符

算术运算符

细节：

如果数字与字符串类型的数字进行运算时：
1. 如果是 + 号，进行的是字符串拼接
2. 如果不是 + 号，进行的是算术运算
3. 1. <script>
  2. var num = 10;
  3. var num2 = 20;
  4. console.log("加法运算："+(num+num2));
  6. var str="66";
  7. console.log("运算符与字符串类型的数字1："+(num+str));//+号：进行的字符串拼接
  8. console.log("运算符与字符串类型的数字2："+(num%str));//-号（* / %）：进行运算
  9. </script>
  复制代码
赋值运算符

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

<script> var num = 10;
var num2 = 20;
num+=num2;//赋值：将num2+num，重新赋值给num
console.log("加法运算："+(num));
var str="66";
num+=str;
console.log("数字与字符串赋值+= 操作："+(num));// += 号: 字符串拼接；num=3066
num-=str;
console.log("数字与字符串赋值-= 操作："+(num));// -= 号：运算 3066-66=3000.其它赋值运算符也一样
</script>

复制代码

比较运算符

细节：

== : 只比较值是否一样

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

逻辑运算符

<script>
var str1="";
document.write((!str1)+"<hr/>")//true
var str2=null;
document.write((!str2)+"<hr/>")//true
var str3=0;
document.write((!str3)+"<hr/>")//true
var str4=NaN;// not a number
document.write((!str4)+"<hr/>")//true
document.write("<hr>");
var a1="hello";
var a2= parseInt(a1);//a2: NaN (NOT a Number)
console.log(a2);
</script>
注意：
1. 空串取反操作：true
2. null取反操作：true
3. 0取反操作：true
4. Nan取反操作：true

复制代码

三元运算符
- 场景：数据进行分页，100条数据，每页显示10条，求总页数
- 1. //场景：数据进行分页，100条数据，每页显示10条，求总页数
  2. var totalCount=109;
  3. var pageSize=10;
  4. var totalPages = (totalCount%pageSize==0)?
  5. (totalCount/pageSize):
  6. Math.floor(totalCount/pageSize)+1;
  8. document.write(totalPages);
  复制代码

8.流程控制语句

if 语句
switch 语句
for 循环
while 循环
小练习: 99乘法表
1. <script>
2. document.write("<table border='0px' align='center'>")
3. //1.循环的行
4. for (var i = 1; i <=9 ; i++) {
5. //2.循环的列
6. document.write("<tr>")
7. for (var j = 1; j <= i; j++) {
8. document.write("<td style='border:1px solid blue;'>")
9. document.write(i+"*"+j+"="+(i*j)+"  ")
10. document.write("</td>")
11. }
12. //3.换一行
13. document.write("</tr>")
14. }
15. document.write("</table>")
16. </script>
复制代码

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,返回新的长度
1. var arrNew = 数组对象.reverse();//颠倒数组元素的顺序，返回一个新的数组

10.函数

函数的创建
- 方式一：动态函数
  
  var fun1 = new Function(参数，方法体);
- 方式二：普通函数
  
  function 方法名称（方法的参数）{
  
  方法体内容
  
  }
- 方式三：匿名函数
  
  var 方法名称 = function (方法的参数）{
  
  方法体内容
  
  }
  1. <script>
  2. //1.动态函数---创建(很少用)
  3. var param = "a,b";
  4. var method_body = "alert(a+b);";
  5. var fun1 = new Function(param,method_body);
  6. //1.1调用函数
  7. //fun1(10,20);
  9. //2.普通函数--------创建
  10. function fun2(a,b) {//参数：a, b
  11. alert(a+b);//方法体
  12. }
  13. //2.1 调用函数
  14. //fun2(1,5);
  15. //3.匿名函数-------创建
  16. var fun3 = function(a,b){
  17. alert(a+b);
  18. }
  19. //3.1 调用函数
  20. fun3(1,-8);
  21. </script>
  复制代码
函数的调用

遵循原则：
1. 先创建函数
2. 再调用函数
3. 注意细节：在定义参数时，参数前面不加var ,let
函数的属性

获取参数的个数： length
1. var fun3 = function(a,b,c){
2. alert(a+b+c);
3. }
4. alert(typeof fun3)
5. //3.1 调用函数
6. alert("fun3方法的参数个数："+fun3.length);
7. fun3(1,-8,9);
复制代码
注意：
1. 在获取参数的个数时：函数名称.length
2. 调用函数：函数名称（参数）；

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属性获取标签对象：获取的是多个标签对象
代码如下：
1. 密码：<input type="password" name="psw" /><br/>
2. 用户名：<input type="text" name="username" id="uname" class="s" /><br/>
3. 性别：<input type="radio" name="sex" class="s" value="man"/>男
4. <input type="radio" name="sex" class="s" value="woman"/>女<br/>
5. <script>
6. //1.根据id获取标签对象
7. var username_obj = document.getElementById("uname");
8. console.log("username的输入框："+username_obj.id);
9. //2.根据name的属性值获取标签对象
10. var sex_objs = document.getElementsByName("sex");
11. console.log("sex属性的标签个数："+sex_objs.length)
12. //3.根据class的属性值获取标签对象
13. var class_objs = document.getElementsByClassName("s");
14. console.log("class属性的标签个数："+class_objs.length)
16. //4.根据标签名称获取标签对象
17. var tag_objs = document.getElementsByTagName("input");
18. console.log("input标签名称的标签个数："+tag_objs.length)
19. </script>
复制代码

操作标签对象（crud）

<center>
<h1 id="h11">一级标题</h1>
<a target="_blank" href="https://blog.csdn.net/#" id="a11">一个超链接</a>
<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>
//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" target="_blank" href="https://blog.csdn.net/#">点击我，去跳转</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>
//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属性：可以解析纯文本，也可以解析标签
注意：以上操作必须是对围堵标签进行，只有围堵标签才有标签体。
1. <input type="text" name="username" id="ip" value="jack" />
3. 我是一个小小鸟！！！
5. <script>
6. //1.获取标签对象
7. var input_tag = document.getElementById("ip");
8. var input_text = input_tag.innerHTML;//写法错误，input没有标签体
9. console.log("input: "+ input_tag.value);
10. //2.获取div
11. var div_tag = document.getElementById("d1");
12. //2.1 获取标签体的内容
13. //var div_text= div_tag.innerHTML;
14. var div_text = div_tag.innerText;
15. console.log("div的标签体："+div_text);
16. //2.2 设置标签体的内容
17. //div_tag.innerText="<a target="_blank" href='https://blog.csdn.net/#'>xxx</a>";
18. div_tag.innerHTML="<a target="_blank" href='https://blog.csdn.net/#'>xxx</a>";
20. </script>
复制代码