JavaScript学习笔记（一）
在线视频课程地址：http://edu.51cto.com/course/15019.html
1、Javascript简介
1.1、为什么要学习Javascript
1、可以实现网页的动态效果
2、js可以做验证操作，是为了减轻服务器端的压力
3、js可以提升用户的体验
4、百度地图
5、现在js可以充当服务器，比如现在node.js技术，还可以通过js来写游戏
1.2、javascript的历史介绍
布兰登•艾奇（Brendan Eich），1995年在网景公司，发明的JavaScript。一开始JavaScript叫做LiveScript，但是由于当时Java这个语言特别火，所以为了能火起来索性就改名JavaScript。同时期还有其他的网页语言，比如VBScript、JScript等等，但是后来都被JavaScript打败，所以现在的浏览器中，只运行一种脚本语言就是JavaScript。
1.3、JavaScript与ECMAScript的关系
ECMAScript是一种由Ecma国际前身为欧洲计算机制造商协会,英文名称是European Computer Manufacturers Association，制定的标准。
JavaScript是由公司开发而成的，公司开发而成的一定是有一些问题，不便于其他的公司拓展和使用。所以欧洲的这个ECMA的组织，牵头制定JavaScript的标准，取名为ECMAScript。
简单来说ECMAScript不是一门语言，而是一个标准。符合这个标准的比较常见的有：JavaScript、Action Script（Flash中用的语言）。
1.4、javascript语言
JavaScript一门脚本语言，是一种动态类型、弱类型、基于原型的语言，内置支持类型。它的解释器被称为JavaScript引擎，为浏览器的一部分，广泛用于客户端的脚本语言，最早是在HTML（标准通用标记语言下的一个应用）网页上使用，用来给HTML网页增加动态功能。
2、编写javascript的方式
2.1、行内js
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>第一个js程序</title>
</head>
<body>
<input type="button" onclick="javascript:alert('这是行内js')" value="测试">
</body>
</html>
html关注的页面的骨架
css关注的页面的美观
js关注的是页面的行为、动作
2.2、内部js
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>第一个js程序</title>
<script type="text/javascript">
alert("helloworld");
alert("挂机");
</script>
</head>
<body>
<input type="button" value="测试">
</body>
</html>
2.3、外部js
首先定义个js文件(index.js)
alert("helloworld");
alert("挂机");
然后在html页面中进行引用
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>第一个js程序</title> <!--引入外部js文件--> <script type="text/javascript" src="js/index.js"></script> <script type="text/javascript"> //继续在这里去写 </script> </head> <body> <input type="button" value="测试"> </body> </html>
3、js的基本语法
3.1、定义变量
在js中，定义变量统一采用var关键字进行声明，它后面赋予值，决定了这个变量的数据类型
<script type="text/javascript"> // 定义变量 var num = 10; console.log(num) var str = 'helloworld'; console.log(str); </script>
3.2、js中的数据类型
在js中，我们可以通过typeof关键字来检测一个变量的数据类型
<script type="text/javascript"> var num=10; console.log(typeof num); num="helloworld"; console.log(typeof num); num=false; console.log(typeof num); var flag; console.log(typeof flag); num = new Date(); console.log(num); console.log(typeof num); num=null; console.log(typeof num); num=new Array(); console.log(num); </script>
运行结果图
总结一下：typeof关键字检测类型：
number：表示数值型（整型和浮点型）
string：字符串，在js中我们可以通过“”或者''来定义一个字符串
boolean：布尔型，true,false
undefined:变量定义，但是未赋值
object：对象类型 (null值它的typeof也是object)
function：它表示函数类型
3.3、js中的注释
注释分为2种，和java基本上一样
单行注释：// 注释的内容
多行注释：/ 注释的内容/
//定义一个函数
var myFun=function(){
/*
* 这个表示多行注释
* */
}
3.4、运算符
算术运算符：+ - * / %
关系运算符： == > >= < <=
逻辑运算符：&& || !
赋值运算符: =
3.5、选择结构
3.5.1、基本if
var num = 10 ;
if(num>=10) {
alert('num的值大于10');
}
注意在js中，if后面的表达式可以是很多类型
var num=0;
if(num) {
console.log("************")
}else{
console.log("==========")
}
总结：if表达式如果变量为0，相当于一个false情况
var flag ;
if(flag) {
console.log("***********")
}else{
console.log("==========")
}
总结2：if表达式如果变量为undefined，相当于一个false情况
var flag2 =null;
if(flag2) {
console.log("***********")
}else{
console.log("==========")
}
总结3：if表达式如果变量 的值为null，相当于一个false情况
3.5.2、if...else结构
if(num) {
console.log("************")
}else{
console.log("==========")
}
3.5.3、多重if结构
var score = 91 ;
if(score>90) {
console.log("成绩大于90分")
}else if(score>80) {
console.log("成绩大于80分")
}else{
console.log("其他")
}
3.5.4、switch
var num = 1 ;
switch (num){
case 1:
alert('星期一');
break;
case 2:
alert('星期二');
break;
default:
alert('其他');
}
3.6、循环结构
3.6.1、while循环
var i = 1 ;
while (i<=10) {
console.log(i);
i = i+1;
}
3.6.2、do...while循环
var i =1 ;
do{
console.log(i);
i++;
}while(i<=10)
3.6.3、for循环
var i ;
for(i=1;i<=10;i++) {
console.log(i);
}
3.6.4、break，continue
break：是跳出循环结构
continue：是跳出本次循环，执行循环的下一次
3.7、相关语句
alert：弹出对话框
prompt：提示框
如果选择确定：typeof-->string类型
如果选择取消：typeof-->object
document.write():向页面写一段文本
<script type="text/javascript">
//alert("hello");
var str = prompt("请输入一个数字","5");
console.log(typeof str);
//将字符串转换成整数
//parseInt("字符串")
//字符串 52a -->52
//字符串 a123 -->NaN(not a number)
//将字符串转成小数 parseFloat(),用法和parseInt一样
var num = parseInt(str);
alert(typeof num);
document.write(num);
</script>
4、函数初步介绍
函数就类似于java中的方法，回顾一下java中方法定义
访问修饰符 返回值类型 方法名(参数列表) {
//方法体
return 返回值;
}
在js中函数是这样定义的
function functionName(形参1,...){
//函数的主题
[return value;]
}
4.1、函数调用
手动调用
<script type="text/javascript">
//无参函数
function myFun(){
for(var i = 0 ;i<10;i++) {
document.write(i+"<br/>")
}
}
//调用函数
myFun();
myFun();
myFun();
</script>
一般情况下，函数要结合事件一起使用
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript">
//无参函数
function myFun(){
for(var i = 0 ;i<5;i++) {
document.write("helloworld"+"<br/>")
}
}
</script>
</head>
<body>
<input type="button" onclick="myFun()" value = "循环输出5次hello"/>
</body>
</html>
案例：编写一个函数，要求用户输入2个数字，实现2个数字的相加
<script type="text/javascript">
//无参函数
function getSum(){
var str1 = prompt("请输入第一个数字",5);
var num1 = parseInt(str1);
if(isNaN(num1)) {
alert("对不起，你的输入的数字不合法！！")
return ;
}
var str2 = prompt("请输入第二个数字",10);
var num2 = parseInt(str2);
if(isNaN(num2)) {
alert("对不起，你的输入的数字不合法！！")
return;
}
var result = num1+num2 ;
document.write("结果为："+result);
}
</script>
isNaN:is not a number? --->非数字的时候返回true
4.2、js中的函数分类
系统函数：alert,prompt,document.write....
自定义函数：自己编写函数
4.3、变量的作用域
<script type="text/javascript">
//全局
var num =10 ;
function myFun1(){
//局部的变量
//如果在函数中，变量未采用var关键字进行声明，那么这个变量为全局变量
num2 =20 ;
console.log(num);
}
function myFun2(){
//在函数2中不能访问到函数1的变量
console.log(num);
console.log(num2)
}
myFun1();
myFun2();
</script>
总结一下：
定义在函数的外的变量为全局变量，定义在函数内的变量为局部变量，但是如果这个变量未采用var声明，则提升了全局变量
4.4、函数的编写方式(了解一下)
<script type="text/javascript">
function myFun(){
alert("myFun");
}
var myFun2=function(){
alert("myFun2");
}
myFun();
myFun2();
//匿名函数
(function(){
alert("hehe");
})();
</script>
练习：输出99乘法表
<script type="text/javascript">
function createTable(){
document.write("<table border='1' width='100%'>");
//外层控制一共输出多少行
for(var i =1 ;i<=9;i++) {
document.write("<tr>");
for(var j = 1 ;j<=i;j++) {
document.write("<td>"+i+"*"+j+"="+(i*j)+"</td>");
}
document.write("</tr>")
}
document.write("</table>");
}
createTable();
</script>
- Javascript学习笔记-----条件语句、消息框、循环语句
- 《JavaScript 语言精粹》 学习笔记 —— 第八章 方法
- javascript学习笔记
- JavaScript学习笔记2
- 韩顺平 javascript教学视频_学习笔记22_js事件驱动机制_js事件分类_js访问css技术
- [学习笔记]JavaScript进阶
- 【javascript】ES6 特性 菜鸟学习笔记
- javaScript学习笔记_001
- 【学习笔记javascript设计模式与开发实践（代理模式）----6】
- javascript学习笔记------概念相关
- JavaScript DOM编程 学习笔记-获取元素节点
- 韩顺平_轻松搞定网页设计(html+css+javascript)_第31讲_this关键字详解_学习笔记_源代码图解_PPT文档整理
- 《JavaScript高级程序设计 第三版》学习笔记 （六） 函数与闭包详解
- <javascript学习笔记> javascript 获得url里参数。
- javascript学习笔记之（一）
- JavaScript学习笔记之JS基础入门
- javascript学习笔记—函数的使用技巧
- JavaScript学习笔记（五）——厚积薄发之准备2
- JavaScript学习笔记（七）——厚积薄发之小成果
- JavaScript学习笔记（十）——学习心得与经验小结