目录
JS(JavaScript)(1)
js介绍
1. 什么是JavaScript?
JavaScript是一种直译式脚本语言,是一种动态类型、弱类型、基于原型的语言,内置支持类型。它的解释器被称为JavaScript引擎,为浏览器的一部分,广泛用于客户端脚本语言,用来给HTML网页添加动态功能。
2.JavaScript的组成
JavaScript包括ECMAScript、DOM、BOM。
3. ECMAScript
ECMAScript 是由ECMA 国际( 原欧洲计算机制造商协会)进行标准化的一门编程语言,这种语言在万维网上应用广泛,它往往被称为 JavaScript 或 JScript,但实际上后两者是 ECMAScript 语言的实现和扩展。指定的JavaScript标准语言。
4. DOM文档对象模型
文档对象模型(Document Object Model,简称DOM),是W3C组织推荐的处理可扩展标记语言的标准编程接口。通过 DOM 提供的接口可以对页面上的各种元素进行操作(大小、位置、颜色等)。
5.BOM浏览器对象模型
BOM (Browser Object Model,简称BOM) 是指浏览器对象模型,它提供了独立于内容的、可以与浏览器窗口进行互动的对象结构。通过BOM可以操作浏览器窗口,比如弹出框、控制浏览器跳转、获取分辨率等。
js写法
1、JS代码书写
1.1、行内引入
在html开始标签中引入
<div onclick="alert('点击了')"></div>//相同引号不能嵌套
1. 可以将单行或少量JS代码写在HTML标签的事件属性中(以on开头的属性),如: onclink
2. 注意单双引号的使用:在HTML中我们推荐使用**双引号**,JS中我们推荐使用**单引号**
3. 可读性差,在 HTML 中编入 JS 大量代码时,不方便阅读
4. 特殊情况下使用
1.2、内部引入
在<script>标签中引入
<script>
alert('Hello world');
</script>
特点:可以将多行JS代码写到`<script>`标签中。
内嵌 JS 是学习时常用的方式。
1.3、外部引入
新建一个js文件,并在html中的head中引入
<script src="my.js"></script>
注意:引入外部文件的script标签内部不能在写js代码,不会执行
特点:利于HTML页面代码结构化,把单独JS代码独立到HTML页面之外,既美观,又方便。
引用外部JS文件的script标签中间不可以写代码
适合于JS代码量比较大的情况
1.4、script标签放置的位置
1、HTML中script标签可以有任意多个,可以放置在任意位置
2、执行过程中遇到script标签就会暂停往下执行,去解析script标签中的js代码,解析完以后再往下执行
3、一般放置在head中、body的末尾
2、JS的基本语法
2.1、输入输出语句
方法 | 说明 | 归属 |
alert(msg); | 浏览器弹出警示框 | 浏览器 |
console.log(msg); | 浏览器控制台打印输出信息 | 浏览器 |
prompt(info); | 浏览器弹出输入框,用户可以输入 | 浏览器 |
confirm(info) | 浏览器弹出带有指定消息和确认及取消按钮的对话框 | 浏览器 |
- `alert()` 主要用来显示消息给用户
- `console.log()` 用来给程序员看自己运行时的消息
- `prompt(info);` 例子 prompt("请输入商品价格"); var value = prompt("请输入商品价格"); 输出用户所输入的值
- `confirm(info)` 例: var a=confirm("郭杨和小代是好朋友吗?"); 返回 确定即为 true 取消则为false
2.2、声明变量的规范
名称可以包含字母、数字、下划线和美元符
1、名称必须以字母、_和$开头
2、名称对大小写敏感
3、保留字无法用作变量名称
4、变量名不能相同(原因会把之前声明的给覆盖掉)
2.3、声明变量
声明变量用到计算机的保留字var来声明变量,为什么要声明变量?因为我们每个人都有一个自己的名字,计算机也是。它需要一个自己的名字来识别。
变量:顾名思义就是可以改变的量,存储数据的容器。
有以下声明方式:
1、先声明再赋值:var a;a=0。
2、声明变量的同时赋值:var a=0。
3、同时声明多个变量:var a=0,b=0,c=0;
4、变量连等:var a=b=c;
2.3.1、声明变量的特殊情况
var age; console.log(age); | 只声明,不赋值 | undefined 未赋值 |
console.log(age) | 不声明 不赋值 直接使用 | 报错 not defined 未定义 |
age = 10; console.log(age); | 不声明 只赋值 | 10 |
2.4、JavaScript数据类型
JavaScript有6大数据类型。分别是五大基本数据类型和复杂数据类型。
2.4.1、基本数据类型
基本数据类型分别有Number(数字类型)、String(字符串)、Boolean(布尔类型)、Null和Undefined
1、数据类型Number
•Number类型包含整型和浮点型(浮点数值必须包含一个小数点,且小数点后面至少有一位数字)两种值。
•栗子:var n=123;//整型
var n=1.23; //浮点型
•在Number类型中有一个比较特殊的值:
NaN:(not a number)非数字类型。
有这样一个例子:就是说0/0返回的结果是应该是0,但是在我们js中这个算法就不一样了,在这里0/0返回的是 NaN.而0/1返回的是无穷大,负数除以0返回的是负无穷大。原因:因为计算机中不知道我们是把0当作除数
栗子:
var a=5-"b"
console.log(a)//结果是NaN 因为一个是数字一个是字符串结果肯定是一个不是数字的 所以返回NaN
特点:涉及到任何关于数值的错误操作,都会返回NaN
•typeof:返回数据类型
2、数据类型String
•被单引号或者双引号包围的字符都是String类型
var s2=”abc”;//字符串
var s3='123';//字符串
•length属性:获取字符串的长度
var s1='abc';//字符串
console.log(s1.length);//获取字符串的长度,返回值 3
•charAt()方法:获取对应位置的一位字符
s2.charAt(0); //a 下标从0开始
3、数据类型Boolean
•Boolean类型只有两个值,true和false
•当进行逻辑判断时,一般会得到Boolean值,同样Boolean值也可以用作判断条件。
4、数据类型null和undefined
•Null
–Null类型只有一个值,即null,从逻辑角度来看,null值表示一个空对象指针
•Undefind
–Undefind类型只有一个值,即undefined,在使用var声明变量但未对其加以初始化时,这个变量的值就是undefined。
•undefind和null的区别
–null表示“没有对象”,即该处不应该有值。
–undefined表示“缺少值”,就是此处应该有一个值,但是还没有定义。
2.4.2、复杂数据类型
1、复杂数据类型Object
Object对象由属性和方法构造(后面会具体讲解对象)
Object对象用花括号表示{}
•Object包括:
–window
–document
–构造函数创建的对象 new Object
–json形式的对象 obj = { “name”:”ujiuye”}
2、复杂数据类型Array
•Array数组类型:存储数据的容器,可以存储任意类型的数据,可以存储任意多个。
Array数组用中括号表示[]
•数组的表现:[1,true,null]
•获取数组长度length:arr.length
•获取数组元素:arr[下标] 下标从0开始
3、复杂数据类型function
•函数function:存储一段代码块,在需要的时候调用
•函数声明:function 函数名(){ }
•函数调用:函数名()
2.4.3、数据类型转化
•为什么需要类型转换?
•用户从键盘输入的数据,都是字符串,例如用户输入1+1预期得到结果为2,但实际结果为11。
• 数据类型转换是为了更好的数据运算以得到正确值
•数据转换分为强制转换和隐式转换。
1.强制转化为整型
•强制转换为Number类型
•Number(要转换的值):只能转换boolean,纯数字字符串、空字符
•parseInt(要转换的值):从左往右进行转换,遇到不能转换的字符或字符的结尾结束转换。转换成整型,舍弃小数部分。
parseInt('12.5px') ---- 12
•parseFloat:保留小数部分。
parseFloat('12.5px') ---- 12.5
•isNaN():判断值是不是非数字,返回布尔值
栗子:
var bool=true;
console.log(typeof(bool)+":"+bool) //结果为boolean类型 值为true
var num=123;
console.log(isNaN(num)) //结果为false
var str="Hello"
console.log(isNaN(str)) //结果为true
2.强制转换为字符型
•强制转换为String类型
•String : String(转换的值)
•toString : 转换的值.toString()
•num.toString(number)可以将数值,转换成对应进制的数字字符串,number的范围是2-36
•String()与toString()区别是 toString无法转化 null 和 undefined
栗子:
var str="hello"
console.log(typeof(str)) //结果为string
var str=null
console.log(typeof(str)) //结果为object
var str=null
console.log(str.toString()) //会报错,不能转化 undefined同样也是
3. 运算符
•算术运算符 + - * / ++ --
•赋值运算符 = += -= *= /=
•比较运算符 > >= < <= ==(相等) !=(不相等) ===(恒等,全等) !==
•逻辑运算符 &&(与) ||(或) !(非)
•! 取反
•三目(三元)运算符 : 条件 ? 条件为真的时候执行 : 条件为假的时候执行
2.4.4、数据类型的隐式转换
•隐式转换:当我们进行比较操作或者加减乘除四则运算操作时,会触发javascript的隐式类型转换机制。其中字符串和其他数据类型进行加法运算时,’+‘将变成拼接符,把其他数据类型转换成字符串。
•10+18+'age'+10+18+true
var str=10+18+'age'+10+18+true
console.log(str) //结果为28age1018true
(ˇˍˇ) 为什么age后面的不是28而是1018呢?
原因是到了字符串这里代码执行就结束了,字符串后面的不会在像字符串前面的一样加起来了,所以代码执行到字符串后面就拼接起来了。就是说任何加字符串都会得到字符串。
js获取
1、获取元素
我们用window.onload来获取html中的元素
window.onload=function(){
document.getElementById('box').onclick = function (){
alert('点击了');
}
}
•当把script标签放置在head中的时候,会获取不到元素
•因为代码从上往下执行,获取元素时,标签没有加载出来
2、DOM常用的事件
2.1、鼠标事件
•点击事件:onclick
•双击事件:ondblclick
•鼠标移入:onmouseover/onmouseenter
•鼠标移动:onmousemove
•鼠标移出:onmouseout/onmouseleave
•鼠标按下:onmousedown
•鼠标抬起:onmouseup
鼠标右击:oncontextmenu
2.2、键盘事件
onkeydown:某个键盘被按下。
onkeypress:某个键盘按键被按下并松开。
onkeyup:某个键盘按键被松开。
2.3、JS设置或获取元素内容的方式
1、获取表单元素的值:元素.value
2、获取元素内容:元素.innerHTML(可识别 标签)
元素.innerText(不能识别标签)
2.4、JS设置或获取元素属性的方式
1、设置或获取元素HTML属性:(元素.属性)
--元素.id
--元素.className(设置或获取类名时 比较特殊)
2、设置或获取元素css属性:(元素.style.属性)
--元素.style.width
--元素.style.fontSize (当css属性由两个单词组成,比如font-size,这类属性在js使用驼峰标识)
2.5、cssText属性
•cssText 的本质就是设置 HTML 元素的 style 属性值。
–元素.style.cssText ='width:200px;height:200px;background:red'
2.6、JS设置或获取元素属性的其他方法
•通过id获取元素:
–document.getElementById('id名');
•通过class名获取元素:
–document.getElementsByClassName('类名')
–父元素.getElementsByClassName('类名')
•通过标签名获取元素:
–document.getElementsByTagName('标签名')
–父元素.getElementsByTagName('标签名')
•通过tagName和ClassName获取的元素是元素集合
用法和数组一样,使用的时候必须通过[]获取出来具体的元素
•栗子:
var oLi = document.getElementsByTagName('li');
console.log(oLi.length); //获取元素集合的长度
oLi[1].onclick = function () { alert('点击了');}