javascript零基础入门(小白)

1.js 历史
JavaScript 作为 Netscape Navigator 浏览器的一部分首次出现在 1996 年。它最初的设
计目标是改善网页的用户体验。
作者:Brendan Eich
期初 JavaScript 被命名为 LiveScript,后因和 Sun 公司合作,因市场宣传需要改名
JavaScript。后来 Sun 公司被 Oracle 收购,JavaScript 版权归 Oracle 所有。

2.浏览器组成
1.shell部分——用户能操作部分壳
2.内核部分——用户看不到的部分
1)渲染引擎(语法规则和渲染)
2)js引擎
3)其他模块(如异步)

3.js引擎
2001年发布ie6,首次实现对js引擎的优化。2008年Google发布最新浏览器Chrome,它是采用优化后的javascript引擎,引擎代号V8,因能把js代码直接转化为机械码来执行,进而以速度快而闻名。后Firefox也推出了具备强大功能的js引擎Firefox3.5 TraceMonkey(对频繁执行的代码做了路径优化)
Firefox4.0 JeagerMonkey

4.开始学习 js
js 三大部分 ECMAScript、DOM、BOM
如何引入 js?
1、页面内嵌标签,写 head 里面也行,写 body 里面也行
例:

<body>
<script type="text/javascript"> 
//告诉浏览器我们是 js
</script>
</body>

2、外部 js 文件,引入
例如:以 lesson.js 保存文件,再引入到 html 中
为符合 web 标准(w3c 标准中的一项)结构(html)、行(js)、样式(css)
相分离,通常会采用外部引入。
一个文件中可以包括多个 css,js——不混用
特殊写页面,大部分写在外部——不混用
如果同时写了内部的 js 和外部的 js,那么是外部的 js 文件显示出来

js 的逼格(特有特色)

编译型语言解释性语言
怎么做通篇翻译后,生成翻译完的文件, 程序执行翻译后的文件看一行翻译一行,不生成特定文件
代表语言C,C++JS,PHP,python 带尖角号
优点快(常用于系统,游戏)可以跨平台
缺点移植性不好(不跨平台,window 和Linux 不能混用)稍微慢点

js 是解释性语言:(不需要编译成文件)跨平台
java 先通过 javac,编译成.class 文件,通过 jvm(Java 虚拟机)进行解释执行
.java→javac→编译→.class→jvm→解释执行(java 可以跨平台)(java 是 oak 语言)

是异步加载 单线程:同一时间只能做一件事——js 引擎是单线程 (同一时间做很多事叫多线程) ECMA(欧洲计算机制造联合会)标注:为了取得技术优势,微软推出了 JScript, CEnvi 推出 ScriptEase,与 JavaScript 同样可在浏览器上运行。为了统一规格 JavaScript 兼容于 ECMA 标准,因此也称为 ECMAScript。 js 是轮转时间片

在这里插入图片描述

主流浏览器(必须有独立内核)市场份额大于 3%内核名称
IEtrident
chromewebkit/blink
firefoxgecko
operapresto
safariwebkit

开始学习 js

js 三大部分 ECMAScript、DOM、BOM
如何引入 js?
1、页面内嵌标签,写 head 里面也行,写 body 里面也行

<body>
<script type="text/javascript"> 
//告诉浏览器我们是 js
</script>
</body>

2、外部 js 文件,引入
例如:以 lesson.js 保存文件,再引入到 html 中
为符合 web 标准(w3c 标准中的一项)结构(html)、行为(js)、样式(css)
相分离,通常会采用外部引入。
一个文件中可以包括多个 css,js——不混用
特殊写页面,大部分写在外部——不混用
如果同时写了内部的 js 和外部的 js,那么是外部的 js 文件显示出来

js 基本语法
1、变量(variable)
HTML,css 不是编程语言,是计算机语言,编程语言需要有变量和函数
变量是存放东西,方便后续使用的框
1)变量声明
1.声明、赋值分解
var a; 这个叫变量声明。我们向系统中申请了 var 这个框,命名叫 a 给 a 赋值 100,写作 a =100,这里不是等号是赋值
var a ;a =100;可以简化写成 var a=100;
2.单一 var 声明法

在这里插入图片描述

如写做:var a = 10;a=20;那么后面的 20 就会覆盖掉前面的 10
2)命名规则(用接近的英文单词)———— 起变量名一定要以英文语义化
1.变量名必须以英文字母、、$ 开头
2.变量名可以包括英文字母、
、$、数字
3.不可以用系统的关键字、保留字作为变量名

在这里插入图片描述

基本语法

