在HTML中插入JS代码：
方法1：只需要在 head 标签中，或者在 body 标签中， 使用 script 标签 来书写 JavaScript 代码
方法2：使用
script
标签引入 单独的
JavaScript
代码文件
/*使用Script导入外部文件：
src src 属性专门用来引入 js 文件路径（可以是相对路径，也可以是绝对路径）
script 标签可以定义js代码，也可引用js文件
但是两个文件二选一，不能同时使用
*/
<script type="text/javascript" src="1.js">
</script>
<script type="text/javascript">
alert("111")
</script>变量：
什么是变量？变量是可以存放某些值的内存的命名。 JavaScript 的变量类型： 数值类型： number 字符串类型： string 对象类型： object 布尔类型： boolean 函数类型： function JavaScript 里特殊的值： undefined 未定义，所有 js 变量未赋于初始值的时候， 默认值都是 undefined. null 空值 NaN 全称是：Not a Number。 非数字。非数值。
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript">
var i;
alert(i);//undifine
i = 12;//这个时候
alert(typeof (i));//number
//type of（）是js提供的一个函数，可以取变量的值进行返回
i = "abc";
alert(typeof (i));//string
var a = 12;
var b = "zxc";
alert( a * b);//语法上允许
//NaN是非数字，非数值！
//个人感觉就是设也不是的标记
</script>
</head>逻辑运算：
在 JavaScript 语言中，所有的变量，都可以做为一个 boolean 类型的变量去使用。 0 、null、 undefined、””(空串) 都认为是 false； /*&& 且运算。 有两种情况： 第一种：当表达式全为真的时候。返回最后一个表达式的值。 第二种：当表达式中，有一个为假的时候。返回第一个为假的表达式的值 PS:全真为真，一假为假 || 或运算 第一种情况：当表达式全为假时，返回最后一个表达式的值 第二种情况：只要有一个表达式为真。就会把回第一个为真的表达式的值 PS:全假为假，一真为真 并且 && 与运算 和 ||或运算 有短路。 短路就是说，当这个&&或||运算有结果了之后 。后面的表达式不再执行 PS：就是break！*/
<script type="text/javascript">
/* 在 JavaScript 语言中，所有的变量，都可以做为一个 boolean 类型的变量去使用。*/
/*0 、null、 undefined、””(空串) 都认为是 false；*/
var a =0;
if (a) {
alert("0为t")
}else {
alert("0为F")
}
var b =null;
if (b) {
alert("null为t")
}else {
alert("null为F")
}
var c =undifine;
if (c) {
alert("undifine为t")
}else {
alert("undifine为F")
}
var d ="";//一个空格都不算
if (d) {
alert("空字符串为t")
}else {
alert("空字符串为F")
}
var a = "abc";
var b = true;
var c = false;
var d = null;
alert(a && b);
alert(a && b);
alert(a && b);
alert(a && b);
</script>逻辑运算：
等于： == 等于是简单的做字面值的比较 全等于： === 除了做字面值的比较之外，还会比较两个变量的数据类型 SUM：两等字面比，三等类型比
<script type="text/javascript">
var a ="12";
var b = 12;
alert( a==b );// true
alert( a===b );// false
</script>数组：
JS 中 数组的定义： 格式： var 数组名 = []; // 空数组 var 数组名 = [1 , ’abc’ , true]; // 定义数组同时赋值元素
<script type="text/javascript">
var arr = [true,1];//定义一个空数组
//第0个元素是true，第1个是1
alert(arr.length);//0
arr[0] = 12;
alert(arr.length);//1
arr[2] ="abc";
alert(arr.length);//3
//js只要通过下标赋值，最大的下标就会给数组扩容
alert(arr[1]);//undifine未定义
for (var i = 0; i < arr.lengths ; i++) {
alert(arr[i])
}
</script>函数定义1：
使用的格式如下:
function 函数名(形参列表){
函数体
}
在 JavaScript 语言中，如何定义带有返回值的函数？
只需要在函数体内直接使用 return 语句返回值即可！
<script type="text/javascript">
//无参函数
function fun() {
alert("无参函数被调用")
}
//函数调用才会执行
fun();
//有参函数
// function fun2(int 0 ,String b){这是java的定义，有类型
function fun2(a, b) {
alert("有参调用")
}
fun2(12, "abc");
//带有返回值的函数
// 定义带有返回值的函数
function sum(num1, num2) {
var result = num1 + num2;
return result;
}
alert(sum(100, 50));
</script>函数定义2：
使用格式如下： var 函数名 = function(形参列表) { 函数体 }
注：在 Java 中函数允许重载。但是在 JS 中函数的重载会直接覆盖掉上一次的定义
ps：就是不可以重载，同名函数会覆盖
<script type="text/javascript">
var fun = function (){
alert("无参函数");
}
var fun2 = function (a,b){
alert("有参函数 a=" + a + ",b=" + b);
}
var fun3 = function (num1,mun2){
return num1+num2;
}
alert(fun(100,200))
</script>隐形函数：
就是在 function 函数中不需要定义， 但却可以直接用来获取所有参数的变量。我们管它叫隐形参数。 隐形参数特别像 java 基础的可变长参数一样。 public void fun( Object ... args ); 可变长参数其他是一个数组 js的隐形参数和java的可变长参数
<script type="text/javascript">
function fun(){
alert( arguments.length);
alert(arguments[0]);
alert(arguments[1]);
alert(arguments[2]);
alert("a= " + a);
for (var i = 0; i < arguments.length; i++) {
alert(arguments[i])
alert("无参函数")
}
}
fun(1,"ad",true,"asd");
// 需求：要求 编写 一个函数。用于计算所有参数相加的和并返回
function sum(num1,num2){
var result =0;
for (let i = 0; i < arguments.length; i++) {
if(typeof (arguments[i]===Number))
//加一个判断数字类型
result += arguments[i];
}
return result;
}
alert(sum(1,2,3,4,5,6,7,8,9))//45
alert(sum(1,2,3,4,5,"abc",7,8,9))//15abc789
</script>自定义定义对象（方法1：
对象的定义： var 变量名 = new Object(); // 对象实例（空对象）
变量名.属性名 = 值; // 定义一个属性
变量名.函数名 = function(){} // 定义一个函数
对象的访问：
变量名.属性 OR 函数名()
<script type="text/javascript">
var obj = new Object();
obj.name = "jay";
obj.age = 18;
obj.fun = function (){
alert("name:" + this.name + " age:" + this.age);
}
obj.fun();
</script>自定义对象（方法2：
对象的定义：
var 变量名 = { // 空对象
属性名：值, // 定义一个属性
属性名：值, // 定义一个属性
函数名：function(){} // 定义一个函数
};
对象的访问： 变量名.属性 / 函数名();
<script type="text/javascript">
var obj = {
name: "bay",/*注意：是逗号！*/
sex: "men",
fun: function () {
alert("姓名：" + this.name + " , 年龄：" + this.age);
}
};
alert(obj.name);
obj.fun();
</script>事件：
什么是事件？事件是电脑输入设备与页面进行交互的响应。我们称之为事件
常用的事件：
onload 加载完成事件： 页面加载完成之后，常用于做页面 js 代码初始化操作
onclick 单击事件： 常用于按钮的点击响应操作。
onblur 失去焦点事件： 常用用于输入框失去焦点后验证其输入内容是否合法。
onchange 内容发生改变事件： 常用于下拉列表和输入框内容发生改变后操作
onsubmit 表单提交事件： 常用于表单提交前，验证所有表单项是否合法。
事件的注册又分为静态注册和动态注册两种：
什么是事件的注册（绑定）？
其实就是告诉浏览器，当事件响应后要执行哪些操作代码，叫事件注册或事件绑定
静态注册事件：通过 html 标签的事件属性直接赋于事件响应后的代码，这种方式我们叫静态注册。
动态注册事件：是指先通过 js 代码得到标签的 dom 对象，然后再通过 dom 对象.事件名 = function(){}
这种形式赋于事件 响应后的代码，叫动态注册。
动态注册基本步骤：
1、获取标签对象
2、标签对象.事件名 = fucntion(){}
onblur:
<title>失去焦点</title>
<script type="text/javascript">
// 静态注册失去焦点
function onblurFun(){
//控制台 console，JS提供，用于对浏览器控制台打印输出，用于测试
//log：打印方法
console.log("静态注册失去焦点事件");
}
// 动态注册 onblur 事件
</script>
</head>
<body>
<p>
用户名：<input type="text" onblur="onblurFun()"></p>
<!--input的onblure，input的功能，所以点进去，才会有控制台的onblure事件-->
<p>
密 码：<input type="password"></p>
onblur 失去焦点事件
</body>onchange:
<script type="text/javascript">
function onchangeFun() {
alert("女神已经改变了");
//采用alert方法表示onchange事件
}
window.onload = function () {
//1 获取标签对象
var selObj = document.getElementById("sel01");
// alert( selObj );
// 2 获取标签对象：对象.事件名 = function(){}
selObj.onchange = function () {
alert("男神已经改变了");
}
}
</script>
}
</head>
<body>
请选择你心中的女神：
<!--静态注册 onchange 事件-->
<select onchange="onchangeFun();">
<option>--女神--</option>
<option>芳芳</option>
<option>佳佳</option>
<option>娘娘</option>
请选择你心中的男神：
<select id="sel01">
<option>--男神--</option>
<option>国哥</option>
<option>华仔</option>
<option>富城</option>
</select>
</select>
</body>onclick：
<script type="text/javascript">
function onclickFun(){
alert("静态注册onclick事件");
}
//动态注册onclick事件
window.onload = function (){
//1获取标签对象
/*document:JavaScript提供的文档（代表整个页面里面的所有的内容）
get Element 获取元素（就是标签！）ById
通过Id获取标签对象
* */
var btnObj = document.getElementById("btn01");
alert(btnObj)//[object HTMLButtonElement]
//2通过标签对象。事件名 = function（）{}
btnObj.onclick = function (){
alert("动态注册的onclick事件")
}
}
</script>
</head>
<body>
<!--静态注册onclick事件-->
<button onclick="onclickFun()">按钮1</button>
<button id="btn01">按钮2</button>
</body>onload：
<script type="text/javascript">
// onload 事件的方法
function onloadFun() {
alert('静态注册 onload 事件，所有代码');
}
// onload 事件动态注册。是固定写法
window.onload = function (){
alert("动态注册的 onload 事件");
}
//动态注册是固定写法
window.onload = function (){
alert("动态注册的onload事件")
}
</script>
</head>
<!--静态注册 onload 事件
onload 事件是浏览器解析完页面之后就会自动触发的事件
<body onload="onloadFun();">
-->
<body>
</body>7月7日总结：
多做笔记多消化，每天进步一点点。
本打算今天教学玩JavaScript的，然后心不静打篮球去了。。。。
扫一扫
104
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
