js基础 day01

一.js历史

1.什么是JavaScript

1995年在网景公司，发明的JavaScript。一开始JavaScript叫做LiveScript，但是由于当时Java这个语言特别火，就改名为JavaScript,同时期还有其他的网页语言，比如VBScript、JScript等等，但是后来都被JavaScript打败，所以现在的浏览器中，只运行一种脚本语言就是JavaScript,简称:JS。

a.Nombas公司 开发了 C 减减的嵌入式脚本语言 ， 运行在 CEnvi 的共享软件
b.网景公司 ，开发了 LiveScript ->JavaScript(蹭热度) ， 运行在 Netscape Navigator 浏览器
c.微软   ， 发布 IE 3.0 时搭载了一个 JavaScript 的克隆版， 叫JScript   ， 运行在IE 3.0

2.JavaScript与ECMAScript的关系

ECMAScript是由ECMA（欧洲计算机制造商协会）制定的javaScript标准，ECMA英文名称是European Computer Manufacturers Association。
JavaScript是由公司开发而成的，公司开发而成的一定是有一些问题，不便于其他的公司拓展和使用。所以欧洲的这个ECMA的组织，牵头制定JavaScript的标准，取名为ECMAScript。
简单来说ECMAScript不是一门语言，而是一个标准。符合这个标准的比较常见的有：JavaScript、Action Script（Flash中用的语言）

3.javaScript组成

esdombom.gif

JavaScript 的核心 ECMAScript 描述了该语言的语法和基本对象；
DOM 描述了处理网页内容的方法和接口；
BOM 描述了与浏览器进行交互的方法和接口。

4.JavaScript作用

在HTML网页中，主要分为三大块:HTML、CSS、JavaScript
- HTML 从语义上构造网页
- CSS 从审美上美化界面
- JavaScript 从交互上提升用户的用户体验
js被称为对初学者友好的语言

二.第一个JavaScript程序

1.Script标签的说明

要想写js代码, 必须先有标签,在script开始标签和结束标签之间写代码

和style标签一样type可以省略不写

2.Script 标签位置

可以放在任何位置，但是推荐放在两个地方
- a.放在head开始标签和结束标签之间
- b.放在body结束标签之上(推荐使用)

3.helloWorld

括号里面只能放字符串/数值/元素/对象
alert('hello world');

4.JavaScript中的注释

单行注释: 以 // 开头,后面的内容就是注释
快捷键 ctr(cmd) + /
多行注释: /**/ 多行注释可以换行,但是不能嵌套
快捷键 ctr(cmd) + shift + /
注释作用:用于提高代码的可读性
注释是给人看的,方便程序员之间交流,注释不参与程序的编译和运行
注意：多行注释不能嵌套使用

    错误用法：
    /*
      alert(123);
      /*
      alert(123);
      alert(123);
      */
      alert(123);
    */

三.变量

3.1 概念

变量是用来存储信息的容器

3.2 使用变量

a.声明变量 用var来定义一个变量例如 var a;
b.赋值 赋值采用 = 来赋值 a=10;
c.使用 声明的一个变量的时候可以直接赋值例如 var b = 20;

3.3 变量的命名规范

变量名只能以字母 a-z ，A-Z ，数字0-9，字符 _ $ 组成
变量的命名采用驼峰命名法(小驼峰命名法) 首个单词字母小写,后面的单词首字母大写例如 lastName

3.4 变命名注意点：

a.变量名不允许用空格如： sun ke 错误用法
b.变量不能以数字开头, 如: 9sunke 错误用法
c.不能使用关键字或者保留字命名, 如： var new 错误用法
d.变量是区分大小写，
e.同一个作用域下，变量名不能重复
f.不能使用除了 _ $ 以外的其他字符命名变量，如： var #name; 错误用法

3.5 常用关键字和保留字

js_word.png

js_word1.png

3.6 其他命名法(了解)

骆驼式命名法(camel)/小驼峰命名法

