目录
js基础语法
JS概念
JavaScript是用于实现用户交互
、动态控制文档的外观和内容
,动态控制浏览器操作、创建cookies等网页行为的跨平台、跨浏览器的由浏览器解释执行的客户端脚本语言
特点
-
是基于对象的弱类型语言
-
弱类型语言:是一种弱类型定义的语言,某一个变量被定义类型,该变量可以根据环境变量自动进行转换,不需要经过显性强制转换。弱类型语言包括vb,php,javascript等。
-
强类型语言:是一种强制类型定义的语言,一旦某一个变量被定义类型,如果不经过强制转换,则它永远就是该数据类型了,强类型语言包括java,net,c++等
-
-
跨平台
-
Linux,windows,mac只要有浏览器,就能够运行
-
-
事件驱动
-
鼠标点击,鼠标悬浮,鼠标移动,键盘按下,键盘弹起,获取焦点,失去焦点,加载等常用的事件
-
如何在HTML中引入Javascript
-
引入js文件
-
写在script标签内部(可以使用多个,每一个之间都是有联系的)
-
注意事项:
-
js代码必须放在结束的后面【原因:js会阻塞dom的解析;当js加载没有完成,页面是不会继续往下执行的】
-
在head中添加js代码,必须使用window.onload
-
不能在style中添加js代码
-
如何在HTML中使用Javascript
使用事件传入javascript代码
<div onclick="alert('hello world')"></div>
使用超链接传入javascript代码
<a href="javascript:alert('hello world');"></a>
如何在页面输出JavaScript
-
alert("这是我的输出页面"); 弹窗输出
-
document.write(“这是我输出的内容”); 在页面输出,可以输出标签
-
console.log() 在控制台中打印,打印任意字符或者js的变量信息; 可以接受任何字符串、变量、数字、对象;
JS的命名规范
-
命名规范
-
一定要有意义
-
不能以数字开头
-
第一个字符必须是一个字母、下划线或是一个美元符号$
-
其他字符可以是字母、下划线、美元符号或是数字
-
不能是系统的关键词
-
推荐使用小驼峰命名法
-
-
javascript区分大小写 变量名、函数和操作符,第一个单词小写以后每个单词首字母大写(getElementById 、aaBbCc)驼峰式命名法
-
注意:不能把关键字、保留字、true、false和null用作标识符
JS语句与注释
-
javaScript中的语句以一个分号结尾,如果省略分号,则由解析器确定语句的结尾,一般情况下,换行会被当做一个语句的结尾
alert('hello world') ; document.write('hello world');
-
注释
//…… 单行注释
/…/ 多行注释
数据类型
变量命名规则
1. 第一个字符必须为字母,_或$,其后的字符还可以是数字
2. 严格区分大小写,要有一定的含义
3. 建议使用小驼峰规则来命名变量。redApple
4. 不能使用关键词,保留字作为变量名
变量的命名和赋值
- var 变量名 变量名=值
- var 变量名=值
- 变量名=值
- var 变量1=值1,变量2=值2,变量3=值3
注意:
- 变量名是浏览器关闭后才释放在,在没关闭之前随时使用
- 重新声明的变量,不会丢失原始值,除非重新赋值
- 换行是语句的结束,最好结束时都加上 “ ; ”
JavaScript的数据类型分为两种:原始类型(即基本数据类型)和对象类型(即引用数据类型); js常用的基本数据类型包括
undefined - - (未定义)、null- - (空的)、number - - (数字)、boolean- - (布尔值)、string- - (字符串)
js的引用数据类型也就是
对象类型Object- - (对象),比如:array - - (数组)、function - - (函数)、data - - (时间)等;
JS为弱类型语言,不必声明数据类型,而是在使用或赋值的时候确定其类型
强类型语言/弱类型语言
强类型语言【java】:
- 要求变量的使用要严格符合定义,所有变量都必须先定义后使用。
- 一旦一个变量被指定了某个数据类型,如果不经过强制转换,那么它就永远是这个数据类型了
弱类型语言【js/python/php】:
- 它与强类型定义语言相反, 一个变量可以赋不同数据类型的值
对象类型
- 本地对象:string,Array,Date,Math,Golbal,独立于宿主环境的ECMAScript实现提供的对象
- 宿主对象:DOM,BOM。ECMAScript中的‘宿主’就是我们网页的运行环境,即‘操作系统’和‘浏览器’
判断数据类型
可以通过typeof运算符来判断数据类型
String
js中用来表述文本的数据类型
- 字符串用单引号或双引号包括起来
- 单双引号均不能解析变量
- 变量与字符串,变量与变量之间可以使用运算符‘+’来链接
- 单引号和双引号可以互相嵌套,如果单引号中要嵌套单引号,需要使用转义字符
转义字符
注意:
- \n换行(在alert中生效)
- 8进制表示法【进行两次转换,这里面的数字是ASCII中表示的八进制数字】
- 16进制表示法
- 16进制unicode表示法
Number
按照进制划分:二进制、八进制、十进制、十六进制 按照其他划分:整形、浮点型、NaN(not a number) js中所有的数字是以IEEE-75标准格式表示的,浮点数的精确问题不是js特有的;因为有点小树以二进制表示位数是无穷的
整形: 0,6,-100,0xff00(十六进制),0377(八进制),0b1010(二进制),不管输入的是几进制,最终显示时都会转为10进制
浮点型: 1.2,0.123,3.14e11=>3,14*10^11 科学计数法
0.375+0.248.toFixed(2)=>保留两位小数(四舍五入)
console.log(1.0-0.9==0.1)//false
console.log(1.0+0.9==1.9)//true
NaN(not a number): NaN是一个特殊的number值,not a number表示非数字,当程序由于某种原因计算错误时,将产生一个无意义的数字NaN NaN与任何值都不想等,包括NaN本身 任何涉及NaN的操作,结果都为NaN
var a='hello';
b=10;
alert(a-b) // NaN
Boolean
- 值只有true和false。分别代表逻辑真与假
- 布尔值通常用来表示比较所得的结果
- true和false是严格区分大小写的
var n=10;
if(n>8){
alert('我是true');
}else{
alert('我是false');
}
undefined
- 定义了一个变量但没有为该变量赋值,使用了一个并未赋值的变量
- 使用了一个不存在的对象的属性时
var n;
alert(n);
var people=new Object; // 创建一个object对象
people.height =162; // 添加属性height
alert(people.height); // 输出属性height
people.show=function(){ // 添加方法show
alert(this.color); // 调用属性color
alert(this.height); // 调用属性 height
}
people.show() // 调用方法show
null
- null表示一个空值
- null不等于空字符串""、''或0
- null和undefined的区别是,null表示一个变量被赋予了一个空值,而undefined则表示该变量尚未被赋值
null值表示一个空对象指针,它代表的其实就是一个空对象,所以使用typeof操作符检测时返回”object”
在JavaScript 最初的实现中,JavaScript 中的值是由一个表示类型的标签和实际数据值表示的。对象的类型标签是 0。由于 null 代表的是空指针(大多数平台下值为 0x00),因此,null的类型标签也成为了 0,typeof null就错误的返回了”object”。在ES6中,当时曾经有提案为历史平凡, 将type null的值纠正为null, 但最后提案被拒了,所以还是保持”object”类型
————————————————
原文链接:https://blog.youkuaiyun.com/zsd0819qwq/article/details/105290202
Array(数组)
创建数组 方法一:var 数组名=new Array(); 方法二:var cars=new Array("Audi","BMW","BYD"); 方法三:var cars=["Audi","BMW","BYD"];
获取数组中的值
var arr = ['少林寺','龙门石窟','二七塔','华谊电影小镇'];
console.log(arr[0]);
console.log(arr[1]);
console.log(arr[2]);
console.log(arr[3]);
循环输出所有的数据
var cars=new Array("Audi","BMW","BYD");
for(i=0;i<cars.length;i++){
document.write(cars[i]+"<br/>")
}
多维数组
var arr = [
['北京','上海','深圳'],
['合肥','石家庄','昆明'],
['','','']
];
console.log(arr[0]);
console.log(arr[1]);
console.log(arr[2]);
console.log(arr[3]);
Object 对象
对象: { },使用{ }包括起来的都是对象 [ ], 使用[ ]包括起来的都是数组
创建对象: 方法一:var 对象名称 = new Object();
方法二:var 对象名称 = {'键':‘值’,'键':‘值,'键':‘值,'键':‘值};
创建对象
// 车
var car = new Object();
// 属性
car.color = 'red';
car.brand = 'BMW';
car.price = 28.5;
// 方法
car.run = function(){
console.log('我能跑');
}
car.stop = function(){
console.log('我能停止');
}
car.setSpeed = function(){
console.log('我能定速巡航');
}
获取对象中的属性和方法
// 调用整个对象
console.log(car);
// 类似数组的方式调用
console.log(car['color']);
console.log(car['price']);
// 使用对象的方式调用
console.log(car.color)
console.log(car.price);
// 调用对象里面的方法
car.run();
使用第二种方式创建人的对象
var obj2 = {
// 定义属性
'name':'jack',
'sex':'男',
'age': 18,
// 创建方法
'eat':function(){
console.log('我能吃');
},
'sleep':function(){
console.log('我能睡觉');
}
};
console.log(obj2);
// 调用属性
console.log(obj2.name);
// 调用方法
obj2.eat();
JS的严格模式
在js中存在一个严格模式,使用 use strict来定义;这个是ES5中新增加的;
"use strict";
x = 3.14;
console.log(x);
"严格模式"体现了Javascript更合理、更安全、更严谨的发展方向,包括IE 10在内的主流浏览器,都已经支持它,许多大项目已经开始全面拥抱它
另一方面,同样的代码,在"严格模式"中,可能会有不一样的运行结果;一些在"正常模式"下可以运行的语句,在"严格模式"下将不能运行。