随堂练习

javascript基础练习

Javascript基础

Javascipt是一种动态、弱类型、基于原型的脚本语言，由web浏览器进行解释和执行

Javascript的组成

ECMAScript : 核心 (描述了javascript组成语言的语法和基本对象)
DOM : 文档对象模型 (描述处理网页内容的方法和接口)
BOM : 浏览器对象模型 (描述与浏览器进行交互的方法和接口)

Javascript应用到网页的几种方式

方法一：将javascript代码插入html文档部分的标签中<script>

<head>
    <script type=“text/javascript”>
      //javascript 代码
      alert(‘hello world’);
    </script>
</head>

方法二：将javascript代码存放在一个独立的文件。


test.js
alert(‘hello wordld’);


test.html
<head>
  <script type=“text/javascript”src=“test.js”></script>
</head>

JS注释

//          单行注释     
/* …*/      多行注释

JS定义变量

变量由 var 运算符加变量名定义


var age = 25;     
var mood = ‘happy’;

let 声明的变量，具有如下几个特点：

let 声明的变量具有块作用域的特征。
在同一个块级作用域，不能重复声明变量。
let 声明的变量不存在变量提升。

let a = 1
console.log(a);//1
console.log(b);//Uncaught ReferenceError: b is not defined
let b = 2;
function foo(){
    let a = 1;
    let a = 2;//Uncaught SyntaxError: Identifier 'a' has already been declared
}

const 声明一个只读变量，声明之后不允许改变

const a = 1;
console.log(a); //1
a = 2; //Uncaught TypeError: Assignment to constant variable.

const 声明创建一个值的只读引用。但这并不意味着它所持有的值是不可变的，只是变量标识符不能重新分配。

const obj = {a:1,b:2};
console.log(obj.a);//1
obj.a = 3;
console.log(obj.a);//3

关于 var 和 let 区别的一个例子

for (var i = 0; i < 10; i++) {
    setTimeout(function(){
        console.log(i);
    },100)
};
// 该代码运行后，会在控制台打印出10个10

for (let i = 0; i < 10; i++) {
    setTimeout(function(){
        console.log(i);
    },100)
};
// 则该代码运行后，就会在控制台打印出0-9

总结:
  var 声明的变量属于函数作用域，let 和 const 声明的变量属于块级作用域；

  var 存在变量提升现象，而 let 和 const 没有此类现象；

  var 变量可以重复声明，而在同一个块级作用域，let 变量不能重新声明，const 变量不能修改。

JS拼接


当+存在于变量与字符串中间位置的时候就代表是拼接或者连接的作用    
+= 代表什么意思 var a = 1;  a += 3; a = a+3;  给当前这个变量增加多少

JS变量的命名有哪些规则


1. 第一个字符必须是字母、下划线(_)、或美元符号 ($); 

2. 变量名中不能包含空格或标点符号（$ 除外);

3. 变量名区分大小写;       

4. 不能使用保留字、关键字  

4. 为了让变量名有更好的可读性，可以在变量名中适当的插入下划线分隔，       
如：var my_mood = ‘happy’; 

5.使用驼峰命名法(大驼峰,小驼峰)或者匈牙利命名法

[1]小驼峰式命名法（lower camel case）：
第一个单字以小写字母开始；第二个单字的首字母大写，
例如：firstName、lastName。

[2]大驼峰式命名法（upper camel case）：
每一个单字的首字母都采用大写字母，
例如：FirstName、LastName、CamelCase。

[3]匈牙利命名法:
变量名＝数据类型+对象描述
数据类型：指点是JavaScript中六种数据类型之一,undefined、null、boolean、number、string和Object
对象描述：指对象名字全称或名字的一部分，而且要有明确含义，易记而且还要好理解
案例：
var aPerson = []; // Array数组
var oBtn = document.getElementById('btn'); //Object对象
var fnName = function () {}; // function函数
var sName = "alanScott"; // string字符串


6.JavaScript变量名中代表数据类型都有对应的字线，如下所示：

s: 表示字符串String
i: 表示整型Int(它是Number中的整数类型)
fl: 表示浮点Float(它是Number中的小数类型)
b: 表示布尔Boolean
a: 表示数组Array
o: 表示对象Object
fn: 表示函数Function
re: 表示正则Regular Expression

JS关键字保留字汇总


关键字大全：
    break    do  instanceof  typeof
    case     else    new     var
    catch    finally     return  void
    continue     for     switch  while
    debugger    function    this    with
    default  if  throw   delete
    in   try

保留字大全：
    abstract     enum    int     short
    boolean  export  interface   static
    byte     extends     long    super
    char     final   native  synchronized
    class    float   package     throws
    const    goto    private     transient
    debugger     implements  protected   volatile
    double   import  public

JS常见的数据类型

