新旅程JavaScript基础篇一

你的名字 2021-12-22 01:19 239阅读 0赞

# **一、JavaScript简介** #

## **什么是JavaScript?** ##

JavaScirpt 它是由网景公司开发一款基本浏览器、基于面向对象、事件驱动式的网页脚本语言！

基本浏览器：JS它是由浏览器来进行解析！

基于面向对象：JS中一切都是由对象来组成，对象是由属性与方法来组成！

事件驱动式：网页的某些动作 比如鼠标放上、鼠标经过、鼠标点击等等 它会被JS捕获到 然后赋予其一些JS代码！

## **JavaScript的应用场景** ##

l 表单验证

l 网页特效

l 一些网页上面小游戏

l AJAX 与服务器进行交互

## **JavaScript与Java的区别** ##

好比雷锋与雷锋塔的关系！

北大与北大青鸟的关系！

## **快速入门** ##

![1046841-20161130221228193-860362350.png][]

# **二、书写JS的方式** #

嵌入式、外链式、行内式

嵌入式：

它是将JS代码嵌入在HTML文档中 它是通过HTML中的一个叫<script>标记嵌入的

格式：

//书写JS代码

</script>

![1046841-20161130221256506-972989554.png][]

外链式：

将一个外部的JS文件链接到当前的HTML文档中   
它是通过script标记的src属性将外部的JS文件链接到当前的HTML文件中

格式：

注意：

1、script标记可以书写在HTML文档中任何位置

2、如果一对script标记引入了外部的JS文件 那么就不能在里面书写JS代码

3、在一个HTML文档中 script标记可以有多个

![1046841-20161130221818271-1469594186.png][]

行内式

在HTML标记中 有一些事件的属性

比如:

onclick 当鼠标单击时

onmouseover 当鼠标经过时

将JS代码书写在标记的事件属性里面

![1046841-20161130221912006-1282256560.png][]

总结一下：

嵌入式与外链式的区别：

n 嵌入式书写的JS代码它只能被当前的HTML文档使用

n 外链式的JS代码可以被多个HTML文档使用

# **三、注释** #

注释的格式：

单行注释和多行注释

![1046841-20161130221945146-849343119.png][]

单行注释：

//注释的内容

![1046841-20161130222033271-972654178.png][]

多行注释：

/\*

注释的内容

\*/

# **四、书写JS代码的语法规则** #

l JavaScript区分大小写

l JavaScript须嵌入在HTML文件中

l JavaScript代码中不能出现有<>以及不能有CSS代码

l 语句末尾可以加分号一定是英文下的分号(;)，最好加分号

l JavaScript可以独立保存为一个外部文件

# **五、变量** #

程序语言它主要的功能是用来处理数据！

**什么叫变量？**

可以变化的量！ 变量是存储在电脑的内存中！变量是临时存储的！

内存储器：CPU 内存条

外存储器：硬盘、U盘

我们可以将变量理解为超市里面的购物袋！、

**变量的组成部分**

变量名和变量值来组成

**如何声明变量**

格式：

var 变量名 = 值

将等于号右边的值赋值给等号左边 的变量 ！ 这里的等号不数学中的等号！

![1046841-20161130222214709-2119876565.png][]

![1046841-20161130222242443-1326137217.png][]

## **变量名的命名规则** ##

建议大家在定义变量名的时候要做到见名知意！

l 变量名可以使用大小写英文字母、数字、下划线(\_)、美元符号($)来组成

l 变量名不能以数字开头

l 变量名不能用JS中的关键字以及保留字

l 变量名是由多个单词组成的 那么建议使用下划线接连法、驼峰法

n 下划线接连法 var get\_user\_name

n 驼峰法 var getUserName

![1046841-20161130222317756-739154305.png][]

![1046841-20161130222357177-591106128.png][]

## **给变量名赋值** ##

var 变量名 = 值

将等号右边的值赋值给等号左边的变量！

## **修改变量的值** ##

![1046841-20161130222425677-945575220.png][]

![1046841-20161130222456693-351009818.png][]

# **六、三个常见的输出的方法** #

l window.alert(数据或者变量名)

n 作用：是向浏览器的窗口中弹出一个警告提示框

n window它是一个对象 它表示当前的浏览器窗口对象

