web前端-基础01

第一天：JavaScript基础

一：JavaScript相关知识的介绍

• JavaScript的作用
  • 主要作用就是用来实现网页中的各种功能，以及制作酷炫的网页特效
• JavaScript和ECMA的关系
  • JavaScript是由公司开发而成的，欧洲的这个ECMA的组织，制定了JavaScript的标准，取名为ECMAScript
• JavaScript的现状
  • 前些年之前，JavaScript被认为“牛皮鲜”，用来制作页面上的广告，弹窗、漂浮的广告。就是JavaScript开发的。以至于浏览器就推出了屏蔽广告功能。
  • 2004年JavaScript命运开始改变了，那一年谷歌公司，开始带头使用Ajax技术了，Ajax技术就是JavaScript的一个应用。并且，那时候人们逐渐开始提升用户体验了。
  • 2007年乔布斯发布了iPhone，这一年开始，用户就多了上网的途径，就是用移动设备上网。JavaScript在移动页面中，也是不可或缺的。并且这一年，互联网开始标准化，按照W3C规则三层分离，人们越来越重视JavaScript了。
  • 2010年的时候，HTML5推出Canvas（画布），工程师可以在Canvas上进行游戏制作，利用的就是JavaScript。
  • 2011年，Node.js诞生，使JavaScript能够开发服务器程序了。

二：标识符

• 1.什么是标识符？

  • 现实生活中的标识符

    
    
    
  • 程序员自己在程序中起的一些“名字”就叫标识符。
• 2.标识符的作用？
  • 1.从字面来理解，就是用来标识某些东西的符号，标识的目的就是为了将这些东西区分开来
  • 2.其实标识符的作用就跟人类的名字差不多，为了区分每个人，就在每个出生的时候起了个名字
  • 3.比如：我们在学习选择器中的class选择器或者id选择器的时候，给标签的class或者id起名子一样.
• 3.标识符命名规则（必须遵守什么？）
  • 1.只能由26个英文字母的大小写、10个阿拉伯数字（0~9）、下滑线和$符号组成
  • 2.严格区分大小写：比如: a和 A是两个不同的标识符
  • 3.不能以数字开头
  • 4不能和关键字相同
  • 5.不能是ECMAScript保留字（abstract
    boolean、byte、char、class、const、debugger、double、enum、export、extends、final、float、goto、implements、i、port、intnterface、long、native、package、private、protected、public、short、static、super、synchronized、throws、t、ansient、volatile）

练习：

以下那些不符合标识符命名规则

abc123   no.1  _123   _ok   $   123   __$     _   *name    #user##

• 4.标识符的命名规范？
  • 1.起一个有意义的名字，能够提高代码的可读性
    • name  age  number  userName  passWord  

  • 2.驼峰名命名法（除开头第一个单词，后面每个单词的首字母都大写）

    
    
    
    
    
    
    
    
    

三：常量

• 什么是常量？
  • 表示一些固定的数据，也就是不能改变的数据
  • 比如：1、2、3、4、56、77、88......

四：变量

• 什么是变量？

  • 表示的数据是可以经常修改的，当一个数据的值需要经常改变或者不确定时，就应该用变量来表示。
  • 比如：游戏的积分

• 声明变量及变量的赋值

  • 1.使用 var 关键词来声明变量（var longGe;）
    变量声明之后，该变量是空的（它没有值）。
    如需向变量赋值，请使用等号：
    longGe="zouJingLong";
  • 2.也可以在声明变量时对其赋值：
    var longGe="hehe";
  • 3.一条语句，多个变量
    var name="longGe", age=27, job="CEO";
  • 4.声明也可横跨多行：var name="longGe",age=56,job="CEO";
  • 5.Value = undefined
    • 在计算机程序中，经常会声明无值的变量。未赋值的变量，其值实际上是 undefined。在执行过：var longGe后，变量 longGe 的值将是 undefined;

五：运算符

1. 算术运算符

• 算术运算符用于执行变量或值之间的算术运算。

比如：给定 y=5，下面的表格解释了这些算术运算符：

2. 赋值运算符

• 赋值运算符用于给 JavaScript 变量赋值。

比如：给定 x=10 和 y=5，下面的表格解释了赋值运算符：

3.关系运算符（比较运算符）

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

给定 x=5，下面的表格解释了比较运算符：###

4.逻辑运算符

• 逻辑运算符用于测定变量或值之间的逻辑。

给定 x=6 以及 y=3，下表解释了逻辑运算符：

5.条件运算符、三元运算符（三目运算符）

• JavaScript 还包含了基于某些条件对变量进行赋值的条件运算符。

比如：给定 a=5，b=3 ,c=0;###

语法：####

• c = a > b ? 8 : 9
• 结果c等8
• （口诀a大于b吗？如果大于等于8、否则等于9）

六：数据类型

• 字符串
  • 字符串是存储字符（比如 "jack"）的变量。
  • var name = "jack";
  • 字符串可以是引号中的任意文本。您可以使用单引号或双引号：
  • 注意：您可以在字符串中使用引号，只要不匹配包围字符串的引号即可：
    • var answer="She is a 'girl'";
    • var answer='He is a "boy"';
• 数字
  • JavaScript 只有一种数字类型。数字可以带小数点，也可以不带：
  • var x1=34.00; //使用小数点来写
  • var x2=34; //不使用小数点来写
• 布尔
  • 布尔（逻辑）只能有两个值：true 或 false。
  • var x=true
  • var y=false
• Null
  • Undefined 和 Null
  • Undefined 这个值表示变量不含有值。
  • 可以通过将变量的值设置为 null 来清空变量。
  • 实例
  • cars=null;
  • person=null;
• Undefined
• 数组
• 对象

七：条件语句

• 1.If 语句
• 2.If...else 语句
• 3.If...else if...else 语句

八：Switch 语句

• 语法
• 工作原理：首先设置表达式 n（通常是一个变量）。随后表达式的值会与结构中的每个 case 的值做比较。如果存在匹配，则与该 case 关联的代码块会被执行。请使用 break 来阻止代码自动地向下一个 case 运行。
• 注意点：default 关键词
  • 请使用 default 关键词来规定匹配不存在时做的事情：

九：While / do... while

语法

while(条件) {
      // do something
}

注意点: 切记死循环, 就是条件一直成立.

do...while语法

do{
    // do something
}
while(条件)

while 和 do ... while的区别

• do...while至少会执行一遍代码, 而 while则满足条件才会去执行代码.

if... else ... 语句

注意点: 如果条件是一个变量或者一个值的时候, 这个值除了0, 除了'', 除了undefined, 除了null, 其他值都是true, 这些值为false, 示例如下:

var a = null;
if (a) {
    console.log('进不来');
}
var b = 0;
if (b) {
    console.log('进不来');
}
var c = undefined;
if (c){
    console.log('进不来');
}
var d = '';
if (d) {
    console.log('进不来');
}

console.log('上面都不会打印出来');