网页特效2一javaScript基础

最新推荐文章于 2021-04-30 13:39:15 发布

三宝之莘莘学子

最新推荐文章于 2021-04-30 13:39:15 发布

阅读量171

点赞数

分类专栏： Java软件工程师

本文链接：https://blog.csdn.net/weixin_42259575/article/details/95923427

版权

Java软件工程师专栏收录该内容

11 篇文章 0 订阅

订阅专栏

学习javaScript的目的：
1.客户端表单验证
2.页面动态效果（层的切换特效/级联菜单特效/等）
3.jQuery的基础

JavaScript:
是一种描述性语言，也是一种基于对象和事件驱动的，并具有安全性能的脚本语言。
JavaScript应用程序都要下载到浏览器的客户端执行，从而减轻了服务器端的负担。

特点：
》主要用来在HTML页面中添加交互行为
》是一种脚本语言，和java类似
》一般用来编写客户端的脚本
》是一种解释性语言，边执行边解释

组成：
》ECMAScript标准
》浏览器对象模型(BOM)
》文档对象模型(DOM)

JavaScript基本结构
<script type="text/javascript">
JavaScript语句;
</script>

网页中引用JavaScript的方式（三种）
<body>

<script type="text/javascript">
document.write("hello");
document.write("world");
document.write("<h1>world</h1>");
</script>

<script type="text/javascript" src="js/demo1.js"></script>

<input type="button" name="buttonName" value="弹框" οnclick="javascript:alert('欢迎');"/>

JavaScript核心语法：
》变量的声明和赋值
var width=20;
var x,y,z=10;
javaScript区分大小写

》数据类型
undefined ----未定义类型（变量未初始化）
null ----空类型（什么都没有的占位符）
number ----数值类型（NaN表示非数，也是数值类型）
String ----字符串类型（被引号括起来的文本，不区别字符和字符串《lengh属性：表示字符串的长度，包括空格》）
boolean ----布尔类型

》typeof运算符来判断变量属于何种类型
typeof(变量或值)

示例：
var width,height=10,name="rose";
var date=new Date();//时间
var arr=new Array();//数组
document.write("width---"+typeof(width)+"<br/>");
document.write("height---"+typeof(height)+"<br/>");
document.write("name---"+typeof(name)+"<br/>");
document.write("date---"+typeof(date)+"<br/>");
document.write("arr---"+typeof(arr)+"<br/>");
document.write("true---"+typeof(true)+"<br/>");
document.write("null---"+typeof(null)+"<br/>");
-----------------------------------------------------------
String对象的常用方法
indexOf(str,index) ----查找某个制定的字符串再字符串中首次出现的位置
charAt(index) ----返回在指定位置的字符
substring(index1,index2) ----返回之间的字符串[index1,index2)
split(str) ----将字符串分割为字符串数组
toLowerCase()/toUpperCase() ----把字符串转化为小写/大写
-----------------------------------------------------------
数组
》创建数组
var 数组名称=new Array(size);
》为数组元素赋值
var fruit=new Array("apple","orange","banana");
或者
var fruit=new Array(3);
fruit[0]="apple";
或者
var fruit=["apple","orange","banana"];
-----------------------------------------------------------
数组的常用方法和属性
属性 length ---设置或返回数组中元素的数目
方法：
join() ---- 把数组的所有元素放入一个字符串，通过一个分隔符进行分隔
sort() ---- 对数组排序
push() ---- 向数组末尾添加一个或多个元素，并返回新的长度

示例：
var fruit="apple,orange,banana";
var arrlist=fruit.split(",");
var str=arrlist.join("-");
document.write("分割前"+fruit+"<br/>");
document.write("分割后"+str+"<br/>");
-----------------------------------------------------------
运算符号：
===恒等
!===不恒等

逻辑控制语句
在javaScript中，switch语句可以用于字符串
示例：
var week="mon";
switch (week){
case "mon":
alert("周一");
break;
case "sun":
alert("周日休息");
break;
default:
alert("工作");
break;
}

