JavaScript-基础

前言

HTML定义了网页的内容

CSS描述了网页的布局

JavaScript描述了网页的行为

JavaScript简介

JavaScript是一种轻量级的解释脚本语言，是弱类型语言。用于修改标签（增，删，修改标签的属性及内容）和属性。

JavaScript可用于 HTML 和 web，更可广泛用于服务器、PC、笔记本电脑、平板电脑和智能手机等设备。

Java是可以在浏览器中运行，插入HTML页面后，可由浏览器执行。

HTML引入JavaScript

1.脚本

HTML中的脚本必须位于<script>与</script>标签之间。脚本可以被放置在HTML页面的<body>和<head>部分中。通常的做法是把函数放入 <head> 部分中，或者放在页面底部。这样就可以把它们安置到同一处位置，不会干扰页面的内容。

2.<script>标签

JavaScript代码可以放在<script>与</script>标签之间。老旧的实例可能会在 <script> 标签中使用type="text/javascript"。现在已经不必这样做了。JavaScript 是所有现代浏览器以及 HTML5 中的默认脚本语言。

3.内部的JavaScript

JavaScript代码直接放在<script>标签之内。如下所示：
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>标题</title>
</head>
<body>
    <script>
        function myFunction(){
            document.getElementById("demo").innerHTML="我的第一个 JavaScript 函数";
        }
    </script>
</body>
</html>
其中，<script>可以放置在<head>、<body>标签里面，也可以放置在<body>标签后面。

4.外部的JavaScript

将JavaScript代码保存到外部文件中，外部文件的文件后缀扩展名为.js。引入外部JavaScript需要在<script>标签的"src"属性中设置该.js外部文件路径。如下所示：
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>标题</title>
</head>
<body>
    <script src="myScript.js"></script>
</body>
</html>

//上面在HTML页面中引入了一个名为myScript.js的外部JavaScript文件
上面的myScript.js外部文件如下所示：
function myFunction()
{
    document.getElementById("demo").innerHTML="我的第一个 JavaScript 函数";
}
注意：外部JavaScript脚本文件不能包含<script>标签。

注意事项

如果javascript里面，有直接操作页面元素的代码，则不能在head里面引用，而应该放到body内引用。
<!DOCTYPE html>
<html><head>
 <meta charset="utf-8">
 <title>我的网页</title>
 <script src="js/jquery-2.1.1.min.js"></script>
 <head>
<body>
 
 <script src="js/home.js"></script>
 
</body>
参考：https://blog.csdn.net/lazyyusky/article/details/38419439

JavaScript的编译

JavaScript是脚本语言，浏览器在读取代码时，会逐行的执行脚本代码。而对于传统编程来说，会在执行前对所有代码进行编译。

JavaScript的输出

JavaScript没有任何打印或者输出的函数，可以通过如下不同的方式来输出数据：

使用window.alert()弹出警告框
<!DOCTYPE html>
<html>
<body>
    <script>
        window.alert(5 + 6);
    </script>
</body>
</html>
效果图如下：

使用document.write()方法将内容写到HTML文档中
<!DOCTYPE html>
<html>
<body>
    <h1>我的第一个 Web 页面</h1>
    <p>我的第一个段落。</p>

    <script>
        document.write(Date());
    </script>

</body>
</html>
运行结果为：显示出时间

使用innerHTML获取或插入HTML元素内容

使用doucument.getElementById(id)方法来访问某个HTML元素（该HTML元素需要使用对应的id属性来标识），然后使用innerHTML来获取或者插入元素内容。如下所示：
<!DOCTYPE html>
<html>
<body>
    <h1>我的第一个 Web 页面</h1>
    <p id="demo">我的第一个段落</p>

    <script>
        document.getElementById("demo").innerHTML = "段落已修改。";
    </script>

</body>
</html>
运行结果为：

使用console.log()写入到浏览器的控制台上
<!DOCTYPE html>
<html>
<body>
<h1>我的第一个 Web 页面</h1>

    <script>
        a = 5;
        b = 6;
        c = a + b;
        console.log(c);
    </script>

</body>
</html>
运行结果：会在浏览器控制台上打印显示11

JavaScript的语法

1.JavaScript字面量

固定值为字面量，如3.14。

2.JavaScript语句使用分号“;”分隔。

3.avaScript大小写

JavaScript对大小写是敏感的。

4.空格

JavaScript会忽略多余的空格。

5.JavaScript字符集

JavaScript使用Unicode字符集

JavaScript变量

变量用于储存数据值。在JavaScript中，使用关键字var来定义变量，使用等号（=）来为变量赋值

变量命名规则