n alert() 它是window对象下面的一个方法 方法带小括号

n window对象它是JS中的最顶级的对象 所以可以省略不写

![1046841-20161130222518521-453338016.png][]

l window.document.write(数据或者变量名)

n 作用：向body标记中输出内容

n window它是一个对象 它表示当前的浏览器窗口对象

n document对象它是window对象下面的一个属性

n write() 它是document对象下面的一个方法

![1046841-20161130222548521-234035042.png][]

l console.log()

n 作用：是将数据输出在浏览器的控制台中

n console它表示控制台对象

n log() 是日志的意思

![1046841-20161130222623162-690601688.png][]

![1046841-20161130222650052-1717641885.png][]

# **七、变量的数据类型** #

变量的数据类型分为两大种：基本数据类型和复合数据类型

基本数据类型：只能存储一个值

String(字符串)、number(数值)、boolean(布尔)、null(空)、undefined(未定义)

复合数据类型：最少存储一个值

Object(对象)----àfunction(函数)和Array(数组)

## **String(字符串)** ##

什么叫字符串数据？

只要是加了引号的字符它们就是String

假设字符串有一个双引号 现在我想将这个双引号也输出出来！

在JS中有一个符号“\\”来可以用来将双引号或者单引号进行转义！

第一种方法：加转义字符

第二种方式：单包双或者双包单

![1046841-20161130222716256-17038190.png][]

## **number(数值)** ##

包含：整数与小数(浮点数)

整数：int

小数：float

![1046841-20161130222757709-1898642821.png][]

## **boolean(布尔型)** ##

错与对 男与女

布尔型数据只有两个值：true和false

![1046841-20161130222824615-1996103864.png][]

## **null(空型)** ##

空型的值只有一个：null

或者会在出错的时候出现：null

![1046841-20161130222856209-450466977.png][]

![1046841-20161130222931927-1689318639.png][]

## **undefined(未定义)** ##

当声明了变量 但是没有给其赋值

![1046841-20161130223001334-536660753.png][]

![1046841-20161130223031209-1821685049.png][]

# **八、变量的数据类型的转换** #

在JS中 变量的数据类型的转换分为两种：自动转换和强制转换

比如：

将字符串数据类型转换为数值型

自动转换是JS自己内部完成的！  
在JS中有三个内置的函数可以来完全变量数据类型转换！

String(变量名)：将其它的数据类型强制的转换为字符串

![1046841-20161130223111927-710081748.png][]

Number(变量名)：将其它的数据类型强制的转换为数值型

NaN 它也是数值里面的一种，Not a Number 它不是一个数！

在将其它数据类型转换为数值型 有些数据它是转换不过来的 它会得到一个特殊的Number型数据 NaN

在将其它数据类型转换为数值型 如果能够转换过来 就会得到一个具体的数 ，但是如果转换不过来 就会得到 NaN

![1046841-20161130223143365-1505080649.png][]

总结：

<table> 
 <tbody> 
 <tr> 
 <td> true </td> 
 <td> 1 </td> 
 </tr> 
 <tr> 
 <td> false </td> 
 <td> 0 </td> 
 </tr> 
 <tr> 
 <td> null </td> 
 <td> 0 </td> 
 </tr> 
 <tr> 
 <td> undefined </td> 
 <td> NaN </td> 
 </tr> 
 <tr> 
 <td> “数字字符” </td> 
 <td> NaN </td> 
 </tr> 
 <tr> 
 <td> “字符数字” </td> 
 <td> NaN </td> 
 </tr> 
 <tr> 
 <td> “数字” </td> 
 <td> 数字 </td> 
 </tr> 
 </tbody> 
</table>

Boolean(变量名)：将其它的数据类型强制的转换为布尔型

只有两个结果：true和false

![1046841-20161130223211959-1784141313.png][]

总结：

如果将字符串转换为布尔型 除了“”以外false 其它的都会是true

数值型数据 ：0===èfalse 1===ètrue

null和undefined 都会转换为false

![1046841-20161130223308412-1429245794.png][]

# **九、运算符** #

什么叫运算符？

可以进行运算的符号！

## **算术运算符** ##

余数在JS中的主要作用是用来判断奇偶数！

如果能够被2整除的数 就是偶数 反之就是奇数！

