-
js与html结合方式
-
ECMAScript规范
-
Function(*****): 代表函数）
1.JavaScript发展史
1992年，nombas公司 C--,最早的客户端脚本语言。专门用于表单验证。 后更名为 scriptEarth
网景 scriptlive，后来找到sun公司合作，共同开发出 JavaScript
微软抄袭JavaScript 定义了 JScript
ECMA(欧洲计算机制造商协会)定义了一套客户端脚本语言的规范 ECMAScript规范
JavaScript = ECMAScript规范 + js自己特有的东西(BOM/DOM)
2.js与html结合方式
内部js：
定义<script>标签，标签体书写js代码
注意：<script>标签定义的位置，会影响执行顺序
外部js:
定义<script>标签,通过src属性导入外部js文件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<!-- 内部方式：在HTML页面提供一对 script标签，在标签内部，写JS -->
<script type="text/javascript">
var num=100;
alert(num)
</script>
</head>
<body>
<!--
JS跟HTML结合的方式
//1.内联方式：将JS代码直接写在HTML标签上
//2.内部方式：在HTML页面提供一对 script标签，在标签内部，写JS
这一对 script标签，他可以放在 HTML页面的任何地放，那你目前先放在 head标签之间
//3. 外部方式：把JS代码单独放在一个文件中，页面进行引用，开发首选方式
<script src="js/index.js" type="text/javascript" charset="utf-8"></script>
//JS:由浏览器的内核的JS引擎来进行解析的
-->
<!-- 内联方式：将JS代码直接写在HTML标签上 -->
<button type="button" onclick="alert('点击了')">一个按钮</button>
</body>
</html>
3.JS的数据类型
常量：
* 基本数据类型：
Java中：
整型：byte short int long
浮点型：float double
布尔型：boolean
字符型：char
js原始数据类型:
number：数字类型，包含整数和小数和 NaN(not a number)
string: 字符串和字符类型 "" ''
boolean: true 和 false
null： 空类型。对象的占位符
undefined：未定义,如果一个变量没有初始化值，默认为undefined
变量：
* 语法：
* 使用 var定义变量 var i = "abc";
* js是一门弱类型语言：定义变量时，不需要规定其数据类型。
* typeof运算符：获取变量的数据类型
* var关键字如果不书写，该变量则为全局变量
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
//Java的基本数据类型：
//整数型 byte short int long
//小数型 float double
//字符型 char
//布尔型 boolean
//ECMAScript 有 5 种原始类型（primitive type），即 Undefined、Null、Boolean、Number 和 String。
//JS:原始数据类型：数字型 Number 布尔 Boolean 字符串 String 未定义 undefined 对象占位符 Null
//JS是一门弱类型语言，他定义变量时 采用 var 关键字来定义
//定义数字
var num=100 //注意：后面的分号，可写可不写，语法不报错，我们写Java习惯了，那建议还是写上。
var a=3.24
//定义字符串，单引号，双引号都可以使用
var s="abc"
var str='hehe'
//定义boolean类型
var flag=true
var flag2=false
//定义了一个变量，没有赋值，就是 undefined
var v;
//null对象的占位符。
var obj=null;
//使用弹框的方法，来弹出一下变量的值
alert(num);
alert(a);
alert(s);
alert(str);
alert(flag);
alert(flag2);
alert(v);
alert(obj);
//有一个typeof 运算符可以获取变量的原始数据类型
alert(typeof num);
alert(typeof a);
alert(typeof s);
alert(typeof str);
alert(typeof flag);
alert(typeof flag2);
alert(typeof v);
alert(typeof obj);
</script>
</head>
<body>
</body>
</html>
4.语句
if
switch
while
do...while
for
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
/*
语句：
if
switch
while
do...while
for */
var num = 200;
if (num >= 200) {
alert("真")
} else {
alert("假的")
}
for(var i=1;i<=10;i++){
alert(i);
}
</script>
</head>
<body>
</body>
</html>
5.打印的方法
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
var num=100;
//输出数据到html页面上
document.write(num);
//输出HTML标签
document.write("<h1>你好JS</h1>")
//输出HTML标签
document.write("<h1 style='color: red;'>你好世界</h1>")
//拼接变量
document.write("<h1 style='color:blue;'>你好世界"+num+"</h1>")
document.write("<b style='color:blue;'>你好世界"+num+"</b>")
//换行
document.write("<br>")
document.write("<b style='color:blue;'>你好世界"+num+"</b>")
</script>
</head>
<body>
</body>
</html>
6.输出到控制台查看
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
var num=100;
var sal=3.25;
//输出数据到浏览器的控制台 f12--->控制台
console.log(num);
//输出多个变量的值
console.log(num,sal);
</script>
</head>
<body>
</body>
</html>
7.打印九九乘法表
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
//在页面上输出九九乘法表
for(var i=1;i<=9;i++){
for(var j=1;j<=i;j++){
document.write(j+"*"+i+"="+(j*i)+" ")
}
document.write("<br>");
}
</script>
</head>
<body>
</body>
</html>
8.一元运算符
一元运算符
++ -- +(正) -(负)
注意：在js中，如果传递给运算符的值，和 运算符想要接受的 值 的类型不匹配，则会自动类型转换
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
/*
* 一元运算符
++ -- +(正) -(负)
++ 自增1 -- 自减1
++ 在前，先运算，后使用 ++ 在后，先使用后运算
*/
var i=1;
var j=++i;
//数据类型的自动转换
var a=+"100"; //+100 -100
var sum=100+a;
alert(sum);
//JS中数据类型的自动转换：当运算符想要的数据类型和你给的数据类型不一致，运算符就会尝试去转换这个数据。
var s="100"*1+"200"*1;
alert(s)
</script>
</head>
<body>
</body>
</html>
9.算数运算符
算术运算符：+ - * / %
其他类型转为number
string：将字符串的字面值，转为number，如果字面值不是数字，则 转为NaN，
空串转数字转换成0
boolean： true为1 false 为0注意:NaN 参与数学运算 结果都为NaN
undefined 参与数学运算结果都NaN
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
/* *算术运算符：+ - * / %
* 其他类型转为number
*
* 1.字符串转成数字，根据字面上去转，如果字面是个有效数字，就转换成数字，如果转换不过来就转换成 NaN
* 空串转换数字转成 0
* 注意：NaN参与数学运算结果也NaN
* undefined 参与数学运算结果都NaN
*
*
* 2. 布尔类型转换数字，true 转成1 false 转换成0
*
* */
var str = "2";
str = "abc100";
//NaN参与数学运算结果也NaN
var num = str * 5; //NaN*5
//alert(num);
var flag = false;
var sum2 = 2 * flag;
alert(sum2)
alert(5 * "");
alert(undefined/2);
</script>
</head>
<body>
</body>
</html>
10.比较运算符
> < >= <= == ===:
NaN参与的运算，结果都为fasle，除了(!=)
字符串比较小大：如果长度一致按照字典顺序比较 长度不一致 那谁的长度长那就谁大
!=:
== ===(全等于):
全等于比较时，先比较类型，如果类型不一致，直接返回false
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
// * 比较运算符
// > < >= <= == === !=:
var v = NaN;
//NaN 参与比较运算，结果都是false 除了 !=
var b = v == NaN;
alert(b);
alert(NaN != NaN) //true
//字符串比较：比较两个字符串字面上的值，是否相等，用 == 号来比较
var str = "abc";
var str2 = "heheheh";
alert(str == str2)
var e="100";
var f=100;
// == 会转换数据类型，但是有的时候，我不希望这种效果，如果数据类型不一致，就不要去比，就直接false
var bb=e==f;
alert(bb);
// === 全等于 先比较数据类型，如果数据类型不一致，直接false,无需在比
var bb2=e===f;
alert(bb2);
</script>
</head>
<body>
</body>
</html>
11.逻辑运算符
&& || !
* 其他类型转boolean
* number：非0为true，0和NaN为false，
* string: 除了空字符串("")，其他都是true
* null 和 undefined:转为false
* 对象:所有对象都为true
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
// * 逻辑运算符
// && || !
//字符串转换布尔类型： 非空串，转换成true 空串转换成false
//数字类型转换布尔： 0转换成false 非0 转换成ture
//NaN 和 undefined 转换boolean类型，转换成false
var str="abc";
// var flag=!str;
// alert(flag);
//数字类型转换布尔： 0转换成false 非0 转换成ture
var num=10;
//NaN 和 undefined 转换boolean类型，转换成false
//var vv;
//null 转换布尔类型，转换成false 如果对象不为null转换成true
var vv=null;
vv=new Object();
if(vv){
alert("真")
}else{
alert("假的");
}
/* while(str){
} */
</script>
</head>
<body>
</body>
</html>
12.赋值运算符和三元运算符
赋值运算符
= += ....
三元运算符
表达式 ? 值1 : 值2;和Java相同
13. Function(*****): 代表函数
创建方式：
* var fun = new Function("参数列表","方法体");* function 方法名称(形参列表){
方法体
}
* var fun = function(){
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
/*
函数：类似于我们Java中的方法，封装一段功能逻辑，以实现重复调用
//JS中定义函数的语法
*/
//方式1:* var fun = new Function("参数列表","方法体"); 了解
//var fun = new Function("a,b","alert(a+b)");
//fun(10,20);
//方式2：注意形参不需要写数据类型
function add(a,b){
var sum=a+b;
return sum; //如果想返回数据，使用return返回即可
}
//调用
var r=add(20,30);
console.log(r);
//匿名函数，匿名函数可以作为参数传递
/*
function(a,b){
var sum=a+b;
return sum;
}
*/
//方式3：
var show=function(a,b){
var sum=a+b;
return sum;
}
var vv=show(36,69);
alert(vv);
</script>
</head>
<body>
</body>
</html>
14.函数的注意事项
属性：
length：形参的个数
使用：
* 函数名称(实参列表);
* 特点：
1.函数的调用，只与函数名称有关，与实参列表无关
2.函数内部有内置对象 arguments 封装实参数组
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
//1.函数的形参，不需要写数据类型
function add(a, b) { //形参如果没有接收到值就是 undefined
console.log(a);
console.log(b);
return a + b;
}
//2.调用函数时，你可以传参，也可以不传参，传多，传少都可以
var v = add(10, 20, 30, 250);
alert(v);
//3.函数有一个length属性，可以获取形参的个数
var len=add.length;
alert(len);
//4.函数有一个内置对象，arguments 是一个伪数组，他可以接收所有的实参
function show(){
console.log(arguments[0]);
console.log(arguments[1]);
console.log(arguments[2]);
console.log(arguments[3]);
console.log(arguments[4]);
var sum=0;
for(var i=0;i<arguments.length;i++){
sum+=arguments[i];
}
return sum;
}
var ss=show(20,30,52,30,85);
console.log("结果",ss);
</script>
</head>
<body>
</body>
</html>
15.自定义函数
自调用函数：(function () { /* code */ } ());
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
/*
function add(a,b){
return a+b;
}
var sum=add(10,20)
*/
//自调用函数
// (function (形参) { /* code */ } (实参));
var sum = (function(a, b) {
return a + b;
}(20, 63));
alert(sum);
</script>
</head>
<body>
</body>
</html>
16.void运算符
拦截返回值，一般结合a标签一起使用
注销a标签跳转功能，保留可被点击的功能
<a href="javascript:void(0);" οnclick="exit();">退出</a>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
function show(){
alert("show 函数")
}
</script>
</head>
<body>
<a href="index.html">一个链接</a>
<!-- 只想让 a可以点，但是不要跳页面 -->
<a href="#">一个链接</a>
<!-- 只想让 a可以点，但是不要跳页面 -->
<a href="javascript:void(0)">一个链接www.163.com</a>
<!-- 只想让 a可以点，但是不要跳页面 -->
<a href="javascript:;;">一个链接www.163.com</a>
<!-- 不跳转页面，还会调用我传入的函数，把他当成一个按钮来用，来触发一个函数 -->
<a href="javascript:void(show())">一个按钮</a>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
</script>
</head>
<body>
<a href="javascript:window.open('about:blank')">Click me</a>
<!-- void(函数) void会拦截函数的返回值 -->
<a href="javascript:void(window.open('about:blank'))">Click me</a>
</body>
</html>
17.const和let关键字
es6引入的一个关键字 const 用来定义常量的
let 用来定义块级变量
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
//es6引入的一个关键字 const 用来定义常量的
const num = 200; //常量
//num=500; //常量不能再赋值
{
//代码块
var a = 1000;
//let 用来定义块级变量
let b = 500;
}
alert(a);
//alert(b); b是块级变量，所以访问不到了
if (true) {
//块级作用域
//var c=20;
//let 用来定义块级变量
let c = 500;
}
//alert(c);
/*
for(var i=1;i<=10;i++){
alert(i);
}
alert(i);
*/
// let 用来定义块级变量
for (let i = 1; i <= 10; i++) {
alert(i);
}
// alert(i);
</script>
</head>
<body>
</body>
</html>
18.局部变量和全局变量
全局变量，定义再script标签里面的变量，全局变量属于window对象，浏览打开全局变量存在，关闭窗口，全局变量消失
如果局部变量前面省略var 他就变为了全局变量
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
//全局变量，定义再script标签里面的变量，全局变量属于window对象
//浏览打开全局变量存在，关闭窗口，全局变量消失
var num=200; //全局变量
function show(a,b){
//局部变量，属于函数
var c=100;
var sum=a+b+c+num;
//如果局部变量前面省略var 他就变为了全局变量
h=3000; //全局变量
return sum;
}
var sum=show(1,2);
alert(sum);
//alert(c);
alert(h);
</script>
</head>
<body>
</body>
</html>
5390
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
