一,三种存在位置
1,行间式:直接在body标签中οnlοad="设置的样式格式"
2,内联式,注意必须在设置的内容下面用script双标签包裹,一般放在body标签的底部
3外联式:js代码块出现在外部的js文件中,通过src属性进行链接
总结:三种存在方式不存在优先级,谁在下面就谁的属性起作用(前提是必须设置相同的属性时,当设置不同的属性就都起作用)
内联使用场景:某页面的特有逻辑,可以书写该该页面的script标签内
外联使用场景:适用于团队开发,js代码具有复用性<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title>三种存在位置</title> </head> <!-- 1.行间式:js代码块需要出现在事件中 --> <!-- <body id="body" onload="body.style.backgroundColor='red'"> --> <!-- <body id="body" onload="alert('hello wolrd')"> --> <body> <!-- 2.内联式:js代码块需要出现在script标签中 --> <script type="text/javascript"> body.style.backgroundColor='orange' </script> <!-- 3.外联式:js代码块出现在外部js文件中,需要通过script标签src属性进行链接 --> <script type="text/javascript" src="./js/01.js"></script> </body> </html>
二,解释器语言决定js作用
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title>js位置</title> <!-- 出现在head底部:依赖型js库 --> <!-- <script> db.style.backgroundColor = "#0ff" </script> --> <script> var color = "cyan"; </script> </head> <body id="bd"> <!-- <script> bd.style.backgroundColor = '#0ff'; </script> --> <!-- 需求1:操作div,让其字体颜色变为红色 => 功能(style.color) => 尽可能下移 --> <!-- 需求2:让div背景颜色变为提供的颜色 => 依赖(color变量) => 尽可能上移 --> <div id="div">123</div> <!-- 需要使用color变量这个资源 ,之前必须设置过color这个属性--> <script> div.style.backgroundColor = color; </script> </body> <!-- 位置③ --> <!-- 出现在body标签底部:功能型JS脚本 --> <script> bd.style.backgroundColor = '#0ff'; </script> <!-- 完成需求1 --> <script> div.style.color = 'red'; </script> <!-- 外联出现位置同内联 --> <!-- 拥有src的外联script标签,会自动屏蔽标签内部的代码块 --> <script src="js/02.js"> alert(123) </script> </html>
三,变量的定义
1,script标签内,代表js,采用的是js语法
2,简单规范,//单行注释
/*
多行注释
*/
3,语句以分号或者是换行结束
4,变量的定义:声明+初始化
ES5变量的定义:
注:ES5标准下无块级作用域,只有方法可以产生实际的局部作用域无块级作用域的局部变量
var a = 10;
全局变量:
b=20// eg:验证 // 方法的自调用,就会产生一个局部作用域 (function () { var x = 10; y = 20; })() // alert(x) 报错,x只能在局部作用域中使用 // alert(y); 正常使用
// 块级作用域 { var n = 10; // 无视块级作用域 m = 20; // 全局变量,更无视块级作用域 } // alert(n) // 可以 // alert(m) // 可以
ES6变量的定义
有块级作用域的局部变量
let aa = 100;
有块级作用域的常量
const bb = 200;{ let xx = 100; const yy = 200; } // alert(xx); // 无法访问 // alert(yy); // 无法访问 // 函数产生的局部作用域同该情况
// 命名规范:常量名全大写 const MM = 1000; // MM = 2000; // 常量值不允许更改
变量名的命名规范:
1,可以由字母,数字,下划线,$组成,但是不能以数字开头(可以包含中文,采用驼峰命名法)
2,区分大小写
3,不能与关键字保留字重名\
四,三种弹出框
弹出框:一个弹出框只能弹出一条消息
确认框:弹出的窗口可以选择确定以及取消,获得返回值
输入框:弹出的窗口可以输入内容,获得的返回值可以是输入的内容或者是null
确认框和输入框都可以获得返回值
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title>三种弹出框</title> </head> <body> <script> // 弹出框 alert("普通弹出框", "呵呵"); // 呵呵被忽略了 // 确认框 var res = confirm("你是男的吗?"); // true | false alert(res); // 输入框 var res = prompt("请输入你的小名!"); // 确定为输入值, 取消为null alert(res); </script> </body> </html>
五,四种调试方式
一般用于程序出现错误群钊错误
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title>四种调试方式</title> </head> <body> <script type="text/javascript"> var a = 10; var b = 20; // 四种查看变量的值的方式 // alert(a);//直接跳出一个窗口 // alert(b); // console.log(a);//在后台看 // console.log(b); document.write(a);//支架添加在文本中 document.write(b); // 断点调试 检查中看sources </script> </body> </html>
六,数据类型
一,值类型,
1,number数字类型
typeof()查看类型,可以省略()
2,string字符创类型
3,布尔类型 true|false
4,undefined:未定义类型
二,应用类型
5,function:函数类型
6,object:对象类型
判断:instanceof
三,特殊的object
7,null:空对象
8,Array:数组对象
9:Date:时间对象
10:RegExp:正则对象
<head> <meta charset="UTF-8"> <title>数据类型</title> </head> <body> 数据类型 </body> <script type="text/javascript"> // 一. 值类型 // 1.number:数字类型 var a = 10; // typeof()查看类型,可以省略() console.log(a, typeof a); // 判断 console.log(typeof a == 'number'); a = 3.14; console.log(a, typeof a); a = 314e2 console.log(a, typeof a); // 2.string:字符串类型 var a = '字符串'; console.log(a, typeof a); a = "字符串"; console.log(a, typeof a); // ES6会检测变量的重复定义,报错 // let x = 10; // let x = '10'; // 3.boolean:布尔类型 true|false a = true; console.log(a, typeof a); // 4.undefined:未定义类型 var b; console.log(b, typeof b); var c = undefined; console.log(c, typeof c); // 二.引用类型 // 5.function:函数类型 var m = function () {}; console.log(m, typeof m); // 6.object:对象类型 var obj = {}; console.log(obj, typeof obj); obj = new Object(); console.log(obj, typeof obj); // 判断 // instanceof:对象类型判断 console.log(obj instanceof Object); // 三.特殊的Object // Number() String() Boolean() Math // 7.null:空对象 var o = null; console.log(o, typeof o); // 判断 console.log(o == null); // 8.Array:数组对象 o = new Array(1, 2, 3, 4, 5); console.log(o, typeof o); console.log(o instanceof Object); // 判断 console.log(o instanceof Array); // 9.Date:时间对象 o = new Date(); console.log(o, typeof o); // 10.RegExp:正则对象 o = new RegExp(); console.log(o, typeof o); </script> </html>
七,类型转换
一,显性转化
1,num与bool转换成字符串
var c = String(a); c = String(b); 或者 c = a.toString(); c = b.toString();
2,bool与str装换成num
var aa = true; var bb = '10'; var cc = Number(aa); cc = Number(bb); 或者: cc = + aa; cc = + bb; 或把字符串转成整形或者浮点型: 浮点型时:只识别第一个小数点 整数型时:只识别第一个小数点之前的整数,如果没有小数点或者是小数点之前的字符串存在文本,则不识别,直接输出NaN cc = parseFloat('3.14.15.16abc'); cc = parseInt('10.35abc'); isNaN:判断是否可以转成数字型 var res = parseInt("abc10def"); console.log(res, isNaN(res))
二,隐性转化
5 + null // 5 "5" + null // "5null" "5" + 1 // "51" 字符串的拼接 "5" - 1 // 4 自动转成数字型进行减 console.log("5" - 1); "" + ? // "?"
八,运算符
1,算数运算符(只存在number类型运算)
加 减 乘 除 自增 自减
1.++/--在前在后,自身值一定改变, a++/++a => a = a + 1 2.++/--在前先自运算,再他运算 1.++/--在后先他运算,再自运算
2,赋值运算符
= += -= *= /= %=
3,比较运算符
== === != !== > < <= >=
console.log('5' == 5); // true, 值相等即可 console.log('5' === 5); // false, 值与类型均要相等
console.log('5' != 5); // fasle console.log('5' !== 5); // true
4,逻辑运算符(运算结果为true|false)
&& 与
真,真 => 真 真,假 => 假 假,真 => 假 短路 假,假 => 假 短路 &&运算,有假即假,所有前面为假,后面没必要被执行,所以被短路
||或
真,真 => 真 短路 真,假 => 真 短路 假,真 => 真 假,假 => 假 ||运算,有真即真,所有前面为真,后面没必要被执行,所以被短路
!非
真则假,假则真,负负得正
三目运算符(三元运算符)
结果 = 条件表达式 ? 结果1 : 结果2;
结果不一样要与表达式有关系,但表达式为真则结果为结果1,反之为结果2,