javascript基础复习(一)

向右看齐 2022-09-26 02:17 180阅读 0赞

原来可以用把超链接设置为block 块元素  
display:block  
然后设置大小。。。  
6666666666

## 开始javascript ##

~~~~~~~~~~~~~~~~~~

JS是脚本语言（没有编译器）（JS与java没有任何关系）

## JS与JAVA的对比 ##

JAVA： 面向对象：继承，封装，多态  
JS： 基于对象，但不支持严格的继承、封装、多态

继承：  
JS没有继承的概念，但是他有原型的概念。每个对象都有一个prototype属性，用来指定改对象的原型对象，类似于继承

封装：  
JS中有不严格的封装，对象中封装的属性和方法是可以任意访问、修改的。

多态：  
JS中的所有对象都是Object。即他们的根原型是object。但是JS不像Java的多态那样严谨。JS的对象可以赋值给任意类型的其他对象。

## 使用javascript ##

**1、事件定义式**  
在事件定义时直接写js  
**2、嵌入式**  
使用

<title>javascript1</title>
    <script type="text/javascript">  function f2(){ alert('这个也666'); } </script>
    
    <script type="text/javascript" src="js/1.js"></script>
    </head>
    
    <body>
    
    
    <input type="button" value="按钮1" onclick="alert('6666');"/>
    
    
    <input type="button" value="按钮2" onclick="f2()"/>
    
    
    <input type="button" value="按钮3"onclick="f3()"/>
    
    </body>

## javascript 的代码错误 ##

解释型代码，代码错误，则页面中无效果

IE浏览器

状态栏、开发工具

Firefox浏览器、Chrome 浏览器

使用错误控制台查看

没有效果的时候，有错误会有提示，F12进入~~~~

![这里写图片描述][20160916204838055]

可以这么调试，console.log(‘调试~~~~’);  
就不用老alert（），可以在控制台输出。

![这里写图片描述][20160916205558324]

## 基本语法 ##

由Unicode字符集编写  
注释  
单行： //  
多行: /\* \*/  
语句  
表达式、关键字、运算符组成  
大小写敏感  
使用分号或者换行结束，一行中有多个语句不能省略分号

## 标识符 ##

由不以数字开头的字母、数字、下划线（\_）、美元符号($)组成  
常用于表示函数、变量等的名称  
名称最好有明确的含义  
建议遵守camel法则

javascript语言中代表特定含义的词称为保留字，不允许程序在定义为标识符

![这里写图片描述][20160916205742275]

## 变量 ##

变量声明  
使用关键字var声明变量，如 var x,y;  
变量初始化  
使用 “=”赋值  
没有初始化的变量则自动取值为undefined  
如： var count =0;

如：

var m;  
var n =12;  
var str =”hello”;

变量没有类型，统一yoga关键字var声明

变量引用的数据是有类型的。

可以直接在console中定义变量，输出那个变量的值就直接写变量的名即可

![这里写图片描述][20160916210047202]

## 数据类型~ ##

所有的都是对象，  
除了特殊类型  
null：空 undefined：未定义

![这里写图片描述][20160916210140968]

## 简单内置对象 ##

String：字符串

Number类型

Boolean类型 true,flase; 运算时true=1，flase=0；

## 数据类型的隐式转换 ##

javascript属于松散型的语言  
变量在声明时不需要制定数据类型  
变量在所引用的数据有类型  
不同类型数据在计算过程中会自动进行转换

**数字+字符串： 数字转换为字符串**  
**数字+布尔值： true转换为1，flase转换为0**  
**字符串+布尔值： 布尔值转换为字符串true或者false**  
**布尔值+布尔值： 布尔值转换为数值1或0**

## 数据类型转换函数 ##

**toStrig**  
所有数据类型均可转换为String类型  
**parseInt**  
强制转换为整数，如果不能转换，则返回NaN(not a number)  
例如：  
parseInt(5.5)返回5  
parseInt(6.12)返回6，可以作为取整函数  
parseFloat  
强制转换成浮点数，如果不能转换，则返回NaN  
例如： paseFloat（“6.12”） 返回6.12

![这里写图片描述][20160916210424172]

## typeof ##

查询当前类型，返回string/number/boolean/object/function/undefined  
例如：typeof(“test”+3),返回”string”  
isNaN ( is not a number? )

判断被检测表达式经过转换后是否不是一个数  
如果被检测表达式不是数则返回true，否则返回false

![这里写图片描述][20160916210522673]  
![这里写图片描述][20160916210533376]

**因为变量的声明是用var的，所以经常用来判断变量是什么类型的**

## 获取文本框的内容 ##

var input = document.getElementById(“那个id名”);  
var n = input.value； 就是文本框的内容

如果文本框没有输入任何内容，则从文本框中获取的值是“”

## innerHTML 是元素的内容。 ##

![这里写图片描述][20160916210953487]

![这里写图片描述][20160916211021112]

创建文本框，然后id命名，创建按钮，命名，会产生点击事件οnclick=函数名()

然后在函数中用document来操作,点getElementById(“标签的id名”)来获取这个标签。  
然后用var声明变量。接收，然后对这个对象进行操作，！！！这个是对象。用value获取文本框的内容，innerHTML是元素的内容。

