本文介绍了JavaScript的基础知识，包括如何在HTML中嵌入JS，使用document.write输出内容，以及变量的声明（全局与局部）。还涉及数据类型，如字符串、数字、布尔值、对象、数组，以及Map和Set。此外，讨论了对象方法和内部对象如Date的使用。
JS简介
<script>我的js代码</script>
向浏览器输出的语句 document.write()
js中大小写是区分的
var 变量名； 提示：变量名不可以以数字开头
直接打开浏览器就可以执行js
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<p>
JavaScript 能够直接写入 HTML 输出流中：
</p>
<script>
document.write("<h1>这是一个标题</h1>");
document.write("<p>这是一个段落。</p>");
</script>
<p>
只能在 HTML 输出流中使用 <strong>document.write</strong>。
如果在文档已加载后使用它（比如在函数中），会覆盖整个文档。
</p>
</body>
</html>
作为单独的js文件被引用
<script src="js文件"></script>
js文件的文件扩展名是 .js；
.js文件中不可以用<script></script>
作为html节点属性值
<button type="button" onclick="alert('欢迎!')">点我!</button>
节点属性值不可以用<script></script
JavaScript 写在什么标签中？
<script> 标签
如需在 HTML 页面中插入 JavaScript，请使用 <script> 标签。
<script> 和 </script> 会告诉 JavaScript 在何处开始和结束。
<script> 和 </script> 之间的代码行包含了 JavaScript:
在 < head> 或者 < body> 的JavaScript
可以在 HTML 文档中放入不限数量的脚本。
脚本可位于 HTML 的 <body> 或 <head> 部分中
或者同时存在于两个部分中。
通常的做法是把函数放入 <head> 部分中，或者放在页面底部
这样就可以把它们安置到同一处位置，不会干扰页面的内容
html中的格式
<script src="js.js"></script>
对应js.js中内容
document.write('hi,js');
JS文件中的脚本，不需要< script>
防止文档在完全加载（就绪）之前运行 js 代码
window.onload=function(){
//js动作
}
js中加“var”和不加“var”的区别
函数外部的变量，加var是全局变量，不加var类似全局变量【它并不是声明了一个全局变量，而是创建了一个全局对象的属性】
函数内部的变量，加var声明的是局部变量，不加var的是对全局变量的引用
<script>
var a=1; //全局变量
b=2;//全局变量 全局变量的一个属性
function js() {
a=3;//a是对全局变量的引用，赋值
document.write(a);
}
js();// 3
</script>
<script>
var a=1; //全局变量
b=2;//全局变量 全局变量的一个属性
function js() {
var a=3;//局部变量
document.write(a);
}
js();// 3
</script>
<script>
var a=1; //全局变量
b=2;//全局变量 全局变量的一个属性
function js() {
var a=3;//局部变量
}
js();
document.write(a);// 1
</script>
<script>
var a=1; //全局变量
b=2;//全局变量 全局变量的一个属性
function js() {
a=3;//a是对全局变量的引用，赋值。
}
js();
document.write(a);//3
</script>
JavaScript 输出
JavaScript 可以通过不同的方式来输出数据：
1、使用 window.alert() 弹出警告框
2、使用 document.write() 方法将内容写到 HTML 文档中
3、使用 innerHTML 写入到 HTML 元素
4、使用 console.log() 写入到浏览器的控制台
这几种输出方式的表现形式不同
如需从 JavaScript 访问某个 HTML 元素，您可以使用 document.getElementById(id) 方法。
使用 “id” 属性来标识 HTML 元素，并 innerHTML 来获取或插入元素内容
运行结果：
以上 JavaScript 语句（在 <script> 标签中）可以在 web 浏览器中执行：
document.getElementById("demo") 是使用 id 属性来查找 HTML 元素的 JavaScript 代码
innerHTML = "段落已修改。" 是用于修改元素的 HTML 内容(innerHTML)的 JavaScript 代码
写到控制台
如果浏览器支持调试，你可以使用 console.log() 方法在浏览器中显示 JavaScript 值
浏览器中使用 F12 来启用调试模式， 在调试窗口中点击 “Console” 菜单
JS语法
全局的：在函数外的。[函数内部的 没有var的变量]
局部的：在函数内的【有var 声明的变量】
+有2层含义
1)真的相加运算【都是数字类型】；
2)字符类型的串接
js逻辑运算的断电机制
<script>
b=17||7;
document.write(b);//17
</script>
JS数据类型
7种数据类型：
1、字符串（string），2、数字(number)，3、布尔(boolean)，4、空（null），5、未定义（undefined），6、对象(object)【子类：数组(array)，函数(function)】，7、symbol
数据类型分类
1）数据类型查看 【typeof】
typeof "John" // 返回 string
typeof 3.14 // 返回 number
typeof NaN // 返回 number
typeof false // 返回 boolean
typeof [1,2,3,4] // 返回 object
typeof {name:'John', age:34} // 返回 object
typeof new Date() // 返回 object
typeof function () {} // 返回 function
typeof myCar // 返回 undefined (如果 myCar 没有声明)
typeof null // 返回 object
数据类型转换
常用转换函数：Number() 转换为数字， String() 转换为字符串， Boolean() 转换为布尔值
NaN的数据类型就是数字，就是number；他是一个特殊的number。因为在js中数据类型之间都是可以相互转化的，这方便了其他数据类型转化为number(非数字转化为number类型便是NaN)
可以使用 typeof 操作符来查看 JavaScript 变量的数据类型
<script>
t=typeof [1,2,3,4];
//t=typeof([1,2,3,4]);//()起来更严谨些
document.write(t);// 返回 object
</script>
数据0 “” false null undefined
<script>
document.write(!0); //true
document.write("<br>");
document.write(!false); //true
document.write("<br>");
document.write(!undefined); //true
document.write("<br>");
document.write(!null); //true
document.write("<br>");
document.write(!''); //true
document.write("<br>");
document.write("<br>");
</script>
0 "" false == 相等；和 undefined null 分别不等
null == undefined 为true；null === undefined 为false
NaN与所有值都不相等包括自己
只能通过isNaN(NaN)来判断是否为NaN
字符串
| 属性 | 描述 |
|---|---|
| constructor | 返回创建字符串属性的函数 |
| length | 返回字符串的长度 |
| prototype | 允许您向对象添加属性和方法 |
如计算长度：
var txt = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
var sln = txt.length;
多行字符串编写，反引号包裹内容
var msg =
`hello
world
你好
世界`
模板字符串
let a = "world";
let msg = `你好, ${a}`
字符串长度
字符串名.length
数组
可以包含任意数据类型
下面的代码创建名为 cars 的数组：
var cars=new Array();
cars[0]="Saab";
cars[1]="Volvo";
cars[2]="BMW";
或者 (condensed array):
var cars=new Array("Saab","Volvo","BMW");
或者 (literal array):
var cars=["Saab","Volvo","BMW"];
数组名.indexof(-)
下标索引，返回寻找元素的下标
数组名.slice(-)
截取数组一部分，（开始下标，结束下标）
可省略结束下标，即从开始下标到最后
数组名.push(-)
向最后面添加元素
数组名.pop()
弹出尾部的一个元素
unshift()、shift()
对应上两种用法，从头部进行
数组名.sort()
对元素排序
Map和Set
var map = new Map([['tom',80],['jack',90],['shafj',85]]);
var name = map.get('shafj');
console.log(name);
var set = new Set([3,1,1,1,1]); // set可以去重
对象的创建
对象也是一个变量，但对象可以包含多个值（多个变量）
每个值以 name:value 对呈现
var car = {name:"Fiat", model:500, color:"white"};
var person = {
firstName:"John",
lastName:"Doe",
age:50,
eyeColor:"blue"
};
可以通过两种方式访问对象属性:
person.lastName;
person["lastName"];
可通过delete删除对象的属性
dekete person.age
添加则直接给新的属性添加值即可
person.Emily = "12345@qq.com"
对象键值对的写法类似于：
- PHP 中的关联数组
- Python 中的字典
- C 语言中的哈希表
- Java 中的哈希映射
- Ruby 和 Perl 中的哈希表
对象方法
<p>创建和使用对象方法。</p>
<p>对象方法作为一个函数定义存储在对象属性中。</p>
<p id="demo"></p>
<script>
var person = {
firstName: "John",
lastName : "Doe",
id : 5566,
fullName : function()
{
return this.firstName + " " + this.lastName;
}
};
document.getElementById("demo").innerHTML = person.fullName();
// 输出John Doe
</script>
对象的方法定义了一个函数，并作为对象的属性存储
对象方法通过添加 () 调用 (作为一个函数)
该实例访问了 person 对象的 fullName() 方法:
实例
name = person.fullName();
如果要访问 person 对象的 fullName 属性，它将作为一个定义函数的字符串返回：
实例
name = person.fullName;
<p>创建和使用对象方法。</p>
<p>对象方法是一个函数定义,并作为一个属性值存储。</p>
<p id="demo1"></p>
<p id="demo2"></p>
<script>
var person = {
firstName: "John",
lastName : "Doe",
id : 5566,
fullName : function()
{
return this.firstName + " " + this.lastName;
}
};
document.getElementById("demo1").innerHTML = "不加括号输出函数表达式：" + person.fullName;
document.getElementById("demo2").innerHTML = "加括号输出函数执行结果：" + person.fullName();
</script>
内部对象
Date
日期对象
17万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
