typora-copy-images-to: img
今日内容
JavaScript介绍
JavaScript的基本语法
JavaScript的属性和文本操作
JavaScript的Dom操作
JavaScript是一门客户端脚本语言,基于对象和事件驱动的一门客户端脚本语言,可以直接在浏览器端运行。
客户端: 浏览器
脚本语言:无需编译,可以直接运行(只要电脑上安装了浏览器,可以运行javascript语言)
基于对象:javascript已经提供好了大部分对象,前端开发者,可以直接使用这些对象(对象无需创建,直接使用)
事件驱动:通过触发事件,驱动事件绑定的javascript代码,实现网页的动态效果。
核心功能就是增强用户和 HTML 页面的交互过程,让页面有一些动态效果。以此来增强用户的体验!
1995 年,NetScape (网景)公司,开发的一门客户端脚本语言:LiveScript。
后来,请来 SUN 公司的专家来 进行修改,后命名为:JavaScript。
1996 年,微软抄袭 JavaScript 开发出 JScript 脚本语言。
1997 年,ECMA (欧洲计算机制造商协会),制定出客户端脚本语言的标准:ECMAScript,统一了所有客户 端脚本语言的编码方式。
总结
1995 年,NetScape (网景)公司,开发的一门客户端脚本语言:LiveScript。后来,请来 SUN 公司的专家来 进行修改,后命名为:JavaScript。
1996 年,微软抄袭 JavaScript 开发出 JScript 脚本语言。
1997 年,ECMA (欧洲计算机制造商协会),制定出客户端脚本语言的标准:ECMAScript,统一了所有客户 端脚本语言的编码方式。
==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的相同之处
ECMAScript
规范了javascript的基本语法
DOM
document object model : 文档对象模型(由一系列文档对象构成的模型)
作用:操作标记性的文档(指的xml或者html文档)
BOM
browser object model: 浏览器对象模型(由一系列浏览器对象构成的模型)
作用:操作浏览器的。
javascript是一门客户端脚本语言
javascript是一门弱类型语言(即使有时语法写的很不规范,也不报错)
javascript的三个组成部分= 基本语法+DOM+BOM
常见的前端开发工具
前端开发工具:开发前端代码,比如 html,css, 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>
方式一: 直接在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>
细节
java的类型和javascript的类型基本一样
javascript里面的类型分为两大类型
判断变量属于什么类型的,可以使用关键词:typeof
原始类型
引用类型
代码演示
<script type="text/javascript">
//1.定义number类型
var num=10;
//1.1.判断num的类型
document.write(num+" : "+(typeof num)+"
")
//2.定义string类型
var str="hello world";
//2.1 输出到浏览器
document.write(str+" : "+(typeof str)+"
");
//3.定义boolean类型
var flag =true;
//3.1 输出到浏览器
document.write(flag+" : "+(typeof flag)+"
");
//4.定义null类型
var obj =null;
//4.1 输出到浏览器
document.write(obj +" : "+(typeof obj )+"
");
//5.定义undefined类型
var und;
//5.1 输出到浏览器
document.write(und+" : "+(typeof und)+"
");
</script>
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>
算术运算符
细节:
如果数字与字符串类型的数字进行运算时:
如果是 + 号, 进行的是字符串拼接
如果不是 + 号,进行的是算术运算
<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)+"
")//true
var str2=null;
document.write((!str2)+"
")//true
var str3=0;
document.write((!str3)+"
")//true
var str4=NaN;// not a number
document.write((!str4)+"
")//true
document.write("
");
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);
if 语句
switch 语句
for 循环
while 循环
小练习: 99乘法表
<script type="text/javascript">
document.write("")
//1.循环的行
for (var i = 1; i <=9 ; i++) {
//2.循环的列
document.write("")
for (var j = 1; j <= i; j++) {
document.write("")
document.write(i+"*"+j+"="+(i*j)+" ")
document.write(" ")
}
//3.换一行
document.write(" ")
}
document.write("
")
</script>
数组的创建:
方式一:直接创建一个指定元素的数组
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
数组的属性:
数组的方法:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-x5cCoWyY-1641790802309)(img/image-20200707152734084.png)]
1.var str = 数组对象.join(连接符号);//字符串
2.var endEle = 数组对象.pop();// 删除最后一个元素并返回
3.var lenght = 数组对象.push(ele);//向数组末尾添加一个元素ele,返回新的 长度
函数的创建
方式一: 动态函数
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>
函数的调用
遵循原则:
函数的属性
获取参数的个数: length
var fun3 = function(a,b,c){
alert(a+b+c);
}
alert(typeof fun3)
//3.1 调用函数
alert("fun3方法的参数个数:"+fun3.length);
fun3(1,-8,9);
注意:
DOM: Document Object Model 文档对象模型,作用:操作标记性文档(目前学过的xml,html文档)
核心Dom(ECMA规范的基本语法)
核心Dom的api操作xml,html
xml的Dom
作用:操作xml文档的
html的Dom
作用:操作html文档的
总结:
核心Dom, xml的Dom, html的Dom 大部分api都是通用的。
根据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>
<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>
<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>
获取文本内容
var text_content = 标签对象.innerText; //标签对象.innerHTML;
设置文本内容(把原有的文本内容给覆盖)
标签对象.innerText=“新的文本内容”;
标签对象.innerHTML=“新的文本内容”;
注意:
注意:以上操作必须是对围堵标签进行,只有围堵标签才有标签体。
我是一个小小鸟!!!