前端学习之路JS（01）-基础语法

最新推荐文章于 2024-08-22 14:32:34 发布

戚继光

最新推荐文章于 2024-08-22 14:32:34 发布

阅读量385

点赞数

文章标签： javascript 前端

本文链接：https://blog.csdn.net/weixin_36244867/article/details/64922262

版权

由于本人是做Android开发的，加上JS语法本来就很简单易学，所以这基础语法就更简单啦。在此只是做JS语法做个梳理。

01. 简介

JavaScript 是互联网上最流行的脚本语言，这门语言可用于 HTML 和 web，更可广泛用于服务器、PC、笔记本电脑、平板电脑和智能手机等设备。

JavaScript 是一种脚本语言。
JavaScript 是一种轻量级的编程语言。
JavaScript 是可插入 HTML 页面的编程代码。
JavaScript 插入 HTML 页面后，可由所有的现代浏览器执行。

02. 用法

html中的脚本必须在<script>和</script>之间，它可以被放到<head>或者<body>之间，我们通常的做法。

内部JS

把函数放入<head> 部分中，或者放在页面底部。这样就可以把它们安置到同一处位置，不会干扰页面的内容。

外部JS

在html中通过src引用外部js文件

<script src="myScript.js"></script>

外部js文件示例

function myFunction(){
    document.getElementById("demo").innerHTML="hello JavaScript";
}

03. 输出

我们利用这几个方式来输出数据。

window.alert()，弹出警告框；
document.write()，将内容写入html文档中；
innerHTML，将内容写入到元素中；
console.log()，浏览器控制台log；

04. 注释

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

05. 变量

使用关键字var来声明一个变量，如果此值没有在声明时赋值那么它的值是undefined。

var name;  //name的值是undefined

06. 数据类型

JS的数据类型包括：字符串（String）、数字（Number）、布尔（Boolean）、数组（Array）、对象（Object）、空（Null）、未定义（Undefined）。

1. 字符串（String）

JS字符串使用单引号或者双引号。

var name = "Jack";
var address = " \'heife\' city ";

2. 数字（Number）

JS只有一种数字类型，不存在整型和浮点型的区分，它可以是整数、小数、科学计数。

var value1 = 3;
var value2 = 3.14;
var value3 = 3.14e2;  //314

3. 布尔（Boolean）

JS的布尔值：true、false。

4. 数组（Array）

var name = "qdl";                      //name[0]='q'以此类推...
var names = new Array("qdl", "qjg");   //names[0]="qdl"以此类推...

5. 对象（Object）

JS对象由花括号分隔，在括号内部以key:value来定义，以逗号分隔。

var person = {
    name: "qdl",
    age : 24
}
window.alert(person.name);     //寻址方式1，推荐
window.alert(person["name"]);  //寻址方式2

6. 空（Null）、未定义（Undefined）

Undefined 这个值表示变量不含有值，可以通过将变量的值设置为 null 来清空变量。

07. 对象（Object）

在JS中一切都是对象，它是变量的容器。

//定义一个带方法的对象
var person = {
    name  : "qdl",
    age   : 24，
    myAge : function(){
        return this.name + "的年龄是" + this.age + "岁";
    }
}
document.write(person.myAge());

08. 函数

// 函数的定义
function functionName1{
    ...
}
funtion functionName2(arg1, arg2){
    return arg1+arg2;
}

// 函数的调用
functionName1();
functionName2(1, 2);

注意：JS中的局部变量和全局变量和其它语言的概念一样，不同的是，如果我们在函数内部将值赋予了一个未声明的变量，那么此变量默认为全局变量；

var value1;      //全局
funtion myFunction{
    var value2;  //局部
    value3 = 3;  //全局
}

09. 事件

除了点击事件JS还提供了下面这些常用的事件。

onchange，html元素改变；
onclick，用户点击html元素；
onmouseover，用户在html元素上移动鼠标；
onmouseout，用户从html元素上移开鼠标；
onkeydown，用户按下键盘按键；
onload，浏览器完成页面加载。


<body>
<input id="demo" type="text" onchange="demoChange()">
<script>
function demoChange(){
    var value = document.getElementById("demo").value;
    alert(value);
}
</script>
</body>

10. 运算符

+、-、*、/、%、++、- -
=、+=、-=、*=、/=、%=
如果把数字与字符串相加，结果将成为字符串。

11. 比较、逻辑运算符

==，等于，对应!=；
===，绝对等于值和类型均相等，对应!==。

12. 条件、循环语句

if…
if…else
if…else if…else if…else
switch…case
for
while
do…while
continue
break

13. typeof

在JS中，数组是一种特殊的对象类型。因此 typeof [1,2,3,4] 返回 object。

typeof "John"                // 返回 string 
typeof 3.14                  // 返回 number
typeof false                 // 返回 boolean
typeof [1,2,3,4]             // 返回 object
typeof {name:'John', age:34} // 返回 object

null 表示 “什么都没有”，是一个只有一个值的特殊类型，表示一个空对象引用。
undefined 是一个没有设置值的变量，typeof 一个没有值的变量会返回 undefined。

typeof undefined             // undefined
typeof null                  // object
null === undefined           // false
null == undefined            // true

14. 类型转换

constructor 属性

可以用来检测当前数据是哪种数据类型，返回字符串包含Number就是Number类型。

"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'}.constructor  // 返回函数 Object()  { [native code] }
new Date().constructor     // 返回函数 Date()    { [native code] }
function () {}.constructor // 返回函数 Function(){ [native code] }

数字–>字符串

全局方法 String() 可以将数字转换为字符串，该方法可用于任何类型的数字，字母，变量，表达式。

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

布尔值–>字符串

String(true)         // 返回 "true"
false.toString()     // 返回 "false"

日期–>字符串

String(Date())   
Date().toString()

字符串–>数字

Number("3.14")    // 返回 3.14
Number(" ")       // 返回 0 
Number("")        // 返回 0
Number("99 88")   // 返回 NaN
//parseFloat()，解析一个字符串，并返回一个浮点数。
//parseInt()，解析一个字符串，并返回一个整数。

布尔值–>数字

Number(false)     // 返回 0
Number(true)      // 返回 1

日期–>数字

d = new Date();
Number(d)          // 返回 1404568027739
d = new Date();
d.getTime()        // 返回 1404568027739

自动转换类型

5 + null    // 返回 5         null 转换为 0
"5" + null  // 返回"5null"    null 转换为 "null"
"5" + 1     // 返回 "51"      1 转换为 "1"  
"5" - 1     // 返回 4         "5" 转换为 5

15. 正则表达式

参见

16. 错误

throw、try、catch

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
前端学习之路JS（01）-基础语法

由于本人是做Android开发的，加上JS语法本来就很简单易学，所以这基础语法就更简单啦。在此只是做JS语法做个梳理。01. 简介JavaScript 是互联网上最流行的脚本语言，这门语言可用于 HTML 和 web，更可广泛用于服务器、PC、笔记本电脑、平板电脑和智能手机等设备。JavaScript 是一种脚本语言。JavaScript 是一种轻量级的编程语言。JavaScript 是可插入
复制链接

扫一扫