第一个单词以小写字母开始，以后的单词首字母都是大写, 如: var userName = 'sunke'

帕斯卡命名法(Pascal)/大驼峰命名法

第一个单词以大写字母开始，以后的单词首字母也都是大写,如: var UserName = 'sunke'

匈牙利命名法(Hungarian)

在Pascal标记法命名的变量前附加一个小写字母（或小写字母序列），说明该变量的类型。例如，i 表示整数，s 表示字符串。如 :  var sName="小明"

3.7.控制台输出

   console.log(1); // 输出普通日志
   console.warn('1'); // 输出警告日志
   console.error('1'); // 输出错误日志

输出日志的快捷键
a.log + enter/ tab

3.8.变量类型

变量类型为5种
- 字符串(string)
- 数字(number) 0-9 科学计数法
- 布尔(boolean) true/false
- 空类型（Null）
- 未定义(undefined)
- 对象(object)
- 数组（array）
用 console.log(typeof a);来查看输出的类型

typeof 关键字用来输出变量的类型

3.9 字符串注意点

字符串拼接, 使用 + 可以将两个字符串拼接到一起

 var str = '李四' + '是个好人';
 console.log(str, typeof str);

字符串引号嵌套使用

//注意:字符串中不能单引号嵌套单引号
var str2 = '张三'是个好人'';
//注意:字符串中不能双引号嵌套双引号
var str3 = "王五"是个好人"";

//字符串单引号可以嵌套双引号
var str22 = '张三是个"好人"';

//字符串双引号可以嵌套单引号
var str33 = "王五是个'好人'";

使用转义字符 \

    //在引号前使用转义字符 , 告诉系统转义字符后面是个单纯的字符
    var str22 = '张三\'是个好人\'';
    console.log(str22);
    var str33 = "王五\"是个好人\"";
    console.log(str33);

四.运算符

4.1 算数运算符

+   -   *   /   %(取余/取模)     ++    --

    var a = 5;
    var b = 10;
    var c = a + b;
    var d = a - b;
    var e = a * b;
    var f = a / b;
    var g = a % b;
    a++;
    a--;

4.2 运算符的优先级

表达式: 是由变量, 数值, 运算符组成, 进行求值的式子
优先级: 优先级会决定当前运算符的执行顺序, 优先级高的先执行
结合性: 运算符同级别情况下, 结合性决定运算的顺序, 是从左往右, 还是从右往左
左结合: 从左往右运算
右结合: 从右往左运算

//数学运算规则: 先乘除后加减
var a = 2 + 3 * 4; 结果是 14

//如果想提升优先级的话用 ()来提升
var a = (2 + 3) * 4; 输出 20

运算符优先级.jpeg

4.3 自增和自减

4.3.1.自加(累加 ) 单独使用

结论: 自加单独使用, ++在变量前, 变量的值都是对变量进行加1操作后的结果

var a = 3;
++a;
 console.log(a); //4

结论:自加单独使用, ++在变量后, 变量的值都是对变量进行加1操作后的结果

var a = 3;
a++;
console.log(a); //4

4.3.2.自减单独使用

结论:自减单独使用, --在变量前, 变量的值都是对变量进行减1操作后的结果

var a = 3;
--a;
console.log(a);  //2

结论:自减单独使用, --在变量后, 变量的值都是对变量进行减1操作后的结果

var a = 3;
a--;
console.log(a); //2

4.3.3.自加在表达式中的使用

结论: ++在变量后 ,a++ 在表达式中运算, a++会先从变量里面取值作为a++表达式的值, 之后再对变量a加1
口诀: ++在后, 先取值, 再加1

var a = 3;
var b = 5;
var c = a++ + b++; // 3 + 5
console.log(a); //4
console.log(b); //6
console.log(c); // 3 + 5 = 8

结论: ++在变量前 , ++a 在表达式中运算, ++a会先对变量a加1操作, ++a再从变量里取值作为++a表达式的值进行运算
口诀: ++在前, 先加1, 再取值