![1046841-20161130223344474-1084759291.png][]

\++与—它们称之为自操作

\++：前加加和后加加 不管是前加加还是后加加它都会自加1

后加加：先赋值后再加1

前加加：先加1再赋值

![1046841-20161130223413693-1666867593.png][]

\--：前减减和后减减 不管是前加加还是后加加它都会自减1

后减减：先赋值后再减1

前减减：先减1再赋值

![1046841-20161130223442615-662010869.png][]

## **赋值运算符** ##

<table> 
 <tbody> 
 <tr> 
 <td> 符号 </td> 
 <td> 功能 </td> 
 </tr> 
 <tr> 
 <td> = </td> 
 <td> 将等号右边的值赋值给左边的变量 </td> 
 </tr> 
 <tr> 
 <td> += </td> 
 <td> 将左边的值加上右边的值然后再赋值给左边的变量 &nbsp;&nbsp;x+=y &nbsp;=èx=x+y </td> 
 </tr> 
 <tr> 
 <td> -= </td> 
 <td> 将左边的值减去右边的值然后再赋值给左边的变量 </td> 
 </tr> 
 <tr> 
 <td> *= </td> 
 <td> 将左边的值乘以右边的值然后再赋值给左边的变量 </td> 
 </tr> 
 <tr> 
 <td> /= </td> 
 <td> 将左边的值除以右边的值然后再赋值给左边的变量 </td> 
 </tr> 
 <tr> 
 <td> %= </td> 
 <td> 先进行左边与右边求余然后再将结果赋值给左边的变量 </td> 
 </tr> 
 </tbody> 
</table>

![1046841-20161130223511740-1130989653.png][]

## **字符串运算符** ##

<table> 
 <tbody> 
 <tr> 
 <td> 符号 </td> 
 <td> 功能 </td> 
 </tr> 
 <tr> 
 <td> + </td> 
 <td> 字符串连接 </td> 
 </tr> 
 <tr> 
 <td> += </td> 
 <td> 将左边的值加上右边的值然后再赋值给左边的变量 </td> 
 </tr> 
 </tbody> 
</table>

说明：

字符串与变量之间一定是使用“\+”来进行连接

如果说“\+”两边有一边不是数值型数据的话 那么就会进行字符串连接运算而不是进行加法运算！

![1046841-20161130223813506-28217071.png][]

格式：“字符串”\+变量名\+“字符串”

## **比较运算符** ##

比较运算符最终得到结果是：布尔型数据

==与===之间的区别：

==：它只会去判断两个值是否相等

===：它要判断值是否相等的同时也要去判断变量的数据类型是否相等

![1046841-20161130223850427-1074433517.png][]

## **三目(三元)运算符** ##

格式：

表达式 ? 值1 : 值2 它是if语法的变种

说明：

它会去判断表达式是否成立 看其结果是布尔true 还是布尔false 如果是true就执行值1 如果说是false就执行值2

![1046841-20161130223917271-581060276.png][]

## **逻辑运算符** ##

逻辑与：&& 它要求&&两边的结果都要为真才是真

逻辑或：|| 它要求||两边只有一个为真就是真

逻辑非：! 取反 将真变成假 假变成真

注意：

逻辑与和逻辑或这两个逻辑运算符它不单单会输出布尔型数据！

1、只要“||”前面为false，无论“||”后面是true还是false，结果都返回“||”后面的值。

2、只要“||”前面为true，无论“||”后面是true还是false，结果都返回“||”前面的值。

3、只要“&&”前面是false，无论“&&”后面是true还是false，结果都将返“&&”前面的值;

4、只要“&&”前面是true，无论“&&”后面是true还是false，结果都将返“&&”后面的值;

PHP+AJAX

火车站窗口买火车票

身份证明&&钱 =è我才能买火车票

有个人请我吃饭 我就去

不管是不是美女 || 请我吃饭 ==è我就去

![1046841-20161130224001287-1437660750.png][]

转载于:https://www.cnblogs.com/SummerSuSu/p/6120046.html

