美文网首页
JavaScript基础语法学习笔记

JavaScript基础语法学习笔记

作者: Dev_hell03W | 来源:发表于2016-05-17 14:16 被阅读335次

    1. JavaScript用法

    html中的javascript脚本必须放在<script></script>之间. 脚本可以被放置在html页面的<body>和<head>部分中. 浏览器会解释并执行位于 <script> 和 </script>之间的 JavaScript 代码 .
    以前需要在<script>标签中使用type="text/javascript"声明, 现在不需要这么做, 浏览器一样可以识别, 但是为了语法规范还是声明下比较好. JavaScript 是所有现代浏览器以及 HTML5 中的默认脚本语言。

    2. JavaScript输出

    JavaScript没有任何打印或者输出函数.
    javaScript可以通过以下方式输出输出:

    • 使用window.alert()弹出警告框;
    • 使用document.write()方法将内容写到html文档中;
    • 使用innerHTML写入到html元素;
    • 使用console.log()写入到浏览器的控制台.

    **使用window.alert(): **

    <script>
    window.alert(5 + 6);
</script>

    操作 HTML 元素:

    <script>
document.getElementById("demo").innerHTML = "段落已修改。";
</script>

    写到控制台:

    <script>
a = 5;
b = 6;
c = a + b;
console.log(c);
</script>

    3. JavaScript 语法

    在编程语言中, 一个字面量是一个常量, 如3.14.

    //1. 数字(Number)字面量可以是整数, 小数, 科学计数.
3.14
1002
123e5

//2. 字符串使用单引号或者双引号:
"walden"
'walden'

//3. 数组字面量:
[40, 100, 30, 2]

//4. 对象字面量:
{firstName:"wei", lastName:"walden", age:10}

//5. 函数字面量定义一个函数
function myFunction(a, b){ return a*b; }

//6. 变量
javaScript中使用`var`定义变量, 使用`=`为变量赋值.

    ** 变量是一个名称, 字面量是一个值. **

    其它要点:

    JavaScript 对大小写敏感。

    avaScript 会忽略多余的空格。您可以向脚本添加空格，来提高其可读性。下面的两行代码是等效的：

    var person="Hege";
var person = "Hege";

    您可以在文本字符串中使用反斜杠对代码行进行换行。下面的例子会正确地显示：

    document.write("你好 \
世界!");

    注释:

    //这是注释.
/*
这也是注释.
*/

    JavaScript数据类型:
    字符串（String）、数字(Number)、布尔(Boolean)、数组(Array)、对象(Object)、空（Null）、未定义（Undefined）。

    //1. JavaScript 布尔
//   布尔（逻辑）只能有两个值：true 或 false。
var x=true;
var y=false;

//2. JavaScript 数组
var cars=new Array();
cars[0]="Saab";
cars[1]="Volvo";
cars[2]="BMW";
// 或者 (condensed array):
var cars=new Array("Saab","Volvo","BMW");
// 或者 (literal array):
var cars=["Saab","Volvo","BMW"];

// 3. JavaScript 对象
var person={firstname:"John", lastname:"Doe", id:5566};

对象属性有两种寻址方式：
name=person.lastname;
name=person["lastname"];

//4. Undefined 和 Null
Undefined 这个值表示变量不含有值。
可以通过将变量的值设置为 null 来清空变量。
可以通过将一个变量赋值为Null来置空一个变量.

//5.当您声明新变量时，可以使用关键词 "new" 来声明其类型：
var carname=new String;
var x=      new Number;
var y=      new Boolean;
var cars=   new Array;
var person= new Object;

//6. 访问js对象中的方法:
name = person.fullName();