var a = 3; // 4
var b = 5; // 6
var c = ++a + ++b; // 4 + 6
console.log(a); // 4
console.log(b); // 6
console.log(c); // c = 4 + 6

4.4.4.自减在表达式中的使用

结论: --在变量后 ,a-- 在表达式中运算, a--会先从变量里面取值作为a--表达式的值, 之后再对变量a减1
口诀: --在后, 先取值, 再减1

var a = 3;
var b = 5;
var c = a-- + b--;
console.log(a); //2
console.log(b); //4
console.log(c); //3 + 5 = 8

结论: --在变量前 , --a 在表达式中运算, --a会先对变量a减1操作, --a再从变量里取值作为--a表达式的值进行运算
口诀: --在前, 先减1, 再取值

var a = 3;
var b = 5;
var c = --a + --b;
console.log(a); //2
console.log(b); //4
console.log(c); // 2 + 4 = 6

4.4 赋值运算符

用于给变量赋值

+=-= *= /= %=

 var a = 2;
a += 2; // 展开 a = a + 2;
console.log(a);

赋值运算符注意点
- 注意: 复合赋值运算符, 不能同时进行声明变量赋值和运算操作

var b += 2;
console.log(b);  //报错

注意: 复合赋值运算符使用前, 变量要先有值

    var c; // undefined
    c += 2; // c = undefined + 2
    console.log(c); //NaN 非数字类型 not a number

4.5 关系运算符

关系运算符，也叫比较运算符。比较运算符在逻辑语句中使用，以测定变量或值是否相等。

>  <   !=   >=   <=   ==   ===

关系运算符的结果为布尔值
关系运算符不能连用,如果想连用用逻辑运算符

4.5.1. 大于 >

只比较值, 不比较类型

var a = '5';
var b = 3;
console.log(a > b); // 3 > 5 -> false

4.5.2. 小于 <

只比较值, 不比较类型

var a = '3';
var b = 5;
console.log(a < b); //true

4.5.3. 不等于 !=

只比较值, 不比较类型

var a = '5';
    var b = 5;
    console.log(a != b); //false

4.5.4.等于 ==

等于 == 只比较值, 不比较类型

var a = '5';
var b = 5;
console.log(a == b);

4.5.5.全等于 ===

全等于即比较值, 也比较类型, 并且这两个条件有一个不满足就为假false

var a = 5;
var b = 5;
console.log(a === b);

4.5.6.大于等于 >=

展开为 > == , 这两个条件有一个满足结果就是true
大于等于 >= 只比较值, 不比较类型

var a = '5';
var b = 3;
console.log(a >= b);

4.5.7.小于等于 <=

注意: 展开 < == , 这两个条件有一个满足结果就是true
只比较值, 不比较类型

var a = '3';
var b = 5;
console.log(a <= b);

4.6 逻辑运算符

逻辑运算符有3个，&&（逻辑与）， || （逻辑或）， !（逻辑非）
逻辑运算符用于测定变量或值之间的逻辑
参与逻辑运算符运算的两边一定是布尔值, 结果一般是布尔值

4.6.1.与运算 &&

结论: 有假则为假

console.log(true && true); // 真 && 真 结果为 真
console.log(false && true); // 假 && 真 结果为 假
console.log(true && false); // 真 && 假 结果为 假
console.log(false && false); // 假 && 假 结果为 假

4.6.2. 或运算 ||

结论: 有真则为真

console.log(true || true); // 真 || 真 结果为真
console.log(false || true); // 假 || 真 结果为真
console.log(true   || false); // 真 || 假 结果为真
console.log(false || false); // 假 || 假 结果为假

4.6.3.非运算 ! (也叫取反)

结论: 真取反结果为假, 假取反结果为真

var b = true;
console.log(!b);

var c = false;
console.log(!c);

4.7 逻辑运算符特殊性

逻辑运算符特殊性：如果逻辑运算符两边有一边不是布尔, 会先将非布尔值转换为布尔值, 然后再进行运算
转化原则为：非0即真。

