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 输出
为了以后调试程序,输出运行结果,判断程序运行是否正常,找出错误并修改。
- 使用 window.alert() 弹出警告框。
- 使用 document.write() 方法将内容写到 HTML 文档中。
- 使用 innerHTML 写入到 HTML 元素。
- 使用 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中的变量
(1) 变量是程序运行中的最小单位。
(2) 变量是存储数据的”容器”。
为了减少程序的运行空间。
例如:我们现在需要在程序中出现100次“hello”这个数据,每需要一个“hello”这个数据我们就写一次“hello”这个数据,假设“hello”这个数据一次需要5个字符的存储空间,那么100次就是500个字符,如果我们现在将“hello”这个数据保存到一个变量上,那么一个变量只占5个字符数据的存储空间,当下一次需要使用“hello”这个数据时候,我们只需将占5个字符数据的存储空间的变量提供就可以了,这是我们的程序中出现100次“hello”这个数据时,只开辟了5个字符数据的存储空间,不会是500个。
(3)变量的组成
- 数据类型 【赋值的时候根据所赋予的具体数据值判定数据类型】
- 名称
- 数据值
- 作用域 【变量在不同位置的有效性】
(4)定义变量
- 通过var关键字定义变量
- 格式: var 变量名称 = 数据值 ;
var 变量名称 ; - 可以一次性定义多个变量
注意变量的名称使用规则:
(1) 变量的名称可以由数字、字母、$ 、_ ,数字不能开头。
(2) 变量的名称不能有空格,不能使用中文。
(3) 区分大小写(y 和 Y 是不同的变量)
(4)不能是关键字。
关键字就是javascript语言为一些单词赋予了特殊的含义,这是被赋予了特殊的含义的单词就是关键。【被javascript语言占用】。
<!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>