12-JS初体验

来源：互联网发布：美国认证协会知乎编辑：程序博客网时间：2024/06/07 03:57

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Document</title>    <style type="css/text">      p{        color:red;      }    </style>    <script type="text/javascript">       /*在页面上显示一个弹出框*/          alert("this is the first time of javascript");    </script></head><body></body></html>

这里写图片描述
注意点：
1 这个标签不存在。
2 “javascript”代码可以放在head标签之中的title标签之下，如果页面上还有样式那么就放在样式的下面；还可以放在body之中但是现在不建议放在这里哦。
代码书写规格：
1.JavaScript的书写规格就是对空格缩进换行不敏感。
2.如果代码末尾不加分号，必须换行，如果不换行页面会报错。
3.书写的规范：每句javascript写完之后必须加”;”,必须换行。
开发人员工具调试javascript代码的错误：
1打开开发人员工具
2右上角有一个小红叉
3点击小红叉然后点击打开console（控制台：检查页面输出的信息自己输出的信息以及页面输出的信息）红色字体后面有文件名和行号行号就是有错误的行!点击文件名和行号！
这里写图片描述
javascript执行的顺序
从上到下依次执行！
javascript中的注释：
1.0单行：//+注释的内容
2.0多行注释：/**/和css里面的注释一样！
三句话：
１ alert();
作用：在页面上打开一个弹出框，框上显示的内容就是alert()括号中的内容。
特点：一旦这个弹出框打开以后，页面就无法关闭，和移动。
将来写代码尽可能不要使用alert(“”);
２ console.log(内容);（控制台记录这句话）
作用：也是向页面上输出一句话，不是以弹出框的形式输出。
特点：不会让页面”卡死”，直接在控制台中输出。
３ prompt()
作用：在页面上弹出一个输入框，输入框上面的提示文本就是prompt()括号中的内容。

直接量

定义：可以直接使用的数据叫做直接量！
“123”“夏园园”123 叫做直接量。
夏园园不是直接量。

数据类型

在javascript中有很多数据类型：
1 string类型（字符串类型）（可以当做直接量！）
作用：用来描述某一些内容就是一段文本可以理解为人说的一句话
特点：就是所有的字符串都是用“”来引起来的！
字符串的引号可以是单引号也可以是双引号！
但是引号必须是英文的！
2 Number：数字类型（可以当做直接量！）
作用：用来表示所有的数字！
特点：数字用来表示物品的数量！如果数字加了引号就是字符串类型就不是数字类型了。
有一种特殊的数据:NaN(not a number);
NaN:是计算发生错误时的一种状态，也是number类型的数据。
判断是否是NaN的一个关键字:isNaN(is not a number):是非数字
如果结果是NaN,，那么isNaN的结果是true,如果是一个正常的数字，isNaN返回的值是false;
如果结果是一个字符串，那么isNaN的结果是true,

 ***3 boolean:bool类型*** **作用：**判断对和错 对：true 错：flase 但是他的表达式有很多种！ ***4 undefined:未定义！*** 一个变量申明但没有赋值，就叫做undefined  ***５  typeof：判断数据的类型***

如何判断：
1 直接将直接量放在typeof的后面，将来得到的结果会以字符串的形式返回回来。

typeof  直接量

2 将直接量放在typeof后面的括号中。

typeof (直接量)

通过sublime来设计一个页面的模板！

1.0工具—>新代码段

2.0打开以后会打一个新的文档，这个文档的内容就是模板
这里写图片描述
3.0将画红框的代码删掉，换成我们想要的模板代码

4.0将注释的tabTrigger标签打开注释取消，将标签之中的内容修改成我们自己的命名。将文件保存。

变量

作用：用来存储一些可以变化的数据。
代码：**1变量的声明 var只有用这个关键字才可以声明变量。

var 变量的名称;var  name;

2变量的赋值：

name = “abc”;

读作：将字符串abc赋值给name;在变量a中存储一个数据这个数据的类型是字符串，内容是abc.

3.0变量赋值之后可以使用（使用的方式与直接量一样）。
注意：
变量的取名一定要规范：变量名称的取值范围是：0-9,a-z,A-Z,_,$,并且数字不能作为*变量名称的开始部分*。
*变量的名称是区分大小写的：
变量的名称不能是关键字和保留字（备胎）;*

这里写图片描述
javascript代码虽然是从上到下执行的。但是如果js有语法错误，那么浏览器不会执行这里面的js代码。因为浏览器会先去检查js代码是否有错误，如果没有才会从上到下执行。

