JavaScript
目标
学习前端脚本语言javascript的基本概念、页面引入方式、获取页面元素及操作元素属性的技巧，学习函数的基本定义方法和使用方法。
前段三大块
HTML：页面结构
css ：也米娜的表现形式
JavaScript：页面的动态效果和一些简单的特效
什么是JavaScript？
JavaScript是运行在浏览器端的脚步语言，JavaScript主要解决的是前端与用户交互的问题，包括使用交互与数据交互。JavaScript是浏览器解释执行的
1. JavaScript 是一种客户端脚本语言（脚本语言是一种轻量级的编程语言）。
2. JavaScript 通常被直接嵌入 HTML 页面。
3. JavaScript 是一种解释性语言（就是说，代码执行不进行预编译）。
特点
1. 弱类型
2. 基于对象。(因为面向对象需要具有封装、继承、多态的特征)
3. 安全
4. 兼容性
JavaScript嵌入页面的方式
- 页面script标签嵌入
<script type="text/javascript">
var a = '你好！';
alert(a);
</script><input type="button" name="" onclick="alert('ok！');">
- 外部引入
<script type="text/javascript" src="js/index.js"></script>
- 行间事件（主要用于事件）
<input type="button" name="" onclick="alert('ok！');">
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>js的基本使用</title>
<style>
div{
width: 200px;
height: 200px;
background: #000;
}
</style>
</head>
<body>
<!--嵌入式-->
<script>
// 单行注释
/*
多行注释
*/
// 弹框
//alert('js试用成功');
</script>
<!--外链式 通过script标签的src属性来引入外部js文件
注意:如果使用script标签外部引入js文件,
那么此标签当中就不能再写js程序,它会不执行
-->
<script src="./1.js">
// alert('ok'); 不会执行
</script>
<!--行间样式-->
<!--
on 当..
click 单击
-->
<div onclick="alert('行间样式生效了')"></div>
<!-- 另外的方法 -->
<a href="javascript:alert('我是a')">点我</a>
<!-- 上面的方法会暴露代码 改进↓ -->
<a href="javascript:void(0)" onclick="alert('我也是a')">再来点我呀</a>
</body>
</html>
javascript语句与注释
-
一条javascript语句应该以“;”结尾
-
javascript注释
// 单行注释
var a = 123;
/*
多行注释
1、...
2、...
*/
JavaScript变量
JavaScript 是一种弱类型语言，javascript的变量类型由它的值来决定。
定义变量需要用关键字 'var',
不使用var关键字定义全局变量在严格模式下将会执行错误 "use strict";
var a = 123;
var b = 'asd';
//同时定义多个变量可以用","隔开，公用一个‘var’关键字
var c = 45,d='qwe',f='68';
变量，函数，属性命名规范
字母数字下划线($)
首字母不能为数字
严格区分大小写
不能使用关键字
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>变量</title>
</head>
<body>
<script>
// 注意:在js当中声明变量的时候尽量用关键字var来声明
//声明严格模式
//"use strict";
//声明一个变量
//var test=1;
// js当中同事声明多个变量 中间用,号隔开
var a=1,b=2,c=3;
test=2;
// alert(b);
// 变量的,函数的命名,属性值命名规范
// 由数字字母下划线$组成
// 不能以数字开头
// 区分大小写
// 不能使用系统关键字
var a=1;
var A=2;
alert(a);
</script>
</body>
</html>
JavaScript 基本数据类型
typeof函数获取一个变量的类型：
* boolean - 如果变量是 Boolean 类型的
* number - 如果变量是 Number 类型的 (整数、浮点数)
* string - 如果变量是 String 类型的 （采用""、 ''）
* object - 如果变量是一种引用类型或 Null 类型的
如：new Array()/ new String()...
* function -- 函数类型
* undefined - 如果变量是 Undefined 类型的
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>js基本数据类型</title>
</head>
<body>
<script>
// 布尔类型 只有两个值 true 和 false
// var B=true; //python当中 布尔值首字母大写True js当中全是小写
// var B=false;
// 将结果打印到控制台
//console.log(typeof(B));
//数值类型 包含整数 浮点数 二进制数 八进制数 十六进制数 NaN;
// var num=12;
// var num=12.1;
// 二进制数是以ob开头
//var num=0b10;
// 十六进制 以0x开头 0-9 a-f
// var num=0xa;
//八进制数 以0开头
//var num= 013;
//NaN not a number 不是数
var num= NaN;
console.log(num,typeof(num));
// 字符串类型 只要是用单引号或者双引号引起来的字符 都是字符串类型
// 注意:单双引号可以相互嵌套使用
// var str='123';
// var str="true";
var str = 'I love "LL"';
console.log(str,typeof(str));
// 对象类型 对象 数组 null;
// var obj={name:'zs',sex:18};
// var list=[1,2,3,4]; //数组
var obj=null;
console.log(obj,typeof(obj));
// 函数数据类型 function
var Func=function(){
console.log('这是一个函数')
}
console.log(Func,typeof(Func));
// undefined 未定义 当我们顶一个变量不给值的时候 他的类型就是undefined类型
var un
console.log(un,typeof(un));
</script>
</body>
</html>
js数据类型转换
使用：Number（）、parseInt() 和parseFloat（） 做类型转换
Number()强转一个数值(包含整数和浮点数)。
*parseInt()强转整数，
*parseFloat（）强转浮点数
函数isNaN()检测参数是否不是一个数字。
isNaN() is not a number
可用的 3 种强制类型转换如下：
Boolean(value) - 把给定的值转换成 Boolean 型；
Number(value) - 把给定的值转换成数字（可以是整数或浮点数）；
String(value) - 把给定的值转换成字符串；
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>数据类型转换</title>
</head>
<body>
<script>
/* 数值类型转换 Number() parseInt() 和parseFloat（）
注意:当字符串当中包含任意一个非数值表示的字符时
Number() 返回NaN
parseInt(),parseFloat() 从头往后读,如果碰到非数值表示的字符,后面的内容就舍去
当字符串一开始就是非数值表示的字符 ,都返回NaN;
*/
// var str='123';
// var str='1a23abc';
// var str="a12e3";
// var str='1.a234abc';
// console.log(str,typeof(str));
// var res=Number(str);
// var res1=parseInt(str);
// var res2=parseFloat(str);
// console.log('Number()',res,typeof(res));
// console.log('parseInt()',res1,typeof(res1));
// console.log('ParseFloat()',res2,typeof(res2));
// isNaN() 检测一个数据是否是 NaN 如果是数 返回false 如果不是数就返回true
var num='1a';
console.log(num,isNaN(num));
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>布尔值数据类型转换</title>
</head>
<body>
<script>
// Boolean()转换成布尔值为false的情况
// 字符串转布尔值 为false 空字符串
var str='';
console.log(Boolean(str));
// 数值类型转布尔值 为false 0,0.0,NaN
// var num=1;
var num=NaN;
console.log(Boolean(num));
// 对象转布尔 为false null;
//var obj={name:'ll',age:24};
//var obj={};
var obj=null;
console.log(Boolean(obj));
</script>
</body>
</html>
js运算符
算术运算符
+ - * / ++ --
字符串连接
+
赋值运算
= += -= %=
比较运算符
< > >= <= == === != !==
逻辑运算符
&& || !
位运算
^ & | << >>
其它运算符
? : 三元运算符
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>运算符</title>
</head>
<body>
<script>
// ++ 自增一 每次只+1 结果赋值给自己
var a=1;
a++;
//a+=1;
console.log(a);
// -- 自减一 每次只在原来的基础上减一 结果赋值给自己
//a--;
a-=1;
console.log(a)
// + 字符串连接 当两边的值都为数值类型时做算数运算
// 当两边的值有一个为字符串的时候就做字符串连接
//var str='1'+1+2; //112
var str=1+1+'2';//22
console.log(str);
// === 全等 在比较时 两边除了值相等 类型也必须相同
//var B=1==1; //true
//var B = 1=='1';// true 系统帮我们自己做了数据类型转换
//var B = 1===1;//true
var B = 1==='1';//false
console.log(B)
// 三元运算符 判断条件 ? 真区间 : 假区间
var a= 1<0 ? '2':'3';
console.log(a);
</script>
</body>
</html>
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