在函数外面在

## 三元运算 ##

1==1?1:2

返回1

1==2?1:2  
返回2

就是先条件是否是true是的话就返回第一个冒号：前面的，不成立就返回冒号后面的。

0？1:2

返回2，因为0是false所以会返回2；

## 在JS中的条件表达式 ##

布尔值  
和java的规则一样  
其他值  
JS中可以以任何数据作为表达式。  
如果是非空的数据，则代表true，空则代表false；

在写条件表达式  
如：  
for(var i=n;i;i–)\{

这个中间的条件直接写i，是i一直减，减到0也就是对JS来说就是空了。

## javascript对象 ##

对象是javascript中最重要的API

javascript包含多种对象

内置对象  
外部对象  
windows对象  
dom对象  
自定义对象

## 如何使用对象 ##

对象包含属性和方法  
访问对象属性  
对象.属性  
访问对象方法  
对象.方法名

## JS中的常用内置对象 ##

String对象  
Number对象  
Boolean对象  
Array对象  
Math对象  
Date对象  
RegExp对象  
Function对象

## String对象 ##

创建String对象有2种方式  
var str1 =”hello”;  
var str2 = new String(“hello”);  
String对象的属性：length  
str1.length

## String对象的常用方法 ##

大小写转换  
.toUpperCase();输出大写  
.toLowerCase();输出小写  
获取指定字符  
x.charAt(index): 返回指定位置的字符  
x.charCodeAT(index)：返回指定位置字符的Unicode编码  
使用说明  
index: 字符位置

例如：  
var str1 = “javascript网页教程”;

var str2 = str1.charAt(12);  
alert(str2)//返回结果为“教”从0开始

var str3 = str1.charCodeAt(12);  
alert(str3); //返回结果为25945 Unicode编码

![这里写图片描述][20160916211551442]

## 查询指定字符串 ##

x.indexOf(findstr,\[index\])  
x.lastIndexOf(findstr,\[index\])

## 使用说明 ##

findstr: 查找的字符串  
index: 开始查找的位置索引，可以省略  
返回findstr在x中出现的首字符位置索引，如果没有找到，则返回 -1  
lastIndexOf: 从后面找起。

例如：  
var str1 = “javascript”;  
var str2 = str1.indexOf(“a”);  
alert(str2); //返回结果为1  
返回位置，从0开始

var str3 = str1.lastIndexOf(“a”);  
alert(str3); //结果为3  
从后向前开始查找，也是返回位置

![这里写图片描述][20160916211821896]

## 获取子字符串 ##

x.substring(start,\[end\])  
使用说明  
start： 开始位置  
end: 结束位置加1.可以省略

例如：  
var str1 = “abcdefgh”;

var str2 = str1.substring(2,4);  
alert(str2); //结果为cd

![这里写图片描述][20160916213257294]

## 拆分子字符串 ##

x.split(bystr,\[howmany\])  
使用注解  
bystr: 分割用的字符串  
howmany: 指定返回的数组的最大长度，可以省略  
返回分割后的字符串数组。

例如：  
var str1=”周一,周二,周三,周四,周五,周六,周日”

var strArray=str1.split(“,”);  
alert(atrArray\[1\]) //返回结果为周二

![这里写图片描述][20160916213338405]

## Number对象 ##

Number是数字对象

## Number常用方法 ##

toFixed(num)：转换为字符串，并保留小数点后一定位数  
如果必要，该数字会被舍入，也可以用0补足。

var data = 23.56789;  
alert(data.toFixed(2)); //返回 23.57

data = 23.5;  
alert(data.toFixed(2)); //23.50;

将数字转换成字符串，并且可以保留小数后一定位数。

[20160916204838055]: /images/20220717/66210c6471444caabe5bbf13b475a588.png
[20160916205558324]: /images/20220717/03c23eeaad2644d69291be6c6f4d09ba.png
[20160916205742275]: /images/20220717/8fe64543479348bdb997a4a54f6c1b1f.png
[20160916210047202]: /images/20220717/6a258b2076094b488da9c0fdfecc0348.png
[20160916210140968]: /images/20220717/e8ba5ef3449444a59230c11886cb062d.png
[20160916210424172]: /images/20220717/f51a9a115163442eb11f0c8eec46d081.png
[20160916210522673]: /images/20220717/cf1aef03d2ff43d49e4703859939320f.png
[20160916210533376]: /images/20220717/f64a660500354db9b4cd02b14d241f0c.png
[20160916210953487]: /images/20220717/658f054dcfdb4cf08f898757a48e0aa4.png
[20160916211021112]: /images/20220717/a90867cf292c448ebef7b77232c862c1.png
[20160916211551442]: /images/20220717/28b26094b6b547b893c7c0acf295c7cb.png
[20160916211821896]: /images/20220717/5ac0f0a5a518444a904550332c832ce0.png
[20160916213257294]: /images/20220717/08558c4abd2842979446bb25858f0c23.png
[20160916213338405]: /images/20220717/369636f0adc945a28e4c09cff6e5f2a3.png