javaScript基础
一、javaScript简介
JavaScript 是互联网上最流行的脚本语言，这门语言可用于 HTML 和 web，更可广泛用于服务器、PC、笔记本电脑、平板电脑和智能手机等设备。
JavaScript 是脚本语言
JavaScript 是一种轻量级的编程语言。
JavaScript 是可插入 HTML 页面的编程代码。
JavaScript 插入 HTML 页面后，可由所有的现代浏览器执行。
JavaScript 很容易学习。
二、JavaScript 用法
HTML 中的脚本必须位于 <script> 与 </script> 标签之间。
脚本可被放置在 HTML 页面的 <body> 和 <head> 部分中。
<script> 标签
如需在 HTML 页面中插入 JavaScript，请使用 <script> 标签。
<script> 和 </script> 会告诉 JavaScript 在何处开始和结束。
<script> 和 </script> 之间的代码行包含了 JavaScript:
<script> alert("我的第一个 JavaScript"); </script>
浏览器会解释并执行位于 <script> 和 </script>之间的 JavaScript 代码
<body> 中的 JavaScript
在本例中，JavaScript 会在页面加载时向 HTML 的 <body> 写文本：
<!DOCTYPE html> <html> <body> <h1>javascript写在body中</h1> <script> document.write("<h1>这是一个标题</h1>"); document.write("<p>这是一个段落</p>"); </script> </body> </html>
外部的 JavaScript
也可以把脚本保存到外部文件中。外部文件通常包含被多个网页使用的代码。
外部 JavaScript 文件的文件扩展名是 .js。
如需使用外部文件，请在 <script> 标签的 "src" 属性中设置该 .js 文件：
<!DOCTYPE html> <html> <body> <script src="myScript.js"></script> </body> </html>
外部脚本不能包含 <script> 标签。
三、JavaScript 语法
JavaScript 是一个程序语言。语法规则定义了语言结构。
JavaScript 是一个脚本语言。
它是一个轻量级，但功能强大的编程语言。
JavaScript 字面量
在编程语言中，一个字面量是一个常量，如 3.14。
数字（Number）字面量 可以是整数或者是小数，或者是科学计数(e)。
3.14 1001 123e5 12300000
字符串（String）字面量 可以使用单引号或双引号:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = 'John Doe';
</script>
</body>
</html>
表达式字面量 用于计算：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = 5 * 10;
</script>
</body>
</html>
数组（Array）字面量 定义一个数组：
[40, 100, 1, 5, 25, 10]
对象（Object）字面量 定义一个对象：
{firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"}
函数（Function）字面量 定义一个函数：
function myFunction(a, b) { return a * b;}
JavaScript 变量
在编程语言中，变量用于存储数据值。
JavaScript 使用关键字 var 来定义变量， 使用等号来为变量赋值：
var x, length x = 5 length = 6
JavaScript 操作符
JavaScript使用 算术运算符 来计算值:
| (5 + 6) * 10 |
| x = 5 y = 6 z = (x + y) * 10 |
JavaScript语言有多种类型的运算符：
| 类型 | 实例 | 描述 |
|---|---|---|
| 赋值，算术和位运算符 | = + - * / | 在 JS 运算符中描述 |
| 条件，比较及逻辑运算符 | == != < > | 在 JS 比较运算符中描述 |
JavaScript 语句
在 HTML 中，JavaScript 语句向浏览器发出的命令。
语句是用分号分隔：
| x = 5 + 6; |
| y = x * 10; |
JavaScript 关键词
JavaScript 语句通常于关键词为开头。 var 关键词告诉浏览器创建一个新的变量：
| var x = 5 + 6; |
| var y = x * 10; |
JavaScript 关键字
和其他任何编程语言一样，JavaScript 保留了一些关键字为自己所用。
JavaScript 同样保留了一些关键字，这些关键字在当前的语言版本中并没有使用，但在以后 JavaScript 扩展中会用到。
JavaScript 关键字必须以字母、下划线（_）或美元符（$）开始。
后续的字符可以是字母、数字、下划线或美元符（数字是不允许作为首字符出现的，以便 JavaScript 可以轻易区分开关键字和数字）。
以下是 JavaScript 中最重要的保留字（按字母顺序）：
| abstract | else | instanceof | super |
| boolean | enum | int | switch |
| break | export | interface | synchronized |
| byte | extends | let | this |
| case | false | long | throw |
| catch | final | native | throws |
| char | finally | new | transient |
| class | float | null | true |
| const | for | package | try |
| continue | function | private | typeof |
| debugger | goto | protected | var |
| default | if | public | void |
| delete | implements | return | volatile |
| do | import | short | while |
| double | in | static | with |
JavaScript 注释
不是所有的 JavaScript 语句都是"命令"。双斜杠 // 后的内容将会被浏览器忽略：
// 单行注释
/* 多行注释 多行注释 */
JavaScript 数据类型
JavaScript 有多种数据类型：数字，字符串，数组，对象等等：
| var length = 16; // Number 通过数字字面量赋值 var points = x * 10; // Number 通过表达式字面量赋值 var lastName = "Johnson"; // String 通过字符串字面量赋值 var cars = ["Saab", "Volvo", "BMW"]; // Array 通过数组字面量赋值 var person = {firstName:"John", lastName:"Doe"}; // Object 通过对象字面量赋值 |
JavaScript 函数
JavaScript 语句可以写在函数内，函数可以重复引用：
引用一个函数 = 调用函数(执行函数内的语句)。
| function myFunction(a, b) { return a * b; // 返回 a 乘于 b 的结果 } |
JavaScript 对大小写敏感。
JavaScript 对大小写是敏感的。
当编写 JavaScript 语句时，请留意是否关闭大小写切换键。
函数 getElementById 与 getElementbyID 是不同的。
同样，变量 myVariable 与 MyVariable 也是不同的。
JavaScript 字符集
JavaScript 使用 Unicode 字符集。
Unicode 覆盖了所有的字符，包含标点等字符。
如需进一步了解，请学习我们的 完整 Unicode 参考手册。
课堂练习
练习：
对话框：
.hide{
display:none;
}
1、按钮
2、点击按钮执行一个javaScript函数
3、函数内:
找到两个div， hide移除
4、按钮
找到两个div， hide加上
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" href="motai.css"/> </head> <body > <div> <input onclick="skipout()" type="button" value="登录主页面"/> </div> <div id="zhe"></div> <div style="background-color: #999999; width: 100%; height: 100%; z-index: 1000px" ></div> <div id="out"> <form> <div id="login"> <div> <p style="float: left">用户名: <input id="user" onmousedown="u()" type="text"/></p> <p id="u" style="float: left; border: 1px solid gainsboro;display: none;">请输入用户名，不能为空</p> </div> <div> <p style="float: left">密 码: <input id="passwd" onmousedown="p()" type="password"/></p> <p id="p" style="float: left; border: 1px solid gainsboro;display: none">请输入6位数的密码</p> </div> <div> <input class="submit" onclick="myFunc()" type="submit" value="登录"/> </div> <br><br><br><br> </div> </form> </div> <script> function myFunc(){ var users=document.getElementById('user').value; if (users.length==0){ alert("用户名不能为空"); } var passwds=document.getElementById('passwd').value; if(passwds.length==0){ alert("密码不能为空"); }else if(passwds.length < 6){ alert("请输入6位数的密码"); }else{ alert("登录成功"); } } function u(){ document.getElementById('u').style.display='inline'; } function p(){ document.getElementById('p').style.display='inline'; } function skipout(){ document.getElementById('zhe').style.display='block'; document.getElementById('out').style.display='block'; } </script> </body> </html>
.submit{
width: 240px;
height: 30px;
border: 1px outset gainsboro;
}
#login{
float: left;
}
#out{
position: fixed;
top: 50%;
left: 50%;
width: 500px;
height: 300px;
display: none;
overflow: auto;
margin: -250px 0 0 -280px;
background-color: #ffffff;
/*border: 1px solid #999;*/
/*border: 1px solid rgba(0, 0, 0, 0.3);*/
*border: 1px solid #999;
/* IE6-7 */
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
-webkit-box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
-webkit-background-clip: padding-box;
-moz-background-clip: padding-box;
background-clip: padding-box;
}
#zhe{
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 0;
background-color: #000000;
opacity: 0.8;
display: none;
}
