1.js基础
1.javascript的组成
-
核心(ECMScript)
ECMAScript是一个标准
-
文档对象模型（DOM）
Document Object Model。HTML标签
-
浏览器对象模型（BOM）
Browser Object Model
2…js引入及书写
-
内部书写
- 在html文件中直接进行代码书写
-
外部引入
- 所有的< script>元素放在页面的中
-
直接写在标签内
<p onclick="alert(你好)">点击</p>
3.注释
-
单行注释
ctrl+/
// 注释内容 不可换行 -
块级/多行注释
shift+alt+a
/*1.块状注释可以用来注释一行中的部分内容
2.块状注释可以用来注释掉一个函数和大量代码块
3.块状注释对于函数的注释说明在函数部分讲解 */ -
作用
- 1.注释可以让不用的代码不执行
- 2.注释可以用来解释代码的作用
4.调试
-
浏览器调试
- ctrl+shift+i
5.书写注意事项
-
1.对于HTML来讲，从上向下解释性文件，上面的文件无法调用下面的标签或script。
-
2.对于内部脚本，下面的代码可以调用上面的标签或者script
-
3.如果加载的js中，变量或者函数相同时，就会覆盖，我们叫做污染变量
-
4.外边单引号，里边双引号；外边双引号，里边单引号
-
5.断点用来排错
-
6.js语言每行结束时必须使用;结束，必须是半角
-
7.js代码中大小写必须严格按照规定
-
8.一般首字母都是小写，除了类。都是用驼峰式命名规则
驼峰式命名：一般首字母都是小写，除了类。都是用驼峰式命名规则。例如setWorkDay
-
9.js 是点语法，表示某个对象的方法和属性
2.常量方法和变量
1.alert（）
-
alert(‘弹出内容’)；
方法一般包括 方法名（参数…)，都必须是英文半角。
alert(“你好”);//将字符串以弹窗弹出，并且暂停到当前行 -
alert(message?:any):void
提示 message 参数名称 ?可以不写值 :any 这个参数的类型可以是任意的， :void 不返回任何值.
-
将window省略了，window.alert();
2.confirm
var a=confirm("是否继续？");
console.log(a);
- 弹出确定取消框
3.prompt （）弹出输入框
var s=prompt("你今年多大了?","20");
console.log(s);
4.document.write（）
document.write(“10”,“20”,“30”);
document.write("<a href='#'>超链接</a>")
- 文档中写入字符
5.document.body.innerHTML=“你好”;
-
赋值，对象的属性需要赋值
-
对象有两种模式
- 一种是属性，属性使用=赋值
- 一种是方法，方法需要()执行
-
-
innerHTML是所有body内（含body）标签的属性，可以给这些标签内局部增加内容和标签
6.write
- write仅属于document的方法，可以给整个文档中增加内容
7.ESS
-
1.ES5之前，
- 连等，先赋值给=号最左边的元素，再逐级向右。=号左侧是变量名称，=号右侧是值。代码遵从从左至右的执行方式
- 不需要定义，随手写，不需要类型（弱类型）
- =号赋值也是有返回值
-
2.ES5不允许直接使用变量的赋值，要定义变量。
1.如果不使用var声明，那就这个变量就一定是window的属性。
2.而在函数以外的地方使用var声明也是设置了window的属性-
变量命名规则
- 1、变量必须驼峰式命名法
- 2、临时变量必须使用_起头，后面接驼峰式命名,有时候也会在函数的参数中使用临时变量命名
- 3、变量不可以使用关键词和保留字
- 4、全局的变量名不能与window下的属性和方法同名
-
var
- 1.一旦使用var是不可以返回的
- 2.没有使用var会被赋值的结果返回
-
-
3.ES6
-
let 变量
-
const 常量
- 常量定义是名称必须全部大写，并且使用_区分单词
- 使用常量目的是不会被别人修改或者变量污染改变
-
3.数据类型：数据的分类
数据的分类： 字符类型，数值类型，布尔类型，未定义型，空值，对象型
字符型 string
所有使用 ‘’ “” ``都是字符型
- var a=“a”;
- var b=‘1’;
- var c=
true; - var d=‘你好这个非常"不错"’;
- console.log(a,b,c,d);console.log(typeof a);console.log(typeof(a));
数值型 number
1.小数叫做浮点数。
2.定义的不一定和打印的结果完全相同，全部都会转换为10进制
- var a=3
- var b=3.1;
- var c=-5;
- var d=-5.6;
- var e=0xFF;//16进制
- var f=065;//8进制
- var g=3.1e+5;//科学计数法 3.1*10(5)5次幂
- var h=3.5e-5;//科学计数法 3.5*10(-5) -5次幂
布尔类型 boolean
/* var div0=document.getElementById(“div0”); var bool=true;//这就是布尔值;
div0.οnclick=function(){
bool=!bool;//将bool取反，因为这个bool值的值域只有true和false div0.style.backgroundColor=bool ? “red” : “blue”; } */ // var a=true; // var b=false;
- true,false 对和错，是和否，还可以认为是任何事情的两面
未定义值 undefined
-
仅定义变量未设置值
-
var a;
用于全局定义，然后根据需要时赋值，初始是没有值的
-
-
定义变量并且设置值为undefined;
-
var b=undefined;
用于初始值必须是undefined，或者将原有有值的变量修改为undefined
-
空值 null
var a=null;
console.log(typeof a);
console.log(a===undefined);
- 空值是将所有引用地址标记清空，用于清理内存 垃圾回收
- 字符类型，数值类型，布尔类型，未定义型都不需要null清除
对象类型 object
var d="names";
obj={
a:1,
b:"ab",
"c":true,
[d]:"xietian"
}
console.log(obj.a);
console.log(obj.b);
console.log(obj.names);
console.log(obj[d]); console.log(obj["a"]);
-
空对象
- var obj={};
-
设值为空
- obj=null;
-
key
-
key:value//关键词和值
-
对象不能出现重复的key
-
key不需要加""
-
变量作为key必须在外层增加[]
-
获取对象中key的值时有两种方法
- 一种是点语法，点语法使用范畴仅限于key属性固定，并且明确
- 另一种是[]语法，如果是固定的key，就使用字符串方式来设定，如果不固定，直接[变量]就可以
-
4.数据类型转换
数据类型转换分为强制转换和隐式转换两种
1、数值转字符串
-
类型强制转换
var a=15.452;
var b=String(a);将a转换为字符串覆盖原有变量a -
隐式转换
a=a+"";
利用隐式转换方式，没有强制转换，根据运算特征自动转换为字符串，隐式转换所使用的的转换方法是自动执行String(a); -
toString()- 实际上是Object对象的方法，任何类型都可以调用这个方法
- 参数必须是2-36之间，否则报错,转换为指定的进制数
-
toFixed(小数点位数)
a=a.toFixed(2);
console.log(a);
//小数点后两位
-
转换为字符串，并且保留小数点位数，自动四舍五入
-
toExponential();- 转换为指数计数法
-
toPrecision();- 把数字格式化为指定的长度
2、数值转换为布尔值
var a=0;
a=Boolean(a);
console.log(a);//结果为flase
- 除了0以外所有的数值转换为布尔值都是true
- 0转换为布尔值是false
3、数值转换为对象
var a=0;
a=Object(a);
console.log(typeof a);
数值型对象，存储在堆中
4、字符串转换为数值
- 强制转换为数值类型
var a="a";
var a="3.2"
a=Number(a);
-
a=parseInt(a);// 转换为整数 -
a=parseFloat(a);// 转换为浮点数 -
a=parseInt(a,2);//将字符串转换为2进制 -
不能转换进制
var color="FF0000";
color=parseInt(color,16);
console.log(color);
a=parseFloat();
- 隐式转换遵从Number()转换方法
- NaN 数值类型中的非数值
var b="32 1"; //32
var b="32 ";//NaN
b=Number(b);
b=parseInt(b);
b=parseFloat(b);
console.log(b);//NaN
5、字符串转换为布尔值
var str="";
str=Boolean(str);
console.log(str);//flase
- 仅空字符串转换为布尔值时，是false，除此之外全部是true
6、字符串转换为对象
var str="aaa";
str=Object(str); //转换为字符串对象 console.log(str);
str=str.trim();//清除字符串前后空格
var str=" a a ";
str=str.trim();//清除字符串前后空格 console.log(str);
7、布尔转换为数值
var b=true;
b=Number(b);
console.log(b);//1
- true转换为1
- false转换为0
8、布尔转换为字符
- 转换后就是字符串true和false
9、布尔转换为对象
- 转换后就是布尔值对象
10、任何类型转换为布尔值
-
var a=""; var b=0; var c=NaN; var d=false; var e=null; var f=undefined; 以上6种转换布尔值是false，其他都是true - undefined null转换为字符串和数值
var a;
var b=null;
a=String(a);
b=String(b);
console.log(b);
a=Number(a);//转换为数值是NaN
b=Number(b);//转换为数值是0
a=parseInt(a);//NaN
b=parseInt(b);//NaN
console.log(a,b);
- 尽量不要使用连等赋值
5.算术运算符
+（加 ），-（减）， *（乘）， / （除）， %(取模运算符)
var s=a+b;
var s=a-b;
var s=a*b;
var s=a/b;
var s=b%a;
- 运算浮点数运算是会有误差
- 先计算=号右边，完成后的结果赋值给等候左边
var bn0=document.getElementById("bn0");
var sum=1;
bn0.onclick=function(){
sum=sum+1;//先计算=号右边，完成后的结果赋值给等候左边
if(sum%2){
bn0.innerHTML="开";
}else{
bn0.innerHTML="关"; }
}
- 如果在算术运算符中前后出现字符串，并且使用+，必须使用字符串首尾相连的方式将内容连接
var a=3;//因为a不是字符串，所以就会隐式转换为字符串
var a="bbb";//结果为3bbb
- tring()， Number() ，Boolean()， Object();
- 如果运算过程中没有使用字符串，使用+符号，其他类型都会转换为数值，并且相加
var a = 3;
var b = true;
console.log(a + b); //4
- 所有类型遇到 - * / %都会隐式转换为数值，然后运算
var a="5";
var b=2;
console.log(a*b); //10
6.一元运算符和赋值运算符
逻辑运算符
-
+=，-=，*=，/=，%=
- var a=3;
a+=7;//a=a+7; 7就是步长 step
console.log(a+=7);//10
- var a=3;
-
赋值运算符的优先级最低
- >>右移（最后一位丢失）
var a=5;
a>>=1;
console.log(a);//5转换为二进制为110，向左移一位为11，最后结果为3
- <<左移（扩大2的n次幂）
var a=3;
a<<=2;
console.log(a);//12
var a=1;
for(var i=0;i<5;i++){
a<<=1;
console.log(a);//2，4，8，16，32
一元运算符
-
a++;++a;
对于a来说，这两个公式运算结果都是相同。
如果将a++或者++a作为返回值参与运算或者赋值时++a 是+1以后的结果先参与运算或者赋值
a++ 是将a先参与运算或者赋值
var a=3;
var b= (a=a+1) *3;
var b=(a++)*3;//先把a返回
var b=(++a)*3;//把a运算的结果返回
- 对于++ 和 – 通常都会直接使用算术运算来处理，也就是说我们会将内容先隐式转换为数值，然后再运算
7.关系运算符
-
关系运算是返回布尔值的一种运算表达式
-
运算符 < > <= >=
-
== 判断值是否相等
var a=0;
if(a==false){
console.log("aa"); // a-> 0 false ""
}
if(a==null){ // a-->undefined null }
- === 判断值和类型是否相等（一般都使用这个）
if(a===false)
{ console.log("aa"); // a-->false
}
if(a===undefined){
console.log("aa")//a-->undefined
}
- 优先隐式转换为数值，并且比较
var a=3;
var b="3";
console.log(a==b);//自动隐式转换，结果为true
NaN
- isNaN 将这个字符串转换为数值后判断是否是NaN非数值
- console.log(NaN==NaN);//false
- console.log(undefined==null);//因为两者都不是数据,结果为NaN
!= !==
- ！
if(!a)
{ console.log("aa");
// a-->0 null undefined false "" NaN
}
8.逻辑运算
&& 与
- true && true = (第二个值)
- true && false = （第二个值）
- false && true = （第一个值）
- false && false = （第一个值）
|| 或
- true || true = (第一个值)
- true || false = （第一个值）
- false || true = （第二个值）
- false || false = （第二个值）
! 取反
var bool=false;
var bn=document.getElementById(“bn”);
bn.οnclick=function(){
bool=!bool;
取反运算
bn.innerHTML=bool ? “开” : “关”;
}
XMind - Trial Version
扫一扫
3209
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
