工作需要，需要学习JS了，每天坚持一小段，笔记不一定每天更新，但是会一直写，一定量更新一篇，go go go
1.变量
单一变量
var name = ‘liyang’;
var x = 5;
var y = 6;
var z = x + y;
多个变量
var name = ‘jack’,age=12;
var name = ‘john’,
age=14;
var x,y,z=1; 只有Z=1，其余都是undefined
2.数据类型
var x; 类型为undefined
var x = 5; 类型为数字
var x = ‘abc’; 类型为字符串
单双引号可以单独使用和混合使用
var answer = “It’s mine”;
使用数字时的几种方式:
var num = 3.14;
var num = 3.1400;
var num = 123e5; 就是123的5次方
var num = 123e-5; 上面的倒数
数组使用时，遵循常规数组规则
var cars = new Array(); 声明了一个数组
cars[0] = ‘a’;
cars[1] = ‘b’;
cars[2] = ‘c’;
这样等同于 var cars = [‘a’,’b’,’c’];
字典或者json文件类型
var person = {
firstname : ‘john’,
lastname : ‘Doe’,
id : 9527
};
这样就可以通过属性来查找了
person.firstname 和 person[‘firstname’]
主要的几种声明的变量：
var carname = new String; //字符串
var x = new Number; //数字
var y = new Boolean; //布尔
var cars = new Array; //数组
var person = new Object; //对象
3.输出
window.alert() //弹出警告弹窗
document.write() //写入HTML文档中，不指定标签
innerHTML //写入HTML元素中
console.log() //写入浏览器控制台中
用实例说明一下这些指令的功能
<body>
<h1>我的第一个 Web 页面</h1>
<p id="demo">我的第一个段落。</p>
<script>
window.alert(‘我是弹窗’)
document.getElementById("demo").innerHTML="段落修改。";
document.write(Date());
</script>
</body>
会输出一下内容：
我的第一个 Web 页面
段落已修改。
Tue Aug 20 2019 23:21:17 GMT+0800 (中国标准时间)
①生成一个弹窗，弹窗内容是“我是弹窗”
②修改了id为demo的标签的内容，getElementById用于寻找id定位的标签，innerHTML就是写入内容
③写入了一行时间，直接加到页面下方，Date为函数
接下来将这个应用到实际一点的案例中去：
<h1>我的第一个 Web 页面</h1>
<p>我的第一个段落。</p>
<button onclick="myFunction()">点我</button>
<script>
function myFunction() {
document.write(Date());
}
</script>
用到函数来执行点击动作，然后给页面写入一个时间，这里就是一个动态的加载过程了
这里是为了说明document.write()的覆盖性，当运行时首先会加载H1和P标签，然后执行点击动作会执行write动作，将覆盖整个页面打印一个时间在页面上
console.log是往控制台写入，用于调试等等
4.语法
①字面量
一般固定值就被成为字面量，如12
数字（Number）的字面量可以是整数小数或者科学计数
如：3.14， 1001， 123e5
字符串的字面量可以使用单双引号
如： ‘abc’，“abc”
数组字面量定义一个数组
[1,2,34]
对象字面量定义一个对象
{‘firstname’:’li’, lastname:’yang’, age:26}
函数字面量定义一个函数
function myFunction(a, b) {return a+b;}
下面是一些常规的计算符号：
赋值，算术和位运算符 = + - * / 在 JS 运算符中描述
条件，比较及逻辑运算符== != < >在 JS 比较运算符中描述
//表示注释，将不会被执行
JS里面会严格区分大小写，所以写变量函数都要注意大小写
多行注释以 /* 开始，以 */ 结尾。
5.对象
在 JavaScript中，几乎所有的事物都是对象
对象也是一个变量，但对象可以包含多个值（多个变量）
var car = {type:’Fiat’,model:500}
上面car被赋予type和model两个变量，然后对应两个值，所以对象Object可以认为是变量的容器
var person = {
firstName: "John",
lastName : "Doe",
fullName : function()
{
return this.firstName + " " + this.lastName;
}};
这儿给对象定义了一个方法，fullName(),所以可以直接用person.fullName()来查看对象的全称,有此可以看出创建对象函数的方法是：
methodName : function() {
code lines
}
你可以使用以下语法访问对象方法：
objectName.methodName()
6.函数
函数是由事件驱动的或者当它被调用时执行的可重复使用的代码块，最常见的就是button的onclick()功能
<script>
function myFunction() {
alert("Hello World!");
}
</script>
<button onclick="myFunction()">点我</button> //点击时生成一个弹窗
函数就是包裹在花括号中的代码块，前面使用了关键词 function：
function functionname()
{
// 执行代码
}
①函数可以携带参数以发送任意多的参数，由逗号分隔：
<p>点击这个按钮，来调用带参数的函数。</p>
<button onclick="myFunction('Harry Potter','Wizard')">点击这里</button>
<script>
function myFunction(name,job){
alert("Welcome " + name + ", the " + job);
}
</script>
这里的函数可以携带两个参数，调用时我们给函数两个参数，则可以提示不同的内容
②带有返回值的函数
通过使用 return 语句就可以实现。
在使用 return 语句时，函数会停止执行，并返回指定的值。
function myFunction() {
var x=5;
return x; //等于return 5;
}
return在很多时候可以用于判断退出：
function myFunction(a,b) {
if (a>b) {
return;
}
x=a+b
}
如果a>b，则直接退出函数，不返回任何值，也不会计算x
③向未声明的 JavaScript 变量分配值
果您把值赋给尚未声明的变量，该变量将被自动作为 window 的一个属性。
这条语句：
carname="Volvo";
将声明 window 的一个属性 carname。
非严格模式下给未声明变量赋值创建的全局变量，是全局对象的可配置属性，可以删除。
var var1 = 1; // 不可配置全局属性
var2 = 2; // 没有使用 var 声明，可配置全局属性
console.log(this.var1); // 1
console.log(window.var1); // 1
delete var1; // false 无法删除
console.log(var1); //1
delete var2;
console.log(delete var2); // true
console.log(var2); // 已经删除 报错变量未定义
7.变量作用域
变量在函数内声明，变量为局部作用域。
局部变量：只能在函数内部访问
// 此处不能调用 carName 变量
function myFunction() {
var carName = "Volvo";
// 函数内可调用 carName 变量
}
变量在函数外定义，即为全局变量。
全局变量有 全局作用域: 网页中所有脚本和函数均可使用。
var carName = " Volvo";
// 此处可调用 carName 变量
function myFunction() {
// 函数内可调用 carName 变量
}
如果变量在函数内没有声明（没有使用 var 关键字），该变量为全局变量。
以下实例中 carName 在函数内，但是为全局变量。
// 此处可调用 carName 变量
function myFunction() {
carName = "Volvo";
// 此处可调用 carName 变量
}
HTML 中的全局变量
在 HTML 中, 全局变量是 window 对象: 所有数据变量都属于 window 对象。
//此处可使用 window.carName
function myFunction() {
carName = "Volvo";
}
8.事件
最常见的事件就是onclick，加在按钮中
<button onclick="getElementById('demo').innerHTML=Date()">现在的时间是?</button>
<p id="demo"></p>
运行点击后将给P标签赋予当前时间的信息
这里顺便就补充一下给当前标签本身改变值的方法：
<button onclick="this.innerHTML=Date()">现在的时间是?</button>
这里点击时，标签按钮的内容就变成了当前时间
下面是一些常见的HTML事件的列表:
事件 描述
onchange HTML 元素改变
onclick 用户点击 HTML 元素
onmouseover 用户在一个HTML元素上移动鼠标
onmouseout 用户从一个HTML元素上移开鼠标
onkeydown 用户按下键盘按键
onload 浏览器已完成页面的加载
JavaScript 可以做什么?
事件可以用于处理表单验证，用户输入，用户行为及浏览器动作:
页面加载时触发事件
页面关闭时触发事件
用户点击按钮执行动作
验证用户输入内容的合法性
等等 ...
可以使用多种方法来执行 JavaScript 事件代码：
HTML 事件属性可以直接执行 JavaScript 代码
HTML 事件属性可以调用 JavaScript 函数
你可以为 HTML 元素指定自己的事件处理程序
你可以阻止事件的发生。
扫一扫
337
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
