JS概述:
JavaScript是Web的编程语言. IT界的朋友都应该知道这门语言现在越来越流行. 所以它还是值得我们去学习的. 话不多说, 让我们开始JS之旅吧!!
首先, 我们先整一个实例, 让大家感受一下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<script>
function displayDate(){
document.getElementById("demo").innerHTML=Date();
}
</script>
</head>
<body>
<h1>我的第一个 JavaScript 程序</h1>
<p id="demo">这是一个段落</p>
<button type="button" οnclick="displayDate()">显示日期</button>
</body>
</html>
1.JS是脚本语言.
JS是轻量级的编程语言.
这里既然提到脚本语言, 我们就来说一下标记语言, 脚本语言, 编程语言的区别:
标记语言: 不向计算机发出指令, 直接由浏览器解析. 常用于格式化和链接.
脚本语言: 不经过编译, 只是解释器解释, 然后直接执行. 通常嵌在html文档中
编程语言: 执行前必须经过编译, 生成二进制文件.
2.document.write("..."), 向浏览器输出...
实例:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
<p>
JavaScript 能够直接写入 HTML 输出流中：
</p>
<script>
document.write("这是一个标题");
document.write("<p>这是一个段落。</p>");
</script>
<p>
您只能在 HTML 输出流中使用 <strong>document.write</strong>。
如果您在文档已加载后使用它（比如在函数中），会覆盖整个文档。
</p>
</body>
</html>
3.onclick事件
实例:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
<h1>我的第一个 JavaScript</h1>
<p>
JavaScript 能够对事件作出反应。比如对按钮的点击：
</p>
<button type="button" οnclick="alert('欢迎!')">点我!</button>
</body>
</html>
4.改变指定标签包含的内容
实例:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
<h1>我的第一段 JavaScript</h1>
<p id="demo">
JavaScript 能改变 HTML 元素的内容。
</p>
<script>
function myFunction()
{
x=document.getElementById("demo"); // 找到元素
x.innerHTML="Hello JavaScript!"; // 改变内容
}
</script>
<button type="button" οnclick="myFunction()">点击这里</button>
</body>
</html>
5. JS更改html图像
实例:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
<script>
function changeImage()
{
element=document.getElementById('myimage')
if (element.src.match("bulbon"))
{
element.src="/images/pic_bulboff.gif";
}
else
{
element.src="/images/pic_bulbon.gif";
}
}
</script>
<img id="myimage" οnclick="changeImage()"
src="/images/pic_bulboff.gif" width="100" height="180">
<p>点击灯
泡就可以打开或关闭这盏灯</p>
</body>
</html>
6.JS改变html样式
实例:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
<h1>我的第一段 JavaScript</h1>
<p id="demo">
JavaScript 能改变 HTML 元素的样式。
</p>
<script>
function myFunction()
{
x=document.getElementById("demo") // 找到元素
x.style.color="#ff0000"; // 改变样式
}
</script>
<button type="button" οnclick="myFunction()">点击这里</button>
</body>
</html>
7. JS对表单数据进行合法性检测
实例:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
<h1>我的第一段 JavaScript</h1>
<p>请输入数字。如果输入值不是数字，浏览器会弹出提示框。</p>
<input id="demo" type="text">
<script>
function myFunction()
{
//获取input元素中的内容
var x=document.getElementById("demo").value;
if(x==""||isNaN(x))
{
alert("不是数字");
}
}
</script>
<button type="button" οnclick="myFunction()">点击这里</button>
</body>
</html>
8.JS输出
描述:由于JS中没有任何的打印或输出函数, 只能通过以下方式在html中显示数据
1)window.alert(), 该函数包含在<script>标签中实现数据输出
实例:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
<h1>我的第一个页面</h1>
<p>我的第一个段落。</p>
<script>
window.alert(5 + 6);
</script>
</body>
</html>
2)innerHTML, 找到指定元素并修改其内容.
实例:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
<h1>我的第一个 Web 页面</h1>
<p id="demo">我的第一个段落。</p>
<script>
document.getElementById("demo").innerHTML="段落已修改。";
</script>
</body>
</html>
3)document.write() 将文本写入html文档中
实例:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
<h1>我的第一个 Web 页面</h1>
<p>我的第一个段落。</p>
<button οnclick="myFunction()">点我</button>
<script>
function myFunction()
{
document.write(Date());
}
</script>
</body>
</html>
这里需要注意:html文档加载之后,我们点击button, myFunction()被调用, 之后由document.write(Date())将当前时间吸入html文档, 而html文档中之前的内容都会被覆盖.
4)console.log() 实现控制台输出
实例:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
<h1>我的第一个 Web 页面</h1>
<p>
浏览器中(Chrome, IE, Firefox) 使用 F12 来启用调试模式， 在调试窗口中点击 "Console" 菜单。
</p>
<script>
a = 5;
b = 6;
c = a + b;
console.log(c);
</script>
</body>
</html>
我们对这里所说的控制台输出可能有些陌生. google浏览器按下"fn+f12"会出现控制台. 而这里的c便输出到浏览器中的console了~
9.JS中的常量,变量,命名规则
在JS中, 常量被称为字面量, 常量/变量区分大小写. 命名规则(大驼峰, 小驼峰, 下划线)
10.一个小知识点:
我们在写JS脚本时, 通常会遇到一行写不下一个语句的情况, 这个时候我们应该怎么做?? 拆分部分字符串放到下一行, 这里要注意:拆分后要在前一行的末尾加上反斜杠
11.JS变量名的命名规则
可以以字母, $ _开头
12.JS数据类型
1)字符串
字符串, 单引号/双引号包围的任意文本. 这里注意: 如果我们使用双引号包围字符串, 而字符串中还可以使用单引号,反之相反.
2)数字
想必大家都知道java中有这么几种数据类型:byte,short,int,long,float,double. 而在JS中, 这几种类型的数据统称为数字.
3)布尔
4)数组
数组的声明: var str=new Array(); var str2=[];
数组的初始化: var str=new Array('a','b'); var str2=['a','b'];
5)对象
对象中的属性以键值对的形式存在, 例如:
var person={
firstname : junling,
lastname : wang,
};
问题来了,我们怎么去访问对象中的属性值呢?? 两种方法:
1)person.firstname 2)person[firstname]
6)Undefined,Null
我现在还没搞懂这两种数据类型真正的区别, 只知道它们的用法:
Undefined, 当我们声明一个变量, 并没有对它初始化. 这个时候我们用document.write()试图输出该变量, 会在浏览器中提示:Undefied
Null, 当我们用document.getElementById()试图获取指定元素, 当该元素不存在, 会在浏览器中提示:Null(空对象)
这里补充一个知识点:
我们知道JS中声明变量而不对其初始化, 它的数据类型是不确定的. 怎么才能做到仅声明变量时确定其数据类型呢??
利用new关键字, 例如: var str=new String;
13.JS对象
既然是对象, 它应该是包含属性, 方法的. 这里所说的属性是以键值对的形式存在的.
下面我们来看一个实例:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
<p>创建和使用对象方法。</p>
<p>对象方法是一个函数定义,并作为一个属性值存储。</p>
<p id="demo1"></p>
<p id="demo2"></p>
<script>
var person = {
firstName: "John",
lastName : "Doe",
id : 5566,
fullName : function()
{
return this.firstName + " " + this.lastName;
}
};
document.getElementById("demo1").innerHTML = "不加括号输出函数表达式：" + person.fullName;
document.getElementById("demo2").innerHTML = "加括号输出函数执行结果：" + person.fullName();
</script>
</body>
</html>
从上面的例子中我们可以看到JS中方法的定义形式: 方法名 function(){...}
怎么去调用JS对象中的方法呢? 对象名.方法名;
14.JS全局变量, 局部变量的生命周期, 作用域
1)生命周期:
局部变量: 从变量声明开始, 到其所在函数执行结束. 全局变量:从变量声明开始, 到页面关闭.
2)作用域:
局部变量:作用在函数内部. 全局变量:作用整个JS脚本部分
另外补充几个知识点:
1)我在菜鸟教程上看到这样一句话: 局部变量/函数可覆盖全局变量/函数, 全局变量/函数可覆盖window对象的变量/函数. 仔细想想,就会发现它所说的就是个"就近原则"的问题.
2)当我们在JS脚本中没有声明变量直接初始化,系统会默认它是一个全局变量.
15.html事件
这里我给出一个实例, 一笔跨过~~
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
<button οnclick="this.innerHTML=Date()">现在的时间是?</button>
</body>
</html>
对于上面这个例子,我们注意一下this关键字, 它表示元素本身. 意思是修改当前元素中的内容~
16.字符串
1)字符串索引
最低0.47元/天 解锁文章
332
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