变量必须以字母开头，变量也能以 $ 和 _ 符号开头（不过不推荐这么做）

变量名称可包含字母、数字、下划线和美元符号

JavaScript 语句和 JavaScript 变量都对大小写敏感。（例如y和Y是不同的变量）

保留字（比如 JavaScript 的关键词）无法用作变量名称

变量定义
<script>
    var x;
    x = 5;
    var y = 10;
</script>
注意事项

1.JavaScript变量均为对象，当声明一个变量时，就创建了一个新的对象。

2. 如果变量被声明了但是未被初始化赋值的话，其默认值为undefined。

3. 重新声明的JavaScript变量若未重新赋值，则其值仍为原先的值。

注意：JavaScript中定义的变量类型根据实际赋值的类型而确定。如下所示：
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript">
            //JavaScript是弱类型
            var index = 1;
            var s = "hello world";
            var s1 = s;
            var b = true;
            var c = 'c';
            var d = 3.12;
            //typeof()返回对象的数据类型
            //整数和小数都是number类型
            console.log(typeof(index)); //number
            console.log(typeof(d));     //number
            //true和false是boolean类型
            console.log(typeof(b));     //boolean
            //字符串和字符都是string类型，即可以使用双引号和单引号定义字符串
            console.log(typeof(s));     //string
            console.log(typeof(s));     //string
            console.log(typeof(c));     //string
            var num;//未赋值
            console.log(num); //undefined
            //未定义直接使用报错
            console.log(sum); //报错：sum is undefined
            //数组
            var array = ["111","222","333"];
            console.log(array[2]);
        </script>
    </head>
    <body>	
    </body>
</html>

JavaScript的数据类型

JavaScript的数据类型分为两种类型：值类型（基本类型）和引用数据类型，如下所示：

值类型（基本类型）

字符串
字符串可以使用单引号或者双引号均可。

如：var x = "hello"; var y = 'hello';

数字
JavaScript只有一种数字类型，数字可以带小数点，也可以不带。

如：var x = 34.00; var y = 34;

布尔布尔（逻辑）只能有两个值：true或者false

空（null）
可以通过为变量赋值null来清空变量的值

未定义（Undefined） 表示某个变量没有具体的值

Symbol Symbol是ES6引入的一种新的原始数据类型，表示独一无二的值。

引用数据类型

数组
数组下标从0开始，定义数组如下所示：

方式一：var names = new Array();

names[0] = "Tom";

names[1] = "James";

方式二：var names = new Array("Tom", "James");

方式三：var names = ["Tom", "James"];

对象

函数（function)

JavaScript对象

1.对象定义

对象由花括号"{}"分割，在花括号内部，对象的属性以键值对（name:value)的形式来定义，每个属性之间用逗号隔。如下所示：
 var person = {firstname:"John", lastname:"Doe", id:123};
或者跨越多行，空格和换行都是允许的：
var person = {
    firstname:"John", 
    lastname:"Doe", id:123
};
2.对象属性

上面定义的对象的键值对就是对象属性，有两种访问方式：

方式一

name = person.firstname;

方式二

name = person["firstname"];

3.对象方法

定义

对象的方法定义了一个函数，并作为对象的属性储存。对象方法定义：methodName : function(...){}，如下所示：
var person = {
    firstName: "Tom",
    fullName: function(){
        return this.firstName;
    }
};
访问

方式一：person.fullName()；加上括号会输出函数执行结果：Tom

方式二：person.fullName 不加括号会输出函数表达式：function(){return this.firstName;}

JavaScript函数

1.语法

JavaScript函数就是包裹在花括号内的代码块，使用关键字function定义：
function functionName(参数列表){
    //代码块
}
如果需要函数带返回值，则使用return关键字，如下所示：
function sum(int x, int y){
    return x + y;
}
如果需要退出函数，同样使用return关键字，如下所示：
function sum(int x, int y){
    if(x > y){
        //退出函数
        return;
    }
    return x + y;
}
2.局部变量

在JavaScript函数内部声明的变量是局部变量，所以也就只能在函数内部访问它。一旦函数运行完毕，局部变量就会被销毁。

3.全局变量

在JavaScript函数外声明的变量是全局变量，网页上的所有脚本和函数都能访问它。

4.变量的生命周期

变量的生命周期从它们被声明的时候开始：

局部变量会在函数运行结束后销毁删除

全局变量会在页面关闭后被销毁删除

5.向未声明的 JavaScript 变量分配值

把值赋给尚未声明的变量，该变量将被自动作为 window 的一个属性。

JavaScript事件

1.事件概念

事件就是发生在HTML元素上的事件，可以是浏览器行为，也可以是用户行为，如下所示实例：

