JavaScript基础回顾(一)

JavaScript 数据类型
JavaScript 拥有动态类型。这意味着相同的变量可用作不同的类型。
数字、字符串、布尔、数组、对象

let和var
let作用于块内,var变量作用于整个函数

Undefined 和 Null
Undefined 这个值表示变量不含有值。
可以通过将变量的值设置为 null 来清空变量。
声明新变量时,可以使用关键词 "new" 来声明其类型:
(注意:var声明了变量但是不赋值,其类型为undfined)

对象
对象定义
var person = {firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"};
对象访问
person.lastName;
person["lastName"];
访问对象方法

  • 创建对象方法:
    methodName : function() { code lines }
  • 访问对象方法:
    objectName.methodName()

JavaScript 函数
function myFunction()
{
var x=5;
return x;
}
var myVar=myFunction();

JavaScript 作用域

  • 变量在函数内声明,变量为局部作用域。局部变量:只能在函数内部访问。局部变量在函数执行完毕后销毁。
  • 变量在函数外定义,即为全局变量。全局变量有全局作用域: 网页中所有脚本和函数均可使用。全局变量在页面关闭后销毁。
  • 如果变量在函数内没有声明(没有使用 var 关键字),该变量为全局变量。(在全局变量是 window 对象: 所有数据变量都属于 window 对象。函数外的未用var声明的为window变量可删除,用var声明的不可删除)

JavaScript 事件
常见的HTML事件的列表:

JavaScript 字符串

  • 可以使用索引位置来访问字符串中的每个字符:
    var carname = "Volvo XC60";
    var character = carname[7];
  • 使用内置属性 length 来计算字符串的长度:
    var txt = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
    var sln = txt.length;
  • 使用反斜杠 () 来转义
  • 通常, JavaScript 字符串是原始值,可以使用字符创建: var firstName = "John"
    但我们也可以使用 new 关键字将字符串定义为一个对象: var firstName = new String("John")
    Example:
    var x = "John";
    var y = new String("John");
    typeof x // 返回 String
    typeof y // 返回 Object
  • 常见字符串方法


运算符

  • 条件运算符
    voteable=(age<18)?"年龄太小":"年龄已达到";

循环

  • For/In 循环
    var person={fname:"John",lname:"Doe",age:25};
    for (x in person) // x 为属性名
    {
    txt=txt + person[x];
    }
  • do/while 循环
    do{
    x=x + "The number is " + i + "
    ";
    i++;
    }
    while (i<5);

break和continue

  • break 和 continue 语句仅仅是能够跳出代码块的语句。
  • continue 语句(带有或不带标签引用)只能用在循环中。
  • break 语句(不带标签引用),只能用在循环或 switch 中。但是通过标签引用,break 语句可用于跳出任何 JavaScript 代码块:
    cars=["BMW","Volvo","Saab","Ford"];
    list:
    {
    document.write(cars[0]);
    document.write(cars[1]);
    document.write(cars[2]);
    break list;//带标签引用
    document.write(cars[3]);
    document.write(cars[4]);
    document.write(cars[5]);
    }

JavaScript typeof, null, 和 undefined

  • 使用 typeof 操作符来检测变量的数据类型。
  • JavaScript 中 null 表示 "什么都没有"
  • JavaScript 中, undefined 是一个没有设置值的变量。
    var person = null; // 值为 null(空), 但类型为对象
    var person = undefined; // 值为 undefined, 类型为 undefined
  • null 和 undefined 的值相等,但类型不等:
    typeof undefined // undefined
    typeof null // object
    null === undefined // false
    null == undefined // true

JavaScript 数据类型

  • 在 JavaScript 中有 5 种不同的数据类型:
    string
    number
    boolean
    object
    function
  • 3 种对象类型:
    Object
    Date
    Array
  • 2 个不包含任何值的数据类型:
    null
    undefined
  • 注意的数据类型
    NaN 的数据类型是 number
    数组(Array)的数据类型是 object
    日期(Date)的数据类型为 object
    null 的数据类型是 object
    未定义变量的数据类型为 undefined
  • constructor 属性:返回所有 JavaScript 变量的构造函数。
    "John".constructor // 返回函数 String() { [native code] }
    (3.14).constructor // 返回函数 Number() { [native code] }
    false.constructor // 返回函数 Boolean() { [native code] }
    [1,2,3,4].constructor // 返回函数 Array() { [native code] }
    {name:'John', age:34}.constructor // 返回函数 Object() { [native code] }
    new Date().constructor // 返回函数 Date() { [native code] }
    function () {}.constructor // 返回函数 Function(){ [native code] }

JavaScript 类型转换

  • 自动转换类型
    当 JavaScript 尝试操作一个 "错误" 的数据类型时,会自动转换为 "正确" 的数据类型。
    以下输出结果不是你所期望的:
    5 + null // 返回 5 null 转换为 0
    "5" + null // 返回"5null" null 转换为 "null"
    "5" + 1 // 返回 "51" 1 转换为 "1"
    "5" - 1 // 返回 4 "5" 转换为 5
    (+号放在前面,可以让+号后的类型变得和前面一样;-号放在后面,可以让-号前面的类型变得和后面一样)
  • 一元运算符 +
    Operator + 可用于将变量转换为数字:
    实例
    var y = "5"; // y 是一个字符串
    var x = + y; // x 是一个数字
  • 将字符串转换为数字
    全局方法 Number() 可以将字符串转换为数字。
    字符串包含数字(如 "3.14") 转换为数字 (如 3.14).
    空字符串转换为 0。
    其他的字符串会转换为 NaN (不是个数字)。
    Number("3.14") // 返回 3.14
    Number(" ") // 返回 0
    Number("") // 返回 0
    Number("99 88") // 返回 NaN
  • search() 方法查找
    var str = "Visit Runoob!";
    var n = str.search("Runoob");
  • replace() 方法替换
    var str = document.getElementById("demo").innerHTML;
    var txt = str.replace(/microsoft/i,"Runoob");

JavaScript 严格模式(use strict)
JavaScript 严格模式(strict mode)即在严格的条件下运行。
不允许使用未声明的变量。
不允许删除变量或对象。
不允许删除函数。
不允许变量重名。
不允许使用八进制。
不允许使用转义字符。
不允许对只读属性赋值。
不允许对一个使用getter方法读取的属性进行赋值。
不允许删除一个不允许删除的属性。
变量名不能使用 "eval" 字符串。
变量名不能使用 "arguments" 字符串。
禁止this关键字指向全局对象。
使用构造函数时,如果忘了加new,this不再指向全局对象,而是报错。

保留关键字
为了向将来Javascript的新版本过渡,严格模式新增了一些保留关键字:
implements
interface
let
package
private
protected
public
static
yield

常见错误

  • 在常规的比较中,数据类型是被忽略的,以下 if 条件语句返回 true:
    var x = 10;
    var y = "10";
    if (x == y)
  • switch 语句会使用恒等计算符(===)进行比较:
    以下实例由于类型不一致不会执行 alert 弹窗:
    var x = 10;
    switch(x) {
    case "10": alert("Hello");
    }
  • 所有的编程语言,包括 JavaScript,对浮点型数据的精确度都很难确定:
    var x = 0.1;
    var y = 0.2;
    var z = x + y // z 的结果为 0.3
    if (z == 0.3) // 返回 false
  • 字符串中直接使用回车换行是会报错的。需要用\符号
  • JavaScript 默认是在代码的最后一行自动结束。
  • 使用名字来作为索引的数组称为关联数组(或哈希)。JavaScript 不支持使用名字来索引数组,只允许使用数字索引。
    //*****************使用数字做索引**************************
    var person = [];
    person[0] = "John";
    person[1] = "Doe";
    person[2] = 46;
    var x = person.length; // person.length 返回 3
    var y = person[0]; // person[0] 返回 "John"
    //**************不用数字做索引,产生错误代码**************
    var person = [];
    person["firstName"] = "John";
    person["lastName"] = "Doe";
    person["age"] = 46;
    var x = person.length; // person.length 返回 0
    var y = person[0]; // person[0] 返回 undefined
  • 定义数组元素,最后不能添加逗号
    var colors = [5, 6, 7,]; //这样数组的长度可能为3 也可能为4。
  • Undefined 不是 Null。在 JavaScript 中, null 用于对象, undefined 用于变量,属性和方法。对象只有被定义才有可能为 null,否则为 undefined。
  • 程序块作用域
    在每个代码块中 JavaScript 不会创建一个新的作用域,一般各个代码块的作用域都是全局的。
    for (var i = 0; i < 10; i++) {
    // some code
    }
    return i;

JavaScript 表单验证

  • HTML 约束验证
    HTML5 新增了 HTML 表单的验证方式:约束验证(constraint validation)。约束验证是表单被提交时浏览器用来实现验证的一种算法。HTML 约束验证基于:
    HTML 输入属性
    CSS 伪类选择器
    DOM 属性和方法



  • HTML 表单自动验证
    HTML 表单验证也可以通过浏览器来自动完成。如果表单字段 (fname) 的值为空, required 属性会阻止表单提交:
    <form action="demo_form.php" method="post">
    <input type="text" name="fname" required="required">
    <input type="submit" value="提交">
    </form>
  • 必填(或必选)项目
    function validateForm()
    {
    var x=document.forms["myForm"]["fname"].value;
    if (x==null || x=="")
    {
    alert("姓必须填写");
    return false;
    }
    }
  • E-mail 验证
    输入的数据必须包含 @ 符号和点号(.)。同时,@ 不可以是邮件地址的首字符,并且 @ 之后需有至少一个点号:
    function validateForm(){
    var x=document.forms["myForm"]["email"].value;
    var atpos=x.indexOf("@");
    var dotpos=x.lastIndexOf(".");
    if (atpos<1 || dotpos<atpos+2 || dotpos+2>=x.length){
    alert("不是一个有效的 e-mail 地址");
    return false;
    }
    }
    //************************以下是表单代码*****************************
    <form name="myForm" action="demo-form.php" onsubmit="return validateForm();" method="post">
    Email: <input type="text" name="email">
    <input type="submit" value="提交">
    </form>

JavaScript JSON
JSON 是用于存储和传输数据的格式。JSON 通常用于服务端向网页传递数据 。JSON 使用 JavaScript 语法,但是 JSON 格式仅仅是一个文本。文本可以被任何编程语言读取及作为数据格式传递。
什么是 JSON?

  • JSON 英文全称 JavaScript Object Notation
  • JSON 是一种轻量级的数据交换格式。
  • JSON 易于理解。
    以下 JSON 语法定义了 sites 对象: 3 条网站信息(对象)的数组:
    {"sites":[
    {"name":"Runoob", "url":"www.runoob.com"},
    {"name":"Google", "url":"www.google.com"},
    {"name":"Taobao", "url":"www.taobao.com"}
    ]}
    JSON 语法规则
  • 数据为 键/值 对。
  • 数据由逗号分隔。
  • 大括号保存对象
  • 方括号保存数组
    JSON 字符串转换为 JavaScript 对象
  • 首先,创建 JavaScript 字符串,字符串为 JSON 格式的数据:
    var text = '{ "sites" : [' +
    '{ "name":"Runoob" , "url":"www.runoob.com" },' +
    '{ "name":"Google" , "url":"www.google.com" },' +
    '{ "name":"Taobao" , "url":"www.taobao.com" } ]}';
  • 然后,使用 JavaScript 内置函数 JSON.parse() 将字符串转换为 JavaScript 对象:
    var obj = JSON.parse(text);
  • 实例
    var text = '{ "sites" : [' +
    '{ "name":"Runoob" , "url":"www.runoob.com" },' +
    '{ "name":"Google" , "url":"www.google.com" },' +
    '{ "name":"Taobao" , "url":"www.taobao.com" } ]}';
    obj = JSON.parse(text);
    document.getElementById("demo").innerHTML = obj.sites[1].name + " " + obj.sites[1].url;

javascript:void(0) 含义
void 是 JavaScript的关键字,该操作符指定要计算一个表达式但是不返回值。
语法格式如下:
<head>
<script type="text/javascript">
void func()
javascript:void func()
//**************************或者****************************
void(func())
javascript:void(func())
</script>
</head>

href="#"与href="javascript:void(0)"的区别
<a href="javascript:void(0)">单击此处什么也不会发生</a>

  • # 包含了一个位置信息,默认的锚是#top 也就是网页的上端。
  • 而javascript:void(0), 仅仅表示一个死链接。
  • 在页面很长的时候会使用 # 来定位页面的具体位置,格式为:# + id。
  • 如果你要定义一个死链接请使用 javascript:void(0) 。
    Example:
    <a href="javascript:void(0);">点我没有反应的!</a>
    <a href="#pos">点我定位到指定位置!</a>
    ...
    <p id="pos">尾部定位点</p>
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 212,332评论 6 493
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 90,508评论 3 385
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 157,812评论 0 348
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 56,607评论 1 284
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 65,728评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,919评论 1 290
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,071评论 3 410
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,802评论 0 268
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,256评论 1 303
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,576评论 2 327
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,712评论 1 341
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,389评论 4 332
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,032评论 3 316
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,798评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,026评论 1 266
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,473评论 2 360
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,606评论 2 350

推荐阅读更多精彩内容