js的引入,变量,运算符

为什么要学习javaScript

网页三部分：

HTML：控制网页的 结构

CSS：控制网页的 样式

JavaScript：控制网页的行为

不同于HTML和css，JavaScript是一门编程语言，因此要比HTML和css复杂一些，学习的时间也更长。

JavaScript的组成(掌握)

js是有三个部分组成的 ECMAScript、BOM、DOM

图片.png

• ECMAScript - JavaScript的核心，描述了语言的基本语法和数据类型，ECMAScript是一套标准，定义了一种语言的标准,与具体实现无关
• DOM：一套操作网页元素的API(方法)
• BOM：一套操作浏览器功能的API(方法)

js使用方式

<script src="js文件路径"></script>

这是一对html标签，原则上可以放在html页面的任意位置,src后链接的是JavaScript文件，文件的扩展名为.js，如index.js,在里面直接写js文件即可.

<script type="text/javascript" src="/admin/lib/layer/2.4/layer.js"> </script>
注意:一般是将js代码放到body最后,多以当执行到js代码时,html页面都已载入完成,避免找不到元素而报错.

外联方式
第一步: 新建demo.js

图片.png

第二步:在html页面中引入

图片.png
注意:此时的js的html文件在同一个目录下面
总结:外联方式在写项目的时候,使用.

内联方式
直接减js写在html中,要使用script标签

       <script type="text/javascript">
            //在script标签内写js脚本
        </script>
        
        简写:
        <script>
            //在script标签内写js脚本
        </script>  


        错误的写法：
        <script src="js文件路径">
            //在script标签内写js脚本
        </script>

注意:js代码要写在script标签之内.

行内写法:
直接在html标签中写js,只有绑定事件才这么写

 <a href="#" onclick="var a=1;alert(a)"> 点我</a>

js的输出(记忆)

例1:在页面上输出'I have a dream'

document.write('I have a dream');

例2:输出'I have a dream'切加粗

  // 文本加粗输出
  document.write('<strong> I have a dream</strong>');

例3:控制台中的输出

console.log('I have a dream');
打开浏览器,按住F12键,即可召唤出控制台,后面js的效果调试都在这里

例4:以弹出框的形式输出内容

alert(123);

例5: confirm 确认框

//confirm弹出一个确定框
confirm("我帅吗？");

例6: prompt : 输入框

//prompt:弹出一个输入框，可以输入值
prompt("请输入你的真是年龄");

javaScript的注释(掌握)

行注释 //

表识当前行的代码不注释,或者解释下一行代码的意思

块注释 /代码块/

多用来多行代码注释不执行,或者解释某一块代码的功能.

• var name;  // 声明一个变量 name
  name = '乘风破浪'; // 一个等号 是赋值,,后面的值赋值给前面的
  
  

• 同时声明+赋值

      var name = '峰哥好帅';
      var str  = "帅的飞起来";
      console.log(name,str);
  
  

  ​

• 同时声明多个变量并赋值

  var age = 10,name= 'zs' 
  // 相当于
  var age = 10;
  var name = 'zs';
   console.log(name,age);
  

  ​

• 不声明变量，直接赋值(不会报错，但是不推荐)

  //  没有用 var 修饰的不管代码在哪里都是全局的
  // 不推荐 
  height=100;
  console.log(height);
  

  ​

• 不声明变量，也不赋值变量，直接使用（会报错）

   //   weight is not defined 要知道是没有定义,,估计是变量名写错了
   console.log(heightt);
  

结论：

• 变量需要声明之后，才能使用，养成一个良好的编程习惯。

• javascript代码一旦报错了，后面的代码就不再执行了。

• 规则 : ( 必须遵守的,不遵守会报错 )

  • 由字母、数字、下划线、$符号组成 ;

  • 不能以数字开头

  • 区分大小写

  • 不能是关键字和保留字 (不用死记 , 慢慢就见多了)

      //关键字：对于js来说有特殊意义的一些单词
      //保留字：js保留了一些单词，这些单词现在不用，但是以后要用。
    

• 规范 : (建议遵守的 不遵守不会报错)

  • 变量名必须有意义

  • 遵守驼峰命名法。 首字母小写,后面单词的首字母需要大写!

    myName, userPassword

关键字(了解)

以下这些关键字用于执行特定操作等。按照规则，关键字也是语言保留的，不能用做标识符