下面是变量,例:var a = 10;
var b = 20;
var c;
c = a + b;
先运算等号右边的 a+b,运算完后,再赋值给左边 c
先取值,再赋值
运算大于赋值的优先级
js 是动态语言,动态语言基本上都是解释性语言,解释性语言基本上都是脚本语言
js 是浮点型语言(带小数点)
值类型(数据类型)
1、不可改变的原始值(栈数据)栈 stack
Number,String,Boolean,undefined,null
已经放进去的值不可改变,只会改房间编号为 null(硬盘原理)
Number 数字,例 var a = 123;
String 字符串,语言放双引号里,例 var a=”语言”,““是空串
Boolean 布尔数字,就两个值,false,true
undefined 是没有定义的,表示还没赋值,仅一个值 underfined
null 代表空,占位用,用空值来覆盖

例 var a =10;
var b = a;
a = 20;
document.write(b);
答案:10
原始值是我把一个值放到另一个值里面,改了第一个值,第二个值不变
2、引用值(堆数据)大致上放堆 heap 里面
array 数组, Object, function … data,RegExp 正则
var arr = [1,2,3,4,5,false,”abc”]; //这是数组
例:var arr = [1];
var arr1 = arr;
arr.push(2);
document.write(arr1);
答案:arr 是 1,2。arr1 是 1,2
引用值是把第一个值放到第二个值里面,改第一个值,第二个值也改变
js 由值决定类型。原始值和引用值唯一的不同是赋值形式不同

在这里插入图片描述
var a = 10;var b =a;是 a 先取出 10,copy 一份放到 b 里面,改变 a 的值,b 的值是不
变的,再把 a=20;时 b 的值还是 10,不发生改变
var arr = [1,2];var arr1 =arr;arr.push(3);
答案:这往[1,2]放 3,arr 和 arr1 都是[1,2,3]
引用值是在栈内存里面放堆的地址,拷贝的也是地址,所以改变 arr,arr1 也变了
var arr = [1,2]; var arr1 =arr; arr = [1,3]; document.write(arr1)
答案:arr = [1,3];是新建了一个新的房间。arr1 是 1,2,现在是插入新引入值”房间”,
会在堆里面重新申请一间房,并指向新房间

js 语句基本规则

1、语句后面要用分号结束“;”但 function test(){},for(){},if(){}后面都不用加分号
2、js 语法错误会引发后续代码终止,但不会影响其它 js 代码块
错误分为两种
1)低级错误(语法解析错误),不能写中文
2)逻辑错误(标准错误,情有可原,错的那个执行不了)
3、书写格式要规范,“= + / -”两边都应该有空格

js 运算符

