JavaScript
(简称:JS
)是一门跨平台、面向对象的脚本语言。用来控制网页行为的,它能使网页可交互js
和java
是完全不同的语言,不论是概念还是设计。但是基础语法类似js
是遵守ECMAScript
的标准的js
代码定义在HTML
页面中
js
代码必须位于
标签之间HTML
文档中,可以放在任意地方,放置任意数量的
元素的底部,可改善显示速度js
代码定义在外部js
文件中,然后引入到HTML
页面中
js
文件中,只包含js
代码,不包含
标签
标签不能自闭和,即不能写称这种形式
java
一样,变量名、函数名以及其他一切东西都是区分大小写的//注释内容
/*注释内容*/
//判断
if (count==3) {
alert(count);
}
window.alert()
写入警告框,window.
可以省略document.write()
写入HTML输出console.log()
写入浏览器控制台 /* alert("Hello World"); */
// 方式一:弹出警告框
window.alert("Hello World");
// 方式二:写入html页面中
document.write("Hello JavaScript");
// 方式三:控制台输出
console.log("Hello JS");
js
中用var
关键字(variable
)来声明变量
var
定义出来的变量作用域比较大,是全局变量var
定义出来的变量是可以重复定义的js
是一门弱类型语言,变量可以存放不同类型的值
变量名需要遵守如下规则:
_
)或美元符号($
)ECMAScript 6
(以下统一简称ES6
)新增了let
关键字来定义变量。它的语法类似于var
,但是所声明的变量,只在let
关键字所在的代码块内有效,且不允许重复声明
ES6
新增了const
关键字,用来声明一个只读的常量,一旦声明,常量的值就不能改变
//var定义变量
var a = 10;
document.writeln(a);
a = "张三";
document.writeln(a);
//特点一:作用域比较大,全局变量
{
var b="李四";
}
document.writeln(b);
// 特点二:可以重复定义
var a = "王五";
document.writeln(a);
//let:局部变量,不能重复定义
{
let c = 1;
// document.writeln(c);
}
document.writeln(c);
const d = 123;
// d = 1234;
js
中分为:原始类型 和 引用类型number
:数字(整数、小数、Nan(Not a Number)
string
:字符串,单双引都可以boolean
:布尔类型。true
, false
null
:对象为空undefined
:当声明的变量未初始化时,该变量的默认值时undefined
typeof
运算符可以获取数据类型//原始数据类型
alert(typeof 3); //number
alert(typeof 3.12); //number
alert(typeof "A"); //string
alert(typeof 'Hello'); //string
alert(typeof true); //boolean
alert(typeof false); //boolean
alert(typeof null); //object
var a = 12;
alert(typeof a); //number
var b;
alert(typeof b); //undefined
js
中的运算符与java
中基本一致,除了比较运算符中的全等运算符(===
)
==
会进行类型转换,===
不会进行类型转换NAN
boolean
:
Number
:0
和NaN
为false
,其他均转为true
String
:空字符串为false
,其他均转为true
Null
和undefined
均转为false
//三等运算符和双等运算符
var number_a = 20;
var str_a = "20";
var a = 20;
alert(a === str_a); //false
alert(a === number_a);//true
alert(a==str_a);//true
alert(a==number_a);//false
//类型转化
//其他类型转换为数字
alert(parseInt("12"));//12
alert(parseInt("12A45"));//12
alert(parseInt("A45"));//NaN
//其他类型转换为boolean
if(0){
alert("0转换为false");
}
if(NaN){
alert("NaN转换为false");
}
if(1){
alert("除0和NaN,其他转换为true");
}
if(""){
alert("空字符串转换为false");
}
if(null){
alert("null转换为false");
}
if(undefined){
alert("undefined转换为false");
}
与java
的一致
参考官方文档
函数(方法)是被设计为执行特定任务的代码块。
js
函数通过function
关键字进行定义,语法为:
function 函数名(参数1, 参数2, ...){
函数体
}
var 函数名字=function(参数1, 参数2, ...) {
函数体
}
return
即可。这两点上来看是与python
是类似的函数名称(实际参数列表)
alert(fun(12, 21));
//定义方式1
function fun(a, b) {
return a+b;
}
//定义方式2
var add=function(a, b){
return a + b;
}
alert(add(100, 200));//300
//函数调用
//接收小于参数列表长度的参数
alert(add(12)); //NaN
//接收多余参数列表长度的参数
alert(add(10, 20, 30, 40));//30
在js中,Array
, String
, JSON
是js的三大基础对象,还有另外两类对象,分别为BOM
和DOM
。
js中Array
对象用于定义数组
定义
方式一:
var 变量名 = new Array(元素列表);
例如:
var arr = new Array(1, 2, 3, 4, 5);
方式二:
var 变量名 = [元素列表];
例如:
var arr = [1, 2, 3, 4, 5];
访问:
变量名[索引] = 值;
length
:设置或返回数组中元素的数量forEach()
:遍历数组中每个有值的元素,并调用一次传入的函数
箭头函数(ES6
):是用来简化函数定义语法的。具体形式为:(参数列表)=>{函数体}
,
如果需要给箭头函数起名字:var 函数名=(参数列表)=>{函数体}
push(添加的元素)
:将新元素添加到数组的末尾,并返回新的长度,可以添加多个元素
splice(删除位置的起始索引, 删除元素的个数)
:从数组中删除元素
var 变量名 = new String("...");
var 变量名 = "..."
length
:字符串的长度
charAt(pos: number)
:返回指定位置的字符indexOf(searchString: string)
:检索字符串,如果检索的字符串存在,则返回该字符串第一次出现的位置,否则返回-1
trim()
:去除字符串两边的空格,并返回一个新的字符串,不会改变原有的字符串substring(startIndex: number, endIndex?: number|undefined)
:提取字符串中两个指定的索引号之间的字符
java
一样,左闭右开//创建字符串对象
//方式一
var str1 = new String("HelloWorldWorld");//String {'HelloWorldWorld'}
//方式二
var str2 = "HelloString";//HelloString
console.log(str1);
console.log(str2);
//length
console.log(str1.length);//15
console.log(str2.length);//11
//charAt
console.log(str1.charAt(4));//o
//indexof
console.log(str1.indexOf("World"));//5
console.log(str1.indexOf("world"));//-1
//trim
var str3 = " Hel lo ";
var str4 = str3.trim();
console.log(str3);// Hel lo
console.log(str4);//Hel lo
//substring
var str5 = str2.substring(5);//String
var str6 = str2.substring(5, 9);//stri
console.log(str5);
console.log(str6);
定义格式:
var 对象名 = {
属性名1: 属性值1,
属性名2: 属性值2,
属性名3: 属性值3,
.
.
.
函数名称: function(形参列表){
函数体
},
//函数的简化格式
函数名称(形参列表){
函数体;
},
.
.
.
};
调用格式
对象名.属性名;
对象名.函数名(实参列表);
JavaScript
对象标记法定义
var 变量名 = '{"key1": value1, "key2": value2, ...}'
value
的数据类型为:
true
或false
)JSON字符串转换为JS对象
var jsObject = JSON.parse(jsonStr);
var jsonStr = JSON.stringify(jsObject);
//自定义对象
var Student = {
name: "Tom",
age: 18,
study: function () {
alert("18岁的Tom在学习");
},
//在对象里面函数的简化格式
eat() {
alert("Tom在吃饭");
}
}
//调用对象
/* alert(Student.name);
Student.study(); */
/*
`value`的数据类型为:
1. 数字(整数或浮点数)
2. 字符串(在双引号当中)
3. 逻辑值(`true`或`false`)
4. 数组(在方括号中)
5. 对象(在花括号中)
6. null */
//定义一个JSON对象
var json = '{"ID": 2122, "name": "Tome", "flag": true, "likes":["C++", "Java", "Python"]}';
alert(json.name);
//转换为js对象
var obj = JSON.parse(json);
alert(obj.name);
//转换为json对象
var json1 = JSON.stringify(obj);
alert(json1);
Window
:浏览器窗口对象Navigator
:浏览器对象Screen
:屏幕对象History
:历史记录对象Location
:地址栏对象window
,其中window.
可以省略History
对象的只读引用Location
对象Navigator
对象的只读引用alert()
:显示带有一段消息和一个确认按钮的警示框confirm()
:显示带有一段消息以及确认按钮和取消按钮的对话框,该方法会有一个布尔类型的返回值,当点击取消后会返回 false
,点击确认后会返回true
setInterval()
:按照指定的周期(以毫秒计)来调用函数或计算表达式
setTimeout
:在指定的毫秒数后调用函数或计算表达式
window.location
获取,其中window.
可以省略href
:设置或返回完整的URL
概念:Document Object Model,文档对象模型
将标记语言的各个组成部分封装成对应的对象(以HTML
文档为例):
Document
:整个文档对象Element
:元素对象。即html
里面的各种标签Attribute
:属性对象。即html
里面标签对应的各种属性Text
:文本对象Comment
:注释对象最终会将上面的5种对象封装成一颗DOM
树
js通过DOM
,就能够对HTML
进行操作:
HTML
元素的内容HTML
元素的样式(CSS
)HTML DOM
事件作出反应HTML
元素DOM是W3c(万维网联盟)的标准,定义了访问HTML
和XML
文档的标准,分为3个不同的部分:
Core DOM
—>所有文档类型的标准模型
Document
:整个文档对象Element
:元素对象Attribute
属性对象Text
:文本对象Comment
:注释对象XML DOM - HTML
文档的标准模型HTML DOM - HTML
文档的标准模型
Image
:
Button
:
HTML中的Element
对象可以通过Document
对象获取,而Document
对象是通过Window
对象获取的
Document
对象中提供了以下获取Element
元素对象的函数:
根据id
属性值获取,返回单个Element
对象
var h1 = document.getElementById('h1');
根据标签名称获取,返回Element
对象数组
var divs = document.getElementsByTagName('div');
根据name
属性值获取,返回Element
对象数组
var hobbys = document.getElementsByName('hobby');
根据class
属性值获取,返回Element
对象数组
var class = document.getElementsByClassName('cls');
方式一:通过HTML标签中的事件属性进行绑定
<input type="Button" onClick="on()" value="按钮1">
<script>
function on(){
//点击按钮1要执行的代码
}
script>
方式二:通过DOM元素属性进行绑定
<input type="Button" id="btn" value="按钮2">
<script>
document.getElementById('btn').onclick=function(){
//点击按钮2要执行的代码
}
script>
事件名 | 说明 |
---|---|
onclick |
鼠标单击事件 |
onblur |
元素失去焦点 |
onfocus |
元素获得焦点 |
onload |
某个页面或图像被完成加载 |
onsubmit |
当表单被提交时出发该事件 |
onkeydown |
某个键盘的键被按下时 |
onmouseover |
鼠标被移到某元素之上 |
onmouseout |
鼠标从某元素上移开 |
* 方式二:通过DOM元素属性进行绑定
```html
事件名 | 说明 |
---|---|
onclick |
鼠标单击事件 |
onblur |
元素失去焦点 |
onfocus |
元素获得焦点 |
onload |
某个页面或图像被完成加载 |
onsubmit |
当表单被提交时出发该事件 |
onkeydown |
某个键盘的键被按下时 |
onmouseover |
鼠标被移到某元素之上 |
onmouseout |
鼠标从某元素上移开 |