初识Javascript

最新推荐文章于 2024-09-25 18:15:20 发布

lph_quanzhan

最新推荐文章于 2024-09-25 18:15:20 发布

阅读量392

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/qq_16839925/article/details/117672749

版权

一. 初识JavaScript

1.1.javascript的历史

布兰登·艾奇

1995年，网景公司发明了一款navigator0.9版本的浏览，公认成熟，
缺点：不能交互，不能进行表单验证，网景公司找到布兰登艾奇，livescript的语言，
用于表单校验,交互. navigator2.0 版本上运用. 10天 —> javascript

1.2JavaScript基本介绍

HTML/CSS标记语言–描述类语言
HTML 决定网页结构和内容(决定看到什么)，相当于人的身体
CSS 决定网页呈现给用户的模样(决定好不好看)，相当于给人穿衣服、化妆
JS脚本语言–编程类语言
JavaScript一种在浏览器中解释运行的脚本语言，它的解释器被称为JavaScript引擎，为浏览器的一部分，
是广泛用于客户端的脚本语言，最早是在HTML网页上使用，用来给HTML（HTML5）网页增加动态功能。
应用场景：表单验证，百度智能搜索，京东网站动效

1.3 JS和H5的关系

h5：狭义：html的第5个版本
h5：web开发所有技术: html css js nodejs vue react
js:browser ：浏览器客户端
server: 服务器服务端

1.4JS的组成

js组成：ECMAScript（语法），DOM，BOM
DOM：document object model 文档对象模型
BOM：browser object model 浏览器对象模型
js本质：可以通过js代码操作文档，浏览器

1.5 JavaScript编写以及如何运行JS代码

JS 有3种书写位置，分别为行内、内嵌和外部。
下面展示一些 行内式。

 <button onclick='alert(1)'>按钮</button>

下面展示一些 外链式。外链式不要在script、标签中写代码，如果想写，再下面写

<script src="js/demo.js"></script>

下面展示一些 内嵌式。

<script>
          // 内嵌式：写在html结构的底部，为了能够获取页面中的内容才写到最下面的
  </script>

1.6 JavaScript注释

// 单行注释：代码的解释说明

    /*
     多行注释
    */

1.7 JavaScript输入输出语句

console.log('控制台输出1');

alert('弹框1')

页面输出

document.write('<p>helloworld</p>')
 document.write('<p>helloworld</p>')

提示框

var a = prompt('请输入...');
console.log(a);

二. 变量的概念

1.变量的概念：存储数据的容器

var x = 3.141592663773289299032;
console.log(x);

2.变量的定义：

2.1 先声明，后赋值

var x; //声明变量
 x = 10;//赋值
  console.log(x);

2.2 声明的同时赋值

var y = 20;
console.log(y);
console.log(z);
//注意：变量一定要先声明后赋值

2.3 可以同时声明多个变量，再进行赋值

var x,y,z; //声明了3个变量
 x = 10;
 y = 20;
 z = 30;

console.log(x);
console.log(y);
console.log(z);
console.log(x,y,z);

3. 变量的命名规则和规范

3.1 变量是由字母，数字，下划线，美元符号, 现在已经支持汉字了，不推荐

 var _abc$ = '张三';
console.log(_abc$);
var  班长 = '李张超';
console.log(班长);

3.2 不能以数字开头

var 1abc

3.3 不能是关键字和保留字

var for = 10;

3.4 区分大小写

var Var = 10;
console.log(Var);

3.5 规范：见名识意 eatApple number

 var num1 = 10;
 var num2 = 20;

3.6 驼峰命名法

如果多个单词组成，第一个单词全部小写，从第二个单词开始，首字母全部大写

var anBigApple = 90;

三. 数据类型

3.1 数据类型

数据类型：对数据的分类

