在线API
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mixed JS Exampletitle>
head>
<body>
<h1>Hello, Mixed JS!h1>
<script src="path/to/external/script.js">script>
<script>
// 在这里编写你的内联 JavaScript 代码
alert("Inline JavaScript is working!");
script>
body>
html>
标签之间
元素的底部,可以改善显示速度
标签
标签不能自闭合 外部的CSS文件是通过标签引入的,而外部的JS文件是通过
标签引入的,不要混淆
var
关键字(variable)来声明变量,它是一个全局变量let
关键字与var
一致,但是let
只在他的代码块内有效,且不能重复声明。const
用来声明一个常量JS中分为原始类型和引用类型
这些只是数据类型,在JS中还是使用var、let、const
关键词来定义变量的
可以使用typeof
获取数据类型
与Java一致,但在比较运算符中多了===
,这里着重讲解
==
会进行类型转换,===
不会进行类型转换
var a=10;
alert(a=="10");//true
alert(a==="10");//false
alert(a===10);//true
具体是怎么转换的呢?哪些类型可以转换为哪些类型?
"1000"→1000
,"string"->NaN
与Java一致
通过function关键字进行定义,语法为:
//方式一
function functionName(参数1,参数2...){
//要执行的代码
}
//方式二
var functionName=function(参数1,参数2){
//要执行的代码
}
定义方法和Java的数组一致,但是相当于Java中的集合,长度是可变的,而且JS是弱类型,可以存储任意类型的数据
var arr=[1,2,3,4];
arr[10]=50;
这样的代码是合理的,其中arr[4]~arr[8]
的值为undefined
length
:设置或返回数组中元素的数量forEach()
:push()
:将新元素添加到数组的末尾,并返回新的长度(可以一次操作多个值)splice(元素)
:按照传入的元素从数组中删除元素(可以一次操作多个值)var 变量名 = new String(" ");
var 变量名 = " ";
length
:字符串的长度charAt()
:返回在指定位置的字符indexOf()
:返回字符串在数组中第一次出现的位置,如果没有,则返回-1trim()
:去除字符串两边的空格sustring()
:提取字符串两个指定的索引号之间的字符var 对象名 = {
属性名1:属性值1,
属性名2:属性值2,
属性名3:属性值3,
函数名称:function(形参列表){}
(**简化写法:不写function,直接 函数名(){}**)
};
var person = {
name: "John",
age: 30,
sayHello: function() {
console.log("Hello!");
}
};
通过JS对象标记法写的文本,与上面的JavaScript自定义对象不完全相同,JSON中没有函数
可以把JavaScript自定义对象理解为JavaBean,需要写出对应的变量和方法,把JSON理解为这个JavaBean的对象,这个对象只有属性,没有方法
JavaScript 对象和 JSON 在语法上有很大的相似性,但并不完全相同。在大多数情况下,JavaScript 对象字面量的写法可以直接用作 JSON,但有一些细微的差异:
示例:
// JavaScript对象
var person = {
name: "John",
age: 30
};
// 直接作为JSON的写法
var jsonPerson = '{"name": "John", "age": 30}';
示例:
// JavaScript对象
var person = {
name: 'John',
age: 30
};
// 直接作为JSON的写法(需要将单引号改为双引号)
var jsonPerson = '{"name": "John", "age": 30}';
var jsObject=JSON.parse(userStr);
var jsonStr=JSON.stringify(jsObject);
浏览器对象模型,允许JS与浏览器对话,把浏览器的各种组成部分封装成对象
组成:
window
:浏览器窗口对象window.navigator
:浏览器对象window.screen
:屏幕对象window.history
:历史记录对象window.location
:地址栏对象window
介绍:浏览器窗口对象
获取:直接使用window,可以省略。(那么上面的navigator、screen
等就可以直接使用,而不通过window)
方法
setInterval(a,b)
:按照指定的周期(以毫秒计)来调用函数或计算表达式,第一个参数为要执行体,第二个参数为时间,会执行多次。setTimeout()
:在指定的毫秒数后调用函数或计算表达式,只执行一次。window.location
获取,其中window.
可省href
:设置或返回完整的URL
location.href="https://www.google.com";
var url=location.href;
文档对象模型
把标记语言的各个部分封装为对应的对象
HTML中的Element
对象是通过Doucument
对象获取的,而Doucument
对象是通过window
对象获取的,直接使用***window***.document
获取,他不是 ,而是这一整个HTML文档
获取方法:
根据id属性值获取,返回单个Element对象
var h1 = document.getElementById('h1');
根据标签名获取,返回Element对象数组
var divs = document.getElementByTagName('div');
根据name属性值获取,返回Element对象数组(在多选和下拉列表中通常会有多个标签的name相同)
var hobbys = document.getElementByName('hobby');
根据class属性值获取,返回Element对象数组
var cls = document.getElementByClassName('cls');
获取到Element
对象后进行的各种方法,查询
HTML DOM Element 对象
onclick
:鼠标单击事件onblur
:元素失去焦点onfocus
:元素获得焦点
onload
:某个页面或图像被完成加载onsubmit
:当表单提交时onkeydown
:某个键盘被按下
onmouseover
:鼠标移动到某元素上onmouseout
:鼠标从某元素移开