文章目录
一.JS
1.概述
js全称是JavaScript, 只能在浏览器被执行
基于对象的事件驱动的脚本语言
特点 : 弱类型 , 直译式
好处 : 增强了用户的交互性 , 相对安全 , 跨平台
位置: 行内js , 内部js , 外部js
web 前端开发者必学的三种语言：
HTML 定义网页的内容 H5
CSS 规定网页的布局 CSS3
JavaScript 实现网站的交互 ES6
微软出了符合规范类似javascript的称为js，但一般开发者忽略它们的差异，全称就习惯叫javascript，简称就习惯叫js。
全称JavaScript，是一种弱类型语言，同其他语言一样，有它自身的语法，数据类型，表达式，算术运算符等。
JS是一门 基于对象 和 事件驱动 的 脚本语言 ，通常用来提高网页与用户的交互性。
2.名词解释
基于对象：它不仅可以创建对象,也能使用现有的对象。JS没有类的概念，也没有编译的过程。是一边解释一边执行。
事件驱动：在JS中，大部分情况下都是通过事件触发驱动函数执行的，从而实现特定的功能。（比如点击div将内容替换为时间、当鼠标滑过元素，元素就有翻转的动态。）
脚本语言：在网络前端开发环境下，用于嵌入在客户端浏览器中的一段小程序。
3.特点和优势
特点：
(1)JS是一门直译式的语言，直接执行的就是源代码.
是一边解释一边执行，没有编译的过程（不像Java需要提前编译为class文件再运行）.
(2)JS是一门弱类型的语言,没有严格的数据类型.
优势：
(1)良好的交互性
(2)一定的安全性(JS被强制的要求,不能访问浏览器以外的东西,只能访问浏览器和浏览器内部的资源)
(3)跨平台性(Java语言具有跨平台性,是因为有虚拟机)
只要有浏览器的地方都能执行JS
4.入门案例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>测试js的语法</title>
<!-- 2.内部js
-->
<script >
alert(666);
</script>
</head>
<body>
<!-- 1.行内js
事件驱动：必须触发才会执行的动态效果
-->
<!--超链接-->
<a href="#" onclick="alert(666)">单击</a>
<a href="#" ondblclick="alert(999)">双击</a>
<a href="#" onmouseenter="alert(888)">鼠标划入</a>
<a href="#" onmousedown="alert(111)">鼠标划出</a>
</body>
</html>
5.基础语法
基本数据类型
包括:number/string/boolean/null/undefined
(1) 数值类型-number
在JS中，数值类型只有一种，就是浮点型。
在JS中，需要时会自动的进行数据类型的转换，比如：在显示和处理的时候，浮点型和整型会自动的转换。
(2) 字符串类型-string
在JS中，字符串是基本数据类型。
在JS中，字符串直接量是通过单引号或者双引号引起来。
(3) 布尔类型-boolean
值为true或者是false；
(4) undefined
值只有一个就是undefined。表示变量没有初始化值。
（5） null
值也只有一个，就是null。表示空值或者不存在的对象。
复杂数据类型
函数、数组、对象（自定义对象、内置对象、DOM对象、BOM对象…）
JS的变量
js是弱类型语言，所有类型的变量都是用var关键字定义。并且参数的类型可以随时转换。
javascript没有类似采用静态语言类型，如java的变量类型是编译期就确定的；而它采用了动态类型，也就是说在编译期类型不确定，运行时会动态根据变量的赋值来决定它的类型，这点比较灵活。这也是双刃剑，编译期就难以检查出其赋值的错误。
练习:变量交换
(1) 在JS中是通过 var 关键字来声明一个变量
var a=1; alert(a);
var x=true; alert(x);
var y=10.8; alert(y);
(2) 在JS中声明的变量是不区分类型的， 可以指向任意的数据类型。
var a = 1;
a=true;
a=100;
alert(a);//100
function x(){
var m = 10;
alert("局部变量:"+m);
alert("全局变量:"+a);
}
alert("局部变量2:"+m);//局部变量失效,报错
JS的运算符
JS中的运算符和Java中的运算符大致相同
算术运算符: +，-，*，/，%，++，–
赋值运算符: =，+=，-=，*=，/=，%=
比较运算符: ，!=，=，!==，>，>=，<，<=
位运算符: & ， |
逻辑运算符: && ，||
前置逻辑运算符: ! (not)
三元运算符: ? :
常见运算符测试
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>测试JS的语法</title
<!--1.内部js-->
<script>
//JS是弱类型语言，也有几种：number string boolean null undefined
var a = 10;
a=1.9+2.6;
a = 1.9+2.1;
a="hello,js";
a='hello,js';
a=true;
alert(a);//弹出变量的值
var b='123'+'456';//JS也可以拼串
alert("b的值:"+b);//只定义而不赋值的变量，会得到提示undefined
//2.JS的运算符
//% ++ --
var c =10%3;
c=c++;
alert(c);//1
alert(++c);
var d=1;
d = d+1;//java里面报错，需要强转，d = byte(d+1);
d += 1;
alert(d);
var e=1;
var f='1';
alert("***************");
alert(e == f);//true
alert(e === f);//数据的值+类型，false
alert(e !=f);//false
//三目运算符：比较两个数里的大值
var g=prompt("输入数字");//从浏览器输入的·值
var h=prompt("输入另一个数字");
alert(g>h? 1:0)
//typeof：获取数据的类型
var i=3;
alert(typeof i);//number
i = true;
alert(typeof i);//boolean
i='hello';
alert(typeof i);//String
i="hello";
alert(typeof i);//String
alert(typeof 100);//number
alert(typeof '100');//string
</script>
</head>
<body>
</body>
</html>
6.js的语句
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>测试JS语句</title>
<script>
//3.while
//如果给你一个亿，每天花一半，能花多少天
var a=100000000;//记录钱
var c=0;
while(a>1){
a = a/2; //每天花一半
c++; //天数++
}
console.log("总共花"+c+"天");
//2.for循环
// 打印1~10
for(var i=1;i<=10;i++){
alert(i);
console.log(i);//在浏览器控制台打开
}
// 计算1~100里4的倍数的和
var sum=0;
for(var i=1;i<=100;i++){
if(i%4==0){
sum+=i;
}
}
console.log("1~100里4的倍数总和是:"+sum);
<!--HTML中引入js代码-->
//1.if...else
var a=prompt("输入数字");
var b=prompt("输入另一个数字");
if(a>b){
alert(a+"大");
}else{
alert(b+"大");
}
//例子：接受用户输入的成绩，判断成绩所属的等级
//80~100（包括80，也包括100） 优秀
//60~80 （包括60，但不包括80） 中等
//0~60 （包括0，但不包括） 不及格
//其他值 输入有误
var c=prompt("输入成绩");
if(c>=80 && c<=100){
alert(c+"优秀");
console.log("优秀")
}else if(c>=60 && c<80){
alert(c+"中等");
console.log("中等")
}else if(c>=0 && c<60){
alert(c+"不及格");
console.log("不及格")
}else{
alert("输入有误");
console.log("输入有误")
}
</script>
</head>
<body>
</body>
</html>
7. js的数组
JS数组用于在单个的变量中存储多个值(其实就是一个容器)。
JS中的数组可以存储例如：数值、字符串、布尔值、undefined、null、对象、函数等
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>测试js的数组</title>
<script>
//1.定义数组
var a = new Array();
//js是弱类型的语言，对数据的类型要求并不高，可以存各种类型的数据，在java里面要用object[]
var c = new Array();
var b = new Array(1,1.1,true,null,"jack");
var c = [] ;
//js里的数组，长度可以随时改变
c = [1,1.1,true,null,"jack"];
console.log(c);//获取数组的数据
console.log(c.length);//获取数组的长度
console.log(c[2]);
//2.遍历数组
for(var i=0;i<c.length;i++){
console.log(i+"---------"+c[i]);//下标和根据下标获取数据
}
//3.增强for.....in
for(var i in c){//i是下标
console.log(i+"---------"+c[i]);
}
</script>
</head>
<body>
</body>
</html>
8.JS的函数
函数就是一个具有功能的代码块, 可以反复调用
函数就是包裹在花括号中的代码块，前面使用了关键词 function
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>测试js函数</title>
<script type="text/javascript">
//语法：function函数名（参数列表）{函数体}
//方式1：
//1.定义函数（无参）
function a(){
console.log(100);
}
//2.调用函数
a();
//定义函数（含参）
function a2(i,j){
console.log(i+j)
}
//2..调用函数
a2(1,99);
a2("jack",20)
//有返回值的函数
function a3(i){//有返回值的函数
return i;//通过return返回结果
}
var v =a3(9999);
console.log(v+"你好")
//方式2：var 函数名 =function(){}（无参）
var b = function(){
console.log(2000);
}
//2.调用函数
b();
//(含参)
var b2= function(i,j){
console.log(i+j)
}z
b2(900,1000);
var b3=function(b){
return "hello js";
}
var va =b3(10);
console.log(va)
//1.定义函数
function c(i){
console.log(i);
}
//2.调用函数
c(8000);
//方式2：var 函数名 =function(){}
var d = function(j){
console.log(j);
}
//2.调用函数
d(9000);
</script>
</head>
<body>
</body>
</html>
9.JS对象
利用function关键字声明对象，用new关键字创建对象。
1.内置对象
String/Array/Number/Math/JSON…
Window对象–代表浏览器中一个打开的窗口,了解一下即可，很多被UI替代
window.onload() 在浏览器加载完整个html后立即执行!
window.alert("text") 提示信息会话框
window.confirm("text") 确认会话框
window.prompt("text") 键盘输入会话框
window.event 事件对象
window.document 文档对象
Document对象–代表整个HTML文档，可用来访问页面中的所有元素
document.write() 动态向页面写入内容
document.getElementById(id) 获得指定id值的元素
document.getElementsByName(name) 获得指定Name值的元素
学会简单使用，后期被jQuery封装，在后期被Vue框架封装
2.自定义对象
(1)方式一：
声明对象：function Person(){}
创建对象：var p1 = new Person();
设置属性：p1.name = "张飞"; p1.age = 18;
设置方法：p1.run = function(){ alert(this.name+" : "+this.age); }
访问p1对象：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS对象</title>
<script>
var p = {
"name":"levin",//name也可以不用双引号，逗号自动补齐，能省略就省略，字符串要带双引号，数字可以不带
"age":56,
eat : function(){
console.log(1000);
}
}
console.log(p.name);
console.log(p);
p.eat();
var s ={
name : "Jack",
age : 78,
sex : "男",
study: function(){
console.log("学习")
},
eat:function(){
console.log("吃饭")
}
}
s.eat();
s.study();
console.log(s)
<!-- 2.自定义一个对象 -->
//声明对象
function Car(){}
//创建对象
var c = new Car();//new Car()--匿名对象
//动态绑定属性
c.color="red";
c.price=9.9;
console.log(c.color);
console.log(c.price);
//动态绑定函数
c.back = function(){
console.log("back……")
}
console.log(c);
c.back();
// <!-- 1. Window 对象 -->
// //当整个网页都加载完才会被执行的功能
// window.οnlοad=function(){
// console.log(typeof 100);
// }
// //弹出框
// window.alert(100);
// //确认框
// window.confirm("你说对吗");
// //输入框
// var a = prompt("请输入数字");
// console.log(typeof a);
// //string类型的数字转成number类型的数字
// var b = parseInt(a);
// console.log(typeof b);//number
// //window.document返回document对象，代表整个网页文件
// window.document
// window.document.getElementById();//
// window.document.getElementsByTagName();
// window,document.getElementsByClassName();
// // window.alert("text");
// // window.confirm("text");//确认框
// // window.prompt("text");//键盘输入会话框
// // window.event;
// // window.document;//文档对象 对象--代表整个html文档，Document
</script>
</head>
<body>
</body>
</html>
js的强大,它的属性可以边写边创建，非常灵活，而java不行，必须先定义。
注：前端–DOM学习
1704
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
