001-HTML中嵌入JS代码的第一种方式
<!doctype html>
<html>
<head>
<title>HTML中嵌入JS代码的第一种方式</title>
</head>
<body>
<!--
1.要实现的功能：
用户点击以下按钮，弹出消息框。
2.JS是一门事件驱动型的编程语言，依靠事件去驱动，然后执行对应的程序。
在JS中有很多事件，其中有一个事件叫做：鼠标单击，单词：cilck。并且任何
事件都会对应一个事件句柄叫：onclick。[注意：事件和事件句柄的区别是：
事件句柄是在事件单词前添加一个on。]，而事件句柄是以HTML标签的属性存在
的。
3.onclick="JS代码",执行原理是什么？
页面打开时，JS代码并不会执行，只是把这段JS代码注册到按钮的click事件上了。
等这个按钮发生的click事件的之后，注册在onclick后面的JS代码会被浏览器自动调用。、
4.怎么使用JS代码弹出消息框？
在JS中有一个内置的对象叫做window，全部小写，可以直接拿来使用，window代表的是浏览器对象。
window对象有一个函数叫做:alert，用法是：window.alert("消息");这样就可以弹窗了。
5.JS中的字符串可以使用双引号，也可以使用单引号。
6.JS中的一条语句结束之后可以使用分号“;”，也可以不用。
-->
<input type="button" value = "hello" onclick = "window.alert('hello')"/>
<input type="button" value="hello" onclick="window.alert('JS')"/>
<input type="button" value="hello1" onclick="window.alert('hello1')
window.alert('hello2')
window.alert('hello3')"/>
<!--window. 可以省略-->
<input type="button" value="a" onclick="alert('a')"/>
<input type="button" value="b" onclick="alert('b')"/>
<input type="button" value="c" onclick="alert('c')
alert('d')
alert('f')"/>
</body>
</html>
002-HTML中嵌入JS代码的第二种方式
<!--
javascript的脚本块在一个页面当中可以出现多次。没有要求。
javascript的脚本块出现位置也没有要求，随意。
-->
<script type="text/javascript">
// alert有阻塞当前页面加载的作用。（阻挡，直到用户点击确定按钮。）
window.alert("first.......");
</script>
<!doctype html>
<html>
<head>
<title>HTML中嵌入JS代码的第二种方式</title>
<!--样式块-->
<style type="text/css">
/*
css代码
*/
</style>
<script type="text/javascript">
window.alert("head.......")
</script>
</head>
<body>
<input type="button" value="我是一个按钮对象1"/>
<!--第二种方式：脚本块的方式-->
<script type="text/javascript">
/*
暴露在脚本块当中的程序，在页面打开的时候执行，
并且遵守自上而下的顺序依次逐行执行。（这个代
码的执行不需要事件）
*/
window.alert("hello");// alert函数会阻塞整个HTML页面的加载。
// JS代码的注释，这是单行注释。
/*
JS代码的多行注释。和java一样。
*/
window.alert("hello js");
</script>
<input type="button" value="我是一个按钮对象">
</body>
</html>
<script type="text/javascript">
window.alert("last.......");
</script>
<!--
/**
*
* javadoc注释，这里的注释信息会被javadoc.exe工具解析提取生成帮助文档。
*/
-->
003-HTML中嵌入JS代码的第三种方式：引入外部独立的js文件
<!doctype html>
<html>
<head>
<title>HTML中嵌入JS代码的第三种方式：引入外部独立的js文件</title>
</head>
<body>
<!--在需要的位置引入js脚本文件-->
<!--引入外部独立的js文件的时候，js文件中的代码会遵循自上而下的顺序依次逐行执行。-->
<!--
<script type="text/javascript" src="js/1.js"></script>
-->
<!--同一个js文件可以被引入多次。但实际开发中这种需求很少。-->
<!--
<script type="text/javascript" src="js/1.js"></script>
-->
<!--这种方式不行，结束的script标签必须有。-->
<!--
<script type="text/javascript" src="js/1.js" />
-->
<!--
<script type="text/javascript" src="js/1.js"></script>
-->
<script type="text/javascript" src="js/1.js">
//这里写的代码不会执行
//window.alert("Test");
</script>
<script type="text/javascript">
alert("hi");
</script>
</body>
</html>
004-关于JS中的变量
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>关于JS中的变量</title>
</head>
<body>
<script type="text/javascript">
/*
回顾java中的变量：
1、java中怎么定义/声明变量？
数据类型 变量名;
例如：
int i;
double d;
boolean flag;
2、java中的变量怎么赋值？
使用“=”运算符进行赋值运算。（"="运算符右边先执行，将右边执行的结果赋值给左边的变量。）
变量名 = 值;
例如：
i = 10;
d = 3.14;
flag = false;
3、java语言是一种强类型语言，强类型怎么理解？
java语言存在编译阶段，假设有代码：int i;
那么在Java中有一个特点是：java程序编译阶段就已经确定了
i变量的数据类型，该i变量的数据类型在编译阶段是int类型，
那么这个变量到最终内存释放，一直都是int类型，不可能变成
其他类型。
int i = 10;
double d = i;
这行代码是说声明一个新的变量d，double类型，把i变量中保存的值传给d。
i还是int类型。
i = "abc"; 这行代码编译的时候会报错，因为i变量的数据类型是int类型，不能将字符串赋给i。
java中要求变量声明的时候是什么类型，以后永远都是这种类型，不可变。编译期强行固定变量的数据类型。
称为强类型语言。
public void sum(int a, int b){}
sum(?,?);
Javascript当中的变量？
怎么声明变量？
var 变量名;
怎么给变量赋值？
变量名=值;
javascript是一种弱类型语言，，没有编译阶段，一个变量可以随意赋值，赋什么类型的值都行。
var i=100;
i=false;
i="aaa";
i=new Object();
i=1.23
重点：javascript是一种弱类型编程语言。
*/
//在JS当中,当一个变量没有手动赋值的时候,系统默认赋值undefined
var i;
//undefined 在JS中是一个具体存在的值.
alert("i="+i);
alert(undefined);
var k=undefined;
alert("k="+k)
//一个变量没有声明/定义,直接访问?
//alert(age); 语法错误：Uncaught ReferenceError: age is not defined(变量age不存在。不能这样写。)
var a,b,c = 200;
alert("a="+a);
alert("b="+b);
alert("c="+c);
a=false;
alert(a);
a="ZZZ";
alert(a);
a=3.1415926;
alert(a);
</script>
</body>
</html>
005-JS函数初步
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS函数初步</title>
</head>
<body>
<script type="text/javascript">
/*
1、JS中的函数：
等同于java语言中的方法，函数也是一段可以被重复利用的代码片段。
函数一般都是可以完成某个特定功能的。
2、回顾java中的方法？
[修饰符列表] 返回值类型 方法名(形式参数列表){
方法体;
}
例如：
public static boolean login(String username,String password){
...
return true;
}
boolean loginSuccess = login("admin","123");
3、JS中的变量是一种弱类型的，那么函数应该怎么定义呢？
语法格式：
第一种方式：
function 函数名(形式参数列表){
函数体;
}
第二种方式：
函数名=function(形式参数列表){
函数体;
}
JS中的函数不需要指定返回值类型，返回什么类型都行。
*/
function sum(a,b){
// a和b都是局部变量,他们都是形参(a和b都是变量名，变量名随意。)
alert(a+b);
}
//函数必须调用才能执行
//sum(5,10);
//定义函数sayHello
sayHello=function(username){
alert("hello "+username)
}
//调用函数
//sayHello("jack");
</script>
<input type="button" value="hello" onclick="sayHello('张三')" />
<input type="button" value="计算10和20的和" onclick="sum(10,20)" />
</body>
</html>
006-JS函数初步
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS函数初步</title>
</head>
<body>
<script>
/*
java中的方法有重载机制，JS中的函数能重载吗？
JS当中的函数在调用的时候，参数的类型没有限制，并且参数的个数也没有限制，JS就是这么随意。（弱类型）
重载的含义：
方法名或者函数名一样，形参不同（个数、类型、顺序）
*/
function sum(a,b){
return a+b;
}
//调用函数sum
var retValue=sum(1,2);
alert(retValue);//3
var retValue2=sum("jack");
alert(retValue2);//jackundefined
var retValue3=sum();
alert(retValue3);
var retValue4=sum(1,2,3);
alert("结果="+retValue4);
function test1(username){
alert("test1");
}
/*
在JS当中，函数的名字不能重名，当函数重名的时候，后声明的函数会将之前声明的同名函数覆盖。
*/
function test1(){
alert("test1 test1")
}
test1("lisi");// 这个调用的是第二个test1()函数.
</script>
</body>
</html>
007-JS的局部变量和全局变量
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS的局部变量和全局变量</title>
</head>
<body>
<script type="text/javascript">
/*
全局变量：
在函数体之外声明的变量属于全局变量，全局变量的生命周期是：
浏览器打开时声明，浏览器关闭时销毁，尽量少用。因为全局变量会一直在浏览器的内存当中，耗费内存空间。
能使用局部变量尽量使用局部变量。
局部变量：
在函数体当中声明的变量，包括一个函数的形参都属于局部变量，
局部变量的生命周期是：函数开始执行时局部变量的内存空间开辟，函数执行结束之后，局部变量的内存空间释放。
局部变量生命周期较短。
*/
//全局变量
var i = 10;
function accessI(){
alert("i="+i);
}
accessI();
//全局变量
var username = "jack";
function accessUsername(){
//局部变量
var username="lisi";
// 就近原则:访问局部变量
alert("username="+username);
}
//调用函数
accessUsername();
//访问全局变量
alert("username--"+username);
function accessAge(){
var age=20;
alert("年龄="+age);
}
accessAge();
//报错(语法不对) Uncaught ReferenceError: age is not defined
//alert("age="+age);
//以下语法是很奇怪的
function myfun(){
//当一个变量声明的时候没有使用var关键字,那么不管这个变量是在哪里声明的,都是全局变量.
myname="haha";
}
//访问函数
myfun();
alert("myname="+myname);
</script>
</body>
</html>
008-JS中的数据类型
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS中的数据类型</title>
</head>
<body>
<script type="text/javascript">
/*
1、虽然JS中的变量在声明的时候不需要指定数据类型，但是在赋值，每一个数据还是有类型的，所以
这里也需要学习一下JS包括哪些数据类型？
JS中数据类型有：原始类型、引用类型。
原始类型：Undefined、Number、String、Boolean、Null
引用类型：Object以及Object的子类
2、ES规范(ECMAScript规范)，在ES6之后，又基于以上的6种类型之外添加了一种新的类型：Symbol
3、JS中有一个运算符叫做typeof，这个运算符可以在程序的运行阶段动态的获取变量的数据类型。
typeof运算符的语法格式：
typeof 变量名
typeof运算符的运算结果是以下6个字符串之一：注意字符串都是全部小写。
"undefined"
"number"
"string"
"boolean"
"object"
"function"
4、在JS当中比较字符串是否相等使用“==”完成。没有equals。
*/
/*
// 求和,要求a变量和b变量将来的数据类型必须是数字,不能是其他类型
// 因为以下定义的这个sum函数是为了完成两个数字的求和.
function sum(a,b){
if(typeof a == "number" && typeof b=="number"){
return a+b;
}
alert(a+","+b+"必须都为数字！");
}
// 别人去调用以上你写的sum函数
var retValue = sum(false,"abc");
alert(retValue); // undefined
var retValue2 = sum(1,2);
alert(retValue2);// 3
*/
var i;
alert(typeof i);//undefined
var k = 10;
alert(typeof k);//number
var f = "abc";
alert(typeof f);//string
var d = null;
alert(typeof d);//object
var falg = false;
alert(typeof falg);//boolean
var obj = new Object();
alert(typeof obj);//object
//sayHello是一个函数
function sayHello(){
}
alert(typeof sayHello());//undefined
</script>
</body>
</html>
009-Undefined类型
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>Undefined类型</title> </head> <body> <script type="text/javascript"> /* Undefined类型只有一个值，这个值就是 undefined 当一个变量没有手动赋值，系统默认赋值undefined 或者也可以给一个变量手动赋值undefined。 */ var i ; // undefined var k = undefined;// undefined alert(i==k);// true var y = "undefined";// "undefined" alert(y==k); // false </script> </body></html>
010-Number类型
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>Number类型</title> </head> <body> <script type="text/javascript"> /* 1、Number类型包括哪些值？ -1 0 1 2 2.3 3.14 100 .... NaN Infinity 整数、小数、正数、负数、不是数字、无穷大都属于Number类型。 2、isNaN() : 结果是true表示不是一个数字，结果是false表示是一个数字。 3、parseInt()函数 4、parseFloat()函数 5、Math.ceil() 函数（Math是数学类，数学类当中有一个函数叫做ceil()，作用是向上取整。） */ var v1 = 1; var v2 = 3.14; var v3 = -100; var v4 = NaN; var v5 = Infinity; //"number" alert(typeof v1); alert(typeof v2); alert(typeof v3); alert(typeof v4); alert(typeof v5); // 关于NaN (表示Not a Number，不是一个数字，但属于Number类型) // 什么情况下结果是一个NaN呢？ // 运算结果本来应该是一个数字,最后算完不是一个数字的时候,结果是NaN. var a = 100; var b = "中国人"; alert(a/b);// 除号显然最后结果应该是一个数字,但是运算的过程中导致最后不是一个数字,那么最后的结果是NaN var e = "abc"; var f = 10; alert(e+f);//"abc10" //Infinity (当除数为0的时候，结果为无穷大) alert(10/0); // 思考:在JS中10 / 3 = ? alert(10/3);//3.3333335 // 关于isNaN函数？ // 用法：isNaN(数据) ,结果是true表示不是一个数字, 结果是false表示是一个数字. // isNaN : is Not a Number function sum(a,b){ if(isNaN(a)||isNaN(b)){ alert("参与运算的必须是数字！"); return; } return a+b; } sum(100,"abc"); alert(sum(100,200));// parseInt():可以将字符串自动转换成数字,并且取整数位 // parseInt():可以将字符串自动转换成数字,并且取整数位 alert(parseInt("3.9999")); alert(parseInt("3.9999")) // parseFloat():可以将字符串自动转换成数字 alert(parseFloat(("3.14")+1)); alert(parseFloat(("3.2")+1)); //Math.ceil() alert(Math.ceil("2.1")); </script> </body></html>
011-Boolean类型
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>Boolean类型</title> </head> <body> <script type="text/javascript"> /* 1、 JS中的布尔类型永远都只有两个值：true和false （这一点和java相同。） 2、在Boolean类型中有一个函数叫做：Boolean()。 语法格式： Boolean(数据) Boolean()函数的作用是将非布尔类型转换成布尔类型。 */ // var username="lucy"; var username=""; /* if(Boolean(username)){ alert("欢迎你"+username); }else{ alert("用户名不能为空"); } */ /* if(username){ alert("欢迎你"+username); }else{ alert("用户名不能为空"); } */ // 规律:“有"就转换成true,"没有"就转换成false. alert(Boolean(1));// true alert(Boolean(0));//false alert(Boolean(""));//false alert(Boolean("ABC"));//true alert(Boolean(null));//false alert(Boolean(NaN));//false alert(Boolean(undefined));//false alert(Boolean(Infinity));//true /* while(10/3){ alert("hehe"); } */ for(var i = 0;i<10;i++){ alert("i+"+i) } //Null类型只有一个值,Null alert(typeof null);//object </script> </body></html>
|