// 你可以使用以下语法创建对象方法：
methodName : function() { code lines }
// 你可以使用以下语法访问对象方法：
objectName.methodName()

    4. JavaScript函数

    无参数的函数:

    function functionname()
{
执行代码
}

    带参数的函数:

    function myFunction(var1,var2)
{
代码
}

    局部JavaScript变量:

    • 在JavaScript函数内部声明的变量是局部变量, 所以只能在函数内部访问到(该变量的作用域是局部的).
    • 再不同的函数中可以使用名称相同的局部变量, 因为只有声明过该变量的函数才能识别出该变量.
    • 只要函数运行完毕, 本地变量就会被删除.
    • 函数参数只在函数内部起作用, 是局部变量.

    全局javaScript变量:
    在函数外声明的变量是全局变量, 网页上所有的脚本和函数都能够访问它.

    JavaScript变量的生存周期:

    • JavaScript变量的声明周期从他们被声明的时间开始.
    • 局部变量会在函数运行以后被删除.
    • 全局变量会在页面关闭后被删除.

    向未声明的JavaScript变量赋值:
    如果把值赋给未声明的变量, 该变量将被自动作为全局变量声明.
    如:

    function getName(){
    name = "walden"; // name将会被声明为全局变量.
}

    **在HTML中, 全局变量是window对象: 所有的数据和对象都属于window对象. 自己定义的全局变量, 或者函数可以覆盖window对象的变量或者函数. 局部变量, 可以覆盖全局变量的和函数. **

    • continue语句只能在循环中使用.
    • break语句, 只能在循环或者switch中使用.
    • 通过标签引用, break可用于跳出任何JavaScript代码块.

    break标签引用:

    label:
statements
// break 和 continue 语句仅仅是能够跳出代码块的语句。
break labelname; 

continue labelname;

    5. JavaScript typeof, null, 和 undefined

    5.1 typdef操作符

    可以使用typedef操作符检测变量的数据类型.

    typeof "John"                // 返回 string 
typeof 3.14                  // 返回 number
typeof false                 // 返回 boolean
typeof [1,2,3,4]             // 返回 object
typeof {name:'John', age:34} // 返回 object, 在js中数据是一种特殊的数据类型, 所以typedef [数组], 返回object

    5.2 Null 和 undefined

    在js中Null表示什么都没有. 用typeof检测Null返回是object, undefined表示没有设置值得变量, typedef检测还是undefined.

    var person = null;           // Value is null, but type is still an object
var person = undefined;     // 值为 undefined, type is undefined

    6 . js中的数据类型

    在 JavaScript 中有 5 中不同的数据类型：
string
number
boolean
object
function
3 种对象类型：
Object
Date
Array
2 个不包含任何值的数据类型：
null
undefined

    typedef操作符检测js变量的数据类型:

    typeof "John"                 // 返回 string 
typeof 3.14                   // 返回 number
typeof NaN                    // 返回 number
typeof false                  // 返回 boolean
typeof [1,2,3,4]              // 返回 object
typeof {name:'John', age:34}  // 返回 object
typeof new Date()             // 返回 object
typeof function () {}         // 返回 function
typeof myCar                  // 返回 undefined (if myCar is not declared)
typeof null                   // 返回 object


// NaN 的数据类型是 number
// 数组(Array)的数据类型是 object
// 日期(Date)的数据类型为 object
// null 的数据类型是 object
// 未定义变量的数据类型为 undefined

    **constructor属性: **
    constructor属性可以返回所有js变量的构造函数:

    "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] }

    使用 constructor 属性来查看是对象是否为数组 (包含字符串 "Array"):

    function isArray(myArray) {
    return myArray.constructor.toString().indexOf("Array") > -1;
}

    使用 constructor 属性来查看是对象是否为日期 (包含字符串 "Date"):

    function isDate(myDate) {
    return myDate.constructor.toString().indexOf("Date") > -1;
}

    JavaScript 类型转换:

    // 1. 将数字转换成字符串
String(x)         // 将变量 x 转换为字符串并返回
String(123)       // 将数字 123 转换为字符串并返回
String(100 + 23)  // 将数字表达式转换为字符串并返回

//Number 方法 toString() 也是有同样的效果。
x.toString()
(123).toString()
(100 + 23).toString()