如果两个变量相加：

两个都是number类型，那么加号的作用是相加
两个都是string类型，那么加号的作用是连接
一个是number另一个是string,那么加号的作用是连接。

运算符：

算数运算符

+（加）：
作用：
*1.0两个数值进行相加
2.0将两个数据进行连接*
-（减）
*（乘）
/（除）
%（取余）
()(提高优先级)
高级运算运算对象：Math(平方，立方，4次方，sin,cos)
1.0Math.pow(a,b)//求a的b次方的值。
2.0Math.round(c)//将c以小数后面一位开始四舍五入。
3.0Math.ceil(d);//将d进行向上取整（天花板函数）
4.0Math.floor(e);//将e进行向下取整（地板函数）
5.0Math.max(a,b,c);//在a,b,c中取得其中最大小的数据
6.0Math.min(a,b,c);//在a,b,c中取得最小的数据
7.0Math.random();//生成一个大于0小于1的随机数。

２逻辑运算符：
逻辑运算符一般跟boolean类型一起使用。
跟boolean有关：
&& ：与（并且）
1 > 3 &&1 < 3
特点：一false都false
|| ：或
1>3 || 1<3
特点：一true都true;
！：非（取反）
特点：取相反的值。
３赋值运算符（=）
作用：将等号右边结果赋值给等号左边的变量。
var a = 1;
var b = 2;
var c = a + b;
var a = b = c = 1;
４逗号运算符：
如果将来要申明多个变量，不想写多个var可以使用逗号运算符。

var a ;var b ;var c ;var a,b,c;

运算符：

算术运算符：
+，-，*，/,%,()
a.算术运算符在编写的时候可以简写：
a) var a = 3; a = a + 3;可以简单写为：a +=3;(+=之间不能有空格)
自增，自减运算符：
1.0：自增：
作用：都是让数据在原来的基础上加一。
a = a + 1;可以简写成 a++(数据的自增);
a.先加加
++a
特点：先自增，再运算
b.后加加
a++
特点：先运算，再自增
2.0：自减：
作用：在原来的基础上将数据减一：
a.先减减：
–a:
特点：先自减，再运算
b后减减
a–:
特点：先运算再自减;
注意：自增最多只算两层，如果增加到三层以上，不但同学们会晕，开发工具也会晕（不同的开发工具，产生的结果是不一样的）。
也就是 var a = 1;var b = a++ + ++a + a ++;（本身就存在争议）
！：非（取反）

注意：算术运算符有自己的优先级:先乘除再加减，
逻辑运算符也有自己的优先级：先算&&，再算||，如果有！先算！
４比较运算符：
a.>
1>3 ===>false 13>2====>true
b.<
c.>=
d.<=
e.==
var a = 3;var b =”3”; var c = a ==b;==>c =true;
注意：==在比较的时候比较的是内容，没有关注数据的类型。

f.===(全等)
var a = 3;var b = “3”;var c = a===b;==>c=false;
注意：===在比较的时候比较的是内容，还有类型。
g.!=
注意：!=比较的是内容
h.!==
注意：！==比较的内容和类型

数据类型的转换：

string,number(NaN),boolean,undefined
为什么需要数据类型的转呢？
问题：要用户输入一个数，我们将这个数据加一之后再输出？
要将字符串转成number类型以后才能进行计算。
prompt()接收到用户输入的内容是以什么类型来接收来的：
prompt接收到的内容是string类型。

２数据类型的转换

２.1 显示转换：
a:转数字：
1）Number转换：

var a = “123”; a = Number(a);

a)如果转换的内容本身就是一个数值类型的字符串，那么将来在转换的时候会返回自己。
b)如果转换的内容本身不是一个数值类型的字符串，那么在转换的时候结果是NaN.
c)如果要转换的内容是空的字符串，那以转换的结果是0.
d）如果是其它的字符，那么将来在转换的时候结果是NaN.

2)parseInt():
代码：

var a = “123”; a = parseInt(a);

a)忽略字符串前面的空格，直至找到第一个非空字符,还会将数字后面的非数字的字符串去掉。
b)如果第一个字符不是数字符号或者负号，返回NaN
c）会将小数取整。（向下取整）

parseFloat();//浮点数（小数）
与parseInt一样，唯一区别是parseFloat可以保留小数。

b.转字符串