字符串(String)
数值 (Number)
布尔类型 (Boolean)
数组(Array)
对象(Object)
undefined
NULL
Symbol

1.字符串(String)
  字符串由零个或多个字符构成，字符包括字母，数字，标点符号和空格;
  字符串必须放在引号里（单引号或双引号）;
  var mood = “happy”;
  var mood = ‘happy’;



2.数值(Number)
  var age = 25;
  var price = 33.25; 



3.布尔类型 (Boolean)
  布尔型数据只能有两种种值 true 和 false;
  var married = true;
  var married = false;
  与字符串不同，不要把布尔值用引号括起来。
  布尔值 false 与 字符串 "false"是两回事。



4.数组(Array)
  我们的变量一般都只能存储一个内容 所以它其实是一个单一的容器
  我们的数组一般可以存一个或者是多个值 ，所以数组是一个大的容器

  组成部分:
    数组其实是由多个 (键-值) 所组成的一个多容器
    数组的索引 默认是从0开始的

  定义数组
    var arr = new Array(23,23,45,56,435);
    var arr2 = [23,34,546];
    var arr3 = new Array();
    arr3[0] = 234;
    arr3[1] = 234;



5.对象(Object)
  对象由花括号分隔。在括号内部，对象的属性以名称和值对的形式 (name : value) 来定义。
  属性由逗号分隔.
  var person={firstname:"Bill", lastname:"Gates", id:5566};
  上面例子中的对象 (person) 有三个属性：firstname、lastname 以及 id



6.Undefined 
  在 JavaScript 中, undefined 是一个没有设置值的变量。
  typeof 一个没有值的变量会返回 undefined。
  var person = undefined;    
  你可以设置为 undefined 来清空对象



7.NULL
  在 JavaScript 中 null 表示 "什么都没有"。
  null是一个只有一个值的特殊类型。表示一个空对象引用。
  var person = null;        
  你可以设置为 null 来清空对象


  Undefined 和 Null 的区别
  typeof undefined             // undefined
  typeof null                  // object
  null === undefined           // false
  null == undefined            // true

8、Symbol

symbol 是一种基本数据类型

每个从Symbol()返回的symbol值都是唯一的。一个symbol值能作为对象属性的标识符；

Symbol()函数会返回symbol类型的值，该类型具有静态属性和静态方法。

let sy = Symbol("KK");
console.log(sy);             // Symbol(KK)
console.log(typeof(sy));     // "symbol"

// 相同参数 Symbol() 返回的值不相等
let sy1 = Symbol("kk"); 
console.log(sy === sy1);       // false

Symbol 值作为属性名

let sy = Symbol("key1");

let syObject = {
  [sy]: "kk"
};
console.log(syObject);    // {Symbol(key1): "kk"}

Symbol 作为对象属性名时不能用.运算符，要用方括号

let sy = Symbol();
let syObject = {};
syObject[sy] = "kk";

console.log(syObject[sy]);  // "kk"
console.log(syObject.sy) // undefined

JS查看数据类型


var mood = "happy";
alert(typeof mood);
alert(typeof 95);

转换成字符串


var married = false;
alert(married.toString());  // outputs "false"

var age = 25;
alert(age.toString());  //outputs "25"

转换成数字

函数	说明
parseInt()	转换成整数
parseFloat()	转换成浮点数


var test = parseInt("blue");    //returns NaN
var test = parseInt("1234blue");    //returns 1234
var test = parseInt("22.5");    //returns 22
var test = parseInt("asd23434");  //returns NaN
var test = parseFloat("1234blue");  //returns 1234
var test = parseFloat("22.5");    //returns 22.5

var a = "23";
var b = 1;
alert(a+b); //231 这个例子说明 如果不是同种类型的话 那么+代表的是拼接的意思
alert(a-b); //22这个例子说明除了+这种特殊的运算方式以外即使是不同类型那么也能够进行运算

运算符

算术运算符 + - * / %

var total = (1 + 4) * 5;
var i = 100;
var temp = (i – 20) / 2;
alert(“10”+ 20)   //return 1020;
alert(10 + 20)    //return 30;

赋值运算符

var x = 10;
var y =5;
x+=y;      //x=x+y
x-=y;        //x=x-y
x*=y;        //x=x*y
x/=y;        //x=x/y
x%=y;        //x=x%y
console.log(x);

后增量/后减量运算符 ++/-- 先赋值在自增


var i = 10;
var a = i++;    // i = i + 1;
alert(a);

前增量/前减量运算符 ++/-- 先自增在赋值

var i = 10;
var a = ++i;    // i = i + 1;
alert(a);

比较运算符 (>, <, >=, <=, ==, !=)


alert ( 10 > 5 );       //outputs  true
var i = 100;
var n = 100;
alert(i == n);          //outputs true;
alert(i != n);          //outputs false;
alert(i === n)         //数据类型，值相等

