文档章节

JavaScript

勤劳的开发者px
 勤劳的开发者px
发布于 2017/09/02 14:01
字数 1353
阅读 3
收藏 0

1.什么是javaSript?

  • 基于对象和事件驱动的脚本语言

  • 基于对象:只有封装的概念

  • 事件驱动:eg:点击,滑动手机屏幕

  • 只需要浏览器解释执行

  • js一些特点:
  1. ​ 跨平台性
  2. ​ 交互性
  3. ​ 安全性
  • JavaScript的组成部分:

                                       

2.js可以做什么?

  • 操作html标签(可以使页面动起来),服务器....

  • html当做毛坯房,css装修,js智能家居

3.javeScript和java的联系和区别

  • js是基于对象的,java是面向对象的

  • js只需要浏览器解释执行,java需要编译成class文件,再执行

  • js是弱类型语言,java是强类型语言

int i = 3;  i ="aaa"; java不可以
var i = 3;  i= "aaa"; js是可以的

4.html和js结合方式

  • 内部结合
<script>
alert("哈哈哈");
</script>
  • 外部引入
  1. 定义一个js文件,扩展名是js
  2. ,通过script标签引入
<script type="text/javascript" src="../../js/test.js" >
//js代码不会执行      ​ 属性:  src:js文件路径
</script>

注意:

​ 通过外部引入,script标签里面的js代码不会执行

5.js变量

int i = 3;  var i = 3;
String str = "aaa"; var str = "aaa";
  • js变量都是通过var来定义的

6.js数据类型

基本数据类型

  1. ​ Undefined; 声明了变量,但没有赋值; var i;
  2. ​ Null;
  3. ​ Boolean
  4. ​ Number; 数字类型;
  5. ​ String;

引用数据类型

  1. ​ js内置对象: 数组,Math,Date....
  2. ​ document.getElementById("id名");

运算符

number类型和字符串做-,*,/的时候,字符串自动的进行类型转换,前提字符串里面的数值要满足number类型

var i = 3;
var j = "6";
alert(j-i);//结果是3, "6" ==> 6
alert(j*i);//结果是18,
alert(j/i);//结果是2,

除法,保留小数

var i = 2;
var j = 5;
alert(j/i);//2.5

==比较数值,=== 比较数值和类型

var i = 2;
var j = "2";
alert(i==j); // ==比较的仅仅是数值, true
alert(i===j); // ===比较的是数值和类型.false

8.js语句

  • for

    //99乘法表
        <script>
            for(var i = 1; i<=9 ; i++){
                for(var j =1; j <= i;j++){
                    document.write(j+""+i+"="+ji);
                    //空格
                    document.write("&nbsp");
                }
                //换行
                document.write("<br />");
            }
        </script>
  • if-else

  • while()

switch

<script>
    var str = "java";
​
    switch (str){
        case "java":
            alert("java");
            break;
        case "C++":
            alert("C++");
            break;
​
        case "Android":
            alert("Android");
            break;
​
    }
</script>

9.js函数(方法)

  • function 函数名(参数,参数){函数体}

注意:

​ 不管有没有返回值,函数格式是一样的 function 函数名(参数列表){函数体}

​ 如果有参数,参数不需要加var关键字(不需要加类型)

eg:	function getSum(i,j){
			return i+j;
		}	
	var sum =  getSum(5,6);
	alert(sum);

10.全局变量和局部变量

<script>
		//全局变量====> 作用范围不一样,生命周期不一样
		var i = 10;
	
		function sayHello(){
			//局部变量
			var j = 5;
			//console.log("hello..");
			i = i+10;
		}
		sayHello();
//		console.log(j);
		console.log(i);//20
</script>

定义在函数体里的是局部变量,定义在函数体外的是全局变量

作用范围不一样

11.js开发步骤(操作html)

  1. 确定事件 点击,获得焦点....
  2. 创建一个函数响应这个事件
  3. 得到要操作的对象(document.getElementById("id名")) ;
  4. 操作这个对象(改变属性值等)

12.定时任务

setInterval(code,time) 按照指定的周期(以毫秒计)来调用函数或计算表达式

  1. 参数说明: code即执行的代码;
  2. ​ 方式一: 函数名 setInterval(show,3000);
  3. ​ 方式二:函数字符串 setInterval("show()",3000);
  4. ​ time:时间,单位毫秒