数据类型的种类：
基本数据类型：字符串(string)，数字(number)，未定义(undefined)，空(null)，布尔(boolean)
复杂数据类型：对象(了解)

    姓名："赵丽影"  ---》字符串
    年龄：33       --->数字类型
    体重：未知     ----> undefined
    是否结婚: 否   ----> 布尔  true、false
    空：           --->null
    三围：{腰围，臀围，胸围} --->对象

检测数据类型：typeof关键字

1.1 字符串(string)

单引号或者双引号引起来 ‘张丽英’ ‘123’ “true” ‘null’

  var str1 =  '找钱';
  var str2 = 'true';
 var str3 = '我是你的"小苹果"'; //外单内双，外双内单
 var str4 = '我是你的"小苹果'; 
 var PI = 3.1415926
  // 数字和字符串是可以进行拼接的
  console.log('你会背诵PI，PI是'+PI+',我回答对了吗？');
  console.log(str1,str2,str3,str4);
 console.log(typeof str1);
  console.log(typeof(str1));

1.2 数值类型

	10,  20.1 , -10, 01010101, 0xabef001,054, NaN
	整数，小数，二进制（0和1），八进制(0-7)，十六进制(0-9 a-f)
	console.log(typeof 10);  
    console.log(typeof 10.1);
    console.log(typeof -10);
    console.log(01010101); //转为10进制
    console.log(0xabef001); //转为10进制
    console.log(054); //转为10进制
    console.log(typeof NaN);

    // NaN: number类型，但是不是数字

    // NaN的由来：在参与运算的过程中，出现了无法表示的数字的时候
    console.log('张'-0);

1.3 undefined 未定义

	var x ;
    console.log(x); // 只声明，未赋值

    // console.log(y); //报错

1.4 boolean 布尔

    console.log(true);// 是 真 对
    console.log(false);// 否 假 错

    console.log(typeof true);//boolean 布尔类型

1.5 null 空

	var a = null; // 后期a将重新赋值成对象
    console.log(typeof a); // object
    console.log(typeof 10);// number
    console.log(typeof typeof 10);//string

1.6 isNaN

用来判断一个变量是否为非数字的类型，返回 true 或者 false
isNaN(x):x是数字，返回false；x不是数字，返回true；

2.数据类型转换

2.1字符串转为数值类型

 1. Number()
 结论一：Number()可以将纯数字的字符串转为数值
 结论二：Number()可以将非纯数字的字符串转为NaN，也是数值类型
 结论三：Number()可以将true转换为1，将false转换为0.
 2. parseInt()
结论一： parseInt()可以将纯数字的字符串转为数值
结论二： parseInt()可以将数字开头的字符串转为数字
 结论三： parseInt()可以将非数字开头的字符串转为NaN，也是属于number类型
 结论四： parseInt()保留整数
3. parseFloat()
结论一： parseFloat()保留小数点后面的数字
 结论二： parseFloat()数字开头的字符串转为数字
4. 隐式转换  - * / % +

 console.log('--------------------Number()-------------------');

var str = '100';//字符串
console.log(typeof str);//  检测str的类型为string
 console.log(typeof Number(str));//通过Number()将str转换为数字，再进行检测
var str1 =  '张三';
console.log(typeof str1);//string
 console.log(typeof Number(str1));// number
 console.log(Number(str1));//NaN
 var str2 = '100px';
  console.log(typeof str2); //string
   console.log(Number(str2));//NaN 
   console.log(typeof Number(str2));//number

console.log('--------------------parseInt()-------------------');

var str = '200.1';
 console.log(typeof str); //string
 console.log(parseInt(str));//将字符串转为数值100
 console.log(typeof parseInt(str));//number
 var str1 = '100px';
 console.log(typeof str1); //string 
 console.log(parseInt(str1)); //100 将数字开头的字符串转为数字
 console.log(typeof parseInt(str1)); //number
 var str2 = 'zhangsan';
 console.log(typeof str2);//string
 console.log(parseInt(str2));//NaN