一、运算操作符

  1. “+”作用:数学运算、字符串链接
    2.任何数据类型加字符串都等于字符串
    例 var a = “a”+ true + 1; //打印 atrue1
    例 var a = 1 + “a” + 1 + 1; //打印 1a11
    例 var a = 1 + 1 + “a” + 1 + 1; //打印 2a11,从左向右运算
    例 var a = 1 + 1 + “a” +( 1 + 2); //打印 2a3
    例 var a = 0 – 1; //等于-1 例 var a = 2 * 1; //等于 2 例 var a = 0 / 0; //答案是 NaN,应该得出一个数字类型的数,但是没法表达,
    就用 NaN (NaN 是 Not a Number 非数,不是数,但是是数字类型
    例 var a = 1 / 0; //是 infinity
    例 var a = -1 / 0; /是-infinity

%,摩尔,模,是取余数的意思
例 var a =5%2 //5%2 是五除二的余数,商二余一
例 var a =5%1 //是五除一的余数,结果是 0 例 var num = 1 % 5; //意思是 1 除以 5 的余数。商 0 余 1 例 var a =4%6 //是四除六的余数,结果是 4 例 var a = 4;a % = 5;document.write(a); // 4 例 var a = 0;a % = 5;document.write(a); //0 例 var a = 10;a %= 2;document.write(a); //0 例 var a = 3;a % = 4; //4 “-”,“*”,“/“,“%”,”=“,“()”

优先级”=“最弱【赋值符号优先级最低】,”()”优先级较高
“++”,“- -”,”+=“,“-=”,“/=“,“*=”,“%=”
++
例 var a = 10; a = a + 1; //结果 11
例 var a = 1;
a = a + 1;写成 a ++是一种简化形式“++”,是自身加一,再赋值给自身
a++是 a=a+1 的简化形式
例 var a =10;document.write(++a );document.write(a); //答案 11;11
是先执行++,再执行本条语句 document.write(++a)
例 var a =1;document.write(a ++);document.write(a); //答案 1;2。是先执行
语句(document.write(a)),再++,所以第一次打印的还是 a,第二次打印 a++后的值
例 var a =10;var b=++a -1+a++;document.write(b + “ ” + a) //答案 21 12
先++a,这个时候 a=11,再-1,再加 a,b 就是 21,最后++,a 就是 12
赋值的顺序自右向左,计算的顺序自左向右(按数学来)
例 var a =1;var b = a ++ + 1;document.write(b); //答案 2,先执行 var b =a+1, 再 a++
例 var a =1;var b = a ++ + 1;document.write(a);document.write(b); //答案 2,2 例 var a =1;var b = ++a + 1;document.write(a);document.write(b); //答案 2,3 例 var i = 1;var a = i++; //答案 a = 1; 此时 i 先将值 1 赋给 a,然后自己+1,i=2;
var b = ++i; //答案 b = 3;此时 i 先自己+1 为 3.再给 b 赋值,b=3;

“- -”,是自身减一,在赋值给自身
例 var a = 1;var b = a-- + – a;document.write(b);
//答案 0,先执行–a;此变成
0,然后第一个 a 也变成 0,那么 b = 0-- + --a 例 var a = 1;var b = --a + --a;document.write(b);
//答案-1 例 var a = 1;document.write(a++);document.write(a);
//答案 1;2 例 var a = 1;document.write(++a);document.write(a); //答案 2;2 例 var a =1; var b = a ++ +1;document.write(b);
//答案 2 a 写在后面就后运行,先计算 a+1=2 赋值给 b 后再++
例 var a = 1;var b= ++a + 1;document.write(a);document.write(b); //答案 2;3
+= -= 例 var a =10;a ++;a ++;a ++;加十个
简化写法:a +=10;也是 a = a+10;
例 var a =10;a += 10 + 1; //答案 21
例 var a = 1;a = a + 10;等于 a+=10
a++是 a +=1 的写法
/=
例 var a=10;a/=2;
//答案 5,是除二赋给自身的意思

例 var a =10;a *=2; //答案:20,是乘二赋给自身的意思
%=
例 var a=10;a%=2; //答案:0, 10 能整除 2,余数是 0,取余,余数赋给自身。
例 var a=3;a%=4; //答案:3,3 除以 4,余数为 3,余数赋给自身。
例 var a=0;a%=4; //答案:0,0 除以 4,余数为 0,余数赋给自身。
例 var a = 1;a% =10; //答案:1,1 除以 10,余数为 1,余数赋给自身。

二、比较运算符

1、“>”,”<”,”==”,“>=”,“<=”,”!=”比较结果为 boolean 值
但凡是运算符,都是要有运算的
用到布尔值,true 或 false
字符串的比较,比的是 ASCII 码(七位二进制 0000000) >, < 例 var a = “a”>“b”;document.write(a); //答案是 false
例 var a = 1 > 2;document.write(a); //答案是 false
例 var a = 1 < 2;document.write(a); //答案是 true
例 var a = “1”>“8”;document.write(a); //答案是 false
例 var a = “10”>“8”;document.write(a); //答案 false,不是十和八比,是字符串一
零和八比,先用开头的一和八比,比不过就不看第二位了;一样的就拿零和八比
例 var a = 123;document.write(a); //答案 false
运算结果为真实的值

= =,等不等于
例 var a = 1 == 2; //答案是说 1 等不等于 2,因为 1 肯定不等于 2,所以值为 false
例 var a = NaN == NaN; //答案是 false,NaN 不等于任何东西,包括他自己
例 var a = undefined == underfined; //答案是 true
例 var a = infinity == infinity; //答案是 true
例 var a = NaN == NaN; //答案是 false。非数 NaN 是不等于自己的
NaN 得不出数,又是数字类型,就是 NaN

!=是否不等于,非等
比较结果为 boolean 值:true 和 false

三、逻辑运算符:“&&”,“||”,“!“运算结果为真实的值

“&&”与运算符
两个表达式:先看第一个表达式转换成布尔值的结果是否为真,如果结果为真,那
么它会看第二个表达式转换为布尔值的结果,然后如果只有两个表达式的话,只看
看第二个表达式,就可以返回该表达式的值了,如果第一位布尔值为 false,不看后
面的,返回第一个表达式的值就可以了
运算符就是要求结果
例 var a = 1 && 2; //答案 2,如果第一位 1 为真,结果就为第二位的值 2 例 var a = 1 && 2 + 2; //答案 4,如果 1 为真,结果就为 4 例 var a = 0 && 2 + 2; //答案 0 例 var a = 1 && 1 && 8; //答案 8,先看第一个是否为真,为真再看第二个,
中途如果遇到 false,那就返回 false 的值
例 var a =1 + 1 && 1 – 1;document.write(a); //答案 0
如果是三个或多个表达式,会先看第一个表达式是否为真,如果为真,就看第二个
表达式,如果第二个也为真,就看第三个表达式(如果为真就往后看,一旦遇到假
就返回到假的值),如果第三个是最后一个表达式,那就直接返回第三个的结果
如果第一个是假,就返回第一个值,当是真的时候就往后走,一旦遇到假,就返回
例:2>1 && document.write(‘成哥很帅’) //意思是如果 2 大于 1,那么就打 印成哥很帅,如果前面真才能执行后面的(相当于短路语句使用)
&&与运算符是有中断作用的,当短路语句使用(如果。。那么。。) 例 var data = …; //执行一个语句,会用到 data
data&&执行一个语句全用到 data
例 data && function(data);

&与运算 我们一般不用
例 var num = 1 & 2;document.write(num); //答案 0 例 var num = 1 & 1;document.write(num); //答案 1 例 var num = 1 & 3;document.write(num); //答案 1

上下一与,不同为 0,相同为 1
1 在二进制中,是 1(为了对齐补的 0)01
3 在二进制中,是 1111
运算结果01

“||”或运算符
例 var num = 1 || 3; //答案 1 例 var num = 0 || 3; //答案 3 例 var num = 0 || false; //答案是 false
看第一个表达式是否为真,如果为真,则返回第一个值,碰到真就返回
如果第一个表达式是假,就看第二个表达式,如果第二个是最后一个,就返回第二
个的值
关注真假的说法:全假才为假,有一个真就为真
例 var num = 0 || false || 1;document.write(num); //答案 1 例 div .onclick = function(e){
非 IE 浏览器直接取 e 值
var event = e;
IE 浏览器存在 window.event;
}