循环结构
for-in循环
语法：
for(变量 in 对象){
//javaScript 语句
}

示例：
var fruit=["apple","orange","banana"];
for (var i in fruit){
document.write(fruit[i]+"<br/>");
}

常用的输入/输出
》警告（alert）
此方法会创建一个特殊的小对话框，在对该对话框处理前，当前网页将不可用，后面的代码也不会被执行
语法格式：
alert("提示信息");

》提示（prompt）
会弹出一个提示对话框，等待用户输入一行数据
语法格式：
prompt("提示信息","输入框的默认信息");

示例：
var color=prompt("请输入喜欢的颜色","");
document.write(color+"<br/>");

Chrome开发人员工具
常用的八个模块：
》Elements：用于查看和编辑当前页面中的HTML和CSS元素
》Console：用于显示脚本中所输出的调试信息，或运行测试脚本等
》Sources：用于查看和调试当前页面所加载的脚本的源文件
》Network：用于查看HTTP请求的详细信息，如请求头，响应头，及返回内容等
》TimeLine：用于查看脚本执行时间、页面元素渲染等信息
》Profiles：用于查看CPU执行时间与内存占用等信息
》Resource：用于查看当前页面所请求的资源文件
》Audits：用于优化前端页面，加速网页加载速度等

设置断点：
选中Sources ----》选中代码-----》运行程序

alert()方法进行值调试检查

示例：（输入的值>5，则输出倒三角）
var t=prompt("请输入一个整数","");
alert("t的值"+t);
if (t>5){
for (var i=t;i>0;i--){
for (var k=i-1;k<t;k++){
document.write(" ");
}
for (var j=0;j<i;j++){
document.write("* ");
}
document.write("<br/>");
}
} else {
document.write("<br/>");
}

---------------------------------------
javaScript常用语法---函数
》parseInt()
解析一个字符串，并返回一个整数

示例：
var num1="126.98";
var num2="1261col";
var num3="this is test";
document.write(num1+"---->"+parseInt(num1)+"<br/>");
document.write(num2+"---->"+parseInt(num2)+"<br/>");
document.write(num3+"---->"+parseInt(num3)+"<br/>");
结果：
126.98---->126
1261col---->1261
this is test---->NaN

》parseFloat()
解析一个字符串，并返回一个浮点数（第一个点看作有效字符）
示例：
var num1="126.98";
var num2="1261col";
var num3="this is test";
document.write(num1+"---->"+parseFloat(num1)+"<br/>");
document.write(num2+"---->"+parseFloat(num2)+"<br/>");
document.write(num3+"---->"+parseFloat(num3)+"<br/>");
结果：
126.98---->126.98
1261col---->1261
this is test---->NaN

》isNaN()
用于检查其参数是否是非数字（非数字则返回true）
示例:
var num1="126.98";
var num2="1261col";
var num3="this is test";
document.write(num1+"---->"+isNaN(num1)+"<br/>");
document.write(num2+"---->"+isNaN(num2)+"<br/>");
document.write(num3+"---->"+isNaN(num3)+"<br/>");
结果：
126.98---->false
1261col---->true
this is test---->true

-------------------------------------
自定义函数
》定义函数
语法：
function 函数名(参数) {
//javaScript语句
}
》调用函数
语法：
事件名=“函数名()”;

示例：
HTML中的代码：
<body>
<script type="text/javascript" src="js/demo2.js"></script>
<input type="button" name="test" value="学习JavaScript" οnclick="demo(prompt('请输入显示次数',''))"/>
</body>

js中的代码：
function demo(count) {
for (var k=0;k<count;k++){
document.write("第"+(k+1)+"学习JavaScript"+"<br/>");
}
}

-----------------------------------------
事件
常见事件：
onload：一个页面或一幅图像完成加载
onclick：鼠标单击某个对象、
onmouseover：鼠标指针移到某元素上
onkeydown:某个键盘按键被按下
onchange:域的内容被改变