// 2. 将布尔值转换为字符串
String(false)        // 返回 "false"
String(true)         // 返回 "true"
// Boolean 方法 toString() 也有相同的效果。
false.toString()     // 返回 "false"
true.toString()      // 返回 "true"

// 3. 将日期转换为字符串
String(Date())      // 返回 Thu Jul 17 2014 15:38:19 GMT+0200 (W. Europe Daylight Time)

// Date 方法 toString() 也有相同的效果。
Date().toString()   // 返回 Thu Jul 17 2014 15:38:19 GMT+0200 (W. Europe Daylight Time)

// 4. 字符串转换成数字
Number("3.14")    // 返回 3.14
Number(" ")       // 返回 0 
Number("")        // 返回 0
Number("99 88")   // 返回 NaN

    调试JS代码可以使用浏览器自带的console.log() 方法. 也可以设置断点进行调试.

    7. JS变量提升

    js中, 函数以及变量的声明都将被提升到函数的最顶部. js中变量可以使用之后再声明.
    一下两段代码效果相同:

    示例一:
x = 5; // 变量 x 设置为 5
elem = document.getElementById("demo"); // 查找元素 
elem.innerHTML = x;                     // 在元素中显示 x
var x; // 声明 x

实例二:
var x; // 声明 x
x = 5; // 变量 x 设置为 5

elem = document.getElementById("demo"); // 查找元素 
elem.innerHTML = x;                     // 在元素中显示 x

    JavaScript 初始化不会提升:

    以下两段代码效果是不同的:

    实例 1
var x = 5; // 初始化 x
var y = 7; // 初始化 y
elem = document.getElementById("demo"); // 查找元素 
elem.innerHTML = x + " " + y;           // 显示 x 和 y

实例 2
var x = 5; // 初始化 x
elem = document.getElementById("demo"); // 查找元素 
elem.innerHTML = x + " " + y;           // 显示 x 和 y
var y = 7; // 初始化 y

    JSON字符串转换成JavaScript对象:

    var text = '{ "employees" : [' +
'{ "firstName":"John" , "lastName":"Doe" },' +
'{ "firstName":"Anna" , "lastName":"Smith" },' +
'{ "firstName":"Peter" , "lastName":"Jones" } ]}';
// 然后，使用 JavaScript 内置函数 JSON.parse() 将字符串转换为 JavaScript 对象:
var obj = JSON.parse(text);

    8. JavaScript代码规范

    • 变量名推荐使用驼峰法来命名;
    • 通常运算符(+ - * /)前后都要加空格;
    • 推荐使用4个空格进行代码缩进, 不推荐使用tab,因为不同编辑器对tab解析不同.
    • 短的对象可以写成一行, 长的要写成多行,
    • 命名规则: 变量和函数为驼峰法, 全局变量为大写, 常量为大写.
    • HTML载入外部JS文件 <script src="myscript.js"> type属性不是必须的.

    相关文章

      网友评论

          本文标题：JavaScript基础语法学习笔记

          本文链接：https://www.haomeiwen.com/subject/xjhirttx.html

          延伸阅读

          深度阅读

          • 您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！

          栏目导航

          热点阅读

          关于我们|服务条款|联系我们|JavaScript基础语法学习笔记|投稿指南|网站地图|RSS订阅|排版工具|手机版

          提供经典美文摘抄,优美散文欣赏,现代诗歌精选,短篇小说,心情随笔,表白情书范文,故事会在线阅读欣赏

          Copyright © 2014-2023 Haomeiwen.com All Rights Reserved. 好美文阅读网 版权所有

          备案信息：桂公网安备 45052102000051号 · 桂ICP备13007215号-3

          本站所收录作品、热点评论等信息部分来源互联网，目的只是为了系统归纳学习和传递资讯

          所有作品版权归原创作者所有，与本站立场无关，如不慎侵犯了你的权益，请联系我们告知，我们将做删除处理！