可以将其它的数据类型转成字符串。
1）String():
代码：
var a = 123;
a = String(a);
2).toString()的方法来进行转换（包装类）。
代码：
var a = 123; a = a.toString();
c.转boolean类型：
可以将其它类型转为boolean值：
Boolean():
代码：
var a =”true”; a = Boolean(a);
注意：在进行boolean转换的时候所有的内容在转换以后结果都是true，除了：false、”“（空字符串）、0、NaN、undefined

２.2 隐式转换：

a)转number:

var a = “123”; a = +a;

加减乘除以及最余都可以让字符串隐式转换成number.
b)转string:

var a = 123; a = a + “”;

c)转boolean:

var a = 123; a = !!a;

流程控制：

问题：写一段代码，判断李烜身上有多少钱，如果钱超过300块就请吃大餐，如果不够下次记得带够？

１ if else

if(判断条件/boolean值)｛    //满足条件会执行下面的代码    代码1;｝else {    //当上面的条件不满足，或者boolean的值为false的时候会执行下面的代码2    代码2；}

注意：
1 if后面接有判断条件，else后面没有接判断条件
2 if和else只能执行一个。

2 if elseif else

判断李烜身上有多少钱，如果钱超过300块就请吃大餐，如果超过了200，吃中餐，如果不够下次记得带够？

if(判断条件/boolean值)｛    //满足条件会执行下面的代码    代码1;｝else if(判断条件) {    //当上面的条件不满足，或者boolean的值为false的时候会执行下面的代码2    代码2}else if(判断条件)。。。。。else {    最后代码}

注意：
1.0在if_elseif_else结构中elseif可以有几数个
2.0整个结构只会执行一个代码段
3.0条件在判断的是时候先写小范围的条件再写大范围的条件。
4.0 elseif后面要加判断条件
5.0一个if可以构成一个完整的结构

３ switch_case

作用：用来判断多个可能出现的值：
代码：

switch(判断的值){    case 具体值：        要执行的代码段1;        break;    case 具体值2：        要执行的代码段2;        break;    ......    default:        要执行的代码段n        break;}

注意：
1.0case结构后面要跟一个具体的数值
2.0case结构可以有无数个
3.0如果所有的case都不满足，要执行default中的内容
4.0defalut可以不写，并且defalut也不用写条件

js代码的调试：（html,css没有办法调试，只有js代码可调试）

1.0打开开发人员工具，找到source选项：
2.0调试js代码：先在要调试的代码的行号中加上一个断点：
3.0将程序命中断点：刷新页面
4.0点击下一步按钮。F10

三元运算符：

作用：用于判断两个选择。

boolean表达式?代码段1：代码段2;

执行过程：
判断boolean表达式是否成立，如果成立会执行代码段1，如果不成立会执行代码段2;

代码实例！

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Document</title>    <script type="text/javascript">          alert("123");          alert(typeof(123));          console.log("我马上要去运动了");          //使用变量接收传递过来的数据          //1.0声明变量          var name;          //变量赋值          name = prompt("请输入您的姓名");          alert(name)//这里name不能加引号哦          var age;          age = prompt("请输出您的年龄");          alert(age);    </script></head><body></body></html>

循环

１ while循环：

作用：反复执行一段代码：
代码：

 while(判断条件/boolean){    代码块}

while循环的执行流程：
当代码执行到while的时候，会先判断判断条件是否为true，如果为true，那么会执行while大括号中的代码块，代码块执行完毕以后，再次回到while中再进行判断，如果为true,再次执行while大括号中的代码块，并且再次回while，如果为false就不执行
注意：
1.0将来在写代码的时候一定要注意循环的判断条件不能一直为true,会成为一个死循环。
2.0循环的条件和循环体一定要明确。
3.0将来在实际开发中我们一般不会使用while循环，会使用for循环。

２ break:

作用：在循环内部结束这个循环。
用法
这里写图片描述

３ continue:

作用：在循环的内部结束本次循环，开始下一次循环：
这里写图片描述

４ do while:

与while是一样的，唯一的区别就是while先判断再做，do-while，先做再判断；
代码：

