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
JavaScript使用赋值运算符给变量赋值:
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">&nbsp;码: <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>
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;
}
CSS代码

 

 

 

 

 

 

 

 

posted @ 2016-08-17 17:10  yxy_linux  阅读(248)  评论(0编辑  收藏  举报