console.log('--------------------parseFloat()-------------------');

 var x = '10.1px';
 console.log(typeof x);
 console.log(parseInt(x));//10
 console.log(parseFloat(x));//10.1

结论：

Number()和parseInt()的不同点：
parseInt()可以将数字开头的字符串转为数字，Number()只能将纯数字转为数字类型
parseInt()和parseFloat()的不同点：
parseInt()将字符串转为整数
parseFloat()将字符串转为小数

console.log('--------------------');

    var x = '100'

    console.log(typeof x);//string
    // console.log(x-0); //
    console.log(x*1); //
    console.log(typeof (x*1)); //

2.2 数字转为字符串

num.toString()
String(num)

var num = 123;
console.log(typeof num);
console.log(typeof num.toString());
console.log(typeof String(num));

2.3 转为boolean类型:

Boolean()
!!
‘abc’ 10 true null undefined
‘’ 0 undefined null false

 var x = '';
 var y;// undefined
 var z = null;
 var a = 0;
 var b = 'zs'
 console.log(Boolean(x));
 console.log(Boolean(y));
console.log(Boolean(z));
console.log(Boolean(a));
console.log(Boolean(b));
console.log(!!x);
console.log(!!y);
console.log(!!z);
console.log(!!a);
console.log(!!b);

四. 运算符

1. 算术运算符：+ - * / %

+: 拼接（字符串和字符串，字符串和数字相加）
+: 求和

var x = 2;
var y = 21;
var z = x % y;
console.log(z);//2
// var a = 'js好难呀';
// var b = 100;
// var c = 200;
// console.log(a+b+c);// js好难呀100200
// // 'js好难呀100' + 200  
// console.log(b+c+a);//300js好难呀

2.赋值运算符

var a = 10; //将10赋值给10
a  = 20; //将a重新赋值为20
a += 20;  //等价于 a = a+20  将左边a和右边20求和，再重新赋值给a
a -= 10; // a = a-10
a *= 10; // a = a*10=100
a+=3;  //a = a+3=13
a-=5;  // a = a-5=8
a*=20; // a = 160
console.log(a);

3 关系运算符: > < >= <= == != === !==

关系运算符比较出的结果是布尔类型值

console.log(3>4); //false
console.log(3<4); //true
console.log(10=='10'); //只比较值，不比较类型
console.log(10==='10');//既比较值，也比较类型
console.log(3!=4);

4.逻辑运算符：&& || !

// &&: 与   
// console.log(3>5>4);// 错误
   console.log(3>5&&5>4); // 一假即假  false
   console.log(8>5&&5>4); // 一假即假   true
   console.log(9==5&&5>4); // 一假即假   false
   console.log(9==5&&5==4); // 一假即假   false
   // ||: 或    一真即真(整个表达式有一个真，结果就是真)
   console.log(4>2||3>6); //true
   console.log(5==3||false||false); //false
    // ! : 非         取反
    console.log('----------');
    console.log(!true); //false
    console.log(!false); //true
    // console.log(!(8>9&&9==0||9==0));//true
    var a = 10;
    var b = '10';
    console.log(!!(9>=9&&8==8||a==b)); //true

5.递增和递减运算符

	//    a++；在a的基础上加1
    //    ++a: 在a的基础上加1
    // 区别：单独使用时，都是自身加1
    //       在参与输出，赋值，等操作时，a++和++a是有区别的
    //       1. a++  先输出a，再自身加1
    //       2. ++a   先加1，再输出
    //    var a = 10;
    // //    ++a;单独使用
    //    console.log(++a); // 11 
    //    console.log(a); // 11
    // var a  = 10;
    // // var b = ++a;
    // var b = a++;
    // console.log(b);
    // var x = 10;
    // var b = x++;//b = 10
    // console.log(b++);//10
    // console.log(x);//11
    // var x = 10;
    // var y = x++ + ++x;
    // // y = 10 + 12
    // console.log(y);//22
    var x = 10;
    var y = ++x;
    var c = ++y;
    console.log(c);//12