do{    //要循环执行的代码块}while (条件语句/boolean)

执行过程：
代码从上到下执行的过程中如果遇到了do就会先执行一次do后面的代码，执行之后再通过while来进行判断，如果判断通过那么再执行一次，如果判断不通过却结束循环。
５ for循环：
作用：反复执行同一段代码：
代码：

for(var i = 1; 判断条件; i++){    要循环的代码块：}

执行步骤：
当程序运行到for的时候，会先声明一个变量i，并且赋值为1，判断i是否满足后面的判断条件，如果满足，执行下面的要循环的代码块，代码块执行完成之后再执行i++,再判断判断条件是否满足，如果满足再次按照上面的流程执行，如果不满足，直接结束for循环。

三. 数据类型：

１简单数据类型：

stringnumberbooleanundefinednull

在栈空间中开辟一块内存，将简单的数据类型存储到栈中。

２复杂数据类型：

**数组：**Array
**对象：**Object;
先在栈空间中开辟一块内存，将数据保存到堆空间中，然后将数据在堆空间中的存储地址放在栈里面去。
共同点：都电脑的运行内存中的一部分。
不同点：
堆：存储空间大，运行速度慢。
栈：存储空间小，运行速度快。

四. object:对象（数据类型）

作用：可以用来存储数据。
保存小明的信息：
年龄，姓名，性别，爱好
由于通过变量来分别保存这些特征不太方便，所以我们干脆用一个对象来表示小明。
声明对象：

var xiaoming = new Object();

给对象赋值：

xiaoming.age = 18;xiaoming.name = xiaoming;xiaoming.sex = “男”;xiaoming.aihao = “女”;

对象的使用：
如果要得到小明的aihao:

xiaoming.aihao

可以直接通过xiaoming.aihao得到小明对应的爱好。
这里写图片描述

数组

１声明数组：
var arr = new Array();
２赋值：
arr[0] = 67;
arr[1]=59.9;
arr[2]=”abc”;
arr[3]=xiaoming;
３取值：
arr[下标];
４注意：
1.0数组的下标是以0开始。
2.0数组声明以后，长度可以是无限长。
3.0js中的数组可以存储任意的类型。
５数组的遍历：
数组中的一个属性：
arr.length;

二. js中的方法：

将一段经常使用的代码用一个方法包起来，将来方便再次调用。
定义：

function  方法名() {            代码段。}

使用：

方法名()

代码实例

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Document</title>    <script type="text/javascript">    var a =100;    var b,c,d,e;    while ( a < 1000){       b =  Math.floor(a/100);       c = Math.floor((a-b*100)/10);       d = a%10;      e = Math.pow(d,3)+Math.pow(b,3)+Math.pow(c,3);       if (a == e)       {         console.log(a);       }         a++;        }       </script></head><body></body></html>

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Document</title>    <script type="text/javascript">        // var arr = new Array()        // arr[0] = "George"        // arr[1] = "John"        // arr[2] = "Thomas"        // var arr2 = new Array()        // arr2[0] = "James"        // arr2[1] = "Adrew"        // arr2[2] = "Martin"        // console.log(arr.concat(arr2))        // console.log(arr);        // var arr = new Array()        // arr[0] = "George"        // arr[1] = "John"        // arr[2] = "Thomas"        // console.log(arr);        // console.log(arr.join("小追命真帅啊"));        //可以将字符串看作一个数组：        var a = "      abadafa    ";        // lastIndexOf//返回指定字符的最后一个位置        //alert(a.lastIndexOf("a"));        // slice(开始，结束)//得到两个之间数值之间的字符,注意不会包含最后一个        //alert(a.slice(1,3));        // indexOf//返回指定字符的第一个字符的下标        //alert(a.indexOf("b"));        // substring(开始、结束)//截取两个数值之间的字符        // alert(a.substring(1,3));        // charAt//返回指定位置的字符        // concat//连接两个字符串        // trim()//去掉字符串首尾的空格        alert(a);        alert(a.trim());</script></head><body></body></html>

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Document</title>    <script type="text/javascript">    //定义方法：    function szmzs() {        alert("小追命真帅");    }    //使用：    </script></head><body>    <input type="button" value="点击有惊喜" onclick="szmzs()">    <!-- onclick叫做给按钮绑定点击事件 --></body></html>

阅读全文

0 0

12-JS初体验

直接量

数据类型

通过sublime来设计一个页面的模板！

变量

如果两个变量相加：

运算符：

算数运算符

运算符：

数据类型的转换：

２ 数据类型的转换

b.转字符串

２.2 隐式转换：

流程控制：

js代码的调试：（html,css没有办法调试，只有js代码可调试）

三元运算符：

代码实例！

循环

１ while循环：

２ break:

３ continue:

４ do while:

三. 数据类型：

１ 简单数据类型：

２ 复杂数据类型：

四. object:对象（数据类型）

数组

二. js中的方法：

代码实例

２数据类型的转换

１简单数据类型：

２复杂数据类型：