1、认识js
+ 什么是js:
**js概念:**运行在浏览器端(客户端)的解释性(一行一行执行)脚本语言
(js 引擎:执行js代码:从上往下一行一行执行,)
HTML:超文本标记语言(网页)–>页面的结构,段落,标题,图片
CSS:层叠样式表(美化)—>美化结构的,排列方式,放的位置
JavaScript:—> 页面的行为(点击按钮会发生什么事,轮播图,游戏。表单验证,回到顶部,楼层,放大镜,tab切换,二级菜单,拖拽,瀑布流。。。)
JS的核心:
ECMAScipt:制定js语法标准, 我们后期写代码的规范
DOM:Doucment object model(文档对象模型),提供了一套操作文档的方法和属性
(打开open和关闭close浏览器窗口,前进后退(go(-1))
BOM:Browser object model(浏览器对象模型),提供了一套操作浏览器的方法和属性
说白了。bom和dom是通过js的方式来操作页面和浏览器的
2、js的基础语法
2.1 js代码的书写
+ 行内式(极度不推荐)
a) a标签
<a href="javascript:js代码;"></a>
b) 非a标签(行为属性:点击,鼠标移入,)
如:<button 行为属性="js代码">按钮</button>
<button onclick="alert('hellowrold')">按钮</button>
+ 内嵌式(不推荐)
a) script标签 标签内部书写js代码
<script>
js代码
</scrip>
b) script标签内部的代码,页面刷新就执行
c) script标签原则上可以写在html文档的任意位置,但是我们写在最底部
d) 可以书写多对script标签,代码按照从上向下的顺序依次执行
+ 外链式(推荐)
a) script标签 标签内有一个src属性 标签内部书写js代码
b) 可以书写多对script标签,代码按照从上向下的顺序依次执行
c) 外部文件demo1.js,直接写js代码
2.2 js注释 (使用方法)
注释:多行注释和单行注释
作用:对代码的解释说明
单行注释:ctrl+/
多行注释:alt+shift+A
2.3 js变量
变量的概念:
js中的变量:在程序运行过程中,值会发生变化的量,称为变量,在计算机中,变量实际上就是一个容器,存储着值
如何定义变量:(四种方式)
方式1、 var length = 1; 声明一个变量(var a),给该变量赋值为1(age = 1)
方式2、 var length; //声明变量
length = 1; //赋值
方式3、var a,b,c; //声明3个变量
a = 10;
b = 20;
c = 30;
方式4:var a = 10,b=20,c;
c= 30;
变量的使用:
var age = 1; //初始值
age = 4; //重新赋值
a) 最常用的方式:
var x = 20000;//声明一个变量x,同时将20000赋值给x
var : 声明变量用的(告诉计算机,x是一个新成员,变量x就可用了)
空格
x : 变量名(类似类名,自己取的,不要瞎写)
= : 赋值(将右边的值赋值给左边)将2000赋值给x
20000:代表x变量存储的值
b)其他方式
var x; //先声明一个变量
x = 20; // 用的时候再进行赋值
------------------------------
同时声明个变量,用的时候再赋值
var a,b,c;
a = 20;
b = 30;
c = 40;
--------------------------------
同时声明个变量,有的赋值,有的用的时候再赋值
var x = 10, y = 20 , z ;
z = 30;
---------------------
var x = 10, y = 20 , z = 40;
2.4 js的输出语法
1、 alert(内容): 弹出框
注意:内容:直接写数字(小数整数都可以)
文本(单引号或者双引号引起来的 "小白" )
变量
2、console.log(内容):控制台输出
注意:内容:直接写数字(小数整数都可以)
文本(单引号或者双引号引起来的 "小白" )
变量
3、document.write(内容) 页面输出
注意:内容:直接写数字(小数整数都可以)
文本(单引号或者双引号引起来的 "小白" )
变量
支持标签的
2.5 js的命名规则和规范
+ 规则(规则是必须遵守的,不遵守就报错)
1. 组成部分:数字,字母,下划线_,美化符号$
2. 不能是数字开头
3. 不能是关键字和保留字(现在还不是关键字,后期可能会变成关键字)
4. 严格区分大小写
+ 规范(约定俗成的需要大家共同的遵守)
1. 驼峰命名法 applePrice (从第二个单词开始,单词的首字母大写,第一个单词全部小写)
2. 见名识意(applePrice:苹果的价格)
name
age
sex
weight
height
3. 不推荐中文(支持中文)
2.6 js的数据类型以及类型转换
1. 数值类型(number)
一切数字都是数值类型(包括二进制,十进制,十六进制等)
NaN (not a number),一个非数字
2. 字符串类型(string)
被引号包裹的所有内容(可以是单引号也可以是双引号)
3. 布尔类型(boolean)
只有两个( true 或者 false )
4. null类型(null)
只有一个,就是 null ,表示空的意思
5. undefined类型(undefined)
只有一个,就是 undefined ,表示没有值的意思
2.7 数据类型:
两大类:(基本数据类型/复杂数据类型)
基本数据类型:(五种)
Number类型 数值类型
String类型 字符串类型
Boolean类型 布尔类型
null类型 空类型
undefined类型 未定义类型
引用数据类型:(了解)
Object
+ Number类型 数值类型
a) 整数
b) 小数
c) 10e5(科学计数法) 10*10的5次方
d) 十进制 (90) 八进制 (010) 十六进制 (0xab10) 二进制 (0b101001101)
进制也就是进位计数制,是人为定义的带进位的计数方法(有不带进位的计数方法,比如原始的结绳计数法,唱票时常用的“正”字计数法,以及类似的tally mark计数)。 对于任何一种进制---X进制,就表示每一位上的数运算时都是逢X进一位。 十进制是逢十进一,十六进制是逢十六进一,二进制就是逢二进一,以此类推,x进制就是逢x进位。
e) NaN(not a number):不是数字
+ String类型 字符串类型
a) 单引号或者双引号引起来 "123" 'abc'
b) 一段文本
+ Boolean类型 布尔类型
a) true : 真,计算机会把true存储成1
b) false: 假,计算机会把false存储成0
+ undefined类型 未定义类型
a) 只声明,未赋值 var x;
b) 声明变量,可以赋值成undefined
+ null类型,空类型
var x = null;(后面讲)
2.8 检测数据类型:
ypeof 关键字来检测
语法:
typeof(要检测的值)
typeof 要检测的值
返回值(结果):
1. 哪种数据类型(number,string,undefined,object,boolean)
2. 以字符串的形式返回
2.9 数据类型的转换:
数据类型之间的转换,比如数字转成字符串,字符串转成布尔,布尔转成数字
其他数据类型转成数值:
1. Number(变量)
可以把一个变量强制转换成数值类型
可以转换小数,会保留小数
可以转换布尔值
遇到不可转换的都会返回 NaN
2. parseInt(变量)
从第一位开始检查,是数字就转换,知道一个不是数字的内容
开头就不是数字,那么直接返回 NaN
不认识小数点,只能保留整数
3. parseFloat(变量)
从第一位开始检查,是数字就转换,知道一个不是数字的内容
开头就不是数字,那么直接返回 NaN
认识一次小数点
其他数据类型转成字符串:
1. 变量.toString()
2. String(变量)
3. 使用加法运算
其他数据类型转成布尔
1. Boolean(变量) 在 js 中,只有 '' 、 0 、 null 、 undefined 、 NaN ,这些是 false,其余都是 true