JavaScript_1
1.javaScript的简单介绍【javaScript是什么?】
javaScript----是一种面向对象的脚本语言。面向对象是一种编程思想,看不见摸不着,只能体会,用实际行动来证明。面向对象这种编程思想是对面向过程的思想的升华。
什么是面向过程的思想?
例如:今天早上我要从凤栖原到电视塔。
面向过程的思想就是需要将沿途经过的地方保存下来,这些地方连接在一起就形成了过程。
面向过程的思想----C语言【指针】
面向对象的思想就是只需要知道开始和结束位置就可以,至于中间是如何完成的不需要关注。开始和结束位置就是对象。面向对象的思想---java、 C#
脚本---写好的程序不需要中间转换,就能立即在运行环境中运行。javaScript,SQL
2.javaScript的作用?
1.为html网页提供动态效果【特效】。
2.完成与后台处理程序的数据交互。【1.发请求{要} 2.处理数据】
简单的具体操作:
- 直接向html文件中写出标记和内容。
- 对事件的反应
- 改变 HTML 内容
- 改变 HTML 图像
- 改变 HTML 样式
- 验证输入
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>关于javascript的简单操作</title>
<style>
#img2{
display: none;
}
</style>
</head>
<body>
<h1>1.直接向html文件中写出标记和内容</h1>
<script>
document.write("<h2>测试直接向html文件中写出标记和内容</h2>");
</script>
<h1>2.对事件的反应</h1>
<input type="button" value="测试按钮" onclick="alert('请揍我!');"/><br>
<h1>3.改变 HTML 内容</h1>
<p id="p1">Hello</p>
<script>
function myclick(){
document.getElementById("p1").innerHTML="你好!";
}
</script>
<input type="button" value="改变 HTML 内容" onclick="myclick();"/><br>
<h1>4.改变 HTML 图像</h1>
<img id="img1" src="imgs/close.png" width="100px" height="200px"/>
<script>
function mytestimg(){
var butObject=document.getElementById("but1");
var imgObject=document.getElementById("img1");
var testValue=butObject.value;
if(testValue=="打开"){
imgObject.src="imgs/open.png";
butObject.value="关闭";
}
if(testValue=="关闭"){
imgObject.src="imgs/close.png";
butObject.value="打开";
}
}
</script>
<input id="but1" type="button" value="打开" onclick="mytestimg();"/><br>
<h1>5.改变 HTML 样式</h1>
<img id="img2" src="imgs/timg.jpg" width="200px" height="200px"/>
<script>
function mytestcss(){
var butObject=document.getElementById("but2");
var testValue=butObject.value;
if(testValue=="显示"){
document.getElementById("img2").style.display="block";
butObject.value="隐藏";
}
if(testValue=="隐藏"){
document.getElementById("img2").style.display="none";
butObject.value="显示";
}
}
</script>
<input id="but2" type="button" value="显示" onclick="mytestcss();"/><br>
<h1>6.验证输入</h1>
<input id="text1" type="text" /><span id="span1"></span><br>
<script>
function getMSGCode(){
var text1Object=document.getElementById("text1");
var span1Object=document.getElementById("span1");
var telNumber=text1Object.value;
//正则表达式
var zhengze= /^1\d{10}$|^(0\d{2,3}-?|\(0\d{2,3}\))?[1-9]\d{4,7}(-\d{1,8})?$/;
//null--javascript一种数据类型
var jieguo=zhengze.test(telNumber);
if(jieguo){
text1Object.value="123456";
}else{
span1Object.innerHTML="手机号码不合法!";
text1Object.value="";
}
}
</script>
<input id="but3" type="button" value="获取短信验证码" onclick="getMSGCode();"/><br>
</body>
</html>
3.javascript的基本用法
HTML 中的脚本必须位于 <script> 与 </script> 标签之间,脚本可被放置在 HTML 页面的 <body> 和 <head> 部分中。也可以将javascript程序单独保存在一个文件中,保存javascript程序的文件后缀名一定是“.js”,r然后在html文件中<body>和<head>部分通过<script>标记的src属性将保存javascript程序的文件导入到html文件中。
//mytest.js文件
//在独立的javascript文件中编写程序代码是不需要<script>
function test3(){
alert("测试使用独立的javascript文件");
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script>
function test2(){
alert("测试head放置脚本");
}
</script>
<script src="js/mytest.js"></script>
</head>
<body>
<h2>HTML 中的脚本必须位于<script> 与 </script> 标签之间。</h2>
<h2>脚本可被放置在 HTML 页面的 <body> 和<head> 部分中。</h2>
<!--
<script>
function test1(){
alert("测试body放置脚本");
}
</script>
-->
<input type="button" value="测试body中放置脚本" onclick="test1();"/><br>
<!--
<script>
function test1(){
alert("测试body放置脚本");
}
</script>
-->
<input type="button" value="测试head中放置脚本" onclick="test2();"/>
<h2>通常情况下我们将javascript脚本放置在head部分</h2>
<h2>
可以将javascript程序单独保存在一个文件中,保存javascript程序
的文件后缀名一定是“.js”,r然后在html文件中<body>>和<head>
部分通过<script>标记的src属性将保存javascript程序的文件导入到html文件中。
</h2>
<h2>在独立的javascript文件中编写程序代码是不需要<script></h2>
<input type="button" value="测试使用独立的javascript文件" onclick="test3();"/>
</body>
</html>
4.JavaScript 输出
为了以后调试程序,输出运行结果,判断程序运行是否正常,找出错误并修改。
1.使用 window.alert() 弹出警告框。
2.使用 document.write() 方法将内容写到 HTML 文档中。
3.使用 innerHTML 写入到 HTML 元素。
4.使用 console.log() 写入到浏览器的控制台。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>输出数据的方式</title>
<script>
function testalert(){
var a=100;
var b=12.5;
var c=a+b;
//window.alert("c="+c);
alert("c="+c);
}
function testwrite(){
var a=100;
var b=12.5;
var c=a+b;
document.write("c="+c);
}
function testinnerHTML(){
var a=100;
var b=12.5;
var c=a+b;
document.getElementById("h2").innerHTML="c="+c;
}
function testconsole(){
var a=100;
var b=12.5;
var c=a+b;
console.log("c="+c);
}
</script>
</head>
<body>
<h1>使用 window.alert() 弹出警告框。</h1>
<input type="button" value="测试window.alert()" onclick="testalert();"/>
<h1>使用document.write() 方法将内容写到 HTML 文档中。</h1>
<input type="button" value="测试document.write()" onclick="testwrite();"/>
<h1>使用 innerHTML 写入到 HTML 元素。</h1>
<h2 id="h2"></h2>
<input type="button" value="测试innerHTML" onclick="testinnerHTML();"/>
<h1>使用 console.log() 写入到浏览器的控制台</h1>
<input type="button" value="测试console.log()" onclick="testconsole();"/>
</body>
</html>
5.Javascript中的变量
- 变量是程序运行中的最小单位。
- 变量是存储数据的”容器”,为了减少程序的运行空间
例如:我们现在需要在程序中出现100次“hello”这个数据,每需要一个“hello”这个数据我们就写一次“hello”这个数据,假设“hello”这个数据一次需要5个字符的存储空间,那么100次就是500个
字符,如果我们现在将“hello”这个数据保存到一个变量上,那么一个变量只占5个字符数据的存储空间,当下一次需要使用“hello”这个数据时候,我们只需将占5个字符数据的存储空间的变量提供
就可以了,这是我们的程序中出现100次“hello”这个数据时,只开辟了5个字符数据的存储空间,不会是500个。
3.变量的组成
1.数据类型 【赋值的时候根据所赋予的具体数据值判定数据类型】
2.名称
3.数据值
4.作用域 【变量在不同位置的有效性】
4.定义变量
通过var关键字定义变量
格式: var 变量名称 = 数据值 ;
var 变量名称 ;
可以一次性定义多个变量
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>定义变量</title>
<script>
//格式: var 变量名称 = 数据值 ;
var a = 100;
//var 变量名称 ;
var b;
//变量赋值
b=12.5;
//可以一次性定义多个变量
var test1,hello1;
//变量赋值
test1=125.8;
hello1="你好";
var test2="hello",hello2="world";
alert(hello2);
</script>
</head>
<body>
</body>
</html>
注意变量的名称使用规则:
- 变量的名称可以由数字、字母、$ 、_ ,数字不能开头。
- 变量的名称不能有空格,不能使用中文。
- 区分大小写(y 和 Y 是不同的变量)
- 不能是关键字。
关键字就是javascript语言为一些单词赋予了特殊的含义,这是被赋予了特殊的含义的单词就是关键。【被javascript语言占用】。
6.JavaScript中的数据类型
1.javaScript的变量的数据类型,不是在声明/定义变量的时候决定的,javaScript的变量的数据类型是在赋值之后,根据所赋予的具体数据值决定变量的数据类型。
var a = 100;
var b;
b=”hello”;
2.javaScript具体数据类型
字符串(String)、数字(Number)、布尔(Boolean)、数组(Array)、对象(Object)、空(Null)、未定义(Undefined)。
JavaScript 拥有动态类型,javaScript的变量的数据类型,不是在声明/定义变量的时候决定的,javaScript的变量的数据类型是在赋值之后,根据所赋予的具体数据值决定变量的数据类型。
var a = 100; //a 数字(Number)
a=”hello”; //字符串(String)
2.1JavaScript 字符串
字符串是存储字符(比如 "Bill Gates")的变量。字符串可以是引号中的任意文本。您可以使用单引号或双引号;
“hello”, ‘world’----常量
例如:
var carname="Volvo XC60";
var carname;
carname=’Volvo XC60’;
可以在字符串中使用引号,只要不匹配包围字符串的引号即可:“zhnagsn:say”hello””------>“zhnagsn:say’hello’”
例如:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>javascript中的字符串</title>
<script>
//String -- 字符串数据类型
//"" 、 '' ---字符串数据类型标志
//"hello"----字符串常量【程序运行过程中不会改变的数据】
//字符串变量的声明/定义
var str1="hello";
var str2;
str2="你好";
//window.alert(str1);
//您可以在字符串中使用引号,只要不匹配包围字符串的引号即可
//var say1="zhangsan:say"hello"";【不推荐使用】
//双引号中的双引号用单引号代替
//var say1="zhangsan:say'hello'";
window.alert(say1);
</script>
</head>
<body>
</body>
</html>
2.2数字(Number)
JavaScript 只有一种数字类型。数字可以带小数点,也可以不带。
极大或极小的数字可以通过科学(指数)计数法来书写。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>javascript数字型</title>
<script>
var num1=100; //整数的数字型
var num2=12.5; //小数的数字型
//整数与小数统一成数字型Number
var num3=num1+num2;
//alert("num3=="+num3);
//极大或极小的数字可以通过科学(指数)计数法来书写
var y=123e5;
var z=123e-5;
alert("y=="+y);
</script>
</head>
<body>
</body>
</html>
2.3JavaScript 布尔[逻辑]【Boolean】
取值只有两种:true/false,往往都是用来做判断
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>布尔Boolean</title>
<script>
var boo1=true;
var boo2=false;
function isAge(){
//得到文本框输入的年龄值
var ageText=document.getElementById("in1");
var spanText=document.getElementById("span");
var age=ageText.value;
var res= age > 18;
if(res){
spanText.innerHTML="年龄合法!";
}else{
spanText.innerHTML="年龄不合法!";
}
}
</script>
</head>
<body>
<input id="in1" type="text" value="请输入年龄" /><span id="span"></span>
<input type="button" value="判断年龄" onclick="isAge();" />
</body>
</html>
2.4数组类型【Array】:数组就是保存一组数据值的数据类型。
数组定义:
1.先定义,后赋值
var arr1=new Array(); //定义/创建
数组赋值--通过下标
理解下标:具体数据值在数组中的位置【从0开始】
格式:数组变量名称[下标]=数据值;
arr1[0]=”zhangsan”;
arr1[1]=23;
arr1[2]=true;
2.定义+赋值
var arr2=new Array(“zhangsan”,23,true); //定义+赋值
数组的取值: 数组名称[下标]
arr2[1]----23
数组的length属性:得到数组把中的元素个数
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>数组[Array]</title>
<script>
/**
* 数组就是保存一组数据值的数据类型。
数组定义:
1.先定义,后赋值
var arr1=new Array(); //定义/创建
数组赋值--通过下标
理解下标:具体数据值在数组中的位置【从0开始】
格式:数组变量名称[下标]=数据值;
arr1[0]=”zhangsan”;
arr1[1]=23;
arr1[2]=true;
2.定义+赋值
var arr2=new Array(“zhangsan”,23,true); //定义+赋值
数组的取值: 数组名称[下标]
arr2[1]----23
*/
function testArray(){
/*
var h_arr1=new Array();
h_arr1[0]=1;
h_arr1[1]=2;
h_arr1[2]=3;
h_arr1[3]=4;
h_arr1[4]=5;
h_arr1[5]=6;
*/
var h_arr1=new Array(1,2,3,4,5,6);
//document.write("<h"+h_arr1[0]+">测试数组</h"+h_arr1[0]+">");
//数组的length属性:得到数组把中的元素个数
var len=h_arr1.length;
//alert(len);
for(var i=0;i<len;i++){
document.write("<h"+h_arr1[i]+">测试数组</h"+h_arr1[i]+">");
}
}
</script>
</head>
<body>
<input type="button" value="测试数组" onclick="testArray();"/>
</body>
</html>
2.5 JavaScript 对象---通过”{}”,在其中使用键值对【标题:页码】
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>对象型</title>
<script>
//定义对象变量
//通过”{}”,在其中使用键值对【标题:页码】
var user={userid:1001,
username:"zhangsan",
useraddress:"西安",
getName:function(){
return "hello";
}
};
//对象的使用
//alert(user.userid);
//alert(user["username"]);
//alert(user['username']);
//alert(user.getName());
//对象---{}
//对象中的元素是变量,函数
//对象中的变量 【变量名称:数值】
//对象中的函数 【函数名称:function(){}】
//访问对象中的变量
//对象名称.变量名称 / 对象名称["变量名称"]
//对象名称.函数名称()
</script>
</head>
<body>
</body>
</html>
2.6javascript中的Undefined 【未定义】
Undefined --没有值
2.7javascript中的null[空]
null---有值,只是值的内容是空的。
通常情况下定义的变量如果不确定数据类型,可以使用null空类型代替。
var a=null;
var b=null;
a=“zhangsan”;
7.JavaScript 注释
注--标注【为了以后查看】
释--说明
注释---标注出来程序,解释说明含义。
注释的作用:1.标注出来程序,解释说明含义,方便他人或者以后的自己查看。
2.调试程序
注释的特征:注释的内容是不会被执行的
Javascript中的注释有2中:
1.单行注释 【一次注释一行】‘// ’被注释的内容【自己的解释说明含义的文字/代码】
出现的位置【1.当前行代码上面一行 2.当前行代码后面】
例如:
var num1=100; //整数的数字型
var num2=12.5; //小数的数字型
//整数与小数统一成数字型Number
var num3=num1+num2;
2.多行注释【一次注释多行】
/*
*被注释的内容
*【自己的解释说明含义的文字/代码】
* //可以包含单行注释
*/
不要使用javascript语法注释去注释html标记
8.JavaScript 函数
函数也叫方法。函数其实就是实现某一个相关功能的代码集合【代码块{}】
函数的语法格式:
function [函数名称](){
}
function 是声明/定义函数的关键字
函数名称
()----参数列表【可以有,也可以有多个,可以没有(没有参数,不能省略)】
参数将当前函数之外的数据引入到当前函数中进行运算【找帮手】
{}--代码块具体实现功能的代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>函数</title>
<script>
/*
函数也叫方法。
函数其实就是实现某一个相关功能的代码集合【代码块{}】
函数的语法格式:
function [函数名称](){
}
function 是声明/定义函数的关键字
函数名称
()----参数列表【可以有,也可以有多个,可以没有(没有参数,不能省略)】
参数将当前函数之外的数据引入到当前函数中进行运算【找帮手】
{}--代码块具体实现功能的代码
*/
//1.根据函数有没有名称【有名函数,匿名函数】
/*
function test1(){
alert("有名函数");
}
*/
/*
window.onload=function(){
alert("匿名函数");
}
*/
//2.根据函数有没有参数【有参函数,无参数函数】
function test2(){
alert("无参数函数");
}
function test3(num1,num2){
var res=num1+num2-10;
alert("res=="+res);
}
//3.根据函数有没有结果【有返回值函数,无返回值函数】
function test4(){
var res=100-10;
return res; //返回结果【函数调用处】
}
function test5(num1,num2){
var res=num1+num2-10;
alert("res=="+res);
}
function test6(a1){
return null;
}
//有参数函数 1.看个数 2传
//有返回值函数 那里调用,那里接
</script>
</head>
<!--<body onload="test1();">-->
<body>
<input type="button" value="测试无参数函数" onclick="test2();"/><br>
<input type="button" value="测试有参数函数" onclick="test3(12.5,23.8);"/><br>
<input type="button" value="测试有返回值函数" onclick="var a=test4();alert(a);"/>
</body>
</html>