JavaScript简介
JavaScript一种直译式脚本语言，是一种动态类型、弱类型、基于原型的语言，内置支持类型。它的解释器被称为JavaScript引擎，为浏览器的一部分，广泛用于客户端的脚本语言，最早是在HTML（标准通用标记语言下的一个应用）网页上使用，用来给HTML网页增加动态功能。
在1995年时，由Netscape公司的Brendan Eich，在网景导航者浏览器上首次设计实现而成。因为Netscape与Sun合作，Netscape管理层希望它外观看起来像Java，因此取名为JavaScript。但实际上它的语法风格与Self及Scheme较为接近。
为了取得技术优势，微软推出了JScript，CEnvi推出ScriptEase，与JavaScript同样可在浏览器上运行。为了统一规格，因为JavaScript兼容于ECMA标准，因此也称为ECMAScript。
JavaScript不单单可以用来做前端，可以用来写服务器端（node.js）
基本特点
JavaScript是一种属于网络的脚本语言,已经被广泛用于Web应用开发,常用来为网页添加各式各样的动态功能,为用户提供更流畅美观的浏览效果。通常JavaScript脚本是通过嵌入在HTML中来实现自身的功能的。
是一种解释性脚本语言（代码不进行预编译）
主要用来向HTML（标准通用标记语言下的一个应用）页面添加交互行为。
可以直接嵌入HTML页面，但写成单独的js文件有利于结构和行为的分离。
跨平台特性，在绝大多数浏览器的支持下，可以在多种平台下运行（如Windows、Linux、Mac、Android、iOS等）。
Javascript脚本语言同其他语言一样，有它自身的基本数据类型，表达式和算术运算符及程序的基本程序框架。Javascript提供了四种基本的数据类型和两种特殊数据类型用来处理数据和文字。而变量提供存放信息的地方，表达式则可以完成较复杂的信息处理。
日常用途
- 嵌入动态文本于HTML页面。
- 对浏览器事件做出响应。
- 读写HTML元素。
- 在数据被提交到服务器之前验证数据。
- 检测访客的浏览器信息。
- 控制cookies，包括创建和修改等。
- 你在一个网站登录过一次之后，再次打开，记住的你用户名
- 缓存，可以在浏览器的存储数据
- 基于Node.js技术进行服务器端编程。
来源————————百度百科
JavaScript入门
编写方式
方式一：在页面Html任意地方
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<script>
alert("surprise moti！")
</script>
<body>
<script>
alert("surprise moti！")
</script>
</body>
<script>
alert("surprise moti！")
</script>
</html>方式二：外部文件（推荐）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
</body>
<script src="../js/hello.js"></script>
</html>程序设计基础
定义变量
Var :variable简写，声明一个变量
//定义基本类型
var age = 17;
age = age+1;
var isSuccess = false;
//定义一个对象
var student = {
name:"zs",
sex:"man",
age:age
};算术运算符和表达式
+ - * /
//+
var weight = 65;
weight = weight+65;
console.log(weight)
//字符串拼接
var dogName ="zhangshan";
dogName = dogName+"xxx";
console.log(dogName);
//除法
console.log(10/3);
console.log(10%3);
//++
var index = 10;
console.log(index++);
console.log(index);赋值运算与表达式
//赋值运算符
var num =1;
num += 1;
console.log(num);
num *=5;
console.log(num);关系运算符与表达式
>
>=
<
<=
===:绝对相对，数值和类型都相等
==：数值相等
!==：绝对不相等
//关系运算符与表达式
var n1 = 1;
var n2 ="2";
console.log(n1==n2);
console.log(n1 != n2);
console.log(n1 === n2);
console.log(n1 !== n2);
逻辑运算符与表达式
与&&:所有表达式都成立，结果成立
只要找到一个不成立表达式，后面的表达式不会执行。
或||:只要有一个结果成立，结果成立
不要找到一个表达式成立，后面的表达式不会执行
非！:取反
位运行符与表达式
与&，或|，异或 ^
var num1 = 5;
//将一个十进制转换成指定进制
console.log(num1.toString(2));
var num2 = 6;
console.log(num2.toString(2));
console.log(num1&num2);
console.log(num1|num2);
console.log(num1^num2);流程控制语句
If..else or If…else if …else
var num3 = 50;
if(num3 < 50 ){
console.log("<50");
}else if (num3> 50){
console.log(">50");
}
else{
console.log("都不是");
}Swith…case..
var sorce = 50;
switch (parseInt(sorce/10)) {
case 1:{
console.log("first");
break;
}
case 3:{
console.log("222");
break;
}
case 4:{
console.log("3333");
break;
}
case 5:{
console.log("55555");
break;
}
default:{
console.log("默认");
}
}循环
for
for(var i = 0; i<5;i++){
console.log(i)
}增强for循环
var array = new Array("sss",456,"da",556);
for(var a in array){
console.log(array[a])
}
while循环
var num3 = 50;
while(num3 >45){
console.log("xx"+num3);
num3--;
};Break,continue关键字也可以使用
函数
定义与调用
/函数
function print(n) {
console.log("函数输出："+n);
return "result";
};
//调用
var reslut = print(6);
console.log(reslut);参数传递
参数传递有2种方式：值传递和引用传递
值传递：
基本类型采用的值传递：Number、String、boolean
function print1(n) {
n++;
console.log("函数1输出："+n);
return "result1";
};
var num99 = 6;
var reslut = print1(num99);
console.log("num99:"+num99);
console.log("返回值："+reslut);引用传递：
对象采用引用传递：Object
// 引用传递
function print2(n) {
n.age++;
console.log("函数1输出："+n.age);
return "result1";
};
var object = new Object();
object.age = 18;
var reslut = print2(object);
console.log("object:"+object.age);
console.log("返回值："+reslut);变量的作用域
作用域分层：局部变量和全局变量：
和Java一样，
变量冲突：就近原则
var xxxx = "bbbb";
function fun() {
var xxxx = "aaaa";
console.log("fun:"+xxxx);//aaaa
}
console.log(xxxx);//bbbb
fun();注意：
正常情况下，局部变量只能在局部范围内访问。
如果想让局部变量，在函数外也能够访问，在变量前面加上window
function fun() {
window.user = 23456;
}
console.log(user);//23456JavaScript常用函数
Alert(“xxx”):警告弹框
alert("警告！")Confirm(“XXX”)：确认框
//confirm 确认true 错误false
var select = confirm("是否确认？");
console.log(select);
Prompt(“提示提字符”，“默认值”)
返回值为输入的值
var result = prompt("请输入：");
console.log(result);Console
控制台输出语句,在Chrome浏览器上，有专门的console标签
Console.log(“……..”)
数组
定义数组
var array1 = [];
var array2 = new Array();
var array3 = [11,22,33,"44"];元素访问与赋值
// 元素访问与赋值
array1[1] = "zs";
array1[2] = 18;
// 取值
console.log(array1[1]+":"+array1[2]);数组的常用方法
//数组的常用数据与方法
var test1 = ["a","b","c","d"];
console.log(test1.length);//数组长度
console.log(test1.shift());//取出数组第一个元素并在数组中删除该元素
test1.unshift("444");//为数组添加第一个元素
console.log(test1[0]);
console.log(test1.indexOf("c"));//找到对应元素的下标
console.log(test1.lastIndexOf("b"));//找到对应元素的下标
test1.push("cd");//为数组最后面添加一个元素
console.log(test1);
test1.pop(); //取出数组最后一个元素
console.log(test1.splice(1,2));//取出一段指定位置的元素,取出的元素数组中不存在
test1.reverse();//翻转数组
console.log(test1);
//map函数
//方法1
var test2 = [1,2,3,4,5];
var test3 = test2.map(function (value, index, self) {
return value*value;//获取数组中值得平方
})
console.log(test3);
//方法2
function fun1(value,index,self) {
return value*value;//获取数组中值得平方
}
var test4 = test2.map(fun1);
console.log(test4);
//方法3箭头函数
var test5 = test2.map((value,index,self)=>{
return value*value;
});
console.log(test5);数组的应用
//顺序查找
function search1(n,key) {
for(var i =0;i<n.length;i++){
if(n[i] != key){
continue;
}
else{
console.log("顺序查找成功");
}
}
}
//折半查找
function search2(n,key) {
var high = n.length-1;
var low = 0;
var half;
while(low < high){
half = parseInt((low + high) /2);
if(n[half] == key){
console.log("折半查找成功")
break;
}
if(key > n[half]){
low = half+1;
}
if(key < n[half]){
high = half-1;
}
}
}
//冒泡排序
function sort1(n) {
for(var i = 0 ;i < n.length;i++){
for(var j = i+1; j < n.length ; j++){
if(n[i] > n[j]){
var tmp = n[j];
n[j] =n[i];
n[i] = tmp;
}
}
}
return n;
}
//选择排序
function sort2(n) {
var max=0 ;
var tmp=0;
for(var i = 0 ;i < n.length ;i++){
max = i;
for(var j =i+1; j< n.length;j++){
if(n[j] > n[max]){
max = j;
}
}
tmp = n[i];
n[i] = n[max];
n[max]=tmp;
}
return n;
}
//队列
var ar = [1,2,3,4];
ar.shift();//取出第一个元素
console.log(ar);
ar.unshift("a");//添加第一个元素
console.log(ar);
//栈
var ar2 = [1,2,3,4];
ar2.pop();//出栈
console.log(ar2);
ar2.push("a");//入栈
console.log(ar2);字符串操作
常用方法：
var str = " 我,爱 ,你 ,中 ,国！！！！ ";
//字符串长度
var l = str.length;
console.log(l);
//字符串查找，返回下标
var s = str.search("我");
console.log(s);
//字符串截取,2到5
var ls = str.substring(2,5);
console.log(ls);
//字符串截取,2开始1长度5
var ls1 = str.substr(2,5);
console.log(ls1);
//字符串替换
var r1 = str.replace("爱","lOve");
console.log(r1);
//大小写转换
var up = r1.toUpperCase();//大写
console.log(up);
var low = r1.toLowerCase();//小写
console.log(low);
//去除空格
var tr = str.trim();
console.log(tr);
//分割
var sp = str.split(",");
console.log(sp);
日期 Date
//获取当前日期
var date = new Date();
console.log(date);
//设置指定日期
var date2 = new Date(2019,0,4,22,33,44);
console.log(date2);
//设置月，可以设置任何时间
var da = Date(date2.setMonth(5));
console.log(da);日期格式化
//模拟实现java中的simpeldateformate
function simpelDateFormate(str) {
var date = new Date(); //获取当前日期
var year = date.getFullYear(); //获取年
var month = parseInt(date.getMonth())+1; //获取月
var day = date.getDate(); //获取日
var hour = date.getHours(); //获取小时
var min = date.getMinutes(); //获取分
var second = date.getSeconds(); //获取秒
if(str=="yyyy-MM-dd"||str =="yyyy年MM月dd日"){
var dates = year+"年"+month+"月"+day+"日";
return dates;
}
if(str=="yyyy-MM-dd hh:mm:ss"||str =="yyyy年MM月dd日hh时mm分ss秒"){
var dates =year+"年"+month+"月"+day+"日"+hour+"时"+min+"分"+second+"秒";
return dates;
}
}
var dates = simpelDateFormate("yyyy年MM月dd日");
console.log(dates);
var dates1 = simpelDateFormate("yyyy年MM月dd日hh时mm分ss秒");
console.log(dates1);
扫一扫
1140
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