[1046841-20161130221228193-860362350.png]: /images/20211220/eb57c693f1dd43fc9b55a1b6f335c243.png
[1046841-20161130221256506-972989554.png]: /images/20211220/e27ad76ef9254158b0d9b9c3f570f36d.png
[1046841-20161130221818271-1469594186.png]: /images/20211220/bc5572a0b6aa40d89c08e522493376f9.png
[1046841-20161130221912006-1282256560.png]: /images/20211220/e64be81cb2c34803af7ea0915f6ba8a8.png
[1046841-20161130221945146-849343119.png]: /images/20211220/ccbab854abc14e709f518f63d062983a.png
[1046841-20161130222033271-972654178.png]: /images/20211220/946d01c23a7c4d5e9187f4de71647ae7.png
[1046841-20161130222214709-2119876565.png]: /images/20211220/dfeb939c66d84a60a273733f38ec6f4b.png
[1046841-20161130222242443-1326137217.png]: /images/20211220/34060b28030b45c9862b38b1e73bd087.png
[1046841-20161130222317756-739154305.png]: /images/20211220/ea1c0605fb6a4bd0816f9d7e57e194cb.png
[1046841-20161130222357177-591106128.png]: /images/20211220/99bae9e8846849e8adcc8dae2c77212a.png
[1046841-20161130222425677-945575220.png]: /images/20211220/b9baa8fcd1af4d1ebaf218a7c33bedd3.png
[1046841-20161130222456693-351009818.png]: /images/20211220/9834202078374a358e37da45090806a5.png
[1046841-20161130222518521-453338016.png]: /images/20211220/26ae505cd909401495c5179008dd5e62.png
[1046841-20161130222548521-234035042.png]: /images/20211220/0ca3441fa8dc42b89a1957ff658e8192.png
[1046841-20161130222623162-690601688.png]: /images/20211220/afc1bd435487431a8ee922b7288467b0.png
[1046841-20161130222650052-1717641885.png]: /images/20211220/d463c132dab24e26ba58000e16887e2e.png
[1046841-20161130222716256-17038190.png]: /images/20211220/876e8e50199b48b8bb693e08de6a2a71.png
[1046841-20161130222757709-1898642821.png]: /images/20211220/f1909af816c840bfa219a22dd8168fd0.png
[1046841-20161130222824615-1996103864.png]: /images/20211220/363761f5249f466d83acf57a549ef956.png
[1046841-20161130222856209-450466977.png]: /images/20211220/b1ede54069964163a84ba9404dd6fb87.png
[1046841-20161130222931927-1689318639.png]: /images/20211220/f0fa641e6d724d7fa99e0c6b9e6ca01b.png
[1046841-20161130223001334-536660753.png]: /images/20211220/68cb474f46d54c1c9c4c0c2c88c46dc6.png
[1046841-20161130223031209-1821685049.png]: /images/20211220/d4488a9c2f6d49529c33d58c43a9ca0d.png
[1046841-20161130223111927-710081748.png]: /images/20211220/3eceb278665f4f77be0ad9e5da629064.png
[1046841-20161130223143365-1505080649.png]: /images/20211220/9fc8a4e202144acfaa972143741fde61.png
[1046841-20161130223211959-1784141313.png]: /images/20211220/c5c162948ad14c14b0b73d8360991cf5.png
[1046841-20161130223308412-1429245794.png]: /images/20211220/1eae6d824cf646dc99c066dc54e296a1.png
[1046841-20161130223344474-1084759291.png]: /images/20211220/4698f74babc04d898e571f3d430973e2.png
[1046841-20161130223413693-1666867593.png]: /images/20211220/e5b753cbf37c40bfa5d032a7004e3c2e.png
[1046841-20161130223442615-662010869.png]: /images/20211220/c49351902f8c461f9a0d9ec40693ff6e.png
[1046841-20161130223511740-1130989653.png]: /images/20211220/6df3d6d7c8304d45b8c8e2ce9ed70379.png
[1046841-20161130223813506-28217071.png]: /images/20211220/eea36864006547b5956e4f7e408b0b12.png
[1046841-20161130223850427-1074433517.png]: /images/20211220/3aa17fc0f0e3453492d5f11b5fe34669.png
[1046841-20161130223917271-581060276.png]: /images/20211220/848474ada0f04421915bb4506b0905d2.png
[1046841-20161130224001287-1437660750.png]: /images/20211220/a2e04bf1f43a40ca88e2bce91b81ad86.png