JavaScript 第一天 js初识-优快云博客

本文介绍了JavaScript的基本概念，包括JavaScript与ECMAScript的关系，变量的命名规则，以及window.onload事件的作用。讲解了JavaScript的三种引入方式：行内、内部和外部引入，并通过实例展示了简单的交互操作，如鼠标事件监听和元素属性、样式的操作。

什么是JavaScript？

JavaScript是基于对象和时间驱动并具有相对安全性的客户端脚本语言。

JavaScript有三个不同的部分组成：
1，ECMAScript；
2，DOM（Document Object Mode）文档对象类型；
3，BOM（Browser Object Mode）浏览器对象类型。

JavaScript与ECMAScript 的关系？

ECMAScript是JavaScript的标准
JavaScript是ECMAScript的具体体现

JavaScript的创造者Netscape公司，将JavaScript提交给国际标准化组织ECMA，希望这种语言能够成为国际标准，后来ECMA发布标准文件的第一版（ECMA-262），规定了浏览器脚本语言的标准，并将这种语言称为ECMAScript。该标准从一开始就是针对JavaScript语言制定的，之所以不叫JavaScript，有两个原因：一是商标，Java是Sun公司的商标，根据授权协议，只有Netscape公司可以合法地使用JavaScript这个名字，且JavaScript本身也已经被Netscape公司注册为商标；二是想体现这门语言的制定者是ECMA，不是Netscape，有利于保证这门语言的开放性和中立性。

变量的命名规则

1，名字见名知义，遵循驼峰标识（例：userName）；
2，变量名只能以字母，_，$，开头；
3，不能使用关键字和保留字；
4，变量名不要相同（后面会覆盖前面）。

window.onload的作用？

当文档和资源都加载完成后调用。

引入JavaScript

1，行内引入

<button onclick="alert('是否关闭')">关闭</button>

全称
alert 弹出系统提示框，
2，内部引入

<div>web前端</div>
<script>
alert("内部引入")
</script>

没点确认，div一直不显示
3，外链引入

<script src="index.js" type="text/java script"></script>

在引入外部文件的script内部不能放置其他JavaScript代码，不会执行。

  //    单行注释
/*
    多行注释
*/
注释的作用:
    1.解释代码
    2.提高可读性
    3.浏览器不解析

简单的交互

通过标签的id获取元素 document.getElementById

<button id="but"></button>
<script>
document.getElementById("but").onclick=function(){
alert("hello world")   //点击按钮，弹框出hello world
}
</script>

其他的鼠标事件

onclick 点击事件
ondblclick 双击事件
onmouseover 鼠标移入元素
onmouseout 鼠标离开元素
onmouseenter 鼠标移入
onmouseleave 鼠标离开
onmousemove 鼠标在元素中移动
onmousedown 鼠标按下
onmouseup 鼠标抬起
oncontextmenu 鼠标右键

innerHTML、 innerText 。。赋值的区别 HTML解析这个标签 Text 原样输出
console.log(demo.innerHTML) 。。获取元素里面的所有内容包括html标签
console.log(demo.innerText)。。获取元素里面的文本内容

获取元素属性

 <div class='demo' id='demo' title="" style="color:red">
        我是div里的内容<strong>白日依山尽</strong>
    </div>
    <input type="text" name="user" value="ujiuye" id="use" class='username' />
    <script>
        //  方便你去查找知道找到的元素  一般给变量名和id写一样的
        var use = document.getElementById('use');
        // 语法:  元素.value
       /* console.log(use.value,111)
        console.log(use.id,222)
        console.log(use.className,333) //class 类是一个特殊的  className*/
        var demo = document.getElementById('demo');
        console.log(demo.innerHTML)  //获取元素里面的所有内容  包括html标签
        console.log(demo.innerText)  //获取元素里面的文本内容
        //innerHTML  innerText  赋值的区别 HTML解析这个标签   Text  原样输出
        //  demo.innerHTML='<h1>黄河入海流,欲穷千里目</h1>';
        demo.innerText='<h1>黄河入海流,欲穷千里目</h1>'
        // demo.style = 'color:blue'
        demo.style.color = 'green';
        //改变样式的时候  font-size 这种连词形式需要改成 驼峰命名 fontSize
        demo.style.fontSize = '32px'; 
        demo.style.backgroundColor='#f00' 

    </script>

js操作元素样式

js操作css属性时，
添加width、height 这些单个单词时，
直接使用语法定义：标签.style.属性名=“属性值”
添加 font-size这种由两个单词组成的属性时，需要把“-”去掉，第二个首字母大写，驼峰命名法，
标签.style.fontSize=“属性值”

<div id="demo"></div>
    <input type="text" placeholder="输入你的留言" id="txt"><input type="button" value="留言" id="btn">
    <script>
        var demo = document.getElementById('demo');
        var txt = document.getElementById('txt');
        var btn = document.getElementById('btn');
        btn.onclick=function(){
            var tValue = txt.value
        //原来的值  demo.innerText
            // demo.innerHTML =demo.innerHTML + '<p>'+tValue+'</p>';
            demo.innerHTML+='<p>我说:'+tValue+'</p>'  //保留原有样式，加上新样式
            txt.value = ''    //清空留言框内容
        }
        // x+=y  ==>  x=x+y
    </script>