HTML页面完成加载

HTML的按钮被点击

当在HTML页面使用JavaScript时，JavaScript可以触发这些事件。

2.常见的HTML事件

1.onchange HTML元素改变

2.onclick 用户点击HTML元素

3.onmouseover 用户在一个HTML元素上移动鼠标

4.onmouseout 用户从一个HTML元素上移开鼠标

5.onkeydown 用户按下键盘按键

6.onload 浏览器已经完成页面的加载

3.事件的引入
<HTML元素 事件="JavaScript代码或者函数">
如下面所示：
<!DOCTYPE html>
<html>
<head> 
    <meta charset="utf-8"> 
    <title>事件案例</title> 
</head>
<body>
    <p>点击按钮执行 <em>displayDate()</em> 函数.</p>
    <button οnclick="displayDate()">点这里</button>
    <script>
        function displayDate(){
            document.getElementById("demo").innerHTML=Date();
        }
    </script>
    <p id="demo"></p>
</body>
</html>
运行结果如下所示：

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 functoin private typeof

debugger goto protected var

default if public void

delete implements return volatile

do import short while

double in static with

JavaScript注释

单行注释
//注释
多行注释
/**
 *
 */

JavaScript字符串

1.定义

JavaScript的字符串可以使用双引号（"")和单引号（'')来表示。如下所示：
如：var x = "hello"; var y = 'hello';
2.字符串中使用引号

如果字符串中的引号与定义字符串的引号相同，可以使用转义字符，如下所示：
var x1 = "It's right";  //结果为It's right
var x2 = 'It\'s right';  //结果为It's right
var x3 = "He is called \"Tom\"";  //结果为He is called Tom
var x4 = 'He is called "Tom"';    //结果为He is called Tom

JavaScript操作标签对象

获取标签对象

有如下方法：

document.getElementById("")

用于获取单个标签对象，该标签必须有id属性。

document.getElementByName("")

按照标签的name属性获取，返回标签对象数组

document.getElementByClassName("")

按照标签的class属性获取，返回标签对象数组

document.getElementByTagName

按照标签名字获取，返回标签对象数组

修改标签样式

标签对象.style.样式名 = 样式值

如：div1.style.width = "200px";

标签对象.style.["样式名"] = 样式值

如：div1.style.["width"] = "200px";

通过修改class属性，换一个class样式

如：div1.className = "newClassName";

注意：标签的class属性，在js中使用className，而不是classname

自定义属性

如下所示：
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            .box{
                height: 100px;
                width: 100px;
                background-color: red;
                margin: 5px;
            }
        </style>
    </head>
    <body>
        <div class="box" id="div01"></div>
        <div class="box" id="div02"></div>
        <div class="box" id="div03"></div>
    </body>
    <script type="text/javascript">
        var objs = document.getElementsByName("<div");
        //getElementsByClassName获取一组标签
        var arrDiv = document.getElementsByClassName("box");
        for(var j=0; j<arrDiv.length; j++){
            arrDiv[j].index = 1;
            arrDiv[j].onclick = function(){
                //this在事件代码中，代表的是触发事件的标签对象
                if(this.index == 1){
                    this.style.backgroundColor = "orange";
                    this.index = 0;
                }else{
                    this.style.backgroundColor = "red";
                    this.index = 1;
                }
            }
        }
    </script>
</html>
如上所示，arrDiv[i].index = 1;就为div标签自定义了一个index属性。注意：上面在点击事件里面如果要使用arrDiv[i]的话，要使用this。

运行效果：点击div后，div就从orange变为red，或者从red变为orange。

innerText

获取标签及子标签的文本内容

如:alert(span.innerText);

修改标签内容

如:span.innerText = "";

innerHTML

获取标签及子标签的所有HTML内容（包括注释）

如:alert(div.innerHTML);

修改标签，添加标签
div.innerHTML += "<ul>" +
                       "<li>li元素</li>" +
                   "</ul>";

JavaScript操作表单

获取表单数据

对于表单数据，使用标签对象.value获取其值。如下所示：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
    <h1>JavaScript 验证输入</h1>
    <p>请输入 1 到 10 之间的数字：</p>    
    <input id="numb">    
    <button type="button" οnclick="myFunction()">提交</button>
    <p id="demo"></p>

    <script>
        function myFunction() {
            var x, text;
            // 获取 id="numb" 的值
            x = document.getElementById("numb").value;
            //如果输入的值 x 不是数字或者小于 1 或者大于 10，则提示输入错误
            if (isNaN(x) || x < 1 || x > 10) {
                text = "输入错误";
            } else {
                text = "输入正确";
            }
            document.getElementById("demo").innerHTML = text;
        }
</script>
</body>
</html>

HTML表单自动验证

HTML 表单验证也可以通过浏览器来自动完成。添加required属性，如果表单字段的值为空, required 属性会阻止表单提交：

<form action="demo_form.php" method="post">
  <input type="text" name="fname" required="required">
  <input type="submit" value="提交">
</form>

约束验证

this关键字

this关键字会随着执行环境而又不同的含义：

在方法中：this表示该方法所属的对象
var person = {
  firstName: "John",
  lastName : "Doe",
  id       : 5566,
  fullName : function() {
    return this.firstName + " " + this.lastName;
  }
};
如果单独使用：this表示全局对象

在浏览器中，window 就是该全局对象为 [object Window]。严格模式下，如果单独使用，this 也是指向全局对象。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
    <p id="demo"></p>
    <script>
        var x = this;
        document.getElementById("demo").innerHTML = x;
    </script>
</body>
</html>
//运行结果：[object Window]
如果在函数中（默认）：this 表示全局对象。在严格模式下，this 是未定义的(undefined)。

在事件中的this：在 HTML 事件句柄中，this 指向了接收事件的 HTML 元素：
<button οnclick="this.style.display='none'">
    点我后我就消失了
</button>

JSON

定义

JSON（ JavaScript Object Notation）是用于存储和传输数据的格式，是一种轻量级的数据交换格式。通常用于服务端向网页传递数据。

实例
{"sites":[
    {"name":"Runoob", "url":"www.runoob.com"}, 
    {"name":"Google", "url":"www.google.com"},
    {"name":"Taobao", "url":"www.taobao.com"}
]}
JSON对象

JSON对象保存在大括号里面（{}）。如下所示：
{"name":"Runoob", "url":"www.runoob.com"}
JSON数组

JSON 数组保存在中括号内（[]）。数组里面可以包含很多个对象，使用逗号分隔。

JSON字符串与JavaScript对象转换

函数描述

JSON.parse() 用于将一个 JSON 字符串转换为 JavaScript 对象。

JSON.stringify() 用于将 JavaScript 值转换为 JSON 字符串。

函数	描述
JSON.parse()	用于将一个 JSON 字符串转换为 JavaScript 对象。
JSON.stringify()	用于将 JavaScript 值转换为 JSON 字符串。

javascript:void(0)

javascript:void(0)，该操作符指定要计算一个表达式但是不返回值。

语法格式
<script type="text/javascript">
    void func()
    javascript:void func()
    或者
    void(func())
    javascript:void(func())
</script>
href="#"与href="javascript:void(0)"的区别

使用 # 来定位页面的具体位置，格式为：# + id。javascript:void(0), 仅仅表示一个死链接。

Java弹出框

普通的弹出框

使用alert("xxx")即可

带有确定和取消的返回值弹出框

使用confirm("xxx")，弹出框会有默认两个选择，一个取消，一个确认。点击取消后会返回false，点击确认后会返回true。

luckyliuqs

发布了131 篇原创文章 · 获赞 39 · 访问量 4万+

私信关注

字符串	字符串可以使用单引号或者双引号均可。如：var x = "hello"; var y = 'hello';
数字	JavaScript只有一种数字类型，数字可以带小数点，也可以不带。如：var x = 34.00; var y = 34;
布尔	布尔（逻辑）只能有两个值：true或者false
空（null）	可以通过为变量赋值null来清空变量的值
未定义（Undefined）	表示某个变量没有具体的值
Symbol	Symbol是ES6引入的一种新的原始数据类型，表示独一无二的值。

方式一：person.fullName()；	加上括号会输出函数执行结果：Tom
方式二：person.fullName	不加括号会输出函数表达式：function(){return this.firstName;}

1.onchange	HTML元素改变
2.onclick	用户点击HTML元素
3.onmouseover	用户在一个HTML元素上移动鼠标
4.onmouseout	用户从一个HTML元素上移开鼠标
5.onkeydown	用户按下键盘按键
6.onload	浏览器已经完成页面的加载

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	functoin	private	typeof
debugger	goto	protected	var
default	if	public	void
delete	implements	return	volatile
do	import	short	while
double	in	static	with

前言

JavaScript简介

HTML引入JavaScript

JavaScript的编译

JavaScript的输出

JavaScript的语法

JavaScript变量

JavaScript的数据类型

JavaScript对象

JavaScript函数

JavaScript事件

JavaScript操作符

JavaScript关键字

JavaScript注释

JavaScript字符串

JavaScript操作标签对象

JavaScript操作表单

this关键字

JSON

javascript:void(0)

Java弹出框

猜你喜欢