1,JavaScript 的介绍
- javaScript 是一种 web 前端的描述语言, 也是一种基于对象 (object) 和事件驱动 (Event Driven) 的, 安全性好的脚本语言.
- 它运行在客户端从而减轻服务器的负担.
- 1.javaScript 的特点:
- javaScript 主要用来向 html 页面中添加交互行为
- javaScript 是一种脚本语言, 语法和 c 语言系列语言的语法类似, 属弱语言类型.
- javaScript 一般用来编写客户端脚本, 如 node.js 例外.
- javaScript 是一种解释型语言, 边执行边解释无需另外编译.
- 2.javaScript 的用途:
- 解决页面交互和数据交互, 最终目的是丰富客户端效果以及数据的有效传递.
- 1. 实现页面交互, 提升用户体验实现页面特效. 即 js 操作 html 的 dom 节构或操作样式.
- 2. 客户端表单验证即在数据送达服务端之前进行用户提交信息即时有效地验证, 减轻服务器压力. 即数据交互.
- 3.javaScript 和 ECMAScript 的关系:
- ECMAScript 是欧洲计算机制造商协会, 基于美国网景通讯公司的 Netscape 发明的 javaScript 和
- Microsoft 公司随后模仿 javaScript 推出 JScript 脚本语言制定了 ECMAScript 标准.
- 4.javaScript 的组成:
- ECMAScript,DOM,BOM
2, 三种引入方式
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="utf-8">
- <title></title>
- <!-- 外链式 -->
- <script src="./1.js"></script>
- </head>
- <body>
- <!-- 行内式引入 -->
- <p id='p1' onclick="clickhandler()">123</p>
- </body>
- <!-- 内部式 -->
- 建议 引入的时候要在 body 之后, 我们要等待所有的 dom 元素加载完成之后再去执行相应的 js 操作
- <script type="text/javascript">
- document.write('<span class="span1">233</span>')
- console.log('星儿今天很漂亮!')
- </script>
- </html>
3, 变量
1. 变量与常量
变量: 即在程序运行过程中它的值是允许改变的量.
常量: 即在程序运行过程中它的值是不允许改变的量
2. 变量的声明和定义
- #1. 先声明后定义
- var dog;
- // alert(dog) //undefined 未定义
- // 定义
- dog = '小黄';
- #2. 声明立刻定义
- var dog_2 = '小红';
- console.log(dog_2); // 小红
3. 变量名规范
- 1. 严格区分大小写
- 2. 命名时名称可以出现字母, 数字, 下划线,$ , 但是不能数字开头, 也不能纯数字 , 不能包含关键字和保留字.
- 关键字: var number
- 除了关键字 top name 也尽量不使用.
- 3. 推荐驼峰命名法: 有多个有意义的单词组成名称的时候, 第一个单词的首字母小写, 其余的单词首字母写
- 4. 匈牙利命名: 就是根据数据类型单词的的首字符作为前缀
4,javascript 中的数据类型
数据类型包括: 基本数据类型和引用数据类型
- # 5 种基本数据类型
- 基本数据类型指的是简单的数据段
- 1.number
- var a = 123;
- 2.string
- var str = '123'
- 3.boolean
- var b1 = false;
- 4.null
- var c1 = null;// 空对象. object
- 5.undefined
- var d1;
- // 表示变量未定义
- #5 种引用数据类型
- 引用数据类型指的是有多个值构成的对象
- Function
- Object
- Arrray
- String
- Date
- 查看数据类型: console.log(typeof b1);
5, 数据类型的转换
- <script type="text/javascript">
- // 1. 将数字类型 转换成字符串类型
- var n1 = 123;
- var n2 = '123';
- var n3 = n1+n2;
- // 隐式转换
- console.log(typeof n3);
- // 强制类型转换 String() toString()
- var str1 = String(n1);
- console.log(typeof str1);
- var num = 234;
- console.log(num.toString())
- // 2. 将字符串类型 转换成数字类型
- var stringNum = '789.123wadjhkd';
- var num2 = Number(stringNum);
- console.log(num2)
- // parseInt()可以解析一个字符串 并且返回一个整数
- console.log(parseInt(stringNum))
- console.log(parseFloat(stringNum));
- // 3. 在我们 js 中所有的数据类型 都被转化为 boolean 类型
- var b1 = '123';
- var b2 = 0;
- var b3 = -123
- var b4 = Infinity; //
- var b5 = NaN;
- var b6; //undefined
- var b7 = null;
- // 非 0 真 1
- console.log(Boolean(b7))
- </script>
6,js 的运算符
- , 算术运算符(+ - */ % ++ -- )
- , 比较运算符(>>= <<= != == === !==)
- , 逻辑运算符(&& || !)
- , 赋值运算符(= += -= *= /=)
- , 字符串运算符(+ 连接, 两边操作数有一个或两个是字符串就做连接运算)
- <script type="text/javascript">
- // 1. 赋值运算符
- var money = prompt('请输入金额....');
- var saveMoney = money * (1+0.02);
- console.log(saveMoney)
- // 2. 算数运算 + - */ %
- var a = 10;
- var b = 9;
- var sum = a + b;
- var min = a - b;
- var div = a /b;
- var lef = a % b;
- // 3. 复合运算符 a++ ++a
- var c = 7,d = 8;
- // d = c + d;
- d+=c;
- console.log(d);
- d++; //d = d+1
- console.log(d);
- // 自增 自减
- // d++ : 先赋值后 ++ 先将 d 的值赋值给 c1 然后再让 d 加上 1 对 d 赋值
- var c1 = d++;
- console.log(c1); //8
- console.log(d); //9
- // ++d: 先相加后赋值
- var c2 = ++d;
- console.log(c2); //10
- // 3. 比较运算符
- //> ,<,>=, <=,== ,===
- console.log(5>6);
- // 隐式转换 == 比较的是值的大小.=== 是类型和值都进行比较
- console.log("5" === 5);
- // 4. 逻辑运算符 && and || or
- console.log(false && false); // && 都真为真 只要有一个是假就为假
- console.log(false || false); // || 有真就真. 或者的意思
- </script>
- 特殊: 字符串拼接
- // 不能对字符串进行 + 运算 只能拼接
- var a1 = '1';
- var a2 = '2';
- console.log(a1+a2); //12
- console.log(typeof(a1*a2));
6, 流程控制
- 1.if 语句:
- if (true) {
- // 执行操作
- }else if(true){
- // 满足条件执行
- }else if(true){
- // 满足条件执行
- }else{
- // 满足条件执行
- }
- 注意: 浏览器解析代码的顺序 是从上往下执行, 从左往右
- 2.switch:
- var gameScore = 'good';
- switch(gameScore){
- case 'best':
- console.log('best');
- break;
- case 'good':
- console.log('good');
- break;
- case 'better':
- console.log('better');
- break;
- default:
- console.log('default')
- }
- 3.while:
- 循环三步走:
- 1. 初始化循环变量
- 2. 判断循环条件
- 3. 更新循环变量
- var j=1;
- while(j<=100){
- if(j%3===0){
- console.log(j)
- }
- j++;
- }
- 4.do_while:
- 1. 初始化循环变量 2. 判断循环条件 3. 更新循环变量
- // 不管有没有满足 while 中的条件 do 里面的代码都会走一次
- var i = 3;
- do{
- console.log(i);
- i++;
- }while(i<=5);
- 5.for:
- 1. 初始化 2. 循环条件 3. 更新循环变量
- for(var i = 0; i <100; i++){
- if(i%2 === 0){
- console.log(i)
- }
- }
- for(var i=1;i<=3;i++){
- for(var j=1;j<=6;j++){
- document.write('*')
- }
- document.write('<br>')
- }
- # 打印三角形 1
- *
- * *
- * * *
- * * * *
- * * * * *
- * * * * * *
- for(var i=1;i<=6;i++){
- for(var j=1;j<=i;j++){
- document.write('*')
- }
- document.write('<br>')
- }
- # 打印三角形 2
- * 2*1-1
- *** 2*2-1
- ***** 2*3-1
- ******* 2*4-1
- ********* 2*5-1
- *********** 2*6-1
- for(var m=1;m<=6;m++){
- for(var n1=m;n1<6;n1++){
- document.write(' ')
- }
- for(var n2=1;n2<=2*m-1;n2++){
- document.write('*')
- }
- document.write('<br>')
- }
- # 打印三角形 3
- * 2*1-1
- *** 2*2-1
- ***** 2*3-1
- ******* 2*4-1
- ********* 2*5-1
- *********** 2*6-1
- *********
- *******
- *****
- ***
- *
- for(var a=1;a<=11;a++){
- if(a<=6) {
- for (var a1 = a; a1 <6; a1++) {
- document.write(' ')
- }
- }else{
- for(var a2=7;a2<=a; a2++){
- document.write(' ')
- }
- }
- if(a<=6){
- for(var a3=1;a3<=2*a-1;a3++){
- document.write('*')
- }
- }else{
- for(var a4=a*2-1;a4<22;a4++){
- document.write('*')
- }
- }
- document.write('<br>')
- }
7. 内置对象
数组 Array, 字符串 String, 日期 Date,Math 内置对象
- 内置对象就是 ECMAScript 提供出来的一些对象, 我们知道对象都是有相应的属性和方法
- http://www.cnblogs.com/venicid/p/9128094.html
来源: http://www.bubuko.com/infodetail-2656967.html