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文件
<script type="text/javascript" src="js/outer.js" ></script>
*
细节

<>4.javascript的注释

* 和java的注释基本一样
* 单行注释: // 注释内容
* 多行注释:/* 注释内容 */
<>5.五种原始类型

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

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

*
判断变量属于什么类型的,可以使用关键词:typeof

*
原始类型

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

* Boolean类型
* Number类型
* String类型
* 等等
*
代码演示
<script type="text/javascript"> //1.定义number类型 var num=10; //1.1.判断num的类型
document.write(num+" : "+(typeof num)+"<hr/>") //2.定义string类型 var str="hello
world"; //2.1 输出到浏览器 document.write(str+" : "+(typeof str)+"<hr/>");
//3.定义boolean类型 var flag =true; //3.1 输出到浏览器 document.write(flag+" : "+(typeof
flag)+"<hr/>"); //4.定义null类型 var obj =null; //4.1 输出到浏览器 document.write(obj +"
: "+(typeof obj )+"<hr/>"); //5.定义undefined类型 var und; //5.1 输出到浏览器 document.
write(und+" : "+(typeof und)+"<hr/>"); </script>
<>6.常量和变量

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

*
定义局部变量,使用关键词: let

比如:let num=10;

建议 把let放在方法内部(放在方法方法外部也可以,不建议)
//2.定义方法一: function test1(){ //1.定义局部变量 let num =10; alert("test1:"+num); }
//2.1 调用 test1();
*
定义全局变量,

基本语法: 变量名称= 值 //变量名称 就是全局变量 ,不建议这样书写.
<script type="text/javascript"> //1.定义方法一: function test1(){ //1.定义全局变量 num =10
; alert("test1:"+num); } //1.1 调用 test1(); //1.定义方法一: function test2(){ alert(
"test2:"+num); } //1.1 调用 test2(); </script>
建议的书写格式:

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

变量名称A =赋值
<script type="text/javascript"> //0.使用 var 定义全局变量 var num=null; //1.定义方法一:
function test1(){ //1.定义全局变量 num =10; alert("test1:"+num); } //1.1 调用 test1();
//1.定义方法一: function test2(){ alert("test2:"+num); } //1.1 调用 test2(); </script>
*
常量值(不能改变的值),关键词:const
<script type="text/javascript"> //1.定义一个常量值 const num =10; //2.测试 console.log(
"打印常量值:"+num);//正确的写法 console.log("改变常量的值:"+(num++));//错误的写法:不能改变常量的值 </script>
注意:常量值定义在方法内部或者方法外部都可以。
*
细节

*
如果定义变量时,使用var关键词: 存在类型变量的提升(直接来说: 先使用,后定义)

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

* <script type="text/javascript"> //1.var 定义变量,存在类型提升这种情况 //
alert("未定义,先使用"+a); // var a=10; // alert("定义后,再使用"+a); //2. let
定义变量,不存在类型提升这种情况 alert("未定义,不能先使用"+b); let b=66; </script>
<>7.运算符

*
算术运算符

细节:

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

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

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

* <script type="text/javascript"> var num = 10; var num2 = 20; console.log(
"加法运算:"+(num+num2)); var str="66"; console.log("运算符与字符串类型的数字1:"+(num+str));
//+号: 进行的字符串拼接 console.log("运算符与字符串类型的数字2:"+(num%str));//-号(* / %): 进行运算 </
script>
*
赋值运算符

细节: 同算术运算符的道理一样。
<script type="text/javascript"> 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 type="text/javascript"> 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条,求总页数

* //场景: 数据进行分页,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乘法表
<script type="text/javascript"> document.write("<table border='0px'
align='center'>") //1.循环的行 for (var i = 1; i <=9 ; i++) { //2.循环的列 document.
write("<tr>") for (var j = 1; j <= i; j++) { document.write("<td
style='border:1px solid blue;'>") document.write(i+"*"+j+"="+(i*j)+
"  ") document.write("</td>") } //3.换一行 document.write("</tr>") }
document.write("</table>") </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,返回新的 长度

* var arrNew = 数组对象.reverse();//颠倒数组元素的顺序,返回一个新的数组
<>10.函数

*
函数的创建

*
方式一: 动态函数

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

*
方式二:普通函数

function 方法名称(方法的参数){

方法体内容

}

*
方式三:匿名函数

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

​ 方法体内容

}
<script type="text/javascript"> //1.动态函数---创建(很少用) var param = "a,b"; var
method_body= "alert(a+b);"; var fun1 = new Function(param,method_body);
//1.1调用函数 //fun1(10,20); //2.普通函数--------创建 function fun2(a,b) {//参数:a, b alert(
a+b);//方法体 } //2.1 调用函数 //fun2(1,5); //3.匿名函数-------创建 var fun3 = function(a,b){
alert(a+b); } //3.1 调用函数 fun3(1,-8); </script>
*
函数的调用

​ 遵循原则:

* 先创建函数
* 再调用函数
* 注意细节: 在定义参数时,参数前面不加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、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属性获取标签对象: 获取的是多个标签对象

*
代码如下:
密码:<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>

技术
©2019-2020 Toolsou All rights reserved,
Python学习笔记(一)Linux【shell】 shell编程创建一个线程——— Javaweb (3)evo工具使用问题——Degenerate covariance rank, Umeyama alignment is not possibleVMware 16安装centos 7详细教程C语言做一个简易的登陆验证(功能)界面C语言——qsort函数Spring Boot面试必问:自动配置原理Android EditText密码显示隐藏Qt入门教程【基础控件篇】QCalendarWidget日历控件