01.javascript介绍
<!--
javascript简称JS ECMAscript
javascript是基于对象的客户端脚本语言(动态语言)
对象:单独的一个个体
类:对某一类事物的统称
例如:
喜鹊 男人 耿育淼 自来水
鸟类 人类 男人 水
客户端:浏览器端、手机端
服务器端:服务器
java和javascrip的关系
仙女和仙女山
雷锋和雷锋塔
老婆和老婆饼
javascript能做什么?
网页特效
表单验证
游戏的编写
node语法编写
-->
02.javascript引入方法
<body>
<!-- 方式一 (建议使用)-->
<script>
alert('111');
</script>
<!-- 方式二 -->
<script type="text/javascript">
alert('222');
</script>
<!-- 方式三 -->
<script language="JavaScript">
alert('333');
</script>
</body>
03.直接引入和外部引入
<body>
<!-- 直接引入 -->
<script>
alert('直接引入')
</script>
<!-- 外部引入 src为引入文件的路径
注意:外部引入的标签内的代码不生效
-->
<script src="1.js"></script>
</body>
04.javascript引入的位置
<body>
<div class="wrap">
<div class="header"></div>
<div class="main"></div>
<div class="footer"></div>
</div>
<!-- script可以在任意地方使用都生效,除了title标签内
建议将其放置在body内所有标签的最后
若放置在head中,由于head内的代码会优先加载,若文件过大,会造成一段时间的网页空白
只有需要比标签提前加载的js才放在head中
-->
<script>
alert('111');
</script>
</body>
05.js执行顺序和延迟加载
<body>
<!--
js默认执行顺序:从上往下,按顺序执行
defer延迟加载(此代码会在其他js全部加载完毕之后才加载)
注意:直接引入的代码不能延迟加载
-->
<script src="1.js" defer></script>
<script>
alert('222')
</script>
</body>
06.js不生效显示
<body>
<!-- 当浏览器不支持js时,标签内的内容将被执行 -->
<noscript>你的破浏览器该换了</noscript>
</body>
07.js常见的集中输出方式
<body>
<script>
//单行注释 Ctrl+/
/*多行注释 Ctrl+shift+/ */
// 1、弹框输出
alert('弹框输出');
// 2、 控制台输出
console.log('控制台输出');
// 3、文档流输出
document.write('文档流输出');
</script>
</body>
08.变量
<script>
/*
变量 可以改变的量 存放在内存中
变量是一个松散的数据类型,可以存放任意类型的数据
定义变量
语法:var 变量名;
定义变量并赋值
语法:var 变量名 = 值;
变量名的命名规则:
由数字、字母、下划线、$组成且不能以数字开头
严格区分大小写
不能使用系统关键字进行命名 if else break continue
建议使用驼峰命名法 firstName getStyle girlFriend
*/
var age;
age = 18;
console.log(age);
// 定义变量并赋值
var age = 20;
console.log(age);
// var 1name = 222;
// console.log(1name);//Unexpected number 报错
var age1 = 22;
console.log(age1);
// 不推荐以$符开头 $
var $_age = 25;
console.log($_age);
// 变量名重复不会报错,直接将当前的值进行覆盖
// var name = '向同学';
// var name = '翁宇';
// console.log(name);
//
// var NAME = '满满';
// console.log(NAME);
// console.log(name);
// 不能使用系统关键字命名
// var break = '小林子';
// console.log(break);
var firstName = '小李子';
console.log(firstName);
// 面试常考: var存在变量提升(声明会提前)
// 声明提前但赋值并未提前
console.log(num);//undifined
var num = 20;
console.log(num);//20
// 特殊:name
console.log(name);//系统默认为一个空字符串
// console.log(abc);//abc is not defined
</script>
09.js常见数据类型
<script>
第一种方式:一种数据类型:
对象 js是基于对象和事件的,所有的都为对象
就算原本不是对象,参与运算时都会转换为对象
第二种方式:两种数据类型
值类型 undefined string boolean number null
引用数据类型 object
第三种方式:六种数据类型(重点)
undefined未定义类型
string字符串类型
boolean布尔类型
null 空类型
number 数值类型
object 对象类型
</script>
10.检测数据类型
<script>
/*
检测数据类型
语法一:
typeof(被检测的数据)
语法二:
typeof 被检测的数据
*/
// 未定义类型
var und = undefined;
console.log(und);//undefined
console.log(typeof(und));//undefined
console.log(typeof und);//undefined
// 字符串类型
var str = '下午比较方便,早晚都得死';
console.log(str);
console.log(typeof str);//string
// 布尔类型
var bool = true;
console.log(bool);
console.log(typeof bool);//boolean
// 数值类型
var num = 100;
console.log(num)
console.log(typeof num);//number
// 空类型 空对象指针
var nu = null;
console.log(nu);//null
console.log(typeof nu);//object
// 对象类型
var obj = new Object();
console.log(obj);
console.log(typeof obj);//object
// 函数属于对象类型,但typeof检测的值为function
var fun = function(){
console.log('函数')
}
console.log(typeof fun);
</script>
11.分号问题
<script>
var a
var b
var c
// 简写
var a,b,c;
// js并不是每一行都自动添加分号,而是在换行时若会引起语法错误,则自动添加分号
var num
num=10;
var
age
=
50
// a=20 b=30
</script>
12.undefined类型
<script>
/*
undefined叫做未定义类型
什么情况下会出现undefined?
1、变量声明后未进行赋值,值为undefined
2、直接赋值给undefined
3、函数的参数定义后未传入实际的值
4、函数调用后未给出返回值
5、对象的属性未定义则使用
*/
// 1、变量声明后未进行赋值,值为undefined
var num;
console.log(num);//undefined
// 2、直接赋值给undefined
var und = undefined;
console.log(und);
//3、函数的参数定义后未传入实际的值
/*
语法:
function 函数名(参数){
函数体
}
函数的调用:把函数体内的内容执行一遍
函数名(实际的值)
*/
function fun(a,b){
console.log(a)//10
console.log(b);//undefined
}
fun(10);
// 4、函数调用后未给出返回值
function demo(){
console.log('今天的雨说不得')
// return 'aaa'; return的结果叫做返回值
}
var res = demo();//今天的雨说不得
console.log(res);//undefined
// 5、对象的属性未定义则使用
var obj = new Object();
console.log(obj.age);//undefined
</script>
13.布尔类型
<script>
/*
布尔类型 主要用于判断
true 真
false 假
*/
var flag = false;
if(flag){
console.log('实践比真理更重要');
}else{
console.log('七月的雨,把我困在这里');
}
</script>