逻辑运算符


&& ：逻辑与     
|| : 逻辑或     
！ ：逻辑非  

var i = 8;
alert ( i<5 && i<10);           //outputs false
alert ( i > 100 || i < 10);     //outputs true
alert(!(10 > 5));             //outputs false

逻辑短路

逻辑与短路
var a = 5 && 6;
console.log(a); //返回的结果为 6

var a = false && 6;
console.log(a); //返回的结果为 false

逻辑或短路
var a = false || 6;
console.log(a); //返回的结果为 6

var a = true || 6;
console.log(a); //返回的结果为 true

三元运算符


如名字表示的三元运算符需要三个操作数。

语法是 条件 ? 结果1 : 结果2;
这里你把条件写在问号(?)的前面后面跟着用冒号(:)分隔的结果1和结果2。满足条件时结果1否则结果2

var a = 5;
var b = 3;

var res = a>b?"真":"假";
console.log(res);

程序流程控制

1.条件语句


if(10 > 5) {
  alert(“hello world”);
}

var i = 90;
if(i > 100){
 alert(i + “大于100”);
}else if(i > 80) {
 alert(i + “大于80”);
}else{
 alert(i + “小于100”);
}

2.Switch 语句


Switch 语句相当于条件判断的变种方式 或者是另外的一种形式
var i = 25;
switch(i){
  case 25:
  case 100:
      alert(100);
      break;
  default:
        alert(‘other’);
 }

循环语句

while

while(条件){需执行的代码}

var i = 1;
while(i < 3){
  alert(i);
  i++;
}

Do…while

do { 需执行的代码 } while (变量<=结束值)

var i = 1;
do {
  alert(i);
  i++;
}while(i < 3);

for 循环语句

for(var count = 1; count < 11; count++){
  alert(count);
}

forEach 循环语句

var arryAll = [];  
arryAll.push(1);  
arryAll.push(2);  
arryAll.push(3);  
arryAll.push(4);  

//匿名方式
arryAll.forEach(function(e){  
    console.log(e);  
})  

function t1(arg){
    console.log(arg);
}

//非匿名方式
arryAll.forEach(t1);

for...in 循环语句


for...in 语句用于遍历数组或者对象的属性（对数组或者对象的属性进行循环操作）

var x
var mycars = new Array()
mycars[0] = "Saab"
mycars[1] = "Volvo"
mycars[2] = "BMW"

for (x in mycars)
{
    document.write(mycars[x] + "<br />")
}

for...of 循环语句

var arr = ['小明','张三','小红','小兰'];

for(var item of arr)
{
    console.log(item)
}

break和continue有什么区别？

break 语句可以立即退出循环;
continue 语句只是退出当前循环;

break语句

var n = 0;
for(var i=1; i < 10; i++){
  if( i > 5){
     break;
  }
  n++;
}
alert(n);

continue语句

var n = 0;
for(var i = 1; i < 10; i++){
  if(i == 4){
      continue;
  }
  n++;
}
alert(n);

Javascript基础

随堂练习

javascript基础练习

Javascript基础

Javascript的组成

Javascript应用到网页的几种方式

JS注释

JS定义变量

JS拼接

JS变量的命名有哪些规则

JS关键字保留字汇总

JS常见的数据类型

JS查看数据类型

转换成字符串

转换成数字

运算符

赋值运算符

后增量/后减量运算符 ++/-- 先赋值在自增

前增量/前减量运算符 ++/-- 先自增在赋值

比较运算符 (>, <, >=, <=, ==, !=)

逻辑运算符

逻辑短路

三元运算符

程序流程控制

循环语句

while

Do…while

for 循环语句

forEach 循环语句

for...in 循环语句

for...of 循环语句

break和continue有什么区别？

break语句

continue语句

等腰三角形

九九乘法表

输出1到100间的奇数和偶数

随堂练习

javascript基础练习

Javascript基础

Javascript的组成

Javascript应用到网页的几种方式

JS注释

JS定义变量

JS拼接

JS变量的命名有哪些规则

JS关键字保留字汇总

JS常见的数据类型

JS查看数据类型

转换成字符串

转换成数字

运算符

赋值运算符

后增量/后减量运算符 ++/-- 先赋值 在自增

前增量/前减量运算符 ++/-- 先自增 在赋值

比较运算符 (>, <, >=, <=, ==, !=)

逻辑运算符

逻辑短路

三元运算符

程序流程控制

循环语句

while

Do…while

for 循环语句

forEach 循环语句

for...in 循环语句

for...of 循环语句

break和continue有什么区别？

break语句

continue语句

等腰三角形

九九乘法表

输出1到100间的奇数和偶数

后增量/后减量运算符 ++/-- 先赋值在自增

前增量/前减量运算符 ++/-- 先自增在赋值