JavaScript
1.什么是js
与网页进行交互的脚本语言，有一定的逻辑性
脚本特点：辅助，简单，即写即所得
2.JavaScript 语言的特点
脚本语言 即写即所得
基于对象 面向对象，同时也支持面向过程
简单
动态性
跨平台 现在的js 可以在客户端上运行 可以在服务端运行 客户端运行:只要能装浏览器的地方，就能运行js 服务端运行:window server Linux...基于 Nodejs
3js的组成部分
ECMAScript 定义语法规范 保留字 关键字
DOM档对象类型
BOM 浏览器对象模型 控制浏览器的 前进 后退...
Javascript书写
1, 导入JavaScript标签:
<script ype=“text/javascript”></script>
2, 在标签中间写js代码
<script type="text/JavaScript">
//给用户使用
alert("我是提示框!!!!");
document.write("我被输出到页面!")
document.write("<h1>我是不是 很大</h1>")
// 给我们开发者使用
console.log("我在控制台输出,我是给程序员看的")
</script>
注意:
1 document.write可以输出任何HTML的代码
2 script标签可以出现多次, 且可以出现在html文件的任何地方, 建议写在head之间; 另外,同一个文件中Javascript和HTML代码, 它们的执行顺序都是自上而下，谁在前就谁先执行, 谁在后就后执行.
3, 注释
<script>
// 单行注释
// console.log("11111");
//多行注释
/*多行注释*/
/*console.log(1111);
console.log(1111);
console.log(1111);
*/
//单行注释 ctrl + /
//块注释 shift+ ctrl + /
</script>
4，js的引入
<!-- 写 / 没有路径提示,就装一个 path Intellisense插件 -->
<!-- 如果 script 使用src属性,就在标签的中间,不能在写其他的代码 -->
<script src="./js/index.js">
</script>
<!-- 想运行 alert,再写一个script标签 -->
<script>
alert("台上有一位靓仔!");
</script>
<!--
src: 引入外面的js文件 重点
defer
async
defer和async 都是异步加载
async 异步加载 + 代码加载完成后立即触发(执行)
defer 异步加载 + 页面解析完后,才触发(执行)
注意:"defer和async要和src结合使用"
charset:设置字符集的编码 gb2310, utf-8,utf-16 utf-8 万国码 (了解)
-->
<script>标签的属性:
src 表示要引入的外部文件
type 表示脚本语言的类型 text/javascript,默认值就是它.
language已废弃。原来用于代码使用的脚本语言。由于大多数浏览器忽略它，所以不要用了。
defer：可选。(等页面加载完成后,才执行js)表示脚本可以延迟到文档完全被解析和显示之后再执行。由于大多数浏览器不支持，故很少用。 async
charset：可选。表示通过 src 属性指定的字符集。由于大多数浏览器忽略它，所以很少有人用它。
变量的声明
<!--
1.写一个script标签
2.使用var关键字 varible
3.运行
name 是window对象的一个属性
-->
<script>
console.log("-------声明变量---------");
// console.log(name);
//1.用var 声明变量,而变量名称 sName
var sName; //有值,是 undefined的值 (undefined:未定义)
console.log(sName); //声明变量,未赋值的默认值是undefined
//2.给sName赋予初始值
sName = "刘德华";
console.log(sName); //刘德华
//2.直接声明变量,并且赋予初始值
console.log("-------声明变量,并且赋予初始值---------");
var age = 20;
console.log(age); //20
//3.如果有多个变量
console.log("-------如果有多个变量---------");
// = 等于符号,是把右边的值,赋到左边, 使用"逗号"隔开
var myage = 20, mysex = "男", myaddress = "中国";
console.log(myage); //20
console.log(mysex); //男
console.log(myaddress); //中国
// var 变量名称 = "值";
// var myName = "辣椒种子";
// console.log(myName);
//js属于弱类型语言,弱类型语言变量的值可以随时修改
var myAge;
myAge = 30;
// console.log(myAge);
console.log(typeof myAge); //number 数值
myAge = "三十";
// myAge = "999";
console.log(myAge);
console.log(typeof myAge); // string
var var1 = 20;
console.log(var1);
var Abstract = "你好";
console.log(Abstract);
// vscode, Hbiulid, webs..
// var num = 100;
// var anum = 20;
// var bnum = 30;
// var cnum = 30
// var enum=30;
// var a = "刘德华";
// var b = 20;
// console.log(sName);
//变量命名规则
//1. 只能是数字,字母,下划线,$
//2. 不能以数字开头
//3. 不能是关键字和保留字
//4. 严格区分大小写
//5. 遵循驼峰命名法
// 小驼峰 变量,形参 myName
// 大驼峰 构造函数,类 MyName
//6.语义化 (见名思义)
// var a20 = 30;
// var _ = 99;
// var $ = 200;
</script>
变量的命名规范
变量名可以是数字,字母,下划线_和美元符$组成;
第一个字符不能为数字
不能使用关键字或保留字
标识符区分大小写，如：age和Age是不同的变量。但强烈不建议用同一个单词的大小写区分两个变量。
变量命名尽量遵守驼峰原则: myStudentScore
变量命名尽量见名思义, 可参考下图
数据类型
JS数据类型一般可以分为:
Boolean: 布尔类型
Number：数字（整数int，浮点数float ）
String：字符串
Object：对象 (包含Array数组 )
特殊数据类型 Null、Undefined
注意: 变量的类型在赋值时才能确定
typeof 操作符:
用来检测变量的数据类型, 对于值或变量使用 typeof 操作符会返回如下字符串:
Undefined数据类型的值为: undefined 未定义
Boolean数据类型的值为: boolean 布尔值
String数据类型的值为: string 字符串
Number数据类型的值为: number 数值
Object数据类型的值为: object 对象或者null
Function数据类型的值为: function 函数
<script>
//1. 法外狂徒张三体重70KG 口语 ---> js认识的格式
var sName = '张三'
console.log(typeof sName); // string 由一组双引号或单引号组成字符
var weigth = 70;
console.log(typeof weigth); //number 整形,浮点型(小数类型)
var flag = true
console.log(typeof flag); // boolean true真,false假
var age;
console.log(typeof age); // undefined 未定义
var obj = null;
console.log(typeof obj); // object 对象类型
var a = null;
console.log(a); // null 空对象
//js有6种基本数据类型 , 8个
// 值类型 string,number,bool,null,undefined
// 引用类型 object (Array,Function,Date...)
//NaN 特殊的值 不是一个数字
console.log(0 / 0);
console.log("你好" * 100);
//number
// var num = 10;
// var a = NaN;// 不是一个数字
// console.log(typeof NaN); //number
//牢记
console.log(null == undefined); //true
//科学计数法 了解
var box = 4.12e9; //e9 9个0
4120000000
// 0.0000412 4.12e-5
console.log(Number.MAX_VALUE); //了解
console.log(Number.MIN_VALUE); //了解
//isNaN() 是数值为false,不是数值 true //掌握
console.log(isNaN("你好")); //true
console.log(isNaN(99)); //false
console.log(isNaN("99")); //false 字符串的数字
//parseInt 转换整型 //重点
//parseFloat 转换浮点型(保留小数点) //重点
var num = 12.645;
console.log(parseInt(num)); //12
var num = "12.345";
console.log(parseFloat(num));
var h = "35.56px";
console.log(parseInt(h));
console.log(parseFloat(h));
var num = prompt("请您输入一个数字?");
console.log(isNaN(num) == false);
</script>
类型转换
<script>
//0false,1true
//Boolean true/false
//1.其他类型转boolean类型
var str = ""; //空字符串
console.log(Boolean(str)); //false
var str = "你好"; //空字符串
console.log(Boolean(str));//true
var str = "0"; //空字符串
console.log(Boolean(str));//true
var str = " "; //空字符串
console.log(str.length);//true
console.log(Boolean(str));
//字符串转bool类型,有值为true,没有值为false
//2.数值-->Boolean
// 0和NaN为false,非0为true
var num = 0;
console.log(Boolean(num)); //false
var num = 1;
console.log(Boolean(num)); //true
var num = 2;
console.log(Boolean(num)); //true
var num = -1;
console.log(Boolean(num)); //true
var num = NaN;
console.log(Boolean(num)); //false
// null和undefined 始终为false;
console.log(Boolean(null)); //false
console.log(Boolean(undefined));//false
var obj = {}
console.log(Boolean(obj)); //true
// 转boolean
//1. 非空字符串为true,空字符串为false
//2. 非0为true,0和NaN为false
//3. null和undefined始终为false
//4. 对象始终为true,只要不为null
// shift + alt + F
</script>
JS运算符的使用 - 算术运算符
算术运算符 ： +，-, *, /, %(取余数)
字符串和变量的拼接：+
关系运算符 ： <、>、<=、>=、==、===、!=, !==
逻辑运算符 ： && 与(且)、|| 或、! 非
赋值运算符 ： =、+=、-=、*=、/=、%=
自增、自减 ： ++a, a++, --a, a--
JS代码规范:
保持代码缩进
变量名遵守命名规范, 尽量见名思意
JS语句的末尾尽量写上分号;
运算符两边都留一个空格, 如：var n = 1 + 2;
