zoukankan      html  css  js  c++  java
  • JavaScript概述

    概述

    1、JavaScript是互联网上最流行的脚本语言(Web的编程语言),这门语言可用于HTML和web,更可广泛用于服务器、PC、笔记本电脑、平板电脑和智能手机等设备。
    2、JavaScript是脚本语言;是一种轻量级的编程语言;是可插入HTML页面的编程代码;插入 HTML 页面后,可由所有的现代浏览器执行;很容易学习。
    3、所有现代的 HTML 页面都使用JavaScript,可以用于改进设计、验证表单、检测浏览器、创建cookies等。
    4、Java运行在JVM当中;JavaScript运行在浏览器的内存当中,JavaScript程序不需要手动编译,编写完源代码之后,浏览器直接打开解释执行。
    5、JavaScript的“目标程序"以普通文本形式保存,这种语言都叫做"脚本语言"。Java的目标程序以.class形式存在,不能使用文本编辑器打开,不是脚本语言。

    为什么学习JavaScript?

    JavaScript是web开发人员必须学习的3门语言中的一门:
    1、HTML定义了网页的内容。
    2、CSS描述了网页的布局。
    3、JavaScript网页的行为。

    我的第一个JavaScript程序

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title>我的第一个JS程序</title>
    		<script>
    			function displayDate(){
    				document.getElementById("demo").innerHTML=Date();
    			}
    		</script>
        </head>
    	<body>
    		<p id="demo">点击显示日期会在这里显示!</p>
    		<button type="button" onclick="displayDate()">显示日期</button>
    	</body>
    </html>
    

    在这里插入图片描述
    在这里插入图片描述

    HTML嵌入JavaScript代码的方式

    第一种方式
    • 实现功能:用户点击按钮,弹出消息框。
      1、JS是一门事件驱动型的编程语言,依靠事件去驱动,然后执行对应的程序。
      2、在JS中有很多事件,并且任何事件都会对应一个事件句柄。
      3、其中有一个事件叫做:鼠标单击(click),事件句柄叫做:onclick。(事件和事件句柄的区别是:事件句柄是在事件单词前添加一个on)
      4、事件句柄是以HTML标签的属性存在的。
      5、onclick="js代码",执行原理是什么?
      页面打开的时候,JS代码并不会执行,只是把这段JS代码注册到按钮的click事件上了。等这个按钮发生click事件之后,注册在onclick后面的js代码会被浏览器自动调用。
      6、怎么使用JS代码弹出消息框?
      在JS中有一个内置的对象叫做window(全部小写),可以直接拿来使用,window代表的是浏览器对象。window对象有一个函数叫:alert,用法是:window.alert("消息内容");这样就可以实现弹窗了。
    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title>HTML嵌入JS代码的第一种方式</title>
        </head>
    	<body>
    		<input type="button" value="按钮1" 
    			onClick="window.alert('JS')" />
    		<!--window可以省略-->
    		<input type="button" value="按钮2" 
    			onClick="alert('This is')
    			alert('Java')
    			alert('Script')" />
    	</body>
    </html>
    

    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述

    第二种方式

    1、暴露在脚本块当中的程序,在页面打开的时候执行,并且遵守自上而下的顺序依次逐行执行。(这个代码的执行不需要事件)
    2、脚本块在页面中可出现多次且位置随意。
    3、alert函数会阻塞整个HTML页面的加载。

    <!--
    	脚本块在页面中可出现多次且位置随意。
    -->
    <script type="text/javascript">
    	window.alert("脚本块出现位置随意");
    </script>
    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title>第二种方式</title>
    		<input type="button" value="按钮1" />
    		<script type="text/javascript">
    			/**/
    			window.alert("head");
    		</script>
        </head>
    	<body>
    		<script type="text/javascript">
    			window.alert("body");
    		</script>
    		<input type="button" value="按钮2" />
    	</body>
    </html>
    

    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述

    第三种方式

    1、引入外部js文件,这种方式更加常用。
    2、<script>标签中使用type="text/javascript"。现在已经不必这样做了,JavaScript是所有现代浏览器以及HTML5中的默认脚本语言。

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title>引入外部js文件</title>
        </head>
    	<body>
    		<!--
    			1、同一个js文件可以被引入多次。
    			2、结束的</script>标签必须有。
    		-->
    		<script type="text/javascript" src="js/myjs.js">
    			/*这里的代码不会执行,
    			 * 引入js文件的同时不能写js代码。
    			 * window.alert("test");*/
    		</script>
    		<script>
    			alert("haha");
    		</script>
    	</body>
    </html>
    

    js代码:

    window.alert("myjs");
    

    在这里插入图片描述
    在这里插入图片描述

  • 相关阅读:
    解决Sqlite Developer过期的最简单办法(转自百度经验)
    (转)解决!Visual Studio 遇到了异常。这可能是由某个扩展导致的。
    【转】VC中的class“std::vector<_Ty>”需要有 dll 接口由 class“Test”的客户端使用错误
    切换日语输入法找不到MicrosoftIME键盘选项了
    ps如何拆分图片
    码农应该注意保持的习惯
    "指定的文件格式无法识别或为不支持的二进制"
    编译FlashDemo遇到问题:Error "pFlashUI未定义的标识符"
    GridView,GridLayout
    Android,ArrayList,List,Set等
  • 原文地址:https://www.cnblogs.com/yu011/p/13527876.html
Copyright © 2011-2022 走看看