我爱编程

js基础day01

2018-03-29  本文已影响26人  codeTao

js基础 day01

一.js历史

1.什么是JavaScript
a.Nombas公司 开发了 C 减减的嵌入式脚本语言 ， 运行在 CEnvi 的共享软件
b.网景公司 ，开发了 LiveScript ->JavaScript(蹭热度) ， 运行在 Netscape Navigator 浏览器
c.微软   ， 发布 IE 3.0 时搭载了一个 JavaScript 的克隆版， 叫JScript   ， 运行在IE 3.0
2.JavaScript与ECMAScript的关系
3.javaScript组成
esdombom.gif
4.JavaScript作用

二.第一个JavaScript程序

1.Script标签的说明
<style type="text/css">

</style>

<script type="text/javascript">

</script>
2.Script 标签位置
3.helloWorld

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

4.JavaScript中的注释
    错误用法：
    /*
      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 变量的命名规范
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 其他命名法(了解)
第一个单词以小写字母开始，以后的单词首字母都是大写, 如: var userName = 'sunke' 

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

在Pascal标记法命名的变量前附加一个小写字母（或小写字母序列），说明该变量的类型。例如，i 表示整数，s 表示字符串。如 :  var sName="小明"
3.7.控制台输出
   console.log(1); // 输出普通日志
   console.warn('1'); // 输出警告日志
   console.error('1'); // 输出错误日志

输出日志的快捷键
a.log + enter/ tab
3.8.变量类型
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.自加(累加 ) 单独使用

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

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

4.3.2.自减 单独使用

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

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

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

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

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.自减在表达式中的使用

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

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.全等于 ===

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

4.5.6.大于等于 >=

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

4.5.7.小于等于 <=

var a = '3';
var b = 5;
console.log(a <= b);
4.6 逻辑运算符

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 逻辑运算符特殊性

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

五.条件语句

1.if语句
if语句语法结构：

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

var a = 1;
if (a > 3){
    alert('if条件为真');
}
2.if else
if else 语法结构
if(判断条件){
    当条件为真的时候执行代码块
}else{
    当条件为假的时候执行代码块
}

var age = 11;
if(age > 18){
        alert('成年人 , 去网吧上网');
}else{
        alert('未成年, 回家赶紧学习吧');
}
3.if else语句 特点: 只能执行一个代码块
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
var num = 2;
if(num > 10){
        alert('num大于10');
    }else{
        alert('num小于10');
    }

使用三目运算符

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

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

上一篇 下一篇

猜你喜欢

热点阅读