一些小操作 · 前瞻
1.直接写入html输出流
使用语句document.write("……"),样例如下:(只能在输出流中使用,如果已经加载了文档,会覆盖)
<script>
document.write("<h1>这是一个标题</h1>");
document.write("<p>这是一个段落。</p>");
</script>
2.对事件反应
onclick()是鼠标点击的事件,alert()是出一个弹窗,点击按钮出弹窗的样例如下:
<button type="button" onclick="alert('欢迎!')">点我!</button>
3.改变html的内容
通过getElememtById("..."),查找到需要被替换的元素,接着用.innerHTML=...的语句对其进行替换。Date()函数可以显示当前日期。一个样例如下:(大概函数什么的需要写在script里)
<p id="demo">
JavaScript 能改变 HTML 元素的内容。
</p>
<script>
function myFunction()
{
x=document.getElementById("demo"); // 找到元素
x.innerHTML="Hello JavaScript!"; // 改变内容
}
</script>
<button type="button" onclick="myFunction()">点击这里</button>
当然,改变内容也能改变图像,即替换src即可,match()可以提供简单的字符串匹配
<script>
function changeImage(){
var s = document.getElementById('myimage');
s.src = s.src.match('bulboff')?"/images/pic_bulbon.gif":"/images/pic_bulboff.gif";
}
</script>
<img id="myimage" onclick="changeImage()" src="/images/pic_bulboff.gif" width="100" height="180">
样式也是可以改变的
<script>
function myFunction()
{
x=document.getElementById("demo") // 找到元素
x.style.color="#ff0000"; // 改变样式
}
</script>
4.验证输入
通过isNaN()可以判断是否是数字,不过想要更严格的判断还需要正则表达式。
<input id="demo" type="text">
<script>
function myFunction()
{
var x=document.getElementById("demo").value;
if(isNaN(x)||x.replace(/(^\s*)|(\s*$)/g,"")==""){
alert("不是数字");
}
}
用法
1. HTML 中的脚本必须位于 <script> 与 </script> 标签之间。
脚本可被放置在 HTML 页面的 <body> 和 <head> 部分中。
通常的做法是把函数放入 <head> 部分中,或者放在页面底部。这样就可以把它们安置到同一处位置,不会干扰页面的内容。
2. 外部的JavaScript可以这样调用
<script src="myScript.js"></script>
输出
- 使用 window.alert() 弹出警告框。
- 使用 document.write() 方法将内容写到 HTML 文档中。
- 使用 innerHTML 写入到 HTML 元素。
- 使用 console.log() 写入到浏览器的控制台。(F12调试模式console可见)
语法
1. 数字(Number)字面量 可以是整数或者是小数,或者是科学计数(e)。
2. 字符串(String)字面量 可以使用单引号或双引号。
3. 表达式字面量 用于计算(如5 + 11)。
4. 数组(Array)字面量 定义一个数组(方括号)
(如:[40, 100, 1, 5, 25, 10])
5. 对象(Object)字面量 定义一个对象(花括号)
(如:{firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"})
6. 函数(Function)字面量 定义一个函数(function)
(如:function myFunction(a, b) { return a * b;})
7. 使用关键字 var 来定义变量, 使用等号来为变量赋值
8. JavaScript 的语句用分号分割;对大小写敏感;在文本字符串中使用反斜杠对代码行进行换行;如果重新声明 JavaScript 变量,该变量的值不会丢失;JavaScript 拥有动态类型。这意味着相同的变量可用作不同的类型;
9.关于创建数组的几种方式:
①var cars=new Array();(之后可以通过cars[0],cars[1] 等,挨个赋值)
②var cars=new Array("Saab","Volvo","BMW");
③var cars=["Saab","Volvo","BMW"];
10.关于创建对象及寻址:
①var person={firstname:"John", lastname:"Doe", id:5566};(这是使用花括号进行创建)
②寻址:name=person.lastname; 或者是 name=person["lastname"];
③对象方法的创建:methodName : function() { code lines }
11.用null来清空变量,new声明变量的类型。
12.在 JavaScript 里,函数返回值可以有也可以没有,不需要特别去声明。
13.如果您把值赋给尚未声明的变量,该变量将被自动作为 window 的一个属性。(属性是可以配置全局属性的,但是全局变量是不可以配置全局属性的)(区别就是有没有var关键字)(如果变量在函数内没有声明(没有使用 var 关键字),该变量为全局变量。)
事件
事件 | 描述 |
---|---|
onchange | HTML 元素改变 |
onclick | 用户点击 HTML 元素 |
onmouseover | 用户在一个HTML元素上移动鼠标 |
onmouseout | 用户从一个HTML元素上移开鼠标 |
onkeydown | 用户按下键盘按键 |
onload | 浏览器已完成页面的加载 |