div.onclick=function(e){IE浏览器
 var event=e;
 IE window.event;
}

写成下面这样就解决了兼容性。在所有的浏览器中都好使
div .onclick = function(e){var event = e || window.event;}

“!“非运算符,否的意思。
先转成布尔值,再取反
例 var a = ! 123;document.write(a); //答案 false。123 的布尔值是 true,取反是 false
例 var a = ! “”;document.write(a); //答案 true。空串””布尔值是 false,取反是 true
例 var a = ! !“”;document.write(a); //答案 false,取反后,再反过来,结果不变
例 var a = true;a =!a;document.write(a) //答案 false,自身取反,再赋值给自身
!=非等于是表达他们到底等不等的
四、被认定为 false 的值:转换为布尔值会被认定为 false 的值 undefined,null,NaN,
“”(空串), 0, false

条件语句

一、If 语句 if、if else if if <—> && 转换
if(条件判断){
当条件成立时,执行里面的执行语句
}当 if 的条件成立时,才能执行{}内的语句
当条件转化为布尔值,如果为 true 就执行;如果为 false 就不执行
例 if(1 < 2){document.write(“老邓很丑”);}
例 if ( 1 > 0 && 8 > 9){}
&&放在 if 中的,全真才为真,&&是并且的意思

例 if ( 1 > 0 || 8 > 9){}
||放在 if 中是或者的意思,有一个是真就可以了
例:

//90-100  alibaba
//80-90 tencent
//70-80 baidu eleme	 xiecheng
//60-70蘑菇街
//60以下你肯定不是我教的
<script text=javascript>
var score=parseInt(window.prompt('input'));
if(score > 90 && score<=100){
document.write('alibaba');
}
if(score > 80 && score<=90){
document.write('alibaba');
}
if(score > 70 && score<=80){
document.write('alibaba');
}
if(score > 60 && score<=70){
document.write('alibaba');
}
if(score < 60){
document.write('你不是我教的');
}
</script>

//不能写 90<score<100,这样写会先比 90<score,等于 true 以后再跟 100 比
//else if 满足了第一条就不看第二条了,用 else if 要满足条件与条件之间互斥,不能
有交叉点。除了上面所有以外的。else if 除了这个以外,满足第一个就不看了,不满
足就看后面的
else if 除了这以外在看这个满不满足。满足条件后就不看了
下面的写法不够简洁
else 是上面这个条件的补集
简洁写法见下

if(score > 90 && score<=100){
document.write('alibaba');
}
else if(score > 80 && score<=90){
document.write('alibaba');
}
else if(score > 70 && score<=80){
document.write('alibaba');
}
else if(score > 60 && score<=70){
document.write('alibaba');
}
else(score < 60){
document.write('你不是我教的');
}

IF 和&&的互相转化
if (1 > 2) {
document.write.(‘a’);
}上面与右边效果完全一样1 > 2 && document.write(‘a’);&&和II比较常用在条件判断中

下一篇

  • 5
    点赞
  • 21
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值