step by step.
目录
严格区分大小写
点击事件:
JavaScript关键字/语句标识符
数据类型
对象Object
创建对象方法
事件
循环
标签
正则表达式
异常
未定义adddlert->
throw——
调试工具debugger
编辑 JS严格模式
表单
严格区分大小写
点击事件:
<...onclick="myFunction()"> </...>
function myFunction()
{
x = document.getElementById("demo")
x=style.color="#..."
}
<script>JS代码</script>
JavaScript关键字/语句标识符
JavaScript 语法 | 菜鸟教程JavaScript 语法 JavaScript 是一个程序语言。语法规则定义了语言结构。 JavaScript 语法 JavaScript 是一个脚本语言。 它是一个轻量级,但功能强大的编程语言。 JavaScript 字面量 在编程语言中,一般固定值称为字面量,如 3.14。 数字(Number)字面量 可以是整数或者是小数,或者是科学计数(e)。 3.14 1001 123e5 尝试一下 » 字符串(Stri..https://www.runoob.com/js/js-syntax.html
<p id="demo"></p>
<script>
function myFunction(){
var carname="Volvo";
document.getElementById("demo").innerHTML=carname;
}
</script>
数据类型
对象Object
<script>
var person=
{
firstname : "hello bdy",
lastname : "Doe",
id : 5566
};
document.write(person.firstname + "<br>");
document.write(person["lastname"] + "<br>");
</script>
创建对象方法
<p id="demo"></p>
<script>
var person = {
firstName: "b",
lastName : "dy",
id : 5566,
fullName : function()
{
return this.firstName + " " + this.lastName;
}
};
document.getElementById("demo").innerHTML = person.fullName();
</script>
<p>
有两种方式可以访问对象属性:
</p>
<p>
你可以使用 .property 或 ["property"].
</p>
<p id="demo"></p>
<script>
var person = {
firstName : "b",
lastName : "dy",
id : 5566
};
document.getElementById("demo").innerHTML =
person.firstName.property + " "+ " "+ person.id.property+ " " + person.property;
</script>
事件
菜鸟教程在线编辑器https://www.runoob.com/try/try.php?filename=tryjs_event_onclick
<button onclick="this.innerHTML=Date()">现在的时间是?</button>
点击按钮后文字修改成当前时间
循环
<script>
cars=["BMW","Volvo","Saab","Ford"];
var i=0,len=cars.length;
for (; i<len; i++){
document.write(cars[i] + "<br>");
}
</script>
标签
<script>
cars=["BMW","Volvo","Saab","Ford","yeah","shuai"];
list:{
document.write(cars[0] + "<br>");
document.write(cars[1] + "<br>");
document.write(cars[2] + "<br>");
break list;
document.write(cars[3] + "<br>"); }
document.write(cars[4] + "<br>");
document.write(cars[5] + "<br>");
</script>
正则表达式
replace(),search()
菜鸟教程在线编辑器
<button onclick="myFunction()">点我</button>
<p id="demo">Visit Microsoft!</p>
<script>
function myFunction() {
var str = document.getElementById("demo").innerHTML;
var txt = str.replace(/micros/i,"Runoob");
document.getElementById("demo").innerHTML = txt;
}
</script>
->
异常
语法:
try {
... //异常的抛出
} catch(e) {
... //异常的捕获与处理
} finally {
... //结束处理
}
未定义adddlert->
<script>
var txt="";
function message(){
try {
adddlert("Welcome guest!");
}
catch(err) {
txt="本页有一个错误。\n\n";
txt+="错误描述:" + err.message + "\n\n";
txt+="点击确定继续。\n\n";
alert(txt);
}
}
</script>
</head>
<body>
<input type="button" value="查看消息" onclick="message()" />
throw——
<script>
function myFunction() {
var message, x;
message = document.getElementById("message");
message.innerHTML = "";
x = document.getElementById("demo").value;
try {
if(x == "") throw "值为空";
if(isNaN(x)) throw "不是数字";
x = Number(x);
if(x < 5) throw "太小";
if(x > 10) throw "太大";
}
catch(err) {
message.innerHTML = "错误: " + err;
}
}
</script>
调试工具debugger
JS严格模式
JavaScript 严格模式(use strict) | 菜鸟教程JavaScript 严格模式(use strict) JavaScript 严格模式(strict mode)即在严格的条件下运行。 使用 'use strict' 指令 'use strict' 指令在 JavaScript 1.8.5 (ECMAScript5) 中新增。 它不是一条语句,但是是一个字面量表达式,在 JavaScript 旧版本中会被忽略。 'use stri..https://www.runoob.com/js/js-strict.html
表单
<script>
function validateForm() {
var x = document.forms["myForm"]["fname"].value;
if (x == null || x == "") {
alert("需要输入名字。");
return false;
}
}
</script>
</head>
<body>
<form name="myForm" action="demo_form.php"
onsubmit="return validateForm()" method="get">
名字: <input type="text" name="fname">
<button type="submit" value="提交">提交</button>
</form>