break	do	instanceof	typeof
case	else	new	var
catch	finally	return	void
continue	for	switch	while
debugger*	function	this	with
default	if	throw	delete
in	try

保留字(了解)

未来可能做为关键字的存在

abstract	enum	int	short
boolean	export	interface	static
byte	extends	long	super
char	final	native	synchronized
class	float	package	throws
const	goto	private	transient
debugger	implements	protected	volatile
double	import	public

例1:以数字开头的变量

var a = 'I have a dream!';
console.log(a);
var 2a = 'Hello';
console.log(2a);

例2:以关键字开始的变量

<script>
var do = '测试';
console.log(do);
</script>

• 规则 : ( 必须遵守的,不遵守会报错 )

  • 由字母、数字、下划线、$符号组成 ;

  • 不能以数字开头

  • 区分大小写

  • 不能是关键字和保留字 (不用死记 , 慢慢就见多了)

      //关键字：对于js来说有特殊意义的一些单词
      //保留字：js保留了一些单词，这些单词现在不用，但是以后要用。
    

• 规范 : (建议遵守的 不遵守不会报错)

  • 变量名必须有意义

  • 遵守驼峰命名法。 首字母小写,后面单词的首字母需要大写!

    myName, userPassword

关键字(了解)

以下这些关键字用于执行特定操作等。按照规则，关键字也是语言保留的，不能用做标识符

break	do	instanceof	typeof
case	else	new	var
catch	finally	return	void
continue	for	switch	while
debugger*	function	this	with
default	if	throw	delete
in	try

保留字(了解)

未来可能做为关键字的存在

abstract	enum	int	short
boolean	export	interface	static
byte	extends	long	super
char	final	native	synchronized
class	float	package	throws
const	goto	private	transient
debugger	implements	protected	volatile
double	import	public

例1:以数字开头的变量

var a = 'I have a dream!';
console.log(a);
var 2a = 'Hello';
console.log(2a);

例2:以关键字开始的变量

<script>
var do = '测试';
console.log(do);
</script>

类型之间的转换

为什么要进行类型转换???

服务器拿回来的数据,有可能是字符串,比如age='18', 
 var age = '18';
 console.log(age+1);

查看变量的类型

typeof关键字可以查看数据的类型

var num = 11;
console.log(typeof num);
num = "abc";
console.log(typeof num);

小技巧：在控制台可以根据颜色来判断数据的类型哦(^__) **

转换成 数值 -number

• 1 Number()

console.log(Number('55'));
Number()可以把任意值转换成数值类型，但是如果字符串中有不是数字的字符，返回NaN

• 2 parseInt() 和 parseFloat()

- parseInt()  把字符串类型的整数或者小数都转化为整数;
- parseFloat() 把字符串类型的整数转化整数,把小数转化为小数
var num1 = parseInt("12");  // 12
var num1 = parseInt("12.3"); //12
var num1 = parseFloat("12"); //12
var num1 = parseFloat("12.3");//12.3

var num1 = parseInt("12.3abc");  // 返回12，如果第一个字符是数字会解析知道遇到非数字结束
var num2 = parseInt("abc123");   // 返回NaN，如果第一个字符不是数字或者符号就返回NaN

• 3 算术运算 (最常用)

var str = '500';
console.log(+str);      // 取正
console.log(-str);      // 取负

//  强制将 - 两边的非数字,转化为数字
console.log(str - 0);  +0呢???拼接

转换成 字符串类型 - string

• 1. String ( )

var num = 5;
num = String(num);
console.log(num);

• 2. toString ( )

var num = 5;
console.log(num.toString());// 把数值5变成字符串5
//将来所有的数据都会有toString()方法，除了null和undefined

• 3. 拼串，(最常用)

var num = 5;
num = num + "";
console.log(num);

转换成布尔类型

所有的值都可以转换成布尔类型

其中 0, "", undefined，null， NaN，这几个值会转换成false，其他值都会转换成true

这个代表的五大基本类型

// 没有值 => false
// 有值 => true
// number string undefined null 
//  0      ''    

注意 : 
   1. 'false' 它是字符串 
   2.  NaN  => false 

• Boolean() 转化为布尔值

console.log(Boolean(1));
console.log(Boolean(0));

• !! 第一个! 将值转为 bool且取反,第二个则是转为本身

var a = "abc";
console.log(!!a);