setTimeout(code,time):在指定的毫秒数后调用函数或计算表达式,延时执行

  1. 参数说明: code即执行的代码;
  2. ​ 方式一: 函数名 setTimeout(show,3000);
  3. ​ 方式二:函数字符串 setTimeout("show()",3000);
  4. ​ time:时间,单位毫秒

13.BOM里面的五个对象

window: 窗体对象

方法 作用
alert() 显示带有一段消息和一个确认按钮的警告框
confirm() 显示带有一段消息以及确认按钮和取消按钮的对话框
setInterval() 按照指定的周期(以毫秒计)来调用函数或计算表达式
setTimeout() 在指定的毫秒数后调用函数或计算表达式
clearInterval() 取消由 setInterval() 设置的 timeout。
clearTimeout() 取消由 setTimeout() 方法设置的 timeout。

navigator:浏览器对象

属性 作用
appName 返回浏览器的名称
appVersion 返回浏览器的平台和版本信息

screen:屏幕对象

方法 作用
width 返回显示器屏幕的宽度
height 返回显示屏幕的高度

history:历史对象

方法 作用
back() 加载 history 列表中的前一个 URL
forword() 加载 history 列表中的下一个 URL
go() 加载 history 列表中的某个具体页面

location:当前路径信息

属性 作用
host 设置或返回主机名和当前 URL 的端口号
href 设置或返回完整的 URL
port 设置或返回当前 URL 的端口号

14.js常用事件

  • onclick;点击事件

  • onload;等页面或者图片加载完成

  • onfocus;获得焦点

  • onblur;失去焦点

  • onchange;元素的内容改变, 通常用在下拉菜单里面

  • onkeydown 某个键盘的键被按下

  • onkeypress 某个键盘的键被按下或按住

  • onkeyup 某个键盘的键被松开

  • onmousedown 某个鼠标按键被按下

  • onmousemove 鼠标被移动

  • onmouseout 鼠标从某元素移开

 

innerHTML:向一块区域插入html

支持html;会把之前的内容覆盖

function writeIn(){
			//获取span对象
			var  spanObj =  document.getElementById("spanId");
			//spanObj.innerHTML = "你好世界";
			//支持html,会把之前的内容覆盖
			spanObj.innerHTML = "<font color='red'>你好世界</font>";
			
		}

 

© 著作权归作者所有

共有 人打赏支持
上一篇: JavaScript_2
下一篇: HTML_CSS
勤劳的开发者px
粉丝 3
博文 54
码字总数 108225
作品 0
荆州
程序员
私信 提问

暂无文章

EOS docker开发环境

使用eos docker镜像是部署本地EOS开发环境的最轻松愉快的方法。使用官方提供的eos docker镜像,你可以快速建立一个eos开发环境,可以迅速启动开发节点和钱包服务器、创建账户、编写智能合约....

汇智网教程
今天
13
0
《唐史原来超有趣》的读后感优秀范文3700字

《唐史原来超有趣》的读后感优秀范文3700字: 作者:花若离。我今天分享的内容《唐史原来超有趣》这本书的读后感,我将这本书看了一遍之后就束之高阁了,不过里面的内容一直在在脑海中回放,...

原创小博客
今天
19
0
IC-CAD Methodology知识图谱

CAD (Computer Aided Design),计算机辅助设计,指利用计算机及其图形设备帮助设计人员进行设计工作,这个定义同样可以用来近似描述IC公司CAD工程师这个岗位的工作。 早期IC公司的CAD岗位最初...

李艳青1987
今天
19
0
CompletableFuture get方法一直阻塞或抛出TimeoutException

问题描述 最近刚刚上线的服务突然抛出大量的TimeoutException,查询后发现是使用了CompletableFuture,并且在执行future.get(5, TimeUnit.SECONDS);时抛出了TimeoutException异常,导致接口响...

xiaolyuh
今天
9
0
dubbo 搭建与使用

官网:http://dubbo.apache.org/en-us/ 一,安装监控中心(可以不安装) admin管理控制台,monitor监控中心 下载 bubbo ops 这个是新版的,需要node.js环境,我没有就用老版的了...

小兵胖胖
今天
20
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部