4.7.1.与运算符特殊性

&& 两边有一边不是布尔, 会先将非布尔值转换为布尔值, 先判断左边值是否为真, 如果为真就返回&&右边的值
左边为假, 就返回左边的值, 右边不再进行运算

var a = 'sk666'; // true
var b = 'abc';
console.log(a && b); //结果 abc

var c = 0;
console.log(c && alert(111));  //0

4.7.2.或运算特殊性

|| 两边有一边不是布尔, 先判断左边值是否为真, 先将左边非布尔值转换为布尔值, 如果为真就返回左边的值
左边为假, 就返回右边的值

var a = 'sk666';
var b = 'abc';
console.log(a || b); // 结果为 sk666

var c = 0;
var d = 'abc';
console.log(c || d);  // 结果为 abc

4.7.3.非的特殊性

结论: 会先将非布尔值转换为布尔值, 再取反

var c = 'abc';
console.log(!c); //false

4.8 隐式转换

4.8.1. + 隐式转换

结论: + 两边一边是字符串, 一边是数字字符, 编译器会将数字转换为字符串, 然后在和另一个字符串进行拼接
这个过程就是隐式转换过程 (偷偷的帮你转换类型)

var str = 'sk666';
var str2 = 'v587';
console.log(str + str2);

var aa = '3';
var bb = 4;
var cc = aa + bb;
console.log(cc, typeof cc); // 34

4.8.2. - 隐式转换

结论: - 两边一边是数字, 一边是数字字符, 编译器会将数字字符转换为数字, 然后在和另一个数字进行 - 运算

var aa = '8'; //'aa'
var bb = 4;
var cc = aa - bb; // 8 - 4
console.log(cc, typeof cc); // 4

乘的隐式转换，和减的隐式转换一样
除的隐式转换，和减的隐式转换一样
取模的隐式转换，和减的隐式转换一样

五.条件语句

语句：由字符和语法组成计算机各种指令，这些指令叫语句。
每条可执行语句用分号隔开。
常用语句有条件语句和循环语句。
条件语句也叫判断语句，用于基于不同的条件来执行不同的代码。
if语句中小括号最终结果为布尔值
小括号中条件可以是一个有值的表达式, 一个有值的变量, 或者一个具体的值

1.if语句

if语句语法结构：

if(判断条件){
   当条件为真的时候执行代码
}

执行过程:

如果if小括号条件为真, 就执行大括号中代码
如果if小括号条件为假, 就不执行大括号中代码

var a = 1;
if (a > 3){
    alert('if条件为真');
}

2.if else

if else 语法结构
if(判断条件){
    当条件为真的时候执行代码块
}else{
    当条件为假的时候执行代码块
}

执行过程：

如果if小括号条件为真, 就执行if后面大括号中代码1
如果if小括号条件为假, 就执行else后面大括号中代码2

var age = 11;
if(age > 18){
        alert('成年人 , 去网吧上网');
}else{
        alert('未成年, 回家赶紧学习吧');
}

3.if else语句特点: 只能执行一个代码块

注意:else if语句不能单独使用 ,else if语句一定要结合if语句使用

if(判断条件1){
    当为真的时候执行代码块 1
}else if(判断条件2){
    当为真的时候执行代码块 2
}else if(判断条件3){
    当为真的时候执行代码块3
}else if(判断条件4){
    当为真的时候执行代码块 4
}else if(判断条件5){
    当为真的时候执行代码块 5
} 

else{
    当以上所有的条件都不为真的时候执行代码块
}

执行过程:
    1.先判断if语句中条件1是否为真, 如果为真, 就执行代码1
    2.如果if语句中条件1是为假, 就往下执行else if语句, 判断else if中条件2是否为真
    3.else if中条件2是为真, 就执行代码2
    4.else if中条件2是为假, 就继续往下执行其他的else if语句, 判断条件是否为真,如果为真就执行对应else if语句中的代码
    5.如果所有条件都不满足, 就执行else语句中的代码n

    注意: 只有一个语句执行, 只要有条件满足, 就不再往下执行了

/*
   1.优秀  90分以上
   2.良好  80到90
   3.及格  60到 80
   4.不及格 小于60
 */
var score = 55;
    if(score >= 90){ //优秀  90分以上
        alert('优秀');
    }else if(score >=80){//良好  80到90
        alert('良好');
    }else if(score >=60){ //及格  60到 80
        alert('及格')
    }else {//不及格 小于60
        alert('不及格');
    }

4.switch语句

    switch (变量){
        case 值1:
            语句1;
            break;
        case 值2:
            语句2;
            break;
        ...
        default:
            语句n;
    }
执行过程:
    1.switch语句根据表达式值进行比较, 看表达式的值和哪个case中的值一样,如果一样就执行该case中的代码
    2.如果表达式的值和所有case值都不匹配, 就执行default中的代码
    break : 中止语句, 执行到break就结束语句switch语句

    注意:不能去掉break, 会有贯穿问题, 会一直往下执行直到遇到break为止
    注意:switch 后小括号变量可以是一个具体值, 一个有值的变量, 一个有值的表达式,
    case语句中的值必须是一个具体的值

案例星期一到星期日

5.三目运算符（条件运算符）: 判断条件 ? 语句1 : 语句2

当判断条件为真执行语句1, 为假执行语句2

var num = 2;
if(num > 10){
        alert('num大于10');
    }else{
        alert('num小于10');
    }

使用三目运算符

num>10 ? alert('num大于10') : alert('num小于10');

通过三目运算符可以代替if...else语句
注意: 如果逻辑简单可以使用三目运算符代替if...else语句, 如果逻辑逻辑复杂不建议你使用,可读性会变差

codeStraight原创文章,如有错误,欢迎指正!

js基础day01

js基础 day01

一.js历史

1.什么是JavaScript

2.JavaScript与ECMAScript的关系

3.javaScript组成

4.JavaScript作用

二.第一个JavaScript程序

1.Script标签的说明

2.Script 标签位置

3.helloWorld

4.JavaScript中的注释

三.变量

3.1 概念

3.2 使用变量

3.3 变量的命名规范

3.4 变命名注意点：

3.5 常用关键字和保留字

3.6 其他命名法(了解)

3.7.控制台输出

3.8.变量类型

3.9 字符串注意点

四.运算符

4.1 算数运算符

4.2 运算符的优先级

4.3 自增和自减

4.4 赋值运算符

4.5 关系运算符

4.6 逻辑运算符

4.7 逻辑运算符特殊性

4.8 隐式转换

五.条件语句

1.if语句

2.if else

3.if else语句特点: 只能执行一个代码块

4.switch语句

5.三目运算符（条件运算符）: 判断条件 ? 语句1 : 语句2

你可能感兴趣的:(js基础day01)

js基础day01

js基础 day01

一.js历史

1.什么是JavaScript

2.JavaScript与ECMAScript的关系

3.javaScript组成

4.JavaScript作用

二.第一个JavaScript程序

1.Script标签的说明

2.Script 标签位置

3.helloWorld

4.JavaScript中的注释

三.变量

3.1 概念

3.2 使用变量

3.3 变量的命名规范

3.4 变命名注意点：

3.5 常用关键字和保留字

3.6 其他命名法(了解)

3.7.控制台输出

3.8.变量类型

3.9 字符串注意点

四.运算符

4.1 算数运算符

4.2 运算符的优先级

4.3 自增和自减

4.4 赋值运算符

4.5 关系运算符

4.6 逻辑运算符

4.7 逻辑运算符特殊性

4.8 隐式转换

五.条件语句

1.if语句

2.if else

3.if else语句 特点: 只能执行一个代码块

4.switch语句

5.三目运算符（条件运算符）: 判断条件 ? 语句1 : 语句2

你可能感兴趣的:(js基础day01)

3.if else语句特点: 只能执行一个代码块