1、介绍
Html是结构,js是行为,css是表现
- Js:javaScript和java没有一点关系,只是名字像而已;
- js运行环境
Html是人体,css和javascript有点像寄生虫;
设计框架:Script:(脚本)
- javaScript:它是一个弱类型的语言;java就是强类型(类型有四类八种);而javaScript只一种类型,那就是var(变量)
- Javascript:它是一个解释型语言,直接拖到浏览器,浏览器会执行;java:编译型的语言(编译+运行)
- 学习javascript就当成是学习java一样;
2、HW(Hello Word)
先写html,再写javascript;(加载方式和css很像)
案例1:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS介绍</title>
</head>
<body>
岳飞--(满江红)
</body>
</html>
<!-- 在html中的任何一个地方写上script标签,即js代码
写的时候,这个位置要选择好了,因为html是一行一行执行的
加载方式1:相当CSS中的内联样式表;此处写的js在整个html中都适合;
-->
<script type="text/javascript">
/* 弹出一个警告框
相当于我们调用了一个alert(参数是任意类型);
js:字符串可以用双引号或者单引号都可以
*/
alert("----我是script标签里面------");
</script>
实现效果:
火狐:
谷歌:
IE:
案例2:
<!DOCTYPE html>
<!--
js加载有以下几种方式:
1:onclick:事件调用js方法有点类似于内联样式
2:相当CSS中的内联样式表;此处写的js在整个html中都适合;
3:引用一个外部文件
优先级:1>2>3
-->
<html lang="en">
<head>
<meta charset="utf-8">
<title>JS介绍</title>
<!-- 3:引用一个外部js文件
src:指的是js的路径,可以是相对的,也可是绝对的
-->
<script type="text/javascript" src="js_01.js"></script>
</head>
<body>
岳飞--(满江红)
<!--按钮
事件:有一个人监听着某件事,如果发生了,通知所有人
onClick:在按钮上面,增加了一个点击事件;
双引号里面套双引号(里面的要用单引号)
javascript:可以省略,也可以写上
2:onclick:事件调用js方法有点类似于内联样式
-->
<input type="button" name="" value="点我吧" οnclick="javascript:alert('我是按钮中的点击');">
<!-- 按钮_2
单击事件,采用方法
js的方法如何定义
调用方法:调用之前先定义
-->
<button οnclick="test01()">标签按钮</button>
<button οnclick="test_02()">标签按钮2</button>
</body>
</html>
<!-- 在html中的任何一个地方写上script标签,即js代码
写的时候,这个位置要选择好了,因为html是一行一行执行的
加载方式1:相当CSS中的内联样式表;此处写的js在整个html中都适合;
-->
<script type="text/javascript">
/* 弹出一个警告框
相当于我们调用了一个alert(参数是任意类型);
js:字符串可以用双引号或者单引号都可以
*/
alert("----我是script标签里面------");
/*
注释和java的一样;单行注释和多行注释,javadoc注释
方法的定义处
方法五要素:定义的时候只用两个要素(必须的)
定义处:
function 方法名(形参)
*/
function test01()
{
alert("==我是方法中的==");
/* 直接return就是返回值
返回值就是boolean类型
*/
return false ;
}
</script>
js文件(js_01.js):
/**
js代码,
所有的<script里面写的代码都可以这里面写
*/
/*
定义一个方法
*/
function test_02()
{
alert('--我是js文件中的--');
}
/*
定义一个方法
*/
function test01()
{
alert('--我是js文件